<template> <div class="rightb"> <!-- 预警信息 --> <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: left; margin-left: 50px" > 预警信息 </span> <div class="rightline1"></div> </div> <div class="rightbar1"> <div style="padding: 0px 10px; width: 100%; height: 40%"> <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>{{ tableData.length }}</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="100"> </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="rightbar2"> <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: left"> 用户安全监控设备 </span> <!-- <img src="../../assets/second1/ti-bg.png" alt=""> --> <div class="rightline2"></div> </div> <div class="inuser"> <div class="outuserleft"> <div class="outuserone"> <div style="margin-top: 10px">燃气用户数量</div> <!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> --> </div> <div id="huanleft" style="width: 100%; height: 150px"></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> --> <span style=" font-family: 'arialbd'; letter-spacing: 2px; color: #00ffff; font-size: 20px; " >{{bingBottomData.totalNumberUsers}}</span > </div> <div class="usernum"> <div class="usernumin in4"> <div class="titletu"> <span> ● </span> <span style="color: #cddbe4">居民用户 </span> </div> <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.juminNum }}</span > --> <span style="font-family: 'arialbd'; letter-spacing: 2px"> {{bingBottomData.residentUsers}}</span > </div> <div class="usernumin in5"> <div class="titletu"> <span> ● </span> <span style="color: #cddbe4">商业用户 </span> </div> <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.shangNum }}</span > --> <span style="font-family: 'arialbd'; letter-spacing: 2px"> {{bingBottomData.businessUser}}</span > </div> <div class="usernumin in6"> <div class="titletu"> <span> ● </span> <span style="color: #cddbe4">工业用户 </span> </div> <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.gongNum }}</span > --> <span style="font-family: 'arialbd'; letter-spacing: 2px"> {{bingBottomData.industrialUsers}}</span > </div> <!-- <div class="usernumin in7"> <div class="titletu"> <span> ● </span> <span style="color: #cddbe4">餐饮单位用户 </span> </div> <span style="font-family: 'arialbd'; letter-spacing: 2px"> 585</span > </div> --> </div> </div> <div class="outuserright"> <div class="outusertwo"> <div style="margin-top: 10px">在线设备数量</div> <!-- <span class="outuserspan">{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span> --> </div> <div id="huanright" style="width: 100%; height: 150px"></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 > --> <span style=" font-family: 'arialbd'; letter-spacing: 2px; color: #00ffff; font-size: 20px; " >0 </span> </div> <div class="usernum" style="margin-left: 38px"> <div class="usernumin in4"> <!-- <span> ● </span> <span style="color: #cddbe4">在线 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.changNum }}</span > --> <span style="color: #cddbe4">在线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; width: 35px; text-align: left; " > 0</span > <span style="color: #cddbe4; margin-left: 20px">离线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; " > 0</span > </div> <div class="usernumin in5"> <!-- <span> ● </span> <span style="color: #cddbe4">离线 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.liNum }}</span > --> <span style="color: #cddbe4">在线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; width: 35px; text-align: left; " > 0</span > <span style="color: #cddbe4; margin-left: 20px">离线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; " > 0</span > </div> <div class="usernumin in6"> <!-- <span> ● </span> <span style="color: #cddbe4">报警 </span> <span style="font-family: 'arialbd'; letter-spacing: 2px"> : {{ diviceNum.baoNum }}</span > --> <span style="color: #cddbe4">在线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; width: 35px; text-align: left; " > 0</span > <span style="color: #cddbe4; margin-left: 20px">离线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; " > 0</span > </div> <!-- <div class="usernumin in7"> <span style="color: #cddbe4">在线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; width: 35px; text-align: left; " > 518</span > <span style="color: #cddbe4; margin-left: 20px">离线 </span> <span style=" font-family: 'arialbd'; letter-spacing: 2px; margin-left: 10px; " > 67</span > </div> --> </div> </div> </div> </div> <!-- 资源统计 --> <div class="rightbar3"> <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: left"> 资源统计 </span> <!-- <img src="../../assets/second1/ti-bg.png" alt=""> --> <div class="rightline3"></div> </div> <div class="echarts-one" style="margin-top: 30px; width: 100%; height: 90%; margin-left: 10px" > <div id="myChartone" :style="{ width: '100%', height: '100%' }"></div> </div> </div> <el-dialog title="预警信息" :visible.sync="open" width="500px" append-to-body @cancel="cancel1" > <div class="yujingtan" style="width: 100%; height: 160px"> <div class="yujingone">所在单位:{{ yujingdata.unitName }}</div> <div class="yujingone">设备类型:{{ yujingdata.detectorType }}</div> <!--<div class="yujingone" v-if="yujingdata2.detectorCode=='866384067209974'">设备类型:可燃气体探测器(AEP)</div>--> <!--<div class="yujingone" v-if="yujingdata2.detectorCode=='860362056312914'">设备类型:家用报警器</div>--> <!--<div class="yujingone" v-if="yujingdata2.detectorCode=='868977060000767'">设备类型:家用报警器(AEP)</div>--> <!--<div class="yujingone" v-if="yujingdata2.detectorCode=='B294F344'">设备类型:工业探测器</div>--> <div class="yujingone">预警信息:{{ yujingdata.statusName }}</div> <div class="yujingone" style="height: 30px"> 预警时间:{{ yujingdata.alarmTime }} </div> <div class="but_yujing" @click="closealways">永久关闭</div> </div> </el-dialog> </div> </template> <script> // 引入基本模板 import * as echarts from "echarts"; import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo"; // 当不轮播时候的刷新时间 import { alarmtime } from "@/utils/mapClass/config"; import { getYHTJ } from "@/api/bigWindow/charsData.js"; export default { // components: { // RightPic, // }, data() { return { open: false, isopen: true, allNum: {}, diviceNum: { baoNum: 0, changNum: 0, liNum: 0, userNum: 0, }, zeroNum: { fajing: 0, stationNum: 0, tiaoya: 0, videoNum: 0, }, enterpriseIds: { enterpriseId: "", }, bingBottomData: { businessUser: 0, industrialUsers: 0, residentUsers: 52830, totalNumberUsers: 52830, }, timer: null, // 与bigwindow的报警同步的定时器 alarmTimer: null, // 滚动功能的容器大还是列表大 changeTimer: false, repeatFinshed: false, tableHeight: 135, tableData: [], yujingdata: { unitName: "省移动", detectorType: "", statusName: "", alarmTime: "", }, yujingdata2: {}, scrollHeight: 0, }; }, mounted() { // this.$nextTick(()=>{ // this.getScrollHeight(); // }) this.getAlarm(); this.init(); this.timer2 = setInterval(() => { if (this.ws == null) { this.init(); console.log("1"); } }, 1000); selectDeviceNum(this.enterpriseIds).then((response) => { this.diviceNum = response.data; this.drawLine3(); }); this.getYHTJ(); }, beforeDestroy() { console.log("清空定时器"); clearInterval(this.alarmTimer); clearInterval(this.timer2); this.ws.close(); }, methods: { init() { console.log("socket执行"); this.ws = new WebSocket( "ws://36.138.180.129:8901/gassafety/websocketServer" ); this.ws.onopen = (evt) => { console.log("WebSockets开启"); }; this.ws.onmessage = (evt) => { // alarmData().then((response) => { // this.tableData = response.data.pageData; // this.yujingdata = response.data.pageData[0] // }) console.log("推送", evt); const obj = JSON.parse(evt.data); this.yujingdata2 = obj; console.log(this.yujingdata2); if (this.isopen) { this.open = true; } // const obj = JSON.parse(evt.data); // console.log("接受socketobj", obj); }; this.ws.onclose = () => { console.log("ws协议关闭"); this.ws = null; }; }, closealways() { this.open = false; this.isopen = false; }, cancel1() {}, getAlarm() { return alarmData().then((response) => { this.tableData = response.data.pageData; if (this.tableData.length > 0) { this.yujingdata = this.tableData[0]; } // console.log(response.data) // this.user = response.data; this.$nextTick(() => { this.getScrollHeight(); }); }); }, // 中间饼图左边饼图 getYHTJ() { getYHTJ().then((res) => { console.log("cccccccc", res); this.bingBottomData=res.data; }); }, 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: ["阀井", "调压箱", "场站", "监控"], // 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, // }, // }, // ], // }); // }, drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart1 = this.$echarts.init(document.getElementById("myChartone")); // 绘制图表 myChart1.setOption({ legend: { textStyle: { fontSize: 12, //字体大小 color: "#ffffff", //字体颜色 }, }, tooltip: { trigger: "item", }, grid: { top: "20%", left: "3%", right: "4%", bottom: "10%", containLabel: true, }, dataset: { source: [ ["product", "总量", "在线数量"], ["阀井", this.allNum.fajing, this.allNum.fajing], ["调压箱", this.allNum.tiaoya, this.allNum.tiaoya], ["场站", this.allNum.stationNum, this.allNum.stationNum], ["监控", this.allNum.videoNum, this.allNum.videoNum], ], }, xAxis: { data: ["阀井", "调压箱", "场站", "监控"], type: "category", // data: category, axisLabel: { interval: 0 }, 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: [ { 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: "#fff", fontSize: 10, }, }, barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#00ffff" }, { offset: 0.5, color: "#00fbfb80" }, { offset: 1, color: "#112238" }, ]), }, }, }, { 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: "#fff", fontSize: 10, }, }, barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#198EF0" }, { offset: 0.5, color: "#198ef099" }, { offset: 1, color: "#112238" }, ]), }, }, }, ], // 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: ["#50c43d", "#1883dc", "#fa8167", "#1ccccc"], grid: { left: 0, // right: 0, bottom: 0, top: 0, containLabel: true, }, // grid: { // bottom: 150, // left: 100, // right: '10%' // }, series: [ // 主要展示层的 { radius: ["80%", "65%"], center: ["50%", "50%"], type: "pie", itemStyle: { borderRadius: 5, }, 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: "餐饮单位用户", value: this.diviceNum.gongNum }, { name: "居民用户", value: 1121 }, { name: "商业用户", value: 41 }, { name: "工业用户", value: 0 }, // { name: "餐饮单位用户", value: 543 }, ], }, // 边框的设置 // { // 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: ["80%", "65%"], center: ["50%", "50%"], type: "pie", itemStyle: { borderRadius: 5, }, 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: 95 }, // { name: "在线数量", value: 1592 }, { name: "报警数量", value: 0 }, { name: "离线数量", value: 0 }, { name: "在线数量", value: 0 }, ], }, // 边框的设置 // { // 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> .rightb { width: 98%; height: 100%; } .rightbar1 { width: 90%; height: 20%; margin-left: 12%; } .rightbar2 { width: 76%; height: 37%; padding-top: 15px; margin-left: 20%; } .rightbar3 { width: 80%; height: 32%; padding-top: 15px; padding-bottom: 35px; margin-left: 15%; } .rightline1 { width: 85%; height: 2px; float: left; background-image: linear-gradient(to right, #3bfafa, #ffffff00); margin-top: 10px; margin-left: 50px; } .rightline2 { width: 92%; height: 2px; float: left; background-image: linear-gradient(to right, #3bfafa, #ffffff00); margin-top: 10px; } .rightline3 { width: 95%; height: 2px; float: left; background-image: linear-gradient(to right, #3bfafa, #ffffff00); margin-top: 10px; } .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: 85%; height: 30px; font-size: 16px; font-weight: 700; margin-left: 14%; padding-top: 25px; line-height: 10px; } .item1 img { width: 100%; } .item2 { width: 85%; height: 30px; font-size: 16px; font-weight: 700; margin-left: 5%; margin-top: 40px; } .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: 82%; } .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; display: flex; flex-direction: row; justify-content: flex-start; } .titletu { margin-left: 50px; width: 120px; text-align: left; } titletu2 { margin-left: 50px; width: 70px; text-align: left; } .in1 { color: #188df0; } .in2 { color: #f0c41b; } .in3 { color: #ff4040; } .in4 { color: #50c43d; } .in5 { color: #1883dc; } .in6 { color: #fa8167; } .in7 { color: #1ccccc; } .in8 { color: #40adf1; } .inyuan { width: 94px; height: 94px; border-radius: 50%; border: 2px solid #125c9b; position: fixed; margin-bottom: 10px; margin-top: -122px; margin-left: 62px; font-size: 15px; color: #cddbe4; text-align: center; line-height: 20px; 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: 400px; height: 55%; margin-left: 55px; } .yj { padding: 0px 10px; } .yujing { width: 33%; height: 100%; 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; } .yujingtan { font-size: 18px; } .yujingone { height: 40px; color: #cccccc; } .but_yujing { cursor: pointer; width: 100px; border: 1px solid #cccccc; text-align: center; border-radius: 5px; height: 30px; margin-left: 360px; color: white; } </style> <style lang="scss" scoped> ::v-deep .el-dialog { margin-top: 18vh !important; } ::v-deep .el-dialog__header { background: #cc0000; border-bottom: 1px solid #181930; } ::v-deep .el-dialog__title { color: white !important; } ::v-deep .el-dialog__headerbtn .el-dialog__close { color: #ffffff; } ::v-deep .el-dialog__body { background: rgba(9, 18, 32, 0.9); } </style>