<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: 'statisticsBasicDataManagementAI', components: { Title, }, data() { return { nowDate: null, options: orgData.list, year: new Date().getFullYear(), mouth: new Date().getMonth(), companyId: ['1419863231459102720'], // 组织id(做为查询参数) companyIds: [], issueDate: '', // 时间范围(做为查询参数) tableData: [], data: [], loading: false, pathName: '', type: '', total: {}, utils: utils, } }, created() { let {year, mouth} = this mouth = mouth + 1 this.issueDate = `${year}-${mouth > 10 ? mouth : '0' + mouth}` this.loadData() }, watch: { tableData(newVal) { this.total.roadCount = this.calculation('roadCount', newVal) this.total.tollGateCount = this.calculation('tollGateCount', newVal) this.total.serviceCount = this.calculation('serviceCount', newVal) this.total.interworkingCount = this.calculation('interworkingCount', newVal) this.total.bridgeCount = this.calculation('bridgeCount', newVal) this.total.tunnelCount = this.calculation('tunnelCount', newVal) this.total.culvertCount = this.calculation('culvertCount', newVal) this.total.workCount = this.calculation('workCount', newVal) this.total.carCount = this.calculation('carCount', newVal) this.pieCharts(this.total) this.cloumnCharts(newVal) }, }, 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) }, 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 this.$http .post('${yhxt}/bizBridgeInformation/v1/getBridgeCountVoAI') .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) { var chartDom = document.getElementById('pie') var myChart = echarts.init(chartDom) let data = [ { name: '路段数量', value: obj.roadCount || 0, }, { name: '收费站', value: obj.tollGateCount || 0, }, { name: '服务区', value: obj.serviceCount || 0, }, { name: '互通', value: obj.interworkingCount || 0, }, { name: '桥梁', value: obj.bridgeCount || 0, }, { name: '隧道', value: obj.tunnelCount || 0, }, { name: '涵洞', value: obj.culvertCount || 0, }, { name: '工区', value: obj.workCount || 0, }, { name: '车辆', value: obj.carCount || 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: ['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 roadData = [] let tollGateData = [] let serviceData = [] let interData = [] let bridgeData = [] let tunnelData = [] let culvertData = [] let workData = [] let carData = [] data.forEach((item) => { xData.push(item.name) roadData.push(item.roadCount) tollGateData.push(item.tollGateCount) serviceData.push(item.serviceCount) interData.push(item.interworkingCount) bridgeData.push(item.bridgeCount) tunnelData.push(item.tunnelCount) culvertData.push(item.culvertCount) workData.push(item.workCount) carData.push(item.carCount) }) 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: roadData, }, { name: '收费站', type: 'bar', stack: 'Ad', barWidth: '15%', data: tollGateData, }, { name: '服务区', type: 'bar', stack: 'Ad', barWidth: '15%', data: serviceData, }, { name: '互通', type: 'bar', stack: 'Ad', barWidth: '15%', data: interData, }, { name: '桥梁', type: 'bar', stack: 'Ad', barWidth: '15%', data: bridgeData, }, { name: '隧道', type: 'bar', stack: 'Ad', barWidth: '15%', data: tunnelData, }, { name: '涵洞', type: 'bar', stack: 'Ad', barWidth: '15%', data: culvertData, }, { name: '工区', type: 'bar', stack: 'Ad', barWidth: '15%', data: workData, }, { name: '车辆', type: 'bar', stack: 'Ad', barWidth: '15%', data: carData, }, ], } option && myChart.setOption(option) }, // 去首页 goIndex() { window.location.href = 'http://183.64.175.153:20003/#/business' // this.$router.go(-1) }, //退出系统 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 .logo { background: none; // background-position-x: -80px; } .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; } </style>