<template> <div style="height: 100%"> <!-- 预警信息 --> <div> <div class="item1"> <span class="dot"> <span class="dot-inner"></span> </span> <span style="letter-spacing: 3px; color: #cddbe4; cursor: pointer" @click="$router.push('/operationMonitor/operationMonitor')" >预警信息</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="" style="padding: 0px 10px"> <div class="yujingleft yujing"> <div class="yujingtop"> <img src="@/assets/mapinages/group786.png" alt="" style="width: 50px; height: 50px" /> </div> <div class="yujingbottom"> <div>设备预警</div> <span>0</span> </div> </div> <div class="yujingcenter yujing" > <div class="yujingtop" > <img src="@/assets/mapinages/group787.png" alt="" style="width: 50px; height: 50px" /> </div> <div class="yujingbottom"> <div>事件情况</div> <span>0</span> </div> </div> <div class="yujingright yujing" > <div class="yujingtop"> <img src="@/assets/mapinages/group788.png" alt="" style="width: 50px; height: 50px" /> </div> <div class="yujingbottom"> <div>隐患数量</div> <span>0</span> </div> </div> </div> <div class="left"> <div class="bottom right-bottom-data-left" @mouseover="mouseover" @mouseout="mouseout" > <el-table size="mini" :data="tableData" :height="tableHeight" class="el-bottom" ref="table" > <el-table-column prop="unitName" label="所在单位" width="80"> <template slot-scope="scope"> <div class="zzz" :title="scope.row.unitName"> {{ scope.row.unitName }} </div> </template> </el-table-column> <el-table-column prop="detectorType" label="设备类型" width="80"> <template slot-scope="scope"> <div class="zzz" :title="scope.row.detectorType"> {{ scope.row.detectorType }} </div> </template> </el-table-column> <el-table-column prop="statusName" label="预警信息" width="80"> <template slot-scope="scope"> <div class="zzz" :title="scope.row.statusName"> {{ scope.row.statusName }} </div> </template> </el-table-column> <el-table-column prop="alarmTime" label="预警时间" width="140"> </el-table-column> <el-table-column prop="handledStatus" label="状态"> <template slot-scope="scope"> <div class="zzz" :title="scope.row.handledStatus"> {{ scope.row.handledStatus }} </div> </template> </el-table-column> </el-table> </div> </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="inuser"> <div class="outuserleft"> <div class="outuserone"> <p>燃气用户数量</p> <!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> --> </div> <div id="huanleft" style="width: 235px; height: 170px"></div> <div class="inyuan"> <div style="letter-spacing: 2px">用户总数</div> <span style=" font-family: 'arialbd'; letter-spacing: 2px; color: #00ffff; font-size: 20px; " >{{ diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum }}</span > </div> <div class="usernum"> <div class="usernumin in4"> <span> ● </span> <span style="color: #cddbe4">居民用户 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.juminNum }}</span > </div> <div class="usernumin in5"> <span> ● </span> <span style="color: #cddbe4">商业用户 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.shangNum }}</span > </div> <div class="usernumin in6"> <span> ● </span> <span style="color: #cddbe4">工业用户 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.gongNum }}</span > </div> </div> </div> <div class="outuserright"> <div class="outusertwo"> <p>安全设备数量</p> <!-- <span class="outuserspan">{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span> --> </div> <div id="huanright" style="width: 235px; height: 170px"></div> <div class="inyuan"> <div style="letter-spacing: 2px">设备总数</div> <span style=" font-family: 'arialbd'; letter-spacing: 2px; color: #00ffff; font-size: 20px; " >{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span > </div> <div class="usernum"> <div class="usernumin in1"> <span> ● </span> <span style="color: #cddbe4">在线 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.changNum }}</span > </div> <div class="usernumin in2"> <span> ● </span> <span style="color: #cddbe4">离线 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.liNum }}</span > </div> <div class="usernumin in3"> <span> ● </span> <span style="color: #cddbe4">报警 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.baoNum }}</span > </div> </div> </div> </div> <!-- 资源统计 --> <div> <div class="item1" style="margin-top: 15px"> <span class="dot"> <span class="dot-inner"></span> </span> <span style="letter-spacing: 3px; color: #cddbe4; cursor: pointer" @click="$router.push('/regulation/station')" >资源统计</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="echarts-one" style="margin-top: 10px; width: 430px; margin-left: 10px" > <div id="myChartone" :style="{ width: '420px', height: '240px' }"></div> </div> </div> </template> <script> // 引入基本模板 import * as echarts from "echarts"; import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo"; // 当不轮播时候的刷新时间 import { alarmtime } from "@/utils/mapClass/config"; export default { // components: { // RightPic, // }, data() { return { allNum: {}, diviceNum: { baoNum: 0, changNum: 0, liNum: 0, userNum: 0, }, zeroNum: { fajing: 0, stationNum: 0, tiaoya: 0, videoNum: 0, }, enterpriseIds: { enterpriseId: "", }, timer: null, // 与bigwindow的报警同步的定时器 alarmTimer: null, // 滚动功能的容器大还是列表大 changeTimer: false, repeatFinshed: false, tableHeight: 135, tableData: [], scrollHeight: 0, }; }, mounted() { // this.$nextTick(()=>{ // this.getScrollHeight(); // }) this.getAlarm(); selectDeviceNum(this.enterpriseIds).then((response) => { this.diviceNum = response.data; this.drawLine3(); }); }, beforeDestroy() { console.log("清空定时器"); clearInterval(this.alarmTimer); }, methods: { getAlarm() { return alarmData().then((response) => { this.tableData = response.data.pageData; // console.log(response.data) // this.user = response.data; this.$nextTick(() => { this.getScrollHeight(); }); }); }, getScrollHeight() { const selectWrap = this.$refs.table.$el.querySelector( ".el-table__body-wrapper" ); // 列表 const select = this.$refs.table.$el ?.querySelector(".el-table__body-wrapper") .querySelector(".el-table__body"); setTimeout(() => { // 列表容器高度 const { height: heightWrapper } = selectWrap.getBoundingClientRect(); // 列表高度 const { height: heightSelect } = select.getBoundingClientRect(); // 滚动条的高度 = 列表高度-列表容器高度 this.scrollHeight = heightSelect - heightWrapper; // 如果列表高度大于列表容器高度,就让轮播到底重新调接口,否则就跟bigwindow同步调取接口 if (heightSelect > heightWrapper) { this.timerAni(); console.log("滚动"); } else { this.alarmTimerAni(); console.log("不滚动-----------------------------"); } // 列表大的时候鼠标移入移出就会触发暂停,否则就return this.changeTimer = heightSelect > heightWrapper; }, 1); }, timerAni() { const selectWrap = this.$refs.table.$el.querySelector( ".el-table__body-wrapper" ); clearInterval(this.timer); this.timer = setInterval(async () => { if (selectWrap.scrollTop == this.scrollHeight) { clearInterval(this.timer); await this.getAlarm(); selectWrap.scrollTop = 0; } else { selectWrap.scrollTop += 1; } }, 100); }, // 与外界报警同步 alarmTimerAni() { this.alarmTimer = setTimeout(() => { this.getAlarm(); }, alarmtime); }, tableEnter() { clearInterval(this.timer); }, // 列表大的时候鼠标移入移出就会触发暂停,否则就啥也不干 mouseover() { this.changeTimer && this.tableEnter(); }, mouseout() { this.changeTimer && this.timerAni(); }, choice(val) { this.getNum(val); }, getNum(val) { if (val != null && val != "") { this.enterpriseIds.enterpriseId = val.toString(); selectDeviceNum(this.enterpriseIds).then((response) => { console.log(response); this.allNum = response.data; this.drawLine(); }); } else { this.allNum = this.zeroNum; this.drawLine(); } }, drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart1 = this.$echarts.init(document.getElementById("myChartone")); // 绘制图表 myChart1.setOption({ tooltip: { trigger: "item", }, grid: { top: "8%", left: "8%", right: "4%", bottom: "10%", containLabel: true, }, xAxis: { data: ["阀井", "调压箱", "场站", "监控"], type: "category", // data: category, splitLine: { show: false }, axisLine: { show: false, lineStyle: { color: "#bbb6b6", }, }, axisTick: { show: false, }, offset: 10, nameTextStyle: { fontSize: 15, }, }, yAxis: { type: "value", axisLine: { show: false, lineStyle: { color: "#688AB6", }, }, axisTick: { show: false, }, splitLine: { show: true, lineStyle: { type: "dashed", color: "#464646", }, }, }, series: [ { name: "资源数量统计", type: "bar", showSymbol: false, hoverAnimation: false, data: [ this.allNum.fajing, this.allNum.tiaoya, this.allNum.stationNum, this.allNum.videoNum, ], barWidth: 18, //柱图宽度 // barCategoryGap:'60%', itemStyle: { normal: { label: { show: true, //开启显示 position: "top", //在上方显示 textStyle: { //数值样式 color: "#688AB6", fontSize: 12, }, }, barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: function (params) { //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值 var colorList = [ ["#00ffff", "#00fbfb80", "#112238"], ["#198EF0", "#198ef099", "#112238"], ]; var index = params.dataIndex; if (params.dataIndex >= colorList.length) { index = params.dataIndex - colorList.length; } return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorList[index][0] }, { offset: 0.5, color: colorList[index][1] }, { offset: 1, color: colorList[index][2] }, ]); }, }, }, }, { name: "资源数量统计", tooltip: { show: true, }, type: "bar", barWidth: 10, }, { name: "b", tooltip: { show: false, }, }, { name: "d", tooltip: { show: false, }, }, ], }); }, drawLine3() { // 基于准备好的dom,初始化echarts实例 let myChart31 = echarts.init(document.getElementById("huanleft")); let myChart32 = echarts.init(document.getElementById("huanright")); // 绘制图表 myChart31.setOption({ color: ["#91cc75", "#5470c6", "#fa8167"], grid: { left: 0, // right: 0, bottom: 0, top: 0, containLabel: true, }, // grid: { // bottom: 150, // left: 100, // right: '10%' // }, series: [ // 主要展示层的 { radius: ["75%", "65%"], center: ["50%", "50%"], type: "pie", itemStyle: { borderRadius: 20, }, label: { normal: { show: false, textStyle: { fontSize: 13, }, position: "outside", }, emphasis: { show: false, }, }, labelLine: { normal: { show: false, length: 20, length2: 35, }, emphasis: { show: true, }, }, name: "民警训练总量", data: [ { name: "居民用户", value: this.diviceNum.juminNum }, { name: "商业用户", value: this.diviceNum.shangNum }, { name: "工业用户", value: this.diviceNum.gongNum }, ], }, // 边框的设置 { name: "外边框", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 center: ["50%", "50%"], radius: ["80%", "80%"], label: { normal: { show: false, }, }, data: [ { value: 9, name: "", itemStyle: { normal: { borderWidth: 2, borderColor: "#61bad3", }, }, }, ], }, ], }); myChart32.setOption({ color: ["#FF4040", "#F0C41B", "#188DF0"], grid: { left: 0, // right: 0, bottom: 0, top: 0, containLabel: true, }, // grid: { // bottom: 150, // left: 100, // right: '10%' // }, series: [ // 主要展示层的 { radius: ["75%", "65%"], center: ["50%", "50%"], type: "pie", itemStyle: { borderRadius: 20, }, label: { normal: { show: false, textStyle: { fontSize: 13, }, position: "outside", }, emphasis: { show: false, }, }, labelLine: { normal: { show: false, length: 20, length2: 35, }, emphasis: { show: true, }, }, name: "民警训练总量", data: [ { name: "报警数量", value: this.diviceNum.baoNum }, { name: "离线数量", value: this.diviceNum.liNum }, { name: "在线数量", value: this.diviceNum.changNum }, ], }, // 边框的设置 { name: "外边框", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 center: ["50%", "50%"], radius: ["80%", "80%"], label: { normal: { show: false, }, }, data: [ { value: 9, name: "", itemStyle: { normal: { borderWidth: 2, borderColor: "#61bad3", }, }, }, ], }, ], }); // myChart32.setOption({ // title: { // text: '设备数量:'+data.deviceNum, // left: 'center', // textStyle: { // color: "#0ff" // } // }, // tooltip: { // trigger: 'item' // }, // series: [ // { // name: '设备概况', // type: 'pie', // radius: ['50%', '70%'], // center: ['50%', '60%'], // avoidLabelOverlap: false, // label: { // show: false, // position: 'center' // }, // emphasis: { // label: { // show: true, // fontSize: '40', // fontWeight: 'bold' // } // }, // labelLine: { // show: false // }, // data:data.divice, // color:["#188df0","#ffff00","#FF4040"] // } // ] // }); }, }, }; </script> <style scoped> .titleTex { height: 30px; width: 100%; color: aqua; text-align: center; line-height: 30px; margin-top: 10px; } .divall { height: 100%; width: 100%; } .divfen { display: flex; justify-content: center; align-items: center; } .numdiv { background: #47aed5; color: white; width: 27px; font-size: 30px; } .item1 { width: 93%; 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: 0.6; transform: scale(0.8); } to { opacity: 0; transform: scale(2.4); } } @keyframes vabDot { 0% { opacity: 0.6; transform: scale(0.8); } to { opacity: 0; transform: scale(2.4); } } .inuser { width: 100%; height: 265px; } .outuserleft { width: 50%; height: 100%; float: left; } .outuserright { width: 50%; height: 100%; float: right; } .outuserone { width: 100%; height: 20px; text-align: center; color: #cddbe4; } .outusertwo { width: 100%; height: 20px; text-align: center; color: #cddbe4; } .outuserspan { font-family: "arialbd"; font-size: 28px; color: #00ffff; letter-spacing: 8px; } .usernum { width: 100%; text-align: center; } .usernumin { font-size: 15px; } .in1 { color: #188df0; } .in2 { color: #f0c41b; } .in3 { color: #ff4040; } .in4 { color: #91cc75; } .in5 { color: #5470c6; } .in6 { color: #fa8167; } .inyuan { width: 106px; height: 106px; border-radius: 50%; border: 2px solid #125c9b; position: fixed; margin-bottom: 10px; margin-top: -138px; margin-left: 64px; font-size: 15px; color: #cddbe4; text-align: center; line-height: 25px; padding: 28px 0px 0px 0px; background-image: linear-gradient(to left, #112238, #003e8d, #112238); } .b_list { height: 100%; overflow: hidden; } .left { margin-top: 10px; width: 440px; margin-left: 20px; } .yj{ padding: 0px 10px; } .yujing{ width: 33%; height: 90px; float: left; } .yujingtop{ width: 70px; height: 90px; float: left; margin-top: 15px; text-align: right; } .yujingbottom{ float: left; color: #cddbe4; margin-left: 10px; line-height: 35px; padding: 10px 0 0 0; } .yujingbottom span{ font-family: 'arialbd'; font-size: 25px; background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } </style>