<template> <div class="leftb"> <!-- 基本信息 --> <div class="item2"> <!-- <span class="dot"> <span class="dot-inner"></span> </span> --> <!-- <div class="fong-div"></div> <div class="fong-div" style="margin-left: 3px;"></div> <div class="fong-div" style="margin-left: 3px;"></div> --> <span style=" letter-spacing: 1px; color: #fff; float: right; margin-right: 50px; " > 基本信息 </span> <div class="rightline1"></div> </div> <div class="leftbar1"> <div class="left-top"> <div class="ltop1"> <!-- <img src="../../assets/second1/btn-1.png" alt=""> --> <div style=" width: 100%; text-align: center; color: #fff; margin-left: 10px; " > <div class="div-p" @click="$router.push('/regulation/supervise')"> 从业人员数(人) </div> <div class="div-p-value"> {{ allNum.peopleNum }} </div> <div></div> </div> </div> <!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> --> <div class="ltop2"> <!-- <img src="../../assets/second1/btn-2.png" alt=""> --> <div style=" width: 100%; text-align: center; color: #fff; margin-left: 10px; " > <div class="div-p" @click="$router.push('/regulation/pipe')"> 管道长度(m) </div> <div class="div-p-value">{{ allNum.allPipeLength }}</div> </div> </div> </div> </div> <!-- 安全监管 --> <div class="leftbar2"> <div class="item1"> <!-- <div class="fong-div"></div> <div class="fong-div" style="margin-left: 3px;"></div> <div class="fong-div" style="margin-left: 3px;"></div> --> <span style="letter-spacing: 1px; color: #fff; float: right"> 巡检巡查 </span> <!-- <img src="../../assets/second1/ti-bg.png" alt=""> --> <div class="rightline2"></div> </div> <div class="pieone"> <div class="pie-title">巡检任务数量(个)</div> <div class="chars-wrapper"> <div id="myChartpieone"></div> <div class="titleTex"> <div class="titleTex-item"> <span>已完成巡检</span> <span class="b">{{ allNum.typeOne }}</span> </div> <div class="titleTex-item"> <span>未完成巡检</span> <span class="b">{{ allNum.typeTwo }}</span> </div> </div> </div> </div> <div class="pietwo"> <div class="pie-title">隐患整治数量(个)</div> <div class="chars-wrapper"> <div id="myChartpietwo"></div> <div class="titleTex"> <div class="titleTex-item"> <span>已完成整治</span> <span class="b">{{ allNum.hiddenBookFinish }}</span> </div> <div class="titleTex-item"> <span>未完成整治</span> <span class="b">{{ allNum.hiddenBookUnFinish }}</span> </div> </div> </div> </div> </div> <!-- 任务完成率 --> <div class="leftbar3"> <div class="item3"> <!-- <div class="fong-div"></div> <div class="fong-div" style="margin-left: 3px;"></div> <div class="fong-div" style="margin-left: 3px;"></div> --> <span style="letter-spacing: 1px; color: #fff; float: right"> 气量监管 </span> <!-- <img src="../../assets/second1/ti-bg.png" alt=""> --> <div class="rightline3"></div> </div> <div class="echarts-one" style="width: 100%; height: 95%; margin-left: 10px" > <div id="main1" style="width: 100%; height: 100%"></div> </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"); // let echarts = this.$echarts; import { getQLJG, getSGSL, getYHZZ, getYHTJ, } from "@/api/bigWindow/charsData.js"; export default { data() { return { allNum: {}, zeroNum: { allPipeLength: 0, peopleNum: 0, typeFor: 0, typeOne: 0, typeThree: 0, typeTwo: 0, hiddenBookFinish: 0, hiddenBookUnFinish: 0, }, enterpriseIds: { enterpriseId: "", }, dataAll: { congyeNum: 1544, guandaoNum: 3658495, shigu1: [], shigu2: [], // shigu3: [932, 901, 198, 489, 158, 358, 345, 675, 901, 934, 1290, 888], renwu: [50, 92], renwuzong: 142, date: [], }, 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.getNum(null) this.getLineChats(); }, methods: { // 两个接口实现一个line统计图这个是改数据 async getLineChats() { // getSGSL,getYHZZ /*await getSGSL().then((res) => { console.log("aaa", res); this.datanow.date = res.data.map((item) => item.date).reverse(); this.datanow.shigu1 = res.data.map((item) => item.count).reverse(); }); await getYHZZ().then((res) => { console.log("bbb", res); this.datanow.shigu2 = res.data.map((item) => item.count).reverse(); });*/ await getQLJG().then((res) => { console.log("CCC", res); this.datanow.date = res.data.map((item) => item.date).reverse(); this.datanow.shigu1 = res.data.map((item) => item.count).reverse(); this.datanow.shigu2 = res.data.map((item) => item.count1).reverse(); this.datanow.shigu3 = res.data.map((item) => item.count2).reverse(); this.datanow.shigu4 = res.data.map((item) => item.count3).reverse(); }); this.drawLine(this.datanow); }, choice(val) { // if(index==0){ // this.datanow = this.dataAll; // this.drawLine(this.datanow); // this.getNum(index); // }else console.log("===================>>>>>>>>>>>>>>>>>>", val); 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 pieone = this.$echarts.init(document.getElementById("myChartpieone")); let pietwo = this.$echarts.init(document.getElementById("myChartpietwo")); // 绘制图表 pieone.setOption({ title: { text: "总量", subtext: this.allNum.typeOne + this.allNum.typeTwo || "0", left: "center", top: 25, textStyle: { color: "#cddbe4", fontSize: "16", }, subtextStyle: { color: "#cddbe4", fontSize: "16", }, }, tooltip: { trigger: "item", show: false, }, legend: { top: "50%", left: "center", show: false, }, series: [ { color: ["#35A1FF", "#1EC9E3"], name: "Access From", type: "pie", radius: ["70%", "90%"], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: "#fff", borderWidth: 0, }, emphasis: { label: { show: false, fontSize: 40, fontWeight: "bold", }, }, labelLine: { show: false, }, data: [ { value: 1048, name: "Search Engine" }, { value: 735, name: "Direct" }, ], }, ], }); pietwo.setOption({ title: { text: "总量", subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0", left: "center", top: 25, textStyle: { color: "#cddbe4", fontSize: "16", }, subtextStyle: { color: "#cddbe4", fontSize: "16", }, }, tooltip: { trigger: "item", show: false, }, legend: { top: "50%", left: "center", show: false, }, series: [ { color: ["#FEA754", "#D8583E"], name: "Access From", type: "pie", radius: ["70%", "90%"], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: "#fff", borderWidth: 0, }, emphasis: { label: { show: false, fontSize: 40, fontWeight: "bold", }, }, labelLine: { show: false, }, data: [ { value: 1048, name: "Search Engine" }, { value: 735, name: "Direct" }, ], }, ], }); }, //折线图 drawLine(data) { // 基于准备好的dom,初始化echarts实例 let myChart = this.$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", }, }, axisLabel: { show: true, interval: 0, //使x轴文字显示全 rotate: 10, fontSize: 10, }, axisTick: { //去掉坐标轴刻线 show: false, }, type: "category", data: data.date, }, 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: "#d630dc" }, { offset: 1, color: "#91cc7500" }, ]), }, }, }, { data: data.shigu4, type: "line", smooth: true, name: "储存量", areaStyle: { normal: { // 渐变填充色(线条下半部分) color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#f38e0d" }, { 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'; } */ .leftb { width: 98%; height: 100%; margin-left: 2%; } .leftbar1 { width: 80%; height: 25%; padding-top: 10%; pointer-events: auto; } .leftbar2 { width: 80%; height: 39%; padding-top: 15px; pointer-events: auto; } .leftbar3 { width: 85%; height: 32%; padding-top: 20px; padding-bottom: 35px; pointer-events: auto; } .item1 { width: 85%; height: 30px; font-size: 16px; font-weight: 700; margin-left: 5%; padding-top: 10px; line-height: 10px; // margin-top: 10px; } .item1 img { width: 100%; } .item2 { width: 85%; height: 30px; font-size: 16px; font-weight: 700; margin-left: 5%; margin-top: 25px; } .item3 { width: 85%; height: 30px; font-size: 16px; font-weight: 700; margin-left: 5%; padding-top: 25px; line-height: 10px; } .fong-div { width: 4px; height: 10px; background-image: linear-gradient(to bottom, rgb(122, 247, 247), #057e8c); float: left; margin-top: 10px; } .rightline1 { width: 85%; height: 2px; float: right; background-image: linear-gradient(to left, #47a0ff, #ffffff00); margin-top: 10px; margin-right: 50px; } .rightline2 { width: 92%; height: 2px; float: right; background-image: linear-gradient(to left, #47a0ff, #ffffff00); margin-top: 10px; } .rightline3 { width: 95%; height: 2px; float: right; background-image: linear-gradient(to left, #47a0ff, #ffffff00); margin-top: 10px; } /* .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: 100%; width: 155px; // background: url("../../assets/ranqifirst/div-p.png"); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; text-align: center; padding: 7px 0px; // color: #0ff; } .div-p-value { width: 155px; height: 77px; text-align: center; font-family: "arialbd"; font-size: 35px; color: rgb(255, 255, 255); -webkit-background-clip: text; background: url("~@/assets/firstimage/left-top-img.png") center; } .div-el { margin-top: 30px; width: 100%; height: 18px; } .left-top { display: flex; justify-content: space-evenly; } .ltop1 { width: 35%; display: flex; justify-content: space-evenly; color: rgb(255, 255, 255); } .ltop2 { width: 35%; display: flex; justify-content: space-evenly; } .el-left { color: rgb(255, 255, 255); color: #ad9d66; width: 20%; height: 100%; float: left; font-size: 14px; text-align: right; } /* ::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 { flex: 1; align-content: center; .titleTex-item { color: #fff; margin-left: 40px; margin-bottom: 10px; .b { margin-left: 40px; } } } .leftyj { margin-top: 10px; width: 420px; margin-left: 10px; } .yj { padding: 0px 10px; } .yujing { width: 33%; float: left; text-align: center; margin-top: 45px; } .yujingtop { margin: 5px 0; text-align: center; } .yujingbottom { color: #cddbe4; margin-left: 10px; line-height: 35px; padding: 10px 0 0 0; } .pieone { width: 80%; height: 40%; // float: left; margin-top: 30px; margin-left: 40px; .pie-title { color: #fff; margin-bottom: 10px; } .chars-wrapper { width: 100%; // height: 100%; display: flex; } #myChartpieone { width: 100px; height: 100px; } } .pietwo { width: 80%; height: 40%; margin-left: 40px; .pie-title { color: #fff; margin-bottom: 10px; } .chars-wrapper { width: 100%; // height: 100%; display: flex; } #myChartpietwo { width: 100px; height: 100px; } // float: right; // margin-top: 30px; } </style>