<template> <div> <!-- 基本信息 --> <div> <div class="item1"> <span class="dot"> <span class="dot-inner"></span> </span> <span style="letter-spacing :3px;color:#cddbe4">基本信息</span> <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> </div> </div> <div class="left-top" style="margin-top: 40px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;"> <div style="width: 40%;text-align: center;color: #339CC9;"> <div class="div-p" @click="$router.push('/regulation/supervise')">从业人员数</div> <span style="font-family: 'arialbd';font-size: 35px;background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7);-webkit-background-clip:text;-webkit-text-fill-color:transparent; ">{{allNum.peopleNum}}</span> </div> <div style="width: 40%;text-align: center;color: #339CC9;"> <div class="div-p" @click="$router.push('/regulation/pipe')">管道长度(m)</div> <span style="font-family: 'arialbd';font-size: 35px;background-image:-webkit-linear-gradient(bottom,#f86742,#f0c41b);-webkit-background-clip:text;-webkit-text-fill-color:transparent; ">{{allNum.allPipeLength}}</span> </div> </div> <!-- 安全监管 --> <div> <div class="item1" style="margin-top: 30px;"> <span class="dot"> <span class="dot-inner"></span> </span> <span style="letter-spacing :3px;color:#cddbe4">安全监管</span> <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> </div> </div> <div id="main1" style="width: 100%;height: 280px;"></div> <!-- 任务完成率 --> <div> <div class="item1" style="margin-top: 25px;"> <span class="dot"> <span class="dot-inner"></span> </span> <span style="letter-spacing :3px;color:#cddbe4;cursor:pointer;" @click="$router.push('/operationMonitor/workOrder')">任务完成率</span> <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> </div> </div> <div id="myCharttwo" :style="{width: '450px', height: '250px'}"></div> <div class="titleTex"> <span :style="{color: '#00ffff'}"> ● 已完成:{{allNum.typeOne}}</span> <span :style="{color: '#0099ff'}"> ● 未完成:{{allNum.typeTwo}}</span> </div> <!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> --> <!-- <div class="div-el"> <div class="el-left">入户安检</div> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeOne*100"></el-progress> </div> <div class="div-el"> <div class="el-left">巡查</div> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeTwo*100" status="success"></el-progress> </div> <div class="div-el"> <div class="el-left">报警巡查</div> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeThree*100" status="warning"></el-progress> </div> <div class="div-el"> <div class="el-left">其他</div> <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeFor*100" status="exception"></el-progress> </div> --> <!-- </div> --> </div> </template> <script> import { selectWorkOrderNum } from "@/api/operationMonitor/order"; // 引入基本模板 let echarts = require('echarts/lib/echarts') // 引入柱状图组件 require('echarts/lib/chart/bar') // 引入提示框和title组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') export default { data () { return { allNum:{}, zeroNum:{ allPipeLength: 0, peopleNum: 0, typeFor: 0, typeOne: 0, typeThree: 0, typeTwo: 0 }, enterpriseIds:{ enterpriseId:"" }, dataAll:{ congyeNum:1544, guandaoNum:3658495, shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290], shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675], shigu3:[ 932, 901, 198,489, 158, 358, 345, 675, 901, 934, 1290, 888], renwu:[50,92], renwuzong:142 }, dataone:{ congyeNum:521, guandaoNum:1254848, shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123], shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224], shigu3:[ 432, 301, 108,189, 18, 158, 145, 175, 401, 334, 590, 388], renwu:[4,27], renwuzong:31 }, datatwo:{ congyeNum:488, guandaoNum:1244495, shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500], shigu2:[432, 301, 456, 567, 235, 12, 145, 175, 401, 334, 590, 388], shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12], renwu:[8,25], renwuzong:33 }, datathree:{ congyeNum:535, guandaoNum:1189492, shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500], shigu2:[432, 301, 456, 567, 456, 653,122, 175, 401, 334, 590, 388], shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133], renwu:[38,40], renwuzong:78 }, datanow:{ renwu:[0,0] } }; }, mounted(){ this.datanow = this.dataAll; this.drawLine(this.datanow); //this.getNum(null) }, methods: { choice(val){ // if(index==0){ // this.datanow = this.dataAll; // this.drawLine(this.datanow); // this.getNum(index); // }else this.getNum(val); // if(index==1){ // this.datanow = this.dataone; // this.drawLine(this.datanow); // }else if(index==2){ // this.datanow = this.datatwo; // this.drawLine(this.datanow); // }else if(index==3){ // this.datanow = this.datathree; // this.drawLine(this.datanow); // } }, getNum( val){ if(val!=null && val!=''){ this.enterpriseIds.enterpriseId = val.toString(); selectWorkOrderNum (this.enterpriseIds).then(response => { console.log(response); this.allNum=response.data; this.initdata(); }); }else { this.allNum = this.zeroNum; this.initdata(); } }, initdata(){ // 基于准备好的dom,初始化echarts实例 //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1]) let myChart2 = this.$echarts.init(document.getElementById('myCharttwo')) // 绘制图表 myChart2.setOption({ title: { text: '任务总数量:'+(this.allNum.typeOne+this.allNum.typeTwo), left: 'center', top :20, textStyle:{ color: "#00ffff" } }, grid: { bottom: "7%", containLabel: true, }, tooltip: { trigger: 'item', }, series: [ { name: '任务概况', type: 'pie', radius: '60%', center: ['50%','58%'], data: [ { value: this.allNum.typeTwo, name: '未完成', itemStyle: { color: '#09f' } }, { value: this.allNum.typeOne, name: '已完成' , itemStyle: { color: '#00ffff' } }, ], labelLine:{ length:20, length2:50, }, label:{ color:'#fff', fontSize: 14, // formatter:"{b}\n\n", // padding:[0,-55], normal: { show: true, position: 'outer', // formatter: '{d}%, {c} \n\n', //模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n", // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n", borderWidth: 20, borderRadius: 4, padding: [0, -55], rich: { a_set: { color: "#cddbe4", lineHeight: 20, align: "center", padding: [55, -40, -15, -40], }, b_set:{ color: "auto", }, } } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); }, //折线图 drawLine(data){ // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('main1')) // 绘制图表 myChart.setOption({ legend: { top:20, textStyle:{ color:"#cddbe4" }, }, grid: { left: '5%', right: '7%', bottom: '4%', containLabel: true }, xAxis: { axisLine: { show: true, lineStyle: { color: '#bbb6b6', }, }, axisTick: { //去掉坐标轴刻线 show: false }, type: 'category', data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'] }, yAxis: { axisLine: { show: true, lineStyle: { color: '#bbb6b6' }, }, splitLine: { show:true, lineStyle:{ type:"dashed", color:"#bbb6b6" } }, type: 'value' }, series: [ { name:"事故数量", data: data.shigu1, type: 'line', smooth: true, areaStyle: { normal: { // 渐变填充色(线条下半部分) color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#5470c6" }, { offset: 1, color: "#5470c600" } ]) } } }, { data: data.shigu2, type: 'line', smooth: true, name:"隐患整治数", areaStyle: { normal: { // 渐变填充色(线条下半部分) color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#91cc75" }, { offset: 1, color: "#91cc7500" } ]) } } }, { data: data.shigu3, type: 'line', smooth: true, name:"预警数量", areaStyle: { normal: { // 渐变填充色(线条下半部分) color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#e7bc5e" }, { offset: 1, color: "#e7bc5e00" } ]) } } } ] }); }, } } </script> <style lang="scss" scoped> /* @font-face { font-family: 'arialbd'; } */ .item1{ width: 95%; height: 30px; font-size: 18px; line-height: 30px; padding-left: 10px; font-weight: 700; font-style: italic; margin-left: 10px; background-image: linear-gradient(to left, #112238, rgb(49 151 195 / 70%) 50%, #112238); } .dot { display: inline-block; position: relative; width: 10px; height: 10px; background: rgb(30, 185, 190); border-radius: 50%; margin-right: 10px; margin-left: 10px; margin-bottom: 2px; } .dot-inner { background: #44d7dc; position: absolute; top: 0; left: 0; box-sizing: border-box; display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: vabDot 1.2s ease-in-out infinite; animation: vabDot 1.2s ease-in-out infinite; } @-webkit-keyframes vabDot { 0% { opacity: .6; transform: scale(.8) } to { opacity: 0; transform: scale(2.4) } } @keyframes vabDot { 0% { opacity: .6; transform: scale(.8) } to { opacity: 0; transform: scale(2.4) } } .div-p{ width: 60%; height: 35px; line-height: 35px; margin-left: 20%; margin-bottom: 20px; background: url('../../assets/mapImages/div-p.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } .div-el{ margin-top: 30px; width: 100%; height: 18px; } .el-left{ color: #96a4ad; width: 20%; height: 100%; float: left; font-size: 14px; text-align: right; } ::v-deep .el-progress { width: 65%;float: left; margin-left: 25px; } ::v-deep .el-progress-bar__outer { height: 6px; border-radius: 0px; background-color: #1e506e80; background: linear-gradient(to left,#123456,#112238); } ::v-deep .el-progress-bar__inner { position: absolute; left: 0; top: 0; height: 100%; /* background-color: #198EF0; */ background: linear-gradient(to left,#198EF0,#112238); text-align: right; border-radius: 0px 5px 5px 0px; line-height: 1; white-space: nowrap; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } ::v-deep .el-progress.is-success .el-progress-bar__inner { /* background-color: #00FFFF; */ background: linear-gradient(to left,#00FFFF,#112238); } ::v-deep .el-progress.is-warning .el-progress-bar__inner { background-color: #198EF0; background: linear-gradient(to left,#198EF0,#112238); } ::v-deep .el-progress.is-exception .el-progress-bar__inner { /* background-color: #00FFFF; */ background: linear-gradient(to left,#00FFFF,#112238); } ::v-deep .el-progress-bar__innerText { color: #1e516f; } .titleTex{ width: 100%; height: 20px; margin-top: 0px; font-size: 15px; display: flex; justify-content: space-around; align-items: center; padding: 0px 30px; } </style>