<div id="pie" style="height: 100%; width: 100%"></div> </div> <div class="column"> <Title :text="'各部门养护巡查数量统计'" /> <div id="column" style="height: 100%; width: 100%"></div> </div> </div> </div> </el-main> </el-container> </template> <script> import _utils from '@/utils.js' import orgData from './orgData.json' import utils from '@/utils' // thousandBit格式化千分位 const BigNumber = require('bignumber.js') import * as echarts from 'echarts' import Title from './components/Title.vue' export default { name: 'maintenanceInspectionStatisticsAI', components: { Title, }, data() { return { nowDate: null, options: orgData.list, year: new Date().getFullYear(), mouth: new Date().getMonth(), tableData: [], data: [], loading: false, total: {}, utils: utils, searchForm: {}, cissueDate: '', pickerOption: { disabledDate: (time) => { return time.getTime() > Date.now() }, }, } }, created() { let endDate = utils.formatDate(new Date()).split(' ')[0] // 获取当前时间6个月前的时间 let startDate = this.diffMonth(6).split(' ')[0] this.date = [startDate, endDate] this.loadData() }, mounted() { let _this = this // 声明一个变量指向Vue实例this，保证作用域一致 this.timer = setInterval(function () { _this.nowDate = _utils.formatDate(new Date()) //修改数据date }, 1000) }, methods: { handleCascaderChange(val) {}, handleTimeChange() {}, back() { this.$router.go(-1) }, /** * @description: 获取当前日期n个月前的日期 * @param {String} n 几个月（为负数则表示前面的日期） * @return: 日期 */ diffMonth(n) { var dt = new Date() dt.setMonth(dt.getMonth() - Number(n)) return dt.toLocaleString().replace(/\//g, '-') }, calculation(key, arr) { if (!key || arr.length === 0) return 0 let total = new BigNumber(0) arr.forEach((item) => { if (!item[key]) { item[key] = 0 } // console.log(key + '=', item[key]) total = total.plus(item[key]) }) if (typeof total == 'undefined') return 0 return total.toNumber() }, handleReset() { let length = this.data.length - 1 if (length === 0) return this.tableData = this.data[this.data.length - 2] this.data.splice(length, 1) }, hanldeRowClick(row) { if (row.chirldren.length == 0 && row.roadSegmentId) { return this.$router.push({ name: this.pathName, params: { value: row, type: this.type, }, }) } this.tableData = row.chirldren this.data.push(row.chirldren) }, handleCellClick(row, column) { if ( column.columnKey == '1' || column.columnKey == '3' || column.columnKey == '4' ) { this.type = column.columnKey this.pathName = 'roadsideFacilitiesManagement' } else { this.pathName = column.columnKey } }, updata(newVal) { this.total.name = '总数' this.total.bridgeCount = this.calculation('bridgeCount', newVal) this.total.allCount = this.calculation('allCount', newVal) this.total.bridgeCheckCount = this.calculation('bridgeCheckCount', newVal) this.total.bridgeMonthCheckCount = this.calculation( 'bridgeMonthCheckCount', newVal ) this.total.culvertMonthCheckCount = this.calculation( 'culvertMonthCheckCount', newVal ) this.total.culvertCount = this.calculation('culvertCount', newVal) this.total.culvertCheckCount = this.calculation('culvertCheckCount', newVal) this.total.sideCount = this.calculation('sideCount', newVal) this.total.sideCheckCount = this.calculation('sideCheckCount', newVal) this.total.sideMonthCheckCount = this.calculation( 'sideMonthCheckCount', newVal ) this.total.tunnelCount = this.calculation('tunnelCount', newVal) this.total.tunnelCheckCount = this.calculation('tunnelCheckCount', newVal) this.total.tunnelMonthCheckCount = this.calculation( 'tunnelMonthCheckCount', newVal ) }, loadData(params) { if (!params) { params = '' } this.loading = true this.$http .get('${yhxt}/bridgeOftenCheck/v1/checkReportVoAI' + params) .then((res) => { this.tableData = (res && res.status == 200 && res.data) || [] this.updata(this.tableData) this.tableData.push(this.total) this.data = [] this.data.push(this.tableData) this.loading = false this.pieCharts(this.total) this.cloumnCharts(this.tableData) }) .catch(() => { this.loading = false }) }, // 去首页 goIndex() { window.location.href = 'http://183.64.175.153:20003/#/business' }, //退出系统 handleLogout() { this.$store.dispatch('menu/clearMenus') this.$store.dispatch('user/clearUser') this.$store.dispatch('menu/setCopyMenus', []) //菜单 let loginRouthPath = localStorage.getItem( this.$store.state.login.currentUser.account + 'loginRoutePath' ) || '/login' this.$store.dispatch('login/logoutAndCleanUp').then(() => { switch (window.ssoConfig.mode) { case 'cas': case 'oauth': window.sessionStorage.removeItem('currentUser') window.location.href = window.ssoConfig.logout + '?service=' + window.location.href.split('?')[0] break default: this.$router.push({ path: loginRouthPath, }) break } }) }, pieCharts(obj) { var chartDom = document.getElementById('pie') var myChart = echarts.init(chartDom) let data = [ { name: '结构物总数', value: obj.allCount || 0, }, { name: '桥梁总数', value: obj.bridgeCount || 0, }, { name: '桥梁检查总数', value: obj.bridgeCheckCount || 0, }, { name: '桥梁本月检查总数', value: obj.bridgeMonthCheckCount || 0, }, { name: '涵洞总数', value: obj.culvertCount || 0, }, { name: '涵洞检查总数', value: obj.culvertCheckCount || 0, }, { name: '涵洞本月检查总数', value: obj.culvertMonthCheckCount || 0, }, { name: '边坡总数', value: obj.sideCount || 0, }, { name: '边坡检查总数', value: obj.sideCheckCount || 0, }, { name: '边坡本月检查总数', value: obj.sideMonthCheckCount || 0, }, { name: '隧道总数', value: obj.tunnelCount || 0, }, { name: '隧道检查总数', value: obj.tunnelCheckCount || 0, }, { name: '隧道本月检查总数', value: obj.tunnelMonthCheckCount || 0, }, ] var option let total = new BigNumber(0) data.forEach((item) => { total = total.plus(item.value) }) // let formatNumber = num => // num.toString().replace(/(?=(\B)(\d{3})+$)/g, ',') option = { // title: [ // { // text: `{name|总数量}\n{val|${this.utils.thousandBit(total)}}`, // top: 'center', // left: 'center', // textStyle: { // rich: { // name: { // fontSize: 14, // color: '#fff', // padding: [10, 0] // }, // val: { // fontSize: 32, // fontWeight: 'bold', // color: '#fff' // } // } // } // } // ], tooltip: { trigger: 'item', formatter: (a) => { return `${a.marker} ${a.data.name} ${a.data.value}个 ${a.percent}%` }, }, color: [ '#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#6f5ef9', '#6dc8ec', '#945fb9', '#ff9845', '#1e9493', ], legend: { icon: 'circle', orient: 'vertical', right: 50, top: 'center', bottom: 20, textStyle: { color: '#ccc', }, }, series: [ { type: 'pie', radius: ['50%', '78%'], center: ['40%', '50%'], data: data, label: { // alignTo: 'edge', formatter: (a) => { return `{percent|${a.percent}%}` }, rich: { percent: { fontSize: 15, color: '#fff', }, }, }, }, ], } option && myChart.setOption(option) }, cloumnCharts(data) { console.log(data) data = data.slice(0, 4) var chartDom = document.getElementById('column') var myChart = echarts.init(chartDom) var option let xData = [] let seriesData = [] for (let i = 0; i < 13; i++) { seriesData[i] = [] } data.forEach((item) => { xData.push(item.name) seriesData[0].push(item.allCount) seriesData[1].push(item.bridgeCount) seriesData[2].push(item.bridgeCheckCount) seriesData[3].push(item.bridgeMonthCheckCount) seriesData[4].push(item.culvertCount) seriesData[5].push(item.culvertCheckCount) seriesData[6].push(item.culvertMonthCheckCount) seriesData[7].push(item.sideCount) seriesData[8].push(item.sideCheckCount) seriesData[9].push(item.sideMonthCheckCount) seriesData[10].push(item.tunnelCount) seriesData[11].push(item.tunnelCheckCount) seriesData[12].push(item.tunnelMonthCheckCount) }) option = { title: { textStyle: { color: '#fff', }, }, grid:{ left: '10%', bottom: '20%' }, legend: { itemHeight: 10, itemWidth: 10, bottom: 'bottom', bottom: 10, textStyle: { color: '#fff', }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'none', }, }, color: [ '#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#6f5ef9', '#6dc8ec', '#945fb9', '#ff9845', '#1e9493', ], xAxis: { type: 'category', data: xData, axisLabel: { fontSize: 14, color: '#cefff2', }, axisTick: { show: true, lineStyle: { color: '#fff', }, }, axisLine: { show: true, lineStyle: { color: '#fff', }, }, }, yAxis: { type: 'value', splitLine: {show: true}, //去除网格线 axisLabel: { textStyle: { color: '#fff', }, }, axisTick: { //y轴刻度线 show: true, lineStyle: { color: '#fff', }, }, axisLine: { //y轴 show: false, lineStyle: { color: '#fff', }, }, }, series: [ { name: '结构物总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[0], }, { name: '桥梁总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[1], }, { name: '桥梁检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[2], }, { name: '桥梁本月检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[3], }, { name: '涵洞总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[4], }, { name: '涵洞检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[5], }, { name: '涵洞本月检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[6], }, { name: '边坡总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[7], }, { name: '边坡检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[8], }, { name: '边坡本月检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[9], }, { name: '隧道总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[10], }, { name: '隧道检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[11], }, { name: '隧道本月检查总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: seriesData[12], }, ], } option && myChart.setOption(option) }, }, } </script> <style lang="scss" scoped> @import './css/common.scss'; .header-center .title { cursor: pointer; font-family: 'fz_black_blod'; font-size: 30px; } .icon-back { display: block; width: 40px; height: 34px; i { width: 100% !important; background: url('./img/icon_back.png') no-repeat !important; background-size: 100% 100%; } } .container { width: 100vw; height: 100vh; background: url('./img/bg_.png') no-repeat 100% 100%; // background-color: rgba($color: #0f2a3f, $alpha: 1); } .el-main { background-color: transparent; padding: 0 30px; display: flex; flex-direction: column; } .el-date-editor.el-input { margin-right: 0; margin-bottom: 0; } /deep/ .rowClassName:hover { cursor: pointer; } /deep/ .rowClassName .cell { font-size: 20px; } /deep/ .cellClassName .cell { font-size: 22px; font-weight: bold; } /deep/ .el-table tr { height: 60px; } /deep/ .el-table th.is-leaf { background-color: transparent !important; } /deep/ .el-table__row, /deep/ .el-table tr { background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15); } /deep/ .el-table__empty-block { background-color: #495e7b; } /deep/ .el-table__empty-text { color: #fff; } /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #495e7b !important; } /deep/ .el-table td { border-bottom: #495e7b !important; } /deep/ .el-table::before { background-color: transparent !important; } .back_btn { width: 100px; padding: 9px 15px; background-color: rgba(73, 93, 122, 0.7); border: none; &:hover { background-color: #495e7b; } } .table_box { margin-top: 10px; padding-top: 10px; flex: 1; } .form_label { margin-bottom: 10px; } .form_label span.item { height: 58px; color: #2187ff; font-size: 18px; font-family: 'Microsoft Yahei'; } .bottom { display: flex; justify-content: center; align-items: center; height: 40px; background-color: transparent; // background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15); .item { margin: 10px; padding: 5px; background-color: rgba(23, 36, 51, 0.6); display: block; border-radius: 5px; flex: 1; text-align: center; margin-left: 10px; font-size: 16px; font-family: 'Microsoft Yahei'; } } .charts { height: 450px; width: 100%; display: flex; margin-top: 60px; .column, .pie { height: 100%; flex: 1; padding: 0 20px; } .charts_top { display: flex; position: relative; height: 35px; margin-left: 30px; align-items: flex-end; background-image: linear-gradient(to right, #336da2, #1c3c60); p { position: absolute; left: -18px; top: -14px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border: 1px solid #6184ac; background-color: #304e7b; transform: rotate(45deg); border-radius: 5px; i { font-size: 25px; color: #91f5f3; transform: rotate(-45deg); } } h1 { margin-left: 25px; font-size: 24px; margin-bottom: 0px; font-weight: bold; } } } </style> <style lang="scss"> .el-popper { background-color: rgba($color: #112b44, $alpha: 0.9) !important; } .el-cascader-menu { // border: 1px solid #fff; &:nth-child(n + 1) { border-right: 1px solid #fff; } &:nth-child(n + 2) { border-left: none; } &:last-child { border-right: none; } } // .el-scrollbar { // background-color: transparent; // } .el-cascader-panel { border-radius: 5px; border: 1px solid #fff; } .el-select-dropdown .el-scrollbar { border: 1px solid #0283fc; // padding-left: 10px; border-radius: 5px; } .in-active-path span { color: #0283fc; } .el-month-table td .cell { color: #fff; font-size: 14px; font-weight: bold; } .el-month-table td.current:not(.disabled) .cell { color: #d7ef05; } .el-date-picker__header--bordered { border-bottom-color: #0283da; } .el-cascader-node__label { font-size: 16px; } .el-radio.is-checked + .el-cascader-node__label { color: #409eff; } .el-scrollbar__view .el-cascader-node > .el-radio { width: 100%; height: 100%; z-index: 10; position: absolute; top: 10px; right: -8px; } .el-picker-panel__body { border-radius: 5px; background-color: rgba($color: #2c6d89, $alpha: 0.8); } .el-scrollbar__view .el-cascader-node:not(.is-disabled):hover, .el-select-dropdown__item:hover { background: #fff !important; } .el-select-dropdown__item { padding-left: 10px; } .el-select-dropdown__item:hover span { color: #0283fc; } .el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-cascader-node__label, .el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-icon-arrow-right { color: #0283fc !important; font-weight: bold; } .el-cascader-node.is-selectable.in-active-path { color: #0283fc !important; } .clumn-charts { height: 500px; display: flex; flex-direction: column; } #column2 { margin: 30px 10px; } </style>