<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: 'statisticsDailyMaintenanceAI', components: { Title, }, data() { return { nowDate: null, options: orgData.list, year: new Date().getFullYear(), mouth: new Date().getMonth(), tableData: [], data: [], loading: false, cstatus: '', date: '', total: {}, utils: utils, formInline: { companyIds: ['1419863231459102720', '1430734631036129280'], companyName: '', roadSegmentName: '', }, } }, created() { let endDate = utils.formatDate(new Date()).split(' ')[0] // 获取当前时间6个月前的时间 let startDate = this.diffMonth(6).split(' ')[0] this.date = [startDate, endDate] this.loadData() }, watch: { tableData(newVal) { this.total.finishCount = this.calculation('finishCount', newVal) this.total.distributionCount = this.calculation('distributionCount', newVal) this.total.constructionCount = this.calculation('constructionCount', newVal) this.total.checkCount = this.calculation('checkCount', newVal) this.total.examineCount = this.calculation('examineCount', newVal) this.total.overdueCount = this.calculation('overdueCount', newVal) this.total.allCount = this.calculation('allCount', newVal) this.total.finishMoney = this.calculation('finishMoney', newVal) this.pieCharts(this.total, newVal) this.cloumnCharts(newVal) }, }, mounted() { // this.companyChange(['1419863231459102720', '1430734631036129280']) 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) }, companyChange(val) { this.formInline.companyIds = val let id = (val && val[val.length - 1]) || '' if (!id) return this.$http .get('${yhxt}/statisticalStatement/v1/findAllRoadIds?id=' + id) .then((res) => { let ids = res.data.value.join(',') || id || '' if (!ids) { this.getAmountStatisticsChart([]) } else { this.getCountMaintenanceData(ids) } }) }, getCountMaintenanceData(roadSegmentId) { this.$http .post('${yhxt}/statisticalStatement/v1/countMaintenance/new', { roadSegmentId, }) .then((res) => { this.data = res.data.maintenanceNewVos this.format(this.data) this.getAmountStatisticsChart(res.data.maintenanceNewVos) }) }, format(data) { let total = 0 let money = 0 data.forEach((item) => { total += Number(item.pnameCount) money += Number(item.everyMoney) }) console.log(total) data.forEach((item) => { item.percentage = (item.pnameCount / total) * 100 item.percent = Number(((item.everyMoney / money) * 100).toFixed(2)) item.money = (Number(item.everyMoney) / 10000).toFixed(2) }) }, /** * @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) { let total = 0 if (!key || arr.length === 0) return total arr.forEach((item) => { total += parseInt(item[key]) }) return total }, 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 } }, loadData() { this.loading = true let str = '' if (this.date) { str = `?startDate=${this.date[0]}&endDate=${this.date[1]}` } this.$http .post('${yhxt}/workOrderInformation/v1/getWorkCountVoAI' + str) .then((res) => { this.tableData = (res && res.status == 200 && res.data) || [] this.data = [] this.data.push(this.tableData) this.loading = false }) .catch(() => { this.loading = false }) }, pieCharts(obj, rows) { var chartDom = document.getElementById('pie') var myChart = echarts.init(chartDom) let data = [ { name: '已完成', value: obj.finishCount || 0, }, { name: '派单', value: obj.distributionCount || 0, }, { name: '施工', value: obj.constructionCount || 0, }, { name: '验收', value: obj.checkCount || 0, }, { name: '审核', value: obj.examineCount || 0, }, // { // name: '已逾期', // value: obj.overdueCount || 0 // } ] let innerData = [ { name: '审核', value: this.calculation('examineOverdue', rows), }, { name: '验收', value: this.calculation('checkOverdue', rows), }, { name: '施工', value: this.calculation('constructionOverdue', rows), }, { name: '派单', value: this.calculation('distributionOverdue', rows), }, ] innerData = innerData.sort((a, b) => b.value - a.value) innerData[0].selected = true 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|${formatNumber(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', selectedMode: 'single', radius: ['50%', '78%'], label: { // show: false, formatter: (a) => { if (a.value > 0) { return `{name|${a.name}逾期}` } else { return '' } }, rich: { name: { fontSize: 12, color: '#fff', }, }, position: 'inner', }, tooltip: { trigger: 'item', formatter: (a) => { return `${a.marker} ${a.data.name}逾期 ${a.data.value}个 ${a.percent}%` }, }, labelLine: { show: false, }, data: innerData, }, { type: 'pie', radius: ['50%', '78%'], center: ['45%', '50%'], data: data, label: { // alignTo: 'edge', formatter: (a) => { return `{percent|${a.percent}%}` }, rich: { percent: { fontSize: 15, color: '#fff', }, }, }, }, ], } option && myChart.setOption(option) }, cloumnCharts(data) { var chartDom = document.getElementById('column') var myChart = echarts.init(chartDom) var option let xData = [] let finishData = [] let distributionData = [] let constructionData = [] let checkData = [] let examineData = [] let overdueData = [] let allData = [] data.forEach((item) => { xData.push(item.name) finishData.push(item.finishCount) distributionData.push(item.distributionCount) constructionData.push(item.constructionCount) checkData.push(item.checkCount) examineData.push(item.examineCount) overdueData.push(item.overdueCount) allData.push(item.allCount) }) option = { title: { textStyle: { color: '#fff', }, }, grid: { left: '6%' }, 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: finishData, }, { name: '派单中', type: 'bar', stack: 'Ad', barWidth: '15%', data: distributionData, }, { name: '施工中', type: 'bar', stack: 'Ad', barWidth: '15%', data: constructionData, }, { name: '施工单位验收', type: 'bar', stack: 'Ad', barWidth: '15%', data: checkData, }, { name: '审核中', type: 'bar', stack: 'Ad', barWidth: '15%', data: examineData, }, { name: '已逾期', type: 'bar', stack: 'Ad', barWidth: '15%', data: overdueData, }, { name: '总数', type: 'bar', stack: 'Ad', barWidth: '15%', data: allData, }, ], } option && myChart.setOption(option) }, getAmountStatisticsChart(data) { let chartDom = document.getElementById('column2') var myChart = echarts.init(chartDom) let data_ = [] data.forEach((item) => { data_.push({ value: item.percent, name: item.pname, money: item.money, count: item.pnameCount, }) }) let option = { title: { textStyle: { color: '#fff', }, }, legend: { orient: 'vertical', right: 30, top: 'center', bottom: 20, show: false, textStyle: { color: '#fff', }, }, tooltip: { trigger: 'item', formatter: (a) => { return `${a.marker} ${a.data.name} 总额:${a.data.money}万元占比:${a.data.value}%` }, }, color: ['#16ffae', '#00e6f6', '#6255f8', '#0282b9'], series: [ { type: 'pie', radius: ['40%', '70%'], data: data_, // width: '75%', center: ['50%', '50%'], minAngle: 10, // 设置每块扇形的最小占比 label: { alignTo: 'edge', // show: false, // formatter: '{name|{b}}{money|{}}\n\n{percent|{c} %}', formatter: (a) => { return `{name|${a.data.name}} {count|${a.data.count} 个} {money|${a.data.money} 万元} {percent|${a.data.value} %}` }, /* 延长显示线 */ // minMargin: 5, // edgeDistance: 10, // lineHeight: 18, rich: { name: { fontSize: 18, color: '#fff', }, money: { fontSize: 14, color: '#fff', }, count: { fontSize: 14, color: '#fff', }, percent: { fontSize: 10, color: '#fff', }, }, }, }, ], } option && myChart.setOption(option) }, // 去首页 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 } }) }, }, } </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 { padding-top: 10px; margin-top: 10px; flex: 1; } .form_label span.item { 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>