1 line
224 KiB
JSON
1 line
224 KiB
JSON
{"remainingRequest":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js!D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\林谷智能项目\\yanchengPowerSupply\\src\\views\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\src\\views\\index.vue","mtime":1690182000968},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\babel.config.js","mtime":1689557787923},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\林谷智能项目\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1655715099000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.function.name\";\nimport _defineProperty from \"D:/\\u6797\\u8C37\\u667A\\u80FD\\u9879\\u76EE/yanchengPowerSupply/node_modules/@babel/runtime/helpers/esm/defineProperty.js\";\nimport { getCompanyInfo, getLine, getBanzugz, getGdtj, getDwbzgz, getGdsgdzl, getPbtyqk, getCabinetInfo, getCabinetList, getfaultReportList, getCabinetAlarmList } from \"../api/index.js\";\n//引入echarts\nimport * as echarts from \"echarts\";\n// 工单统计弹窗组件\nimport workOrder from \"../component/workOrder.vue\";\n// import ringMainUnit from \"./HomePop/ringMainUnit.vue\";\nimport routeDetail from \"../component/routeDetail.vue\";\n\n// 线路详情\nimport lineDetail from \"../component/lineDetail.vue\";\nexport default {\n name: \"home\",\n components: {\n // ringMainUnit, //环网柜弹窗\n // workOrder, //工单统计弹窗\n // routeDetail, //线路故障跳闸明细\n // lineDetail, //线路详情弹窗\n },\n data: function data() {\n var _ref;\n return _ref = {\n pageShow: true,\n totals: 5,\n pageSize: 10,\n page: 1,\n threeImg: require(\"../assets/images/pieBorder.png\"),\n enlargeShow: true,\n dataGzList: [{\n bz: \"大冈\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"配网二班\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"配网一班\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"尚庄\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"秦南\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"郭猛\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"大纵湖\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"潘黄\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"学富\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"龙冈\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"西区\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }, {\n bz: \"楼王\",\n chbc: 0,\n chcg: 0,\n jd: 0,\n total: 0,\n wchz: 0\n }],\n //年故障数组\n dateList: [\"周\", \"月\"],\n acolor: true,\n //是否展示颜色\n currentIndex: -1,\n alarmInformationData: [],\n alarmInformationShow: false,\n //报警详情信息弹窗\n realTimeAlarmShow: false,\n //实时报警弹窗\n modelOthers: false,\n componentShow: \"\",\n CompanyInfo: {\n hsgst: \"3.4\",\n rlst: \"0.01\",\n nlst: \"0.44\",\n xms: \"9.279\",\n ysfyzh: \"118.5\",\n jhs: \"44\",\n sdpbsl: \"12\",\n jdpbsl: \"7\",\n fhgzpb: \"87\",\n ygdkkx: \"99.95\",\n pjtdpc: \"0.39\",\n pjtdsj: \"0.37\",\n ztpf: \"108.3万\",\n zydl: \"39.83亿\",\n khzs: \"4968\",\n xczydl: \"723.6\",\n zdsbgm: \"1250\",\n zxsbgm: \"3673\",\n glgds: \"10\",\n gltq: \"13884\",\n zrc: \"306\"\n },\n tableData: [],\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\n btnActive: 0,\n iconGround: [{\n icon: require(\"@/assets/images/huanwanggui.png\"),\n name: \"环网柜\"\n }, {\n icon: require(\"@/assets/images/fenzhixiang.png\"),\n name: \"分支箱\"\n }, {\n icon: require(\"@/assets/images/xiangbian.png\"),\n name: \"箱变\"\n }, {\n icon: require(\"@/assets/images/kaibisuo.png\"),\n name: \"开闭所\"\n }],\n btnEnlarge: [{\n icon: require(\"@/assets/images/btnTiShi.png\")\n }, {\n icon: require(\"@/assets/images/btnFangDa.png\")\n }],\n btnEnlarge1: [{\n icon: require(\"@/assets/images/btnTiShi.png\")\n }, {\n icon: require(\"@/assets/images/suoxiao.png\")\n }],\n options: [{\n value: \"\",\n label: \"\"\n }],\n value: \"\",\n topContent: [{\n name: \"配变数量\",\n count: \"\"\n }, {\n name: \"重复停运台次\",\n count: \"\"\n }, {\n name: \"配变重复停运率\",\n count: \"\"\n }],\n device: \"\"\n }, _defineProperty(_ref, \"tableData\", []), _defineProperty(_ref, \"tableKey\", +new Date()), _defineProperty(_ref, \"scrollTop\", 0), _defineProperty(_ref, \"option\", null), _defineProperty(_ref, \"myChartBin\", null), _defineProperty(_ref, \"gongdanList\", [{\n gd_type_id: \"\",\n gd_type_name: \"频繁停电\",\n total: 0\n }, {\n gd_type_id: \"\",\n gd_type_name: \"处理时间长\",\n total: 0\n }, {\n gd_type_id: \"\",\n gd_type_name: \"运检类投诉\",\n total: 0\n }, {\n gd_type_id: \"\",\n gd_type_name: \"运检类意见\",\n total: 0\n }, {\n gd_type_id: \"\",\n gd_type_name: \"民事赔偿\",\n total: 0\n }, {\n gd_type_id: \"\",\n gd_type_name: \"多次停电\",\n total: 0\n }]), _defineProperty(_ref, \"orderItem\", null), _defineProperty(_ref, \"orderShow\", \"\"), _defineProperty(_ref, \"routeItem\", null), _defineProperty(_ref, \"routeShow\", \"\"), _defineProperty(_ref, \"lineItem\", null), _defineProperty(_ref, \"lineShow\", \"\"), _defineProperty(_ref, \"timer\", null), _defineProperty(_ref, \"emergencyList\", []), _defineProperty(_ref, \"rowTime\", \"\"), _ref;\n },\n created: function created() {},\n mounted: function mounted() {\n var _this = this;\n // this.beginShowing();\n // 监听浏览器窗口大小变化\n window.onresize = function () {\n clearInterval(_this.myTimer);\n _this.beginShowing();\n };\n window.parent.getLoc();\n this.xianDuan();\n this.detailedTwo11();\n this.horizontalChart();\n this.detailedOne();\n this.barCharts();\n this.detailedFive();\n this.shuzihuaCharts();\n this.roseCharts();\n this.detailen1();\n // this.handleDate(0);\n\n var that = this;\n\n // //历史故障接口\n // let faultData = {\n // token: localStorage.getItem(\"token\"),\n // pageSize: \"500\",\n // page: \"1\",\n // };\n },\n // beforeDestroy() {\n // this.dataDestroy(); // 页面摧毁前，关闭定时器\n // },\n beforeDestroy: function beforeDestroy() {\n // 离开当前路由前的操作\n clearInterval(this.timer);\n this.timer = null;\n },\n methods: {\n //地图画线\n xianDuan: function xianDuan() {\n var canvas = document.getElementById(\"myCanvas\");\n var ctx = canvas.getContext(\"2d\");\n ctx.moveTo(650, 450); // moveTo(x,y) 定义线条开始坐标\n ctx.lineTo(735, 250); // lineTo(x,y) 定义线条结束坐标\n ctx.strokeStyle = \"orange\";\n ctx.lineWidth = 3;\n ctx.stroke();\n },\n routerTo: function routerTo(data) {\n if (data == \"盐城地区分布光伏运行监测\") {\n this.$router.push(\"/stationBuilding\");\n }\n if (data == \"盐城东台区供电所数字化分析\") {\n this.$router.push(\"/twentyKV\");\n }\n if (data == \"配网工程全过程物资审计\") {\n this.$router.push(\"/thirtyFiveKV\");\n }\n if (data == \"盐城供电公司配网电能质量管控\") {\n this.$router.push(\"/powerQualityControl\");\n }\n if (data == \"乡村振兴电力综合指数\") {\n this.$router.push(\"/ruralRevitalizationPower\");\n }\n if (data == \"两高行业企业污染监测\") {\n this.$router.push(\"/enterprisePollutionMonitoring\");\n }\n if (data == \"农村生活污水治理设备电量分析\") {\n this.$router.push(\"/ruralDomesticSewageTreatment\");\n }\n if (data == \"数字化排涝抗旱辅助及检修辅助决策\") {\n this.$router.push(\"/digitalFloodDrainageDroughtRelief\");\n }\n },\n detailen1: function detailen1() {\n var fontColor = \"#30eee9\";\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\n var option = {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\"\n }\n },\n grid: {\n left: \"0%\",\n //图表距离容器左侧多少距离\n right: \"10%\",\n //图表距离容器右侧侧多少距离\n bottom: \"20%\",\n //图表距离容器上面多少距离\n top: \"10%\",\n //图表距离容器下面多少距离\n containLabel: true //防止标签溢出\n },\n\n legend: {\n textStyle: {\n fontSize: 18,\n //字体大小\n color: \"#ffffff\" //字体颜色\n },\n\n data: [\"电量KWH\"]\n },\n xAxis: [{\n type: \"category\",\n data: [\"安丰镇\", \"草堰镇\", \"龙岗镇\", \"新丰镇\", \"伍佑街道\", \"步凤镇\"],\n axisLabel: {\n show: true,\n textStyle: {\n color: \"#ffffff\",\n fontSize: 18\n }\n }\n }],\n yAxis: [{\n type: \"value\",\n name: \"\",\n axisLabel: {\n textStyle: {\n color: \"#ffffff\",\n fontSize: 18\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n }\n }],\n series: [{\n name: \"电量kwh\",\n type: \"bar\",\n barWidth: 40,\n // 柱子宽度核心代码，\n itemStyle: {\n normal: {\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n //代表渐变色从正上方开始\n offset: 0,\n //offset范围是0~1，用于表示位置，0是指0%处的颜色\n color: \"rgba(2,255,255,.1)\"\n },\n //柱图渐变色\n {\n offset: 1,\n //指100%处的颜色\n color: \"rgb(2,255,255)\"\n }]),\n label: {\n show: true,\n //开启显示\n position: \"top\",\n //在上方显示\n formatter: function formatter(params) {\n //核心部分 formatter 可以为字符串也可以是回调\n if (params.value) {\n //如果当前值存在则拼接\n return params.value + \"万\";\n } else {\n //否则返回个空\n return \"\";\n }\n },\n textStyle: {\n //数值样式\n color: \"#00ffff\",\n fontSize: 18\n }\n }\n },\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n data: [320, 332, 301, 334, 390, 288, 299]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n //班组\n getbanzhu: function getbanzhu() {\n var _this2 = this;\n getBanzugz({\n action: \"detail\"\n }).then(function (res) {\n console.log(res, \"班组故障详情\");\n for (var i = 0; i < res.data.data.length; i++) {\n if (res.data.data[i].gz_time_deal) {\n var date = new Date(res.data.data[i].gz_time_deal);\n res.data.data[i].gz_time_deal = _this2.$moment(date).format(\"YYYY-MM-DD HH:mm\");\n // console.log(res.data.data[i].gz_time_deal,'转换后');\n }\n\n if (res.data.data[i].gz_time) {\n var time = new Date(res.data.data[i].gz_time);\n res.data.data[i].gz_time = _this2.$moment(time).format(\"YYYY-MM-DD HH:mm\");\n }\n _this2.tableData.push(res.data.data[i]);\n }\n });\n },\n //工单\n getGongdan: function getGongdan() {\n var _this3 = this;\n getGdtj({\n action: \"tongji\"\n }).then(function (res) {\n console.log(res, \"工单统计数据\");\n var dataList = res.data.data;\n for (var i = 0; i < _this3.gongdanList.length; i++) {\n for (var j = 0; j < res.data.data.length; j++) {\n if (_this3.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name) {\n _this3.gongdanList[i].total = res.data.data[j].total;\n _this3.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\n }\n }\n }\n // this.gongdanList = res.data.data;\n _this3.detailedThree(dataList);\n // this.$nextTick(() => {\n // this.detailedThree(dataList);\n // setInterval(() => {\n // this.doing();\n // }, 200);\n // });\n });\n },\n // //表格第一行颜色\n rowClass: function rowClass(row, rowIndex) {\n if (row.rowIndex === 0) {\n return \"rowColor0\";\n } else {\n return \"\";\n }\n },\n //切换当前页\n handleCurrentChange: function handleCurrentChange(val) {\n this.page = val;\n var tableData = [];\n if (this.emergencyList.length != 0) {\n tableData = this.emergencyList;\n if (val == 1) {\n this.alarmInformationData = tableData.slice(0, 10);\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"\";\n } else if (val == 2) {\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n this.alarmInformationData = tableData.slice(10, 20);\n } else if (val == 3) {\n this.alarmInformationData = tableData.slice(20, 30);\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n } else if (val == 4) {\n this.alarmInformationData = tableData.slice(30, 40);\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n } else if (val == 5) {\n this.alarmInformationData = tableData.slice(40, 50);\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"none\";\n }\n } else {\n return false;\n }\n },\n // 线路详情弹窗\n openLineDetail: function openLineDetail(e) {\n var _this4 = this;\n // console.log(e);\n // var line = e + ''\n // console.log(line);\n getLine({\n action: \"pdxl\"\n }).then(function (_ref2) {\n var data = _ref2.data;\n console.log(data);\n _this4.lineShow = \"lineDetail\";\n _this4.lineItem = data.data;\n });\n },\n // 线路故障跳闸明细弹窗\n rowHandle: function rowHandle(e) {\n // console.log(e, \"参数\");\n this.routeItem = e;\n this.routeShow = \"routeDetail\";\n // console.log(this.routeItem,'线路组件名称');\n },\n // 工单统计的弹窗\n openGdDetail: function openGdDetail(item) {\n this.orderItem = item;\n this.orderShow = \"workOrder\";\n },\n // 鼠标进入表格\n // mouseover() {\n // clearInterval(this.myTimer);\n // },\n // 鼠标离开表格\n mouseout: function mouseout() {\n this.roll();\n },\n //调用unity方法\n handleUnity: function handleUnity(index, item) {\n this.btnActive = index;\n this.$refs.iframe.contentWindow.handleChange(item);\n },\n //选择线路\n selectLine: function selectLine(value) {\n var _this5 = this;\n getLine({\n action: \"query\",\n line_code: value\n }).then(function (res) {\n // console.log(res,'选择线路');\n if (res.data.data != 0 && res.data.data != null) {\n _this5.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name);\n } else if (res.data.data == null) {\n _this5.$refs.iframe.contentWindow.handleChangeLine(\"\");\n }\n });\n },\n detailedOne: function detailedOne() {\n var myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\n var option = {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\"\n }\n },\n legend: {\n textStyle: {\n fontSize: 18,\n //字体大小\n color: \"#ffffff\" //字体颜色\n },\n\n data: [\"配变停电\"]\n },\n xAxis: [{\n type: \"category\",\n data: [\"亭湖区\", \"东台市\", \"建湖县\", \"阜宁县\", \"响水县\", \"滨海县\", \"射阳县\", \"大丰区\"],\n axisLabel: {\n show: true,\n textStyle: {\n color: \"#ffffff\",\n fontSize: 16\n }\n }\n }],\n yAxis: [{\n type: \"value\",\n name: \"\",\n axisLabel: {\n textStyle: {\n color: \"#ffffff\",\n fontSize: 16\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n }\n }],\n series: [{\n name: \"配变停电\",\n type: \"bar\",\n barWidth: 40,\n // 柱子宽度核心代码，\n itemStyle: {\n normal: {\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n //代表渐变色从正上方开始\n offset: 0,\n //offset范围是0~1，用于表示位置，0是指0%处的颜色\n color: \"rgba(2,255,255,.1)\"\n },\n //柱图渐变色\n {\n offset: 1,\n //指100%处的颜色\n color: \"rgb(2,255,255)\"\n }]),\n label: {\n show: true,\n //开启显示\n position: \"top\",\n //在上方显示\n textStyle: {\n //数值样式\n color: \"#00ffff\",\n fontSize: 18\n }\n }\n },\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n data: [5109, 5520, 5354, 5511, 4789, 5254, 5411, 4889]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n shuzihuaCharts: function shuzihuaCharts() {\n var myChart = this.$echarts.init(document.getElementById(\"shuzihua\"));\n var option = {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n crossStyle: {\n color: \"#999\"\n }\n }\n },\n grid: {\n left: \"5%\",\n //图表距离容器左侧多少距离\n right: \"8%\",\n //图表距离容器右侧侧多少距离\n bottom: \"20%\",\n //图表距离容器上面多少距离\n top: \"15%\",\n //图表距离容器下面多少距离\n containLabel: true //防止标签溢出\n },\n\n legend: [{\n x: \"center\",\n data: [\"投运15年以上设备数量\", \"统计时间所辖线路设备数量\", \"设备老化占比\"],\n textStyle: {\n fontSize: 18,\n color: \"#fff\"\n }\n }],\n xAxis: [{\n type: \"category\",\n data: [\"10kv星雨线163\", \"10kv智谋线183\", \"10kv朝阳线164\", \"10kv杨庄线181\", \"10kv森达线174\"],\n axisPointer: {\n type: \"shadow\"\n },\n axisLabel: {\n rotate: -15,\n //60度角倾斜显示\n interval: 0,\n //横轴信息全部显示\n color: \"#fff\",\n fontSize: 20\n }\n }],\n yAxis: [{\n type: \"value\",\n min: 0,\n max: 160,\n interval: 40,\n axisLabel: {\n textStyle: {\n fontSize: \"18\"\n }\n },\n axisLine: {\n lineStyle: {\n color: \"#fff\"\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n }\n }, {\n type: \"value\",\n min: 0,\n max: 80,\n interval: 20,\n axisLabel: {\n formatter: \"{value}%\",\n textStyle: {\n fontSize: \"18\"\n }\n },\n axisLine: {\n lineStyle: {\n color: \"#fff\"\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n }\n }],\n series: [{\n name: \"投运15年以上设备数量\",\n type: \"bar\",\n tooltip: {\n valueFormatter: function valueFormatter(value) {\n return value;\n }\n },\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 1,\n color: \"rgba(255,255,0,.2) \"\n }, {\n offset: 0.5,\n color: \"rgb(255,255,0,.6)\"\n }, {\n offset: 0,\n color: \"rgb(255,255,0)\"\n }]),\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n data: [55, 66, 89, 113, 123]\n }, {\n name: \"统计时间所辖线路设备数量\",\n type: \"bar\",\n tooltip: {\n valueFormatter: function valueFormatter(value) {\n return value;\n }\n },\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 1,\n color: \"rgba(2,255,255,.2) \"\n }, {\n offset: 0.5,\n color: \"rgb(2,255,255,.6)\"\n }, {\n offset: 0,\n color: \"rgb(2,255,255)\"\n }]),\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n data: [46, 56, 99, 103, 123]\n }, {\n name: \"设备老化占比\",\n type: \"line\",\n yAxisIndex: 1,\n tooltip: {\n valueFormatter: function valueFormatter(value) {\n return value;\n }\n },\n itemStyle: {\n normal: {\n color: \"orange\",\n lineStyle: {\n color: \"orange\"\n }\n }\n },\n data: [20, 40, 60, 80, 67]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo: function detailedTwo() {\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\n var option = {\n xAxis: _defineProperty({\n type: \"category\",\n boundaryGap: false,\n axisLabel: {\n color: fontColor,\n fontSize: 18 // 文字大小\n },\n\n axisLine: {\n show: true,\n lineStyle: {\n color: \"#397cbc\"\n }\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: false,\n lineStyle: {\n color: \"#195384\"\n }\n },\n data: [\"0:00\", \"3:00\", \"6:00\", \"9:00\", \"12:00\", \"15:00\", \"18:00\", \"21:00\", \"24:00\"]\n }, \"axisTick\", {\n show: false\n }),\n yAxis: [{\n type: \"value\",\n name: \"单位：kw\",\n min: 0,\n max: 1000,\n show: true,\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n },\n axisLabel: {\n formatter: \"{value}\",\n textStyle: {\n color: \"#2ad1d2\",\n fontSize: 18 // 文字大小\n }\n },\n\n axisLine: {\n lineStyle: {\n color: \"#27b4c2\"\n }\n },\n axisTick: {\n show: false\n }\n }],\n series: [{\n data: [720, 632, 801, 734, 470, 670, 720, 123, 567],\n type: \"line\",\n symbol: \"none\",\n lineStyle: {\n color: \"#00ffff\",\n width: 2\n },\n itemStyle: {\n normal: {\n color: \"00ffff\",\n lineStyle: {\n color: \"00ffff\",\n width: 3,\n type: \"solid\"\n }\n }\n }\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo11: function detailedTwo11() {\n var fontColor = \"#30eee9\";\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\n var option = {\n xAxis: _defineProperty({\n type: \"category\",\n boundaryGap: false,\n axisLabel: {\n color: fontColor,\n fontSize: 18\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: \"#397cbc\"\n }\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: false,\n lineStyle: {\n color: \"#195384\"\n }\n },\n data: [\"0:00\", \"3:00\", \"6:00\", \"9:00\", \"12:00\", \"15:00\", \"18:00\", \"21:00\", \"24:00\"]\n }, \"axisTick\", {\n show: false\n }),\n yAxis: [{\n type: \"value\",\n name: \"单位：kw\",\n min: 0,\n max: 1000,\n show: true,\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n },\n axisLabel: {\n formatter: \"{value}\",\n textStyle: {\n color: fontColor,\n fontSize: 18\n }\n },\n axisLine: {\n lineStyle: {\n color: fontColor\n }\n },\n axisTick: {\n show: false\n }\n }],\n series: [{\n data: [720, 632, 801, 734, 470, 670, 720, 123, 567],\n type: \"line\",\n symbol: \"none\",\n lineStyle: {\n color: \"#00ffff\",\n width: 2\n },\n itemStyle: {\n normal: {\n color: \"00ffff\",\n lineStyle: {\n color: \"00ffff\",\n width: 3,\n type: \"solid\"\n }\n }\n }\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n horizontalChart: function horizontalChart() {\n var myChart = this.$echarts.init(document.getElementById(\"horizontalChart\"));\n var honorData = [{\n name: \"60天内掉电客户数\",\n data: [13.4, 12.1, 14.3]\n }, {\n name: \"60天内掉电总数\",\n data: [9.4, 8.1, 7.3]\n }];\n var honorXAxisData = [\"No.3\", \"No.2\", \"No.1\"];\n var nameList = [\"PMS_晨光满园9台区\", \"滨河华苑3台区\", \"PMS_晨光满园11台区\"];\n var option = {\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"none\"\n }\n },\n legend: {\n right: 20,\n top: \"5%\",\n itemWidth: 10,\n itemHeight: 10,\n itemGap: 15,\n textStyle: {\n color: \"#fff\",\n fontSize: 18\n }\n },\n grid: {\n top: \"15%\",\n left: \"14%\",\n right: \"0%\",\n bottom: \"0%\"\n },\n xAxis: [{\n type: \"value\",\n show: false,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#6B9DD7\",\n fontSize: 16,\n // 文字大小\n fontWeight: 400,\n interval: 0,\n formatter: function formatter(value) {\n return value + \"(万元)\";\n }\n },\n splitLine: {\n show: false\n }\n }],\n yAxis: [{\n type: \"category\",\n offset: 17,\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: \"#00FFFF\",\n fontSize: 20,\n // 文字大小\n fontWeight: 700,\n interval: 0\n },\n data: honorXAxisData\n }, {\n //名称\n type: \"category\",\n offset: -10,\n position: \"left\",\n axisLine: {\n show: false\n },\n inverse: true,\n axisTick: {\n show: false\n },\n axisLabel: {\n interval: 0,\n color: \"#fff\",\n align: \"left\",\n verticalAlign: \"bottom\",\n lineHeight: 40,\n fontSize: 20\n },\n data: nameList\n }],\n series: [{\n name: \"60天内掉电客户数\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"25%\",\n barMinHeight: 20,\n barGap: 15,\n // 柱图之间的间距\n itemStyle: {\n //自定义颜色\n // normal: { color: \"orange\" },\n color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{\n //代表渐变色从正上方开始\n offset: 0,\n //offset范围是0~1，用于表示位置，0是指0%处的颜色\n color: \"rgba(255,165,0,.2)\"\n },\n //柱图渐变色\n {\n offset: 1,\n //指100%处的颜色\n color: \"rgb(255,165,0)\"\n }])\n },\n label: {\n normal: {\n show: true,\n position: [\"80%\", \"-100%\"],\n formatter: function formatter(params) {\n return params.value;\n },\n textStyle: {\n color: \"#fff\",\n fontSize: 18\n }\n }\n },\n data: honorData[0].data\n }, {\n name: \"60天内掉电总数\",\n type: \"bar\",\n stack: \"zongliang\",\n barWidth: \"25%\",\n itemStyle: {\n //自定义颜色\n // normal: { color: \"orange\" },\n color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{\n //代表渐变色从正上方开始\n offset: 0,\n //offset范围是0~1，用于表示位置，0是指0%处的颜色\n color: \"#005BEA\"\n },\n //柱图渐变色\n {\n offset: 1,\n //指100%处的颜色\n color: \"#00C6FB\"\n }])\n },\n label: {\n normal: {\n show: true,\n position: [\"80%\", \"-100%\"],\n formatter: function formatter(params) {\n return params.value;\n },\n textStyle: {\n color: \"#fff\",\n fontSize: 18\n }\n }\n },\n data: honorData[1].data\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n barCharts: function barCharts() {\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\n var value = 18;\n var legendName = [\"华北\", \"华中\", \"华东\", \"华南\", \"东北\", \"西北\"];\n var option = {\n // backgroundColor: '#031845',\n // title:{\n // text:\"123\",\n // left:'center',\n // top:'45%',\n // textStyle:{\n // color:\"#FFF\",\n // fontSize:\"80px\",\n\n // }\n // },\n tooltip: {\n trigger: \"item\",\n formatter: \"{b} : {d}% <br/> {c}\"\n },\n // graphic: {\n // elements: [\n // {\n // type: 'text',\n // left: 'center', // 相对父元素居中\n // top: 'center', // 相对父元素上下的位置\n // style: {\n // fill: '#FFF',\n // text: ['357'],\n // zlevel:\"100\",\n // font: '80px Arial Normal',\n // }\n // }]\n // },\n // title: {\n // text:'总考生数',\n // left:'center',\n // top:'center',\n // padding:[24,0],\n // textStyle:{\n // color:'#fff',\n // fontSize:18*scale,\n // align:'center'\n // }\n // },\n title: {\n subtext: \"59.53万\",\n text: \"总计\",\n x: \"center\",\n y: \"40%\",\n textStyle: {\n fontSize: 24,\n fontWeight: \"normal\",\n color: \"#00FFFF\"\n },\n subtextStyle: {\n fontSize: 28,\n fontWeight: \"normal\",\n align: \"center\",\n color: \"#CCCCCC\"\n }\n },\n series: [{\n type: \"pie\",\n radius: [\"80\", \"120\"],\n center: [\"50%\", \"50%\"],\n color: [\"#80C269\", \"#00FFFF\", \"#0090F1\", \"#FFA800\", \"#4658F6\"],\n itemStyle: {\n normal: {\n borderWidth: 5,\n borderColor: \"#031845\"\n }\n },\n data: [{\n value: 27,\n name: \"国网大丰市供电公司\"\n }, {\n value: 30,\n name: \"国网射阳县供电公司\"\n }, {\n value: 24,\n name: \"开发区供电服务中心\"\n }, {\n value: 27,\n name: \"盐城运维检修部\"\n }, {\n value: 27,\n name: \"设备管理部\"\n }, {\n value: 27,\n name: \"国网响水县供电公司\"\n }],\n labelLine: {\n normal: {\n show: true,\n length: 20,\n length2: 10,\n lineStyle: {\n color: \"#CCCCCC\",\n width: 2\n }\n }\n },\n label: {\n normal: {\n formatter: \"{b|{b}}\\n{hr|}\\n{c|{c}%}\",\n rich: {\n b: {\n fontSize: 20,\n color: \"#FFF\",\n align: \"left\",\n padding: 4\n },\n hr: {\n borderColor: \"#CCCCCC\",\n width: \"100%\",\n borderWidth: 2,\n height: 0\n },\n c: {\n fontSize: 20,\n align: \"center\",\n padding: 4,\n color: \"#fff\"\n }\n }\n }\n }\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n roseCharts: function roseCharts() {\n var myChart = this.$echarts.init(document.getElementById(\"roseCharts\"));\n var option = {\n color: [\"#EAEA26\", \"#906BF9\", \"#FE5656\", \"#01E17E\", \"#3DD1F9\", \"#FFAD05\"],\n grid: {\n left: -100,\n top: 50,\n bottom: 10,\n right: 10,\n containLabel: true\n },\n tooltip: {\n trigger: \"item\",\n formatter: \"{b} : {c} ({d}%)\"\n },\n polar: {},\n angleAxis: {\n interval: 1,\n type: \"category\",\n data: [],\n z: 10,\n axisLine: {\n show: false,\n lineStyle: {\n color: \"#0B4A6B\",\n width: 1,\n type: \"solid\"\n }\n },\n axisLabel: {\n interval: 0,\n show: true,\n color: \"#0B4A6B\",\n margin: 8,\n fontSize: 16\n }\n },\n radiusAxis: {\n min: 40,\n max: 120,\n interval: 20,\n axisLine: {\n show: false,\n lineStyle: {\n color: \"#0B3E5E\",\n width: 1,\n type: \"solid\"\n }\n },\n axisLabel: {\n formatter: \"{value} %\",\n show: false,\n padding: [0, 0, 20, 0],\n color: \"#0B3E5E\",\n fontSize: 16\n },\n splitLine: {\n lineStyle: {\n color: \"#0B3E5E\",\n width: 2,\n type: \"solid\"\n }\n }\n },\n calculable: true,\n series: [{\n type: \"pie\",\n radius: [\"5%\", \"10%\"],\n hoverAnimation: false,\n labelLine: {\n normal: {\n show: false,\n length: 30,\n length2: 55\n },\n emphasis: {\n show: false\n }\n },\n data: [{\n name: \"\",\n value: 0,\n itemStyle: {\n normal: {\n color: \"#0B4A6B\"\n }\n }\n }]\n }, {\n type: \"pie\",\n radius: [\"90%\", \"95%\"],\n hoverAnimation: false,\n labelLine: {\n normal: {\n show: false,\n length: 30,\n length2: 55\n },\n emphasis: {\n show: false\n }\n },\n name: \"\",\n data: [{\n name: \"\",\n value: 0,\n itemStyle: {\n normal: {\n color: \"#0B4A6B\"\n }\n }\n }]\n }, {\n stack: \"a\",\n type: \"pie\",\n radius: [\"20%\", \"80%\"],\n roseType: \"area\",\n zlevel: 10,\n label: {\n normal: {\n show: true,\n formatter: \"{b} {d} %\",\n textStyle: {\n fontSize: 20,\n color: \"#fff\"\n },\n position: \"outside\"\n },\n emphasis: {\n show: true\n }\n },\n labelLine: {\n normal: {\n show: true,\n length: 20,\n length2: 35,\n borderWidth: 4\n },\n emphasis: {\n show: false\n }\n },\n data: [{\n value: 15,\n name: \"东台市\"\n }, {\n value: 7,\n name: \"阜宁县\"\n }, {\n value: 14,\n name: \"盐都区\"\n }, {\n value: 23,\n name: \"滨海县\"\n }, {\n value: 18,\n name: \"建湖县\"\n }, {\n value: 35,\n name: \"射阳县\"\n }, {\n value: 31,\n name: \"大丰区\"\n }, {\n value: 28,\n name: \"响水县\"\n }, {\n value: 36,\n name: \"亭湖区\"\n }]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedThree: function detailedThree(dataList) {\n var _this6 = this;\n // console.log(this.threeImg,'图片');\n // var equipment = [dataList.yjlts, dataList.yjlyj];\n var that = this;\n // console.log(that,'指向');\n var colorList = [\"#0090ff\", \"#06d3c4\", \"#66b0ed\", \"#7cb79d\", \"#2361b4\", \"rgb(198,123,244)\"];\n var colorList1 = [\"rgb(198,123,244)\", \"#2361b4\"];\n // 饼图数据\n var threeList = dataList.map(function (ele) {\n return {\n name: ele.gd_type_name,\n value: ele.total\n };\n });\n // console.log(threeList, \"饼图数据\");\n // var legendData = dataList.concat(\n // {\n // value: equipment[0],\n // name: \"运检类投诉\",\n // },\n // {\n // value: equipment[1],\n // name: \"运检类意见\",\n // }\n // );\n this.myChartBin = this.$echarts.init(document.getElementById(\"detailedThree\"));\n // var graphicList = [];\n // legendData.forEach((ele, index) => {\n // if (index <= 2) {\n // graphicList.push({\n // type: \"image\",\n // style: {\n // image: this.threeImg,\n // width: 164,\n // height: 41,\n // x: 250,\n // y: 55 * (index + 1),\n // },\n // });\n // } else {\n // graphicList.push({\n // type: \"image\",\n // style: {\n // image: this.threeImg,\n // width: 164,\n // height: 41,\n // x: 424,\n // y: 55 * (index - 2),\n // },\n // });\n // }\n // });\n this.option = {\n borderColor: \"none\",\n tooltip: {\n formatter: function formatter(param) {\n if (param.data.type == null) {\n return param.data.name + \":\" + param.value + \"个\";\n } else {\n return param.data.name + \":\" + param.value + \"个\";\n }\n }\n },\n legend: {\n icon: \"pin\",\n // height: 90,\n top: 20,\n show: false,\n // bottom:0,\n // itemGap: 40,\n // lineHeight: 80,\n // padding: [30, 0, 30, 0],\n // right: '20%',\n // orient: \"vertical\", //垂直显示\n x: \"center\",\n //延Y轴居中\n data: dataList.map(function (ele) {\n return ele.gd_type_name;\n }),\n textStyle: {\n color: \"#ffffff\",\n fontSize: 15\n\n // width:20,\n // height:60,\n }\n },\n\n series: [{\n name: \"\",\n type: \"pie\",\n radius: [0, \"70%\"],\n center: [\"50%\", \"50%\"],\n startAngle: 60,\n //默认角度\n label: {\n position: \"inner\",\n show: false\n },\n itemStyle: {\n normal: {\n borderColor: \"none\",\n borderWidth: 2,\n fontSize: 16,\n color: function color(params) {\n return colorList[params.dataIndex];\n }\n }\n },\n selectedMode: \"single\",\n data: threeList\n }\n // {\n // name: \"运检类\",\n // type: \"pie\",\n // radius: [\"70%\", \"80%\"],\n // center: [\"20%\", \"50%\"],\n // startAngle: 30,\n // itemStyle: {\n // normal: {\n // fontSize: 16,\n // color: function (params) {\n // return colorList1[params.dataIndex];\n // },\n // // color:'#F4C907',\n // },\n // },\n // label: {\n // normal: {\n // formatter: function (params) {\n // return params.data.name + \":\" + params.data.type + \"个\";\n // },\n // color: \"auto\",\n // show: false,\n // fontSize: 16,\n // },\n // },\n\n // data: [\n // {\n // value: equipment[0],\n // name: \"运检类投诉\",\n // type: equipment[0],\n // },\n // {\n // value: equipment[1],\n // name: \"运检类意见\",\n // type: equipment[1],\n // },\n // ],\n // animation: false,\n // },\n ]\n };\n\n this.myChartBin.setOption(this.option);\n window.addEventListener(\"resize\", function () {\n _this6.myChartBin.resize();\n });\n },\n doing: function doing() {\n this.option.series[0].startAngle = this.option.series[0].startAngle - 5;\n this.option.series[1].startAngle = this.option.series[1].startAngle - 5;\n this.myChartBin.setOption(this.option);\n },\n detailedFour: function detailedFour(dataList) {\n var yearBzData = [];\n var yearChcg = [];\n var yearChbc = [];\n var yearWchz = [];\n var yearJieDi = [];\n var yearFenJi = [];\n for (var i = 0; i < dataList.length; i++) {\n yearBzData.push(dataList[i].bz);\n yearChcg.push(dataList[i].chcg);\n yearChbc.push(dataList[i].chbc);\n yearWchz.push(dataList[i].wchz);\n yearJieDi.push(dataList[i].jd);\n yearFenJi.push(dataList[i].fjbh);\n }\n // console.log(yearJieDi,'接地数据');\n var that = this;\n var myChart = this.$echarts.init(document.getElementById(\"detailedFour\"));\n var option = {\n tooltip: {\n axisPointer: {\n type: \"shadow\",\n textStyle: {\n color: \"#fff\",\n fontSize: 16\n }\n }\n },\n grid: {\n borderWidth: 0,\n top: 30,\n bottom: \"17%\",\n left: \"6%\",\n right: \"6%\",\n textStyle: {\n color: \"#fff\"\n }\n },\n legend: {\n icon: \"rect\",\n right: \"4%\",\n textStyle: {\n color: \"#ffffff\"\n },\n data: [\"重合成功\", \"重合不成\", \"无重合闸\", \"接地\", \"分级保护\"]\n },\n calculable: true,\n xAxis: [{\n type: \"category\",\n trigger: \"axis\",\n axisLine: {\n show: false,\n lineStyle: {\n color: \"#fff\",\n fontSize: 16\n }\n },\n splitLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n splitArea: {\n show: false\n },\n axisLabel: {\n interval: 0,\n fontSize: 14,\n rotate: 30\n },\n data: yearBzData\n }],\n yAxis: [{\n type: \"value\",\n splitLine: {\n show: true,\n lineStyle: {\n color: \"rgb(83,83,83)\",\n fontSize: 16\n }\n },\n axisLine: {\n lineStyle: {\n color: \"#fff\",\n fontSize: 16\n }\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n interval: 0\n },\n splitArea: {\n show: false\n }\n }],\n series: [{\n name: \"重合成功\",\n type: \"bar\",\n stack: \"Total1\",\n barMaxWidth: 15,\n barGap: \"10%\",\n label: {\n show: true,\n formatter: function formatter(params) {\n if (params.value == 0) {\n return \"\";\n } else {\n return params.value;\n }\n }\n },\n itemStyle: {\n normal: {\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(194,190,190,2)\"\n }, {\n offset: 1,\n color: \"rgb(194,190,190)\"\n }]),\n borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(194,190,190,1)\"\n }, {\n offset: 1,\n color: \"rgba(194,190,190,0)\"\n }])\n }\n },\n data: yearChcg\n }, {\n name: \"重合不成\",\n type: \"bar\",\n barMaxWidth: 15,\n stack: \"Total1\",\n label: {\n show: true,\n formatter: function formatter(params) {\n if (params.value == 0) {\n return \"\";\n } else {\n return params.value;\n }\n }\n },\n itemStyle: {\n normal: {\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(86,254,226,1)\"\n }, {\n offset: 1,\n color: \"rgba(86,254,226,0)\"\n }]),\n borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(86,254,226,1)\"\n }, {\n offset: 1,\n color: \"rgba(86,254,226,0)\"\n }])\n }\n },\n data: yearChbc\n }, {\n name: \"无重合闸\",\n type: \"bar\",\n barMaxWidth: 15,\n stack: \"Total1\",\n label: {\n show: true,\n formatter: function formatter(params) {\n if (params.value == 0) {\n return \"\";\n } else {\n return params.value;\n }\n }\n },\n itemStyle: {\n normal: {\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(237,125,49,1)\"\n }, {\n offset: 1,\n color: \"rgba(237,125,49,0)\"\n }]),\n borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(237,125,49,1)\"\n }, {\n offset: 1,\n color: \"rgba(237,125,49,0)\"\n }]),\n barBorderRadius: 0\n }\n },\n data: yearWchz\n }, {\n name: \"接地\",\n type: \"bar\",\n barMaxWidth: 15,\n stack: \"Total1\",\n label: {\n show: true,\n formatter: function formatter(params) {\n if (params.value == 0) {\n return \"\";\n } else {\n return params.value;\n }\n }\n },\n itemStyle: {\n normal: {\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(35,160,247,1)\"\n }, {\n offset: 1,\n color: \"rgba(35,160,247,0)\"\n }]),\n borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(35,160,247,1)\"\n }, {\n offset: 1,\n color: \"rgba(35,160,247,0)\"\n }]),\n barBorderRadius: 0\n }\n },\n data: yearJieDi\n }, {\n name: \"分级保护\",\n type: \"bar\",\n barMaxWidth: 15,\n stack: \"Total1\",\n label: {\n show: true,\n formatter: function formatter(params) {\n if (params.value == 0) {\n return \"\";\n } else {\n return params.value;\n }\n }\n },\n itemStyle: {\n normal: {\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(156,73,200,1)\"\n }, {\n offset: 1,\n color: \"rgba(156,73,200,0)\"\n }]),\n borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: \"rgba(156,73,200,1)\"\n }, {\n offset: 1,\n color: \"rgba(156,73,200,0)\"\n }]),\n barBorderRadius: 0\n }\n },\n data: yearFenJi\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedFive: function detailedFive() {\n var myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\n var option = {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\"\n }\n },\n grid: {\n left: \"5%\",\n //图表距离容器左侧多少距离\n right: \"5%\",\n //图表距离容器右侧侧多少距离\n bottom: \"0%\",\n //图表距离容器上面多少距离\n top: \"30%\",\n //图表距离容器下面多少距离\n containLabel: true //防止标签溢出\n },\n\n // legend: {\n // textStyle: {\n // fontSize: 18, //字体大小\n // color: \"#ffffff\", //字体颜色\n // },\n\n // data: [\"配变名称\"],\n // },\n xAxis: [{\n type: \"category\",\n data: [\"长荡镇\", \"河海镇\", \"黄沙港镇\", \"临海镇\", \"兴桥镇\", \"合德镇\", \"四明镇\", \"特庸镇\"],\n axisLabel: {\n interval: 0,\n //横轴信息全部显示\n show: true,\n textStyle: {\n color: \"#ffffff\",\n fontSize: 18\n }\n }\n }],\n yAxis: [{\n type: \"value\",\n name: \"\",\n axisLabel: {\n textStyle: {\n color: \"#ffffff\",\n fontSize: 18\n }\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"dashed\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1\n }\n }\n }],\n series: [{\n name: \"配变名称\",\n type: \"bar\",\n barWidth: 40,\n // 柱子宽度核心代码\n itemStyle: {\n normal: {\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n //代表渐变色从正上方开始\n offset: 0,\n //offset范围是0~1，用于表示位置，0是指0%处的颜色\n color: \"rgba(232, 155, 0,.3)\"\n },\n //柱图渐变色\n {\n offset: 1,\n //指100%处的颜色\n color: \"rgb(232, 155, 0)\"\n }]),\n label: {\n show: true,\n //开启显示\n position: \"top\",\n //在上方显示\n textStyle: {\n //数值样式\n color: \"rgb(232, 155, 0)\",\n fontSize: 18\n }\n }\n }\n },\n data: [87.69, 84.69, 82.69, 83.69, 77.69, 67.69, 57.69, 47.69]\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n //报警详情信息弹窗\n enlargeBtn: function enlargeBtn(index) {\n var _this7 = this;\n var that = this;\n this.pageShow = false;\n if (index == 0) {\n // let endDate = this.$moment(new Date())\n // .format(\"YYYY-MM-DD hh:mm:ss\");\n // let startDate = this.$moment(new Date()).subtract(1,'h').format('YYYY-MM-DD hh:mm:ss')\n // this.page = 1;\n // let cabData = {\n // token: localStorage.getItem(\"token\"),\n // pageSize: this.pageSize,\n // page: this.page,\n // sn: \"\",\n // startDate: startDate,\n // endDate: endDate,\n // };\n // getCabinetAlarmList(cabData).then((res) => {\n // if (res.data.data.data != null) {\n // this.totals = res.data.data.total;\n // this.alarmInformationData = res.data.data.data;\n // }\n // });\n this.$refs.audio.currentTime = 0; //从头开始播放提示音\n this.$nextTick(function () {\n _this7.$refs.audio.play();\n });\n this.alarmInformationShow = true;\n this.$nextTick(function () {\n _this7.pageShow = true;\n });\n this.realTimeAlarmShow = false;\n this.handleCurrentChange(1);\n } else if (index == 1) {\n this.enlargeShow = false;\n // this.$refs.iframe.contentWindow.fullscreen(1);\n document.getElementById(\"left\").style.display = \"none\";\n document.getElementById(\"right\").style.display = \"none\";\n // document.getElementById(\"middle\").style.width = \"100%\";\n // document.getElementById(\"middle\").style.height = \"100%\";\n document.getElementById(\"detailed\").style.display = \"none\";\n document.getElementById(\"threeModel\").style.height = \"100%\";\n document.getElementById(\"threeModel\").style.width = \"100%\";\n }\n },\n //报警详情信息弹窗\n enlargeBtn1: function enlargeBtn1(index) {\n var _this8 = this;\n this.pageShow = false;\n if (index == 0) {\n // this.$refs.audio.currentTime = 0; //从头开始播放提示音\n // this.$refs.audio.play();\n // this.alarmInformationShow = true;\n // this.realTimeAlarmShow = false;\n this.$refs.audio.currentTime = 0; //从头开始播放提示音\n this.$nextTick(function () {\n _this8.$refs.audio.play();\n });\n this.alarmInformationShow = true;\n this.$nextTick(function () {\n _this8.pageShow = true;\n });\n this.realTimeAlarmShow = false;\n this.handleCurrentChange(1);\n } else if (index == 1) {\n this.enlargeShow = true;\n // this.$refs.iframe.contentWindow.fullscreen(1);\n document.getElementById(\"left\").style.display = \"flex\";\n document.getElementById(\"left\").style.width = \"17.18%\";\n document.getElementById(\"right\").style.display = \"flex\";\n document.getElementById(\"right\").style.width = \"17.18%\";\n // document.getElementById(\"middle\").style.width = \"55.7%\";\n // document.getElementById(\"middle\").style.height = \"100%\";\n document.getElementById(\"detailed\").style.display = \"flex\";\n document.getElementById(\"detailed\").style.height = \"350px\";\n }\n },\n handleClose: function handleClose() {\n this.alarmInformationShow = false;\n this.$refs.audio.pause();\n this.page = 1;\n this.totals = 0;\n },\n handleDate: function handleDate(index) {\n var _this9 = this;\n this.currentIndex = index;\n // if (index == 0) {\n //周配变停运\n getPbtyqk({\n action: index == 0 ? \"week\" : \"month\"\n }).then(function (res) {\n var dataPbty = [];\n dataPbty = res.data.data;\n _this9.detailedFive(dataPbty);\n var dataPb = [];\n var dataCf = [];\n for (var i = 0; i < dataPbty.length; i++) {\n dataPb.push(dataPbty[i].pbsl);\n dataCf.push(dataPbty[i].cftytc);\n }\n _this9.topContent[0].count = dataPb.reduce(function (x, y) {\n return x + y;\n });\n _this9.topContent[1].count = dataCf.reduce(function (x, y) {\n return x + y;\n });\n var pbCount = _this9.topContent[1].count / _this9.topContent[0].count * 100;\n var pbCountString = pbCount.toString();\n if (pbCountString.indexOf(\".\") != -1) {\n _this9.topContent[2].count = pbCountString.substring(0, pbCountString.indexOf(\".\") + 3) + \"%\";\n } else {\n _this9.topContent[2].count = pbCountString + \"%\";\n }\n });\n // }else if (index == 1) {\n // //月配变停运\n // getPbtyqk({\n // action:\"month\"\n // }).then((res)=>{\n // let dataPbty = [];\n // dataPbty = res.data.data\n // this.detailedFive(dataPbty);\n // let dataPb = [];\n // let dataCf = [];\n // for (let i = 0; i < dataPbty.length; i++) {\n // dataPb.push(dataPbty[i].pbsl);\n // dataCf.push(dataPbty[i].cftytc);\n // }\n // this.topContent[0].count = dataPb.reduce((x, y) => x + y)\n // this.topContent[1].count = dataCf.reduce((x, y) => x + y)\n // let pbCount = (this.topContent[1].count/this.topContent[0].count)*100\n // let pbCountString = pbCount.toString()\n // if (pbCountString.indexOf(\".\") != -1) {\n // this.topContent[2].count = pbCountString.substring(0,pbCountString.indexOf(\".\")+3) + '%'\n // }else{\n // this.topContent[2].count = pbCountString +'%'\n // }\n // })\n // }\n },\n addColor: function addColor(index) {\n if (this.currentIndex == index) {\n return {\n active: this.acolor\n };\n }\n }\n },\n watch: {\n //监听内容\n value: function value(newVal, oldVal) {\n if (newVal != oldVal && newVal != \"\") {\n this.selectLine(newVal);\n } else if (newVal == \"\") {\n this.selectLine(\"\");\n this.value = \"\";\n }\n },\n rowTime: {\n deep: true,\n handler: function handler(newVal, oldVal) {\n console.log(newVal, oldVal, \"pppppppppppppppp\");\n if (newVal != oldVal && newVal != \"\" && oldVal != \"\") {\n this.enlargeBtn(0);\n }\n }\n }\n }\n};",{"version":3,"mappings":";;;AA8yBA,SACAA,gBACAC,SACAC,YACAC,SACAC,WACAC,YACAC,WACAC,gBACAC,gBACAC,oBACAC;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;EACAC;EACAC;IACA;IACA;IACA;IACA;EACA;EACAC;IAAA;IACA;MACAC;MACAC;MACAC;MACAC;MACAC;MAEAC;MACAC,aACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,GACA;QACAL;QACAC;QACAC;QACAC;QACAC;QACAC;MACA,EACA;MAAA;MACAC;MACAC;MAAA;MACAC;MACAC;MACAC;MAAA;MACAC;MAAA;MACAC;MACAC;MACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA;MACAC;MACAC;MACAC;MACAC,aACA;QACAC;QACAlD;MACA,GACA;QACAkD;QACAlD;MACA,GACA;QACAkD;QACAlD;MACA,GACA;QACAkD;QACAlD;MACA,EACA;MACAmD,aACA;QACAD;MACA,GACA;QACAA;MACA,EACA;MACAE,cACA;QACAF;MACA,GACA;QACAA;MACA,EACA;MACAG,UACA;QACAC;QACAC;MACA,EACA;MACAD;MACAE,aACA;QACAxD;QACAyD;MACA,GACA;QACAzD;QACAyD;MACA,GACA;QACAzD;QACAyD;MACA,EACA;MACAC;IAAA,sCACA,uCACA,iDACA,oCACA,2CACA,4CAEA,CACA;MACAC;MACAC;MACA9C;IACA,GACA;MACA6C;MACAC;MACA9C;IACA,GACA;MACA6C;MACAC;MACA9C;IACA,GACA;MACA6C;MACAC;MACA9C;IACA,GACA;MACA6C;MACAC;MACA9C;IACA,GACA;MACA6C;MACAC;MACA9C;IACA,EACA,sCAGA,0CAEA,wCAEA,0CACA,uCAGA,yCACA,oCACA,8CACA,sCACA;EAEA;EACA+C;EACAC;IAAA;IACA;IACA;IACAC;MACAC;MACA;IACA;IACAD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;IAEA;;IAEA;IACA;IACA;IACA;IACA;IACA;EACA;EACA;EACA;EACA;EACAE;IACA;IACAD;IACA;EACA;EACAE;IACA;IACAC;MACA;MACA;MACAC;MACAA;MACAA;MACAA;MACAA;IACA;IACAC;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;MACA;QACA;MACA;IACA;IACAC;MACA;MACA;MACA;QACAC;UACAC;UACAC;YACAC;UACA;QACA;QACAC;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;QACA;;QACAC;UACAC;YACAC;YAAA;YACAC;UACA;;UAEAlF;QACA;QACAmF,QACA;UACAX;UACAxE,OACA,OACA,OACA,OACA,OACA,QACA,MACA;UACAoF;YACAC;YACAL;cACAE;cACAD;YACA;UACA;QACA,EACA;QACAK,QACA;UACAd;UACA1E;UACAsF;YACAJ;cACAE;cACAD;YACA;UACA;UACAM;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;QACA,EACA;QACAC,SACA;UACA5F;UACA0E;UACAmB;UAAA;UACAC;YACAC;cACAX,uDACA;gBACA;gBACAY;gBAAA;gBACAZ;cACA;cAAA;cACA;gBACAY;gBAAA;gBACAZ;cACA,EACA;cACA7B;gBACAgC;gBAAA;gBACAU;gBAAA;gBACAC;kBACA;kBACA;oBACA;oBACA;kBACA;oBACA;oBACA;kBACA;gBACA;gBACAhB;kBACA;kBACAE;kBACAD;gBACA;cACA;YACA;YACAgB;YAAA;YACAC;UACA;UACAlG;QACA;MAEA;MACAmG;MACAtC;QACAsC;MACA;IACA;IACA;IACAC;MAAA;MACA/G;QACAgH;MACA;QACAC;QACA;UACA;YACA;YACAC,gCACA;YACA;UACA;;UACA;YACA;YACAA,2BACA;UACA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACAlH;QAAA+G;MAAA;QACAC;QACA;QAEA;UACA;YACA,IACA,qEACA;cACA;cACA;YACA;UACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;MACA;IACA;IACA;IACAG;MACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;QACA9D;QACA;UACA;UACA+D;QACA;UACAA,gEACA;UACA;QACA;UACA;UACAA,gEACA;QACA;UACA;UACAA,gEACA;QACA;UACA;UACAA,gEACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACAxH;QAAAiH;MAAA;QAAA;QACAC;QACA;QACA;MACA;IACA;IACA;IACAO;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA7H;QACAiH;QACAa;MACA;QACA;QACA;UACA,mDACAX,wBACA;QACA;UACA;QACA;MACA;IACA;IACAY;MACA;MACA;QACA9C;UACAC;UACAC;YACAC;UACA;QACA;QACAO;UACAC;YACAC;YAAA;YACAC;UACA;;UAEAlF;QACA;QACAmF,QACA;UACAX;UACAxE,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,MACA;UACAoF;YACAC;YACAL;cACAE;cACAD;YACA;UACA;QACA,EACA;QACAK,QACA;UACAd;UACA1E;UACAsF;YACAJ;cACAE;cACAD;YACA;UACA;UACAM;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;QACA,EACA;QACAC,SACA;UACA5F;UACA0E;UACAmB;UAAA;UACAC;YACAC;cACAX,uDACA;gBACA;gBACAY;gBAAA;gBACAZ;cACA;cAAA;cACA;gBACAY;gBAAA;gBACAZ;cACA,EACA;cACA7B;gBACAgC;gBAAA;gBACAU;gBAAA;gBACAf;kBACA;kBACAE;kBACAD;gBACA;cACA;YACA;YACAgB;YAAA;YACAC;UACA;UACAlG;QACA;MAEA;MAEAmG;MAEAtC;QACAsC;MACA;IACA;IACAiB;MACA;MACA;QACA/C;UACAC;UACAC;YACAC;YACA6C;cACAnC;YACA;UACA;QACA;QACAT;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;QACA;;QACAC,SACA;UACAuC;UACAtH,OACA,eACA,gBACA,SACA;UACAgF;YACAC;YACAC;UACA;QACA,EACA;QACAC,QACA;UACAX;UACAxE,OACA,cACA,cACA,cACA,cACA,aACA;UACAuE;YACAC;UACA;UACAY;YACAmC;YAAA;YACAC;YAAA;YACAtC;YACAD;UACA;QACA,EACA;QACAK,QACA;UACAd;UACAiD;UACAC;UACAF;UACApC;YACAJ;cACAC;YACA;UACA;UACA0C;YACAnC;cACAN;YACA;UACA;UACAK;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;QACA,GACA;UACAjB;UACAiD;UACAC;UACAF;UACApC;YACAY;YACAhB;cACAC;YACA;UACA;UACA0C;YACAnC;cACAN;YACA;UACA;UACAK;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;QACA,EACA;QACAC,SACA;UACA5F;UACA0E;UACAH;YACAuD;cACA;YACA;UACA;UACAhC;YACAV,uDACA;cAAAY;cAAAZ;YAAA,GACA;cAAAY;cAAAZ;YAAA,GACA;cAAAY;cAAAZ;YAAA,EACA;YACAe;YAAA;YACAC;UACA;UACAlG;QACA,GACA;UACAF;UACA0E;UACAH;YACAuD;cACA;YACA;UACA;UACAhC;YACAV,uDACA;cAAAY;cAAAZ;YAAA,GACA;cAAAY;cAAAZ;YAAA,GACA;cAAAY;cAAAZ;YAAA,EACA;YACAe;YAAA;YACAC;UACA;UACAlG;QACA,GACA;UACAF;UACA0E;UACAqD;UACAxD;YACAuD;cACA;YACA;UACA;UACAhC;YACAC;cACAX;cACAM;gBACAN;cACA;YACA;UACA;UACAlF;QACA;MAEA;MAEAmG;MAEAtC;QACAsC;MACA;IACA;IACA2B;MACA;MACA;QACA3C;UACAX;UACAuD;UACA3C;YACAF;YACAD;UACA;;UACA0C;YACAtC;YACAG;cACAN;YACA;UACA;UACA8C;YACA3C;UACA;UACAE;YACAF;YACAG;cACAN;YACA;UACA;UACAlF,OACA,QACA,QACA,QACA,QACA,SACA,SACA,SACA,SACA;QACA,eACA;UACAqF;QACA,EACA;QACAC,QACA;UACAd;UACA1E;UACA2H;UACAC;UACArC;UACAE;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;UACAL;YACAY;YACAhB;cACAE;cACAD;YACA;UACA;;UACA0C;YACAnC;cACAN;YACA;UACA;UACA8C;YACA3C;UACA;QACA,EACA;QACAK,SACA;UACA1F;UACAwE;UACAyD;UACAzC;YACAN;YACAO;UACA;UACAG;YACAC;cACAX;cACAM;gBACAN;gBACAO;gBACAjB;cACA;YACA;UACA;QACA;MAEA;MACA2B;MACAtC;QACAsC;MACA;IACA;IACA+B;MACA;MACA;MACA;QACA/C;UACAX;UACAuD;UACA3C;YACAF;YACAD;UACA;UACA0C;YACAtC;YACAG;cACAN;YACA;UACA;UACA8C;YACA3C;UACA;UACAE;YACAF;YACAG;cACAN;YACA;UACA;UACAlF,OACA,QACA,QACA,QACA,QACA,SACA,SACA,SACA,SACA;QACA,eACA;UACAqF;QACA,EACA;QACAC,QACA;UACAd;UACA1E;UACA2H;UACAC;UACArC;UACAE;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;UACAL;YACAY;YACAhB;cACAE;cACAD;YACA;UACA;UACA0C;YACAnC;cACAN;YACA;UACA;UACA8C;YACA3C;UACA;QACA,EACA;QACAK,SACA;UACA1F;UACAwE;UACAyD;UACAzC;YACAN;YACAO;UACA;UACAG;YACAC;cACAX;cACAM;gBACAN;gBACAO;gBACAjB;cACA;YACA;UACA;QACA;MAEA;MACA2B;MACAtC;QACAsC;MACA;IACA;IACAgC;MACA,iCACAxB,2CACA;MACA,iBACA;QACA7G;QACAE;MACA,GACA;QACAF;QACAE;MACA,EACA;MACA;MACA,gBACA,eACA,WACA,eACA;MACA;QACAkF;QACAb;UACAC;UACAC;YACAC;UACA;QACA;QACAO;UACAJ;UACAE;UACAuD;UACAC;UACAC;UACAtD;YACAE;YACAD;UACA;QACA;QACAR;UACAI;UACAH;UACAC;UACAC;QACA;QACAO,QACA;UACAX;UACAa;UACAsC;YACAtC;UACA;UACA2C;YACA3C;UACA;UACAD;YACAF;YACAD;YAAA;YACAsD;YACAf;YACAxB;cACA;YACA;UACA;UACAT;YACAF;UACA;QACA,EACA;QACAC,QACA;UACAd;UACAsB;UACA6B;YACAtC;UACA;UACA2C;YACA3C;UACA;UACAD;YACAF;YACAD;YAAA;YACAsD;YACAf;UACA;UAEAxH;QACA,GACA;UACA;UACAwE;UACAsB;UACAC;UACA4B;YACAtC;UACA;UACAmD;UACAR;YACA3C;UACA;UACAD;YACAoC;YACAtC;YACAuD;YACAC;YACAC;YACA1D;UACA;UACAjF;QACA,EACA;QACA0F,SACA;UACA5F;UACA0E;UACAoE;UACAjD;UACAkD;UACAC;UAAA;UACAlD;YACA;YACA;YACAV,uDACA;cACA;cACAY;cAAA;cACAZ;YACA;YAAA;YACA;cACAY;cAAA;cACAZ;YACA,EACA;UACA;UACA7B;YACAwC;cACAR;cACAU;cACAC;gBACA;cACA;cACAhB;gBACAE;gBACAD;cACA;YACA;UACA;UAEAjF;QACA,GACA;UACAF;UACA0E;UACAoE;UACAjD;UACAC;YACA;YACA;YACAV,uDACA;cACA;cACAY;cAAA;cACAZ;YACA;YAAA;YACA;cACAY;cAAA;cACAZ;YACA,EACA;UACA;UACA7B;YACAwC;cACAR;cACAU;cACAC;gBACA;cACA;cACAhB;gBACAE;gBACAD;cACA;YACA;UACA;UACAjF;QACA;MAEA;MACAmG;MACAtC;QACAsC;MACA;IACA;IACA4C;MACA;MACA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACA1E;UACAC;UACA0B;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACAgD;UACAC;UACAC;UACA5B;UACA6B;UACAnE;YACAC;YACAsD;YACArD;UACA;UACAkE;YACAnE;YACAsD;YACAE;YACAvD;UACA;QACA;QACAQ,SACA;UACAlB;UACA6E;UACAC;UACApE;UACAU;YACAC;cACAK;cACAqD;YACA;UACA;UACAvJ,OACA;YACAoD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,EACA;UACA0J;YACA3D;cACAR;cACAoE;cACAC;cACAlE;gBACAN;gBACAO;cACA;YACA;UACA;UACApC;YACAwC;cACAG;cACA2D;gBACAC;kBACA3E;kBACAC;kBACAuD;kBACAoB;gBACA;gBACAC;kBACAP;kBACA9D;kBACAS;kBACA6D;gBACA;gBACAC;kBACA/E;kBACAwD;kBACAoB;kBACA3E;gBACA;cACA;YACA;UACA;QACA;MAEA;MACAiB;MACAtC;QACAsC;MACA;IACA;IACA8D;MACA;MACA;QACA/E,QACA,WACA,WACA,WACA,WACA,WACA,UACA;QACAT;UACAC;UACAG;UACAD;UACAD;UACAG;QACA;QACAT;UACAC;UACA0B;QACA;QAEAkE;QACAC;UACA3C;UACAhD;UACAxE;UACAoK;UACAzC;YACAtC;YACAG;cACAN;cACAO;cACAjB;YACA;UACA;UACAY;YACAoC;YACAnC;YACAH;YACAmF;YACApF;UACA;QACA;QACAqF;UACA7C;UACAC;UACAF;UACAG;YACAtC;YACAG;cACAN;cACAO;cACAjB;YACA;UACA;UACAY;YACAY;YACAX;YACAwE;YACA3E;YACAD;UACA;UACAM;YACAC;cACAN;cACAO;cACAjB;YACA;UACA;QACA;QACA+F;QACA7E,SACA;UACAlB;UACA6E;UACAmB;UACAhB;YACA3D;cACAR;cACAoE;cACAC;YACA;YACAe;cACApF;YACA;UACA;UACArF,OACA;YACAF;YACAsD;YACAwC;cACAC;gBACAX;cACA;YACA;UACA;QAEA,GACA;UACAV;UACA6E;UACAmB;UACAhB;YACA3D;cACAR;cACAoE;cACAC;YACA;YACAe;cACApF;YACA;UACA;UACAvF;UACAE,OACA;YACAF;YACAsD;YACAwC;cACAC;gBACAX;cACA;YACA;UACA;QAEA,GACA;UACA0D;UACApE;UACA6E;UACAqB;UACAC;UACAtH;YACAwC;cACAR;cACAW;cACAhB;gBACAC;gBACAC;cACA;cACAa;YACA;YACA0E;cACApF;YACA;UACA;UACAmE;YACA3D;cACAR;cACAoE;cACAC;cACAxD;YACA;YACAuE;cACApF;YACA;UACA;UACArF,OACA;YACAoD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA,GACA;YACAsD;YACAtD;UACA;QAEA;MAEA;MACAqG;MACAtC;QACAsC;MACA;IACA;IACAyE;MAAA;MACA;MACA;MACA;MACA;MACA,iBACA,WACA,WACA,WACA,WACA,WACA,mBACA;MACA;MACA;MACA;QACA;UAAA9K;UAAAsD;QAAA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,qCACAuD,yCACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACA4C;QAEAlF;UACA2B;YACA;cACA;YACA;cACA;YACA;UACA;QACA;QAEAjB;UACA/B;UACA;UACA6B;UACAQ;UACA;UACA;UACA;UACA;UACA;UACA;UACAiC;UAAA;UACAtH;YACA;UACA;UACAgF;YACAE;YACAD;;YAEA;YACA;UACA;QACA;;QACAS,SACA;UACA5F;UACA0E;UACA6E;UACAC;UACAuB;UAAA;UACAxH;YACA0C;YACAV;UACA;UAEAO;YACAC;cACA0D;cACArD;cACAjB;cACAC;gBACA;cACA;YACA;UACA;UAEA4F;UACA9K;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QAAA;MAEA;;MACA;MACA6D;QACA;MACA;IACA;IACAkH;MACA;MACA;MACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA;MACA;MACA;MACA;MACA;QACAjH;UACAE;YACAC;YACAQ;cACAE;cACAD;YACA;UACA;QACA;QACAR;UACAyB;UACArB;UACAD;UACAF;UACAC;UACAK;YACAE;UACA;QACA;QACAH;UACA/B;UACA2B;UACAK;YACAE;UACA;UACAlF;QACA;QACAuK;QACApF,QACA;UACAX;UACAF;UACAqD;YACAtC;YACAG;cACAN;cACAD;YACA;UACA;UACAM;YACAF;UACA;UACA2C;YACA3C;UACA;UACAkG;YACAlG;UACA;UACAD;YACAoC;YACAvC;YACAsC;UACA;UACAvH;QACA,EACA;QACAsF,QACA;UACAd;UACAe;YACAF;YACAG;cACAN;cACAD;YACA;UACA;UACA0C;YACAnC;cACAN;cACAD;YACA;UACA;UACA+C;YACA3C;UACA;UACAD;YACAoC;UACA;UACA+D;YACAlG;UACA;QACA,EACA;QACAK,SACA;UACA5F;UACA0E;UACAoE;UACA4C;UACA1C;UACAzF;YACAgC;YACAW;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAJ;YACAC;cACAX,6DACA;gBACAY;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;cACAqE,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAzD;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;YAEA;UACA;UACAlF;QACA,GACA;UACAF;UACA0E;UACAgH;UACA5C;UACAvF;YACAgC;YACAW;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAJ;YACAC;cACAX,6DACA;gBACAY;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;cACAqE,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAzD;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;YAEA;UACA;UACAlF;QACA,GACA;UACAF;UACA0E;UACAgH;UACA5C;UACAvF;YACAgC;YACAW;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAJ;YACAC;cACAX,6DACA;gBACAY;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;cACAqE,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAzD;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA,CACA;cACAuG;YACA;UACA;UACAzL;QACA,GACA;UACAF;UACA0E;UACAgH;UACA5C;UACAvF;YACAgC;YACAW;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAJ;YACAC;cACAX,6DACA;gBACAY;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;cACAqE,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAzD;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA,CACA;cACAuG;YACA;UACA;UACAzL;QACA,GACA;UACAF;UACA0E;UACAgH;UACA5C;UACAvF;YACAgC;YACAW;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACAJ;YACAC;cACAX,6DACA;gBACAY;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA;cACAqE,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAzD;gBACAZ;cACA,GACA;gBACAY;gBACAZ;cACA,EACA,CACA;cACAuG;YACA;UACA;UACAzL;QACA;MAEA;MACAmG;MACAtC;QACAsC;MACA;IACA;IACAuF;MACA;MACA;QACArH;UACAC;UACAC;YACAC;UACA;QACA;QACAC;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;UAAA;UACAC;QACA;;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACAK,QACA;UACAX;UACAxE,OACA,OACA,OACA,QACA,OACA,OACA,OACA,OACA,MACA;UACAoF;YACAoC;YAAA;YACAnC;YACAL;cACAE;cACAD;YACA;UACA;QACA,EACA;QACAK,QACA;UACAd;UACA1E;UACAsF;YACAJ;cACAE;cACAD;YACA;UACA;UACAM;YACAF;YACAG;cACAhB;cACA;cACAU;cACAO;YACA;UACA;QACA,EACA;QACAC,SACA;UACA5F;UACA0E;UACAmB;UAAA;UACAC;YACAC;cACAX,uDACA;gBACA;gBACAY;gBAAA;gBACAZ;cACA;cAAA;cACA;gBACAY;gBAAA;gBACAZ;cACA,EACA;cACA7B;gBACAgC;gBAAA;gBACAU;gBAAA;gBACAf;kBACA;kBACAE;kBACAD;gBACA;cACA;YACA;UACA;UACAjF;QACA;MAEA;MACAmG;MACAtC;QACAsC;MACA;IACA;IACA;IACAwF;MAAA;MACA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;MACA;QACA;QACA;QACAhF;QACAA;QACA;QACA;QACAA;QACAA;QACAA;MACA;IACA;IACA;IACAiF;MAAA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;MACA;QACA;QACA;QACAjF;QACAA;QACAA;QACAA;QACA;QACA;QACAA;QACAA;MACA;IACA;IACAkF;MACA;MACA;MACA;MACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACArM;QACA4G;MACA;QACA;QACA0F;QACA;QACA;QACA;QACA;UACAC;UACAC;QACA;QACA;UAAA;QAAA;QACA;UAAA;QAAA;QACA,cACA;QACA;QACA;UACA,6BACAC;QACA;UACA;QACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;IACA;IACAC;MACA;QACA;UAAAC;QAAA;MACA;IACA;EACA;EACAC;IACA;IACAjJ;MACA;QACA;MACA;QACA;QACA;MACA;IACA;IACAkJ;MACAC;MACAC;QACAlG;QACA;UACA;QACA;MACA;IACA;EACA;AACA","names":["getCompanyInfo","getLine","getBanzugz","getGdtj","getDwbzgz","getGdsgdzl","getPbtyqk","getCabinetInfo","getCabinetList","getfaultReportList","getCabinetAlarmList","name","components","data","pageShow","totals","pageSize","page","threeImg","enlargeShow","dataGzList","bz","chbc","chcg","jd","total","wchz","dateList","acolor","currentIndex","alarmInformationData","alarmInformationShow","realTimeAlarmShow","modelOthers","componentShow","CompanyInfo","hsgst","rlst","nlst","xms","ysfyzh","jhs","sdpbsl","jdpbsl","fhgzpb","ygdkkx","pjtdpc","pjtdsj","ztpf","zydl","khzs","xczydl","zdsbgm","zxsbgm","glgds","gltq","zrc","tableData","btnArr","btnActive","iconGround","icon","btnEnlarge","btnEnlarge1","options","value","label","topContent","count","device","gd_type_id","gd_type_name","created","mounted","window","clearInterval","beforeDestroy","methods","xianDuan","ctx","routerTo","detailen1","tooltip","trigger","axisPointer","type","grid","left","right","bottom","top","containLabel","legend","textStyle","fontSize","color","xAxis","axisLabel","show","yAxis","splitLine","lineStyle","width","series","barWidth","itemStyle","normal","offset","position","formatter","borderRadius","borderWidth","myChart","getbanzhu","action","console","res","getGongdan","rowClass","handleCurrentChange","document","openLineDetail","rowHandle","openGdDetail","mouseout","handleUnity","selectLine","line_code","detailedOne","shuzihuaCharts","crossStyle","x","rotate","interval","min","max","axisLine","valueFormatter","yAxisIndex","detailedTwo","boundaryGap","axisTick","symbol","detailedTwo11","horizontalChart","itemWidth","itemHeight","itemGap","fontWeight","inverse","align","verticalAlign","lineHeight","stack","barMinHeight","barGap","barCharts","title","subtext","text","y","subtextStyle","radius","center","borderColor","labelLine","length","length2","rich","b","padding","hr","height","c","roseCharts","polar","angleAxis","z","margin","radiusAxis","calculable","hoverAnimation","emphasis","roseType","zlevel","detailedThree","startAngle","selectedMode","doing","detailedFour","yearBzData","yearChcg","yearChbc","yearWchz","yearJieDi","yearFenJi","splitArea","barMaxWidth","barBorderRadius","detailedFive","enlargeBtn","enlargeBtn1","handleClose","handleDate","dataPbty","dataPb","dataCf","pbCountString","addColor","active","watch","rowTime","deep","handler"],"sourceRoot":"src/views","sources":["index.vue"],"sourcesContent":["<template>\r\n <div class=\"home\">\r\n <div class=\"left\" id=\"left\">\r\n <div class=\"one\" style=\"height: 48%\">\r\n <div class=\"cartitle\" @click=\"routerTo('盐城地区分布光伏运行监测')\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>盐城地区分布光伏运行监测</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >户数高渗透率 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.hsgst\"\r\n >{{ CompanyInfo.hsgst }}\r\n <span style=\"font-size: 18px; color: #fff\">%</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >容量渗透率 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.rlst\"\r\n >{{ CompanyInfo.rlst }}\r\n <span style=\"font-size: 18px; color: #fff\">%</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >能量渗透率 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.nlst\"\r\n >{{ CompanyInfo.nlst }}\r\n <span style=\"font-size: 18px; color: #fff\">%</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"detailedTwo1\"></div>\r\n </div>\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\" @click=\"routerTo('配网工程全过程物资审计')\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>配网工程全过程物资审计</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content3\" style=\"display: inline\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\">项目数 </span>\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.xms\"\r\n >{{ CompanyInfo.xms }}\r\n <span style=\"font-size: 18px; color: #fff\">万</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\">预算费用总和</span>\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.ysfyzh\"\r\n >{{ CompanyInfo.ysfyzh }}\r\n <span style=\"font-size: 18px; color: #fff\">%</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\">计划数</span>\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.jhs\"\r\n >{{ CompanyInfo.jhs }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"barCharts\"></div>\r\n </div>\r\n </div>\r\n <div class=\"left1\" id=\"left\">\r\n <div class=\"one\" style=\"height: 48%\">\r\n <div class=\"cartitle\" @click=\"routerTo('盐城东台区供电所数字化分析')\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>盐城东台区供电所数字化分析</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >升档配变数量 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.sdpbsl\"\r\n >{{ CompanyInfo.sdpbsl }}</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\">降档配比数量</span>\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.jdpbsl\"\r\n >{{ CompanyInfo.jdpbsl }}</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >负荷关注配变数量 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.fhgzpb\"\r\n >{{ CompanyInfo.fhgzpb }}</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"horizontalChart\"></div>\r\n </div>\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\" @click=\"routerTo('盐城供电公司配网电能质量管控')\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>盐城供电公司配网电能质量管控</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >月供电可靠性 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.ygdkkx\"\r\n >{{ CompanyInfo.ygdkkx }}\r\n <span style=\"font-size: 18px; color: #fff\">%</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >平均停电频次 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.pjtdpc\"\r\n >{{ CompanyInfo.pjtdpc }}\r\n <span style=\"font-size: 18px; color: #fff\">次/户</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >平均停电时间 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.pjtdsj\"\r\n >{{ CompanyInfo.pjtdsj }}\r\n <span style=\"font-size: 18px; color: #fff\">小时</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"detailedOne\"></div>\r\n </div>\r\n </div>\r\n <div class=\"middle\" id=\"middle\">\r\n <div class=\"map\" style=\"height: 100%\">\r\n <canvas\r\n id=\"myCanvas\"\r\n width=\"1000\"\r\n height=\"600\"\r\n style=\"position: absolute\"\r\n ></canvas>\r\n <img src=\"../assets/indexN/left.png\" class=\"leftimg\" alt=\"\" />\r\n <img src=\"../assets/indexN/right.png\" class=\"rightimg\" alt=\"\" />\r\n <img class=\"allimg\" src=\"../assets/indexN/dfsxz.png\" alt=\"\" />\r\n <div class=\"imgboxtwo1\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\" style=\"color: #fff; font-size: 26px\">\r\n 大丰区\r\n </div>\r\n </div>\r\n <div class=\"content2\">\r\n <div class=\"line1\">\r\n 用电量 (kwh) \r\n <span style=\"color: yellow; font-size: 28px\">2.685亿</span>\r\n </div>\r\n <div class=\"line1\">\r\n 碳排放量 (kg) \r\n <span style=\"color: orange; font-size: 28px\">7.303万</span>\r\n </div>\r\n <div class=\"line1\">\r\n 企业数量 \r\n <span style=\"color: yellow; font-size: 28px\">713</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"imgboxone\">\r\n <div class=\"contents\">\r\n <div class=\"lines\" style=\"width: 55%\">\r\n <img src=\"../assets/indexN/tb1.png\" style=\"margin-top: 15%\" />\r\n <h4 style=\"color: #fff; margin-top: 10%\">数据目录</h4>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span>发布数量</span>\r\n <span class=\"yellow\">\r\n 100 <span style=\"color: #fff\">%</span>\r\n </span>\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <span>负面清单</span>\r\n <span class=\"orange\">\r\n 7244<span style=\"color: #fff\">个</span>\r\n </span>\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <span>涉及系统</span>\r\n <span class=\"yellow\">\r\n 251 <span style=\"color: #fff\">个</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\" style=\"width: 55%\">\r\n <img src=\"../assets/indexN/tb2.png\" style=\"margin-top: 15%\" />\r\n <h4 style=\"color: #fff; margin-top: 10%\">数据资源</h4>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <span>接入数量</span>\r\n </div>\r\n <span class=\"yellow\"\r\n > 1.6 <span style=\"color: #fff\">万个</span></span\r\n >\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>涉及系统</span>\r\n </div>\r\n <span class=\"orange\"\r\n > 123 <span style=\"color: #fff\">个</span></span\r\n >\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>数据资源卡片</span>\r\n </div>\r\n <span class=\"yellow\"\r\n >31<span style=\"color: #fff\">个</span></span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\" style=\"width: 55%\">\r\n <img src=\"../assets/indexN/tb3.png\" style=\"margin-top: 15%\" />\r\n <h4 style=\"color: #fff; margin-top: 10%\">数据服务</h4>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <span>服务数量</span>\r\n </div>\r\n <span class=\"yellow\">\r\n 1084<span style=\"color: #fff\">个</span>\r\n </span>\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>接入数量</span>\r\n </div>\r\n <span class=\"orange\">\r\n 8833<span style=\"color: #fff\">个</span>\r\n </span>\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>访问次数</span>\r\n </div>\r\n <span class=\"yellow\">\r\n 5.3 <span style=\"color: #fff\">亿个</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\" style=\"width: 55%\">\r\n <img src=\"../assets/indexN/tb4.png\" style=\"margin-top: 15%\" />\r\n <h4 style=\"color: #fff; margin-top: 10%\">数据产品</h4>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <span>报表数量</span>\r\n </div>\r\n <span class=\"yellow\"\r\n > 19 <span style=\"color: #fff\">个</span></span\r\n >\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>服务访问次数</span>\r\n </div>\r\n <span class=\"orange\"\r\n >0<span style=\"color: #fff\">次</span></span\r\n >\r\n </div>\r\n <div class=\"num\" style=\"margin-top: 5%\">\r\n <div style=\"display: inline-block\">\r\n <span>指标数量</span>\r\n </div>\r\n <span class=\"yellow\"\r\n > 477 <span style=\"color: #fff\">个</span></span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" id=\"right\">\r\n <div class=\"one\" style=\"height: 48%; width: 100%\">\r\n <div class=\"cartitle\" @click=\"routerTo('乡村振兴电力综合指数')\">\r\n <!-- <div style=\"\r\n width: 82%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \"> -->\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>乡村振兴电力综合指数</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n <!-- <div class=\"dateSelect\">\r\n <div style=\"text-indent: 15px\" @click=\"handleDate(index)\" :class=\"addColor(index)\"\r\n v-for=\"(item, index) in dateList\" :key=\"index\">\r\n {{ item }}\r\n </div>\r\n </div> -->\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"contentUl\">\r\n <div class=\"top1\">\r\n <!-- <img src=\"../assets/indexN/xctb2.png\" /> -->\r\n <div class=\"texts\">94.46</div>\r\n <h4>产业兴旺</h4>\r\n </div>\r\n <div class=\"top2\">\r\n <!-- <img src=\"../assets/indexN/xctb2.png\" /> -->\r\n <div class=\"texts\">63.95</div>\r\n <h4>生活宜居</h4>\r\n </div>\r\n <div class=\"top3\">\r\n <div class=\"texts\">74.15</div>\r\n <h4>生活富裕</h4>\r\n </div>\r\n <div class=\"top4\">\r\n <div class=\"texts\">56.23</div>\r\n <h4>治理有效</h4>\r\n </div>\r\n <div class=\"top5\">\r\n <div class=\"texts\">86.82</div>\r\n <h4>乡风文明</h4>\r\n </div>\r\n <div class=\"top\">\r\n <img src=\"../assets/indexN/xctb1.png\" />\r\n <div class=\"texts\" style=\"color: yellow\">77.17</div>\r\n </div>\r\n <!-- <div class=\"top\">\r\n <img src=\"../assets/05/sjfx.png\" />\r\n <div class=\"texts\" style=\"color: yellow\">\r\n 0\r\n <span style=\"font-size: 15px; color: #fff\">个</span>\r\n </div>\r\n <h4>自然村</h4>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"enselect\">\r\n <img src=\"../assets/02/dqxcxl.png\" alt=\"\" />\r\n <span class=\"text\">乡镇</span>\r\n </div>\r\n <div id=\"detailedFive\"></div>\r\n </div>\r\n\r\n <div class=\"three\" style=\"height: 48%; width: 100%\">\r\n <div class=\"cartitle\" @click=\"routerTo('两高行业企业污染监测')\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>两高行业企业污染监测</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <!-- <div class=\"three-content\">\r\n <div class=\"three-left\">\r\n <div id=\"detailedThree\"></div>\r\n </div>\r\n\r\n <div class=\"three-right\">\r\n <ul>\r\n <li v-for=\"s in gongdanList\" @click=\"openGdDetail(s)\">\r\n {{ s.gd_type_name }}\r\n <span style=\"color: #56fee2\">{{ s.total }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div> -->\r\n <div class=\"content3\" style=\"display: inline\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\" id=\"textleft\"\r\n >2022年度总碳排放量</span\r\n >\r\n <span\r\n style=\"\r\n font-size: 40px;\r\n font-weight: 600;\r\n margin-left: 30px;\r\n height: 80px;\r\n \"\r\n class=\"numText\"\r\n :text=\"CompanyInfo.ztpf\"\r\n id=\"yellow\"\r\n >{{ CompanyInfo.ztpf }}\r\n <span style=\"font-size: 18px; color: #fff\">吨碳</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\" id=\"textleft\"\r\n >2022年度总用电量</span\r\n >\r\n <span\r\n style=\"\r\n font-size: 40px;\r\n font-weight: 600;\r\n margin-left: 30px;\r\n height: 80px;\r\n \"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.zydl\"\r\n >{{ CompanyInfo.zydl }}\r\n <span style=\"font-size: 18px; color: #fff\">kwh</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\" id=\"textleft\"\r\n >2022年度客户总数</span\r\n >\r\n <span\r\n style=\"\r\n font-size: 40px;\r\n font-weight: 600;\r\n margin-left: 30px;\r\n height: 80px;\r\n \"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.khzs\"\r\n >{{ CompanyInfo.khzs }}\r\n <span style=\"font-size: 18px; color: #fff\">人</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"roseCharts\"></div>\r\n </div>\r\n </div>\r\n <div class=\"right1\" id=\"right\">\r\n <!-- <div class=\"one\" style=\"height: 635px; width: 100%\"> -->\r\n <div class=\"one\" style=\"height: 48%; width: 100%\">\r\n <div class=\"cartitle\" @click=\"routerTo('农村生活污水治理设备电量分析')\">\r\n <!-- <div style=\"\r\n width: 82%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \"> -->\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>农村生活污水治理设备电量分析</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n <!-- <div class=\"dateSelect\">\r\n <div style=\"text-indent: 15px\" @click=\"handleDate(index)\" :class=\"addColor(index)\"\r\n v-for=\"(item, index) in dateList\" :key=\"index\">\r\n {{ item }}\r\n </div>\r\n </div> -->\r\n <!-- </div> -->\r\n </div>\r\n\r\n <div class=\"content3\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >年度总用电量 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.xczydl\"\r\n >{{ CompanyInfo.xczydl }}\r\n <span style=\"font-size: 18px; color: #fff\">万kwh</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >最大设备规模 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.zdsbgm\"\r\n >{{ CompanyInfo.zdsbgm }}\r\n <span style=\"font-size: 18px; color: #fff\">吨/日</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >最小设备规模 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.zxsbgm\"\r\n >{{ CompanyInfo.zxsbgm }}\r\n <span style=\"font-size: 18px; color: #fff\">吨/日</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"detailen\"></div>\r\n </div>\r\n <!-- <div class=\"two\" style=\"height: 340px\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">盐都供电质量统计</div>\r\n </div>\r\n <div id=\"detailedTwo\"></div>\r\n </div> -->\r\n <div class=\"three\" style=\"height: 48%; width: 100%\">\r\n <div\r\n class=\"cartitle\"\r\n @click=\"routerTo('数字化排涝抗旱辅助及检修辅助决策')\"\r\n >\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/btjt.png\" alt=\"\" />\r\n <span>数字化排涝抗旱辅助及检修辅助决策</span>\r\n <img src=\"./../assets/indexN/btjt1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >辖区管理供电所 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.glgds\"\r\n >{{ CompanyInfo.glgds }}\r\n <span style=\"font-size: 18px; color: #fff\">个</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >辖区管理台区 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"orange\"\r\n :text=\"CompanyInfo.gltq\"\r\n >{{ CompanyInfo.gltq }}\r\n <span style=\"font-size: 18px; color: #fff\">个</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line3\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\" class=\"num1\"\r\n >自然村 </span\r\n >\r\n <span\r\n style=\"font-size: 40px; font-weight: 600\"\r\n class=\"numText\"\r\n id=\"yellow\"\r\n :text=\"CompanyInfo.zrc\"\r\n >{{ CompanyInfo.zrc }}\r\n <span style=\"font-size: 18px; color: #fff\">条</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"shuzihua\"></div>\r\n </div>\r\n </div>\r\n <div class=\"realTimeAlarm\" v-show=\"realTimeAlarmShow\">\r\n <div class=\"content3\">\r\n <img src=\"../assets/images/baojing.png\" />\r\n <div>都政线XXX环网柜间隔3发生局部放电故障</div>\r\n </div>\r\n </div>\r\n <div class=\"alarmInformation\" v-show=\"alarmInformationShow\">\r\n <div class=\"top\">\r\n <div class=\"title\">报警详情信息</div>\r\n <div class=\"close\">\r\n <img\r\n @click=\"handleClose\"\r\n src=\"@/assets/images/close.png\"\r\n style=\"cursor: pointer\"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"content3\">\r\n <div class=\"table user_skills\">\r\n <el-table\r\n :data=\"alarmInformationData\"\r\n style=\"width: 100%; height: 100%\"\r\n :header-cell-style=\"{ 'text-align': 'center' }\"\r\n :cell-style=\"{ 'text-align': 'center' }\"\r\n :row-class-name=\"rowClass\"\r\n >\r\n <el-table-column label=\"序号\" width=\"100\" align=\"center\">\r\n <template slot-scope=\"scop\">\r\n {{ scop.$index + 1 }}\r\n </template>\r\n </el-table-column>\r\n <el-table-column\r\n prop=\"cabinet_name\"\r\n label=\"告警位置\"\r\n align=\"center\"\r\n >\r\n <!-- <template slot-scope=\"scope\">\r\n <div v-html=\"scope.row.name\"></div>\r\n </template> -->\r\n </el-table-column>\r\n <!-- <el-table-column prop=\"name\" label=\"间隔\" align=\"center\">\r\n </el-table-column> -->\r\n <el-table-column prop=\"event_desc\" label=\"告警信息\" align=\"center\">\r\n </el-table-column>\r\n <el-table-column prop=\"created_at\" label=\"发生时间\" align=\"center\">\r\n </el-table-column>\r\n </el-table>\r\n </div>\r\n </div>\r\n <el-pagination\r\n @current-change=\"handleCurrentChange\"\r\n :current-page=\"page\"\r\n :page-size=\"pageSize\"\r\n layout=\"prev, pager, next\"\r\n :total=\"totals\"\r\n v-if=\"pageShow\"\r\n >\r\n </el-pagination>\r\n </div>\r\n <!-- <div style=\"height:40px;width:40px\" class=\"suoxiao\">\r\n <img src=\"../assets/images/btnFangDa.png\" style=\"height:40px;width:40px\"/>\r\n </div> -->\r\n <!-- <div class=\"componentShow\" v-if=\"modelOthers\">\r\n <keep-alive>\r\n <component :is=\"componentShow\" :ringMainUnit=\"device\"></component>\r\n </keep-alive>\r\n </div> -->\r\n <!-- 工单统计弹窗 -->\r\n <!-- <div class=\"componentShow\" v-if=\"orderItem != null\">\r\n <component :is=\"orderShow\" :orderItem=\"orderItem\"></component>\r\n </div> -->\r\n\r\n <!-- 故障跳闸明细 -->\r\n <!-- <div class=\"componentShow\" v-if=\"routeItem != null\">\r\n <component :is=\"routeShow\" :routeItem=\"routeItem\"></component>\r\n </div> -->\r\n\r\n <!-- 查询配电线路 -->\r\n <!-- <div\r\n class=\"componentShow\"\r\n style=\"display: block; height: calc(100% - 100px); top: 100px\"\r\n v-if=\"lineItem != null\"\r\n >\r\n <component :is=\"lineShow\" :lineItem=\"lineItem\"></component>\r\n </div> -->\r\n <!-- <audio\r\n controls=\"controls\"\r\n hidden\r\n src=\"../assets/videos/police.wav\"\r\n ref=\"audio\"\r\n ></audio> -->\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n getCompanyInfo,\r\n getLine,\r\n getBanzugz,\r\n getGdtj,\r\n getDwbzgz,\r\n getGdsgdzl,\r\n getPbtyqk,\r\n getCabinetInfo,\r\n getCabinetList,\r\n getfaultReportList,\r\n getCabinetAlarmList,\r\n} from \"../api/index.js\";\r\n//引入echarts\r\nimport * as echarts from \"echarts\";\r\n// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\n// import ringMainUnit from \"./HomePop/ringMainUnit.vue\";\r\nimport routeDetail from \"../component/routeDetail.vue\";\r\n\r\n// 线路详情\r\nimport lineDetail from \"../component/lineDetail.vue\";\r\nexport default {\r\n name: \"home\",\r\n components: {\r\n // ringMainUnit, //环网柜弹窗\r\n // workOrder, //工单统计弹窗\r\n // routeDetail, //线路故障跳闸明细\r\n // lineDetail, //线路详情弹窗\r\n },\r\n data() {\r\n return {\r\n pageShow: true,\r\n totals: 5,\r\n pageSize: 10,\r\n page: 1,\r\n threeImg: require(\"../assets/images/pieBorder.png\"),\r\n\r\n enlargeShow: true,\r\n dataGzList: [\r\n {\r\n bz: \"大冈\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"配网二班\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"配网一班\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"尚庄\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"秦南\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"郭猛\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"大纵湖\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"潘黄\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"学富\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"龙冈\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"西区\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n {\r\n bz: \"楼王\",\r\n chbc: 0,\r\n chcg: 0,\r\n jd: 0,\r\n total: 0,\r\n wchz: 0,\r\n },\r\n ], //年故障数组\r\n dateList: [\"周\", \"月\"],\r\n acolor: true, //是否展示颜色\r\n currentIndex: -1,\r\n alarmInformationData: [],\r\n alarmInformationShow: false, //报警详情信息弹窗\r\n realTimeAlarmShow: false, //实时报警弹窗\r\n modelOthers: false,\r\n componentShow: \"\",\r\n CompanyInfo: {\r\n hsgst: \"3.4\",\r\n rlst: \"0.01\",\r\n nlst: \"0.44\",\r\n xms: \"9.279\",\r\n ysfyzh: \"118.5\",\r\n jhs: \"44\",\r\n sdpbsl: \"12\",\r\n jdpbsl: \"7\",\r\n fhgzpb: \"87\",\r\n ygdkkx: \"99.95\",\r\n pjtdpc: \"0.39\",\r\n pjtdsj: \"0.37\",\r\n ztpf: \"108.3万\",\r\n zydl: \"39.83亿\",\r\n khzs: \"4968\",\r\n xczydl: \"723.6\",\r\n zdsbgm: \"1250\",\r\n zxsbgm: \"3673\",\r\n glgds: \"10\",\r\n gltq: \"13884\",\r\n zrc: \"306\",\r\n },\r\n tableData: [],\r\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n btnActive: 0,\r\n iconGround: [\r\n {\r\n icon: require(\"@/assets/images/huanwanggui.png\"),\r\n name: \"环网柜\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n name: \"分支箱\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/xiangbian.png\"),\r\n name: \"箱变\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/kaibisuo.png\"),\r\n name: \"开闭所\",\r\n },\r\n ],\r\n btnEnlarge: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/btnFangDa.png\"),\r\n },\r\n ],\r\n btnEnlarge1: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/suoxiao.png\"),\r\n },\r\n ],\r\n options: [\r\n {\r\n value: \"\",\r\n label: \"\",\r\n },\r\n ],\r\n value: \"\",\r\n topContent: [\r\n {\r\n name: \"配变数量\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"重复停运台次\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"配变重复停运率\",\r\n count: \"\",\r\n },\r\n ],\r\n device: \"\",\r\n tableData: [],\r\n tableKey: +new Date(),\r\n scrollTop: 0, //table距离顶部距离\r\n option: null,\r\n myChartBin: null,\r\n\r\n gongdanList: [\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"频繁停电\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"处理时间长\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"运检类投诉\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"运检类意见\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"民事赔偿\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"多次停电\",\r\n total: 0,\r\n },\r\n ],\r\n\r\n // 工单\r\n orderItem: null,\r\n\r\n orderShow: \"\",\r\n // 线路故障明细\r\n routeItem: null,\r\n routeShow: \"\",\r\n\r\n // 配电线路\r\n lineItem: null,\r\n lineShow: \"\",\r\n timer: null, //定时器\r\n emergencyList: [], //告警数据\r\n rowTime: \"\",\r\n };\r\n },\r\n created() {},\r\n mounted() {\r\n // this.beginShowing();\r\n // 监听浏览器窗口大小变化\r\n window.onresize = () => {\r\n clearInterval(this.myTimer);\r\n this.beginShowing();\r\n };\r\n window.parent.getLoc();\r\n this.xianDuan();\r\n this.detailedTwo11();\r\n this.horizontalChart();\r\n this.detailedOne();\r\n this.barCharts();\r\n this.detailedFive();\r\n this.shuzihuaCharts();\r\n this.roseCharts();\r\n this.detailen1();\r\n // this.handleDate(0);\r\n\r\n let that = this;\r\n\r\n // //历史故障接口\r\n // let faultData = {\r\n // token: localStorage.getItem(\"token\"),\r\n // pageSize: \"500\",\r\n // page: \"1\",\r\n // };\r\n },\r\n // beforeDestroy() {\r\n // this.dataDestroy(); // 页面摧毁前，关闭定时器\r\n // },\r\n beforeDestroy() {\r\n // 离开当前路由前的操作\r\n clearInterval(this.timer);\r\n this.timer = null;\r\n },\r\n methods: {\r\n //地图画线\r\n xianDuan() {\r\n var canvas = document.getElementById(\"myCanvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n ctx.moveTo(650, 450); // moveTo(x,y) 定义线条开始坐标\r\n ctx.lineTo(735, 250); // lineTo(x,y) 定义线条结束坐标\r\n ctx.strokeStyle = \"orange\";\r\n ctx.lineWidth = 3;\r\n ctx.stroke();\r\n },\r\n routerTo(data) {\r\n if (data == \"盐城地区分布光伏运行监测\") {\r\n this.$router.push(\"/stationBuilding\");\r\n }\r\n if (data == \"盐城东台区供电所数字化分析\") {\r\n this.$router.push(\"/twentyKV\");\r\n }\r\n if (data == \"配网工程全过程物资审计\") {\r\n this.$router.push(\"/thirtyFiveKV\");\r\n }\r\n if (data == \"盐城供电公司配网电能质量管控\") {\r\n this.$router.push(\"/powerQualityControl\");\r\n }\r\n if (data == \"乡村振兴电力综合指数\") {\r\n this.$router.push(\"/ruralRevitalizationPower\");\r\n }\r\n if (data == \"两高行业企业污染监测\") {\r\n this.$router.push(\"/enterprisePollutionMonitoring\");\r\n }\r\n if (data == \"农村生活污水治理设备电量分析\") {\r\n this.$router.push(\"/ruralDomesticSewageTreatment\");\r\n }\r\n if (data == \"数字化排涝抗旱辅助及检修辅助决策\") {\r\n this.$router.push(\"/digitalFloodDrainageDroughtRelief\");\r\n }\r\n },\r\n detailen1() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n grid: {\r\n left: \"0%\", //图表距离容器左侧多少距离\r\n right: \"10%\", //图表距离容器右侧侧多少距离\r\n bottom: \"20%\", //图表距离容器上面多少距离\r\n top: \"10%\", //图表距离容器下面多少距离\r\n containLabel: true, //防止标签溢出\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n },\r\n\r\n data: [\"电量KWH\"],\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"安丰镇\",\r\n \"草堰镇\",\r\n \"龙岗镇\",\r\n \"新丰镇\",\r\n \"伍佑街道\",\r\n \"步凤镇\",\r\n ],\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"\",\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"电量kwh\",\r\n type: \"bar\",\r\n barWidth: 40, // 柱子宽度核心代码，\r\n itemStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n {\r\n //代表渐变色从正上方开始\r\n offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色\r\n color: \"rgba(2,255,255,.1)\",\r\n }, //柱图渐变色\r\n {\r\n offset: 1, //指100%处的颜色\r\n color: \"rgb(2,255,255)\",\r\n },\r\n ]),\r\n label: {\r\n show: true, //开启显示\r\n position: \"top\", //在上方显示\r\n formatter: function (params) {\r\n //核心部分 formatter 可以为字符串也可以是回调\r\n if (params.value) {\r\n //如果当前值存在则拼接\r\n return params.value + \"万\";\r\n } else {\r\n //否则返回个空\r\n return \"\";\r\n }\r\n },\r\n textStyle: {\r\n //数值样式\r\n color: \"#00ffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [320, 332, 301, 334, 390, 288, 299],\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n //班组\r\n getbanzhu() {\r\n getBanzugz({\r\n action: \"detail\",\r\n }).then((res) => {\r\n console.log(res, \"班组故障详情\");\r\n for (let i = 0; i < res.data.data.length; i++) {\r\n if (res.data.data[i].gz_time_deal) {\r\n let date = new Date(res.data.data[i].gz_time_deal);\r\n res.data.data[i].gz_time_deal =\r\n this.$moment(date).format(\"YYYY-MM-DD HH:mm\");\r\n // console.log(res.data.data[i].gz_time_deal,'转换后');\r\n }\r\n if (res.data.data[i].gz_time) {\r\n let time = new Date(res.data.data[i].gz_time);\r\n res.data.data[i].gz_time =\r\n this.$moment(time).format(\"YYYY-MM-DD HH:mm\");\r\n }\r\n this.tableData.push(res.data.data[i]);\r\n }\r\n });\r\n },\r\n //工单\r\n getGongdan() {\r\n getGdtj({ action: \"tongji\" }).then((res) => {\r\n console.log(res, \"工单统计数据\");\r\n let dataList = res.data.data;\r\n\r\n for (let i = 0; i < this.gongdanList.length; i++) {\r\n for (let j = 0; j < res.data.data.length; j++) {\r\n if (\r\n this.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name\r\n ) {\r\n this.gongdanList[i].total = res.data.data[j].total;\r\n this.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\r\n }\r\n }\r\n }\r\n // this.gongdanList = res.data.data;\r\n this.detailedThree(dataList);\r\n // this.$nextTick(() => {\r\n // this.detailedThree(dataList);\r\n // setInterval(() => {\r\n // this.doing();\r\n // }, 200);\r\n // });\r\n });\r\n },\r\n // //表格第一行颜色\r\n rowClass(row, rowIndex) {\r\n if (row.rowIndex === 0) {\r\n return \"rowColor0\";\r\n } else {\r\n return \"\";\r\n }\r\n },\r\n //切换当前页\r\n handleCurrentChange(val) {\r\n this.page = val;\r\n let tableData = [];\r\n if (this.emergencyList.length != 0) {\r\n tableData = this.emergencyList;\r\n if (val == 1) {\r\n this.alarmInformationData = tableData.slice(0, 10);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"\";\r\n } else if (val == 2) {\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n this.alarmInformationData = tableData.slice(10, 20);\r\n } else if (val == 3) {\r\n this.alarmInformationData = tableData.slice(20, 30);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n } else if (val == 4) {\r\n this.alarmInformationData = tableData.slice(30, 40);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n } else if (val == 5) {\r\n this.alarmInformationData = tableData.slice(40, 50);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n }\r\n } else {\r\n return false;\r\n }\r\n },\r\n // 线路详情弹窗\r\n openLineDetail(e) {\r\n // console.log(e);\r\n // var line = e + ''\r\n // console.log(line);\r\n getLine({ action: \"pdxl\" }).then(({ data }) => {\r\n console.log(data);\r\n this.lineShow = \"lineDetail\";\r\n this.lineItem = data.data;\r\n });\r\n },\r\n // 线路故障跳闸明细弹窗\r\n rowHandle(e) {\r\n // console.log(e, \"参数\");\r\n this.routeItem = e;\r\n this.routeShow = \"routeDetail\";\r\n // console.log(this.routeItem,'线路组件名称');\r\n },\r\n // 工单统计的弹窗\r\n openGdDetail(item) {\r\n this.orderItem = item;\r\n this.orderShow = \"workOrder\";\r\n },\r\n // 鼠标进入表格\r\n // mouseover() {\r\n // clearInterval(this.myTimer);\r\n // },\r\n // 鼠标离开表格\r\n mouseout() {\r\n this.roll();\r\n },\r\n //调用unity方法\r\n handleUnity(index, item) {\r\n this.btnActive = index;\r\n this.$refs.iframe.contentWindow.handleChange(item);\r\n },\r\n //选择线路\r\n selectLine(value) {\r\n getLine({\r\n action: \"query\",\r\n line_code: value,\r\n }).then((res) => {\r\n // console.log(res,'选择线路');\r\n if (res.data.data != 0 && res.data.data != null) {\r\n this.$refs.iframe.contentWindow.handleChangeLine(\r\n res.data.data.line_name\r\n );\r\n } else if (res.data.data == null) {\r\n this.$refs.iframe.contentWindow.handleChangeLine(\"\");\r\n }\r\n });\r\n },\r\n detailedOne() {\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n legend: {\r\n textStyle: {\r\n fontSize: 18, //字体大小\r\n color: \"#ffffff\", //字体颜色\r\n },\r\n\r\n data: [\"配变停电\"],\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"亭湖区\",\r\n \"东台市\",\r\n \"建湖县\",\r\n \"阜宁县\",\r\n \"响水县\",\r\n \"滨海县\",\r\n \"射阳县\",\r\n \"大丰区\",\r\n ],\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"\",\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"配变停电\",\r\n type: \"bar\",\r\n barWidth: 40, // 柱子宽度核心代码，\r\n itemStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n {\r\n //代表渐变色从正上方开始\r\n offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色\r\n color: \"rgba(2,255,255,.1)\",\r\n }, //柱图渐变色\r\n {\r\n offset: 1, //指100%处的颜色\r\n color: \"rgb(2,255,255)\",\r\n },\r\n ]),\r\n label: {\r\n show: true, //开启显示\r\n position: \"top\", //在上方显示\r\n textStyle: {\r\n //数值样式\r\n color: \"#00ffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [5109, 5520, 5354, 5511, 4789, 5254, 5411, 4889],\r\n },\r\n ],\r\n };\r\n\r\n myChart.setOption(option);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n shuzihuaCharts() {\r\n let myChart = this.$echarts.init(document.getElementById(\"shuzihua\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"cross\",\r\n crossStyle: {\r\n color: \"#999\",\r\n },\r\n },\r\n },\r\n grid: {\r\n left: \"5%\", //图表距离容器左侧多少距离\r\n right: \"8%\", //图表距离容器右侧侧多少距离\r\n bottom: \"20%\", //图表距离容器上面多少距离\r\n top: \"15%\", //图表距离容器下面多少距离\r\n containLabel: true, //防止标签溢出\r\n },\r\n legend: [\r\n {\r\n x: \"center\",\r\n data: [\r\n \"投运15年以上设备数量\",\r\n \"统计时间所辖线路设备数量\",\r\n \"设备老化占比\",\r\n ],\r\n textStyle: {\r\n fontSize: 18,\r\n color: \"#fff\",\r\n },\r\n },\r\n ],\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"10kv星雨线163\",\r\n \"10kv智谋线183\",\r\n \"10kv朝阳线164\",\r\n \"10kv杨庄线181\",\r\n \"10kv森达线174\",\r\n ],\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n axisLabel: {\r\n rotate: -15, //60度角倾斜显示\r\n interval: 0, //横轴信息全部显示\r\n color: \"#fff\",\r\n fontSize: 20,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 160,\r\n interval: 40,\r\n axisLabel: {\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n {\r\n type: \"value\",\r\n min: 0,\r\n max: 80,\r\n interval: 20,\r\n axisLabel: {\r\n formatter: \"{value}%\",\r\n textStyle: {\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"投运15年以上设备数量\",\r\n type: \"bar\",\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(255,255,0,.2) \" },\r\n { offset: 0.5, color: \"rgb(255,255,0,.6)\" },\r\n { offset: 0, color: \"rgb(255,255,0)\" },\r\n ]),\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [55, 66, 89, 113, 123],\r\n },\r\n {\r\n name: \"统计时间所辖线路设备数量\",\r\n type: \"bar\",\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(2,255,255,.2) \" },\r\n { offset: 0.5, color: \"rgb(2,255,255,.6)\" },\r\n { offset: 0, color: \"rgb(2,255,255)\" },\r\n ]),\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n data: [46, 56, 99, 103, 123],\r\n },\r\n {\r\n name: \"设备老化占比\",\r\n type: \"line\",\r\n yAxisIndex: 1,\r\n tooltip: {\r\n valueFormatter: function (value) {\r\n return value;\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"orange\",\r\n lineStyle: {\r\n color: \"orange\",\r\n },\r\n },\r\n },\r\n data: [20, 40, 60, 80, 67],\r\n },\r\n ],\r\n };\r\n\r\n myChart.setOption(option);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n color: fontColor,\r\n fontSize: 18, // 文字大小\r\n },\r\n axisLine: {\r\n show: true,\r\n lineStyle: {\r\n color: \"#397cbc\",\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"0:00\",\r\n \"3:00\",\r\n \"6:00\",\r\n \"9:00\",\r\n \"12:00\",\r\n \"15:00\",\r\n \"18:00\",\r\n \"21:00\",\r\n \"24:00\",\r\n ],\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"单位：kw\",\r\n min: 0,\r\n max: 1000,\r\n show: true,\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n axisLabel: {\r\n formatter: \"{value}\",\r\n textStyle: {\r\n color: \"#2ad1d2\",\r\n fontSize: 18, // 文字大小\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#27b4c2\",\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n data: [720, 632, 801, 734, 470, 670, 720, 123, 567],\r\n type: \"line\",\r\n symbol: \"none\",\r\n lineStyle: {\r\n color: \"#00ffff\",\r\n width: 2,\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"00ffff\",\r\n lineStyle: {\r\n color: \"00ffff\",\r\n width: 3,\r\n type: \"solid\",\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo11() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n color: fontColor,\r\n fontSize: 18,\r\n },\r\n axisLine: {\r\n show: true,\r\n lineStyle: {\r\n color: \"#397cbc\",\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#195384\",\r\n },\r\n },\r\n data: [\r\n \"0:00\",\r\n \"3:00\",\r\n \"6:00\",\r\n \"9:00\",\r\n \"12:00\",\r\n \"15:00\",\r\n \"18:00\",\r\n \"21:00\",\r\n \"24:00\",\r\n ],\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"单位：kw\",\r\n min: 0,\r\n max: 1000,\r\n show: true,\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n axisLabel: {\r\n formatter: \"{value}\",\r\n textStyle: {\r\n color: fontColor,\r\n fontSize: 18,\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: fontColor,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n data: [720, 632, 801, 734, 470, 670, 720, 123, 567],\r\n type: \"line\",\r\n symbol: \"none\",\r\n lineStyle: {\r\n color: \"#00ffff\",\r\n width: 2,\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: \"00ffff\",\r\n lineStyle: {\r\n color: \"00ffff\",\r\n width: 3,\r\n type: \"solid\",\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n horizontalChart() {\r\n var myChart = this.$echarts.init(\r\n document.getElementById(\"horizontalChart\")\r\n );\r\n var honorData = [\r\n {\r\n name: \"60天内掉电客户数\",\r\n data: [13.4, 12.1, 14.3],\r\n },\r\n {\r\n name: \"60天内掉电总数\",\r\n data: [9.4, 8.1, 7.3],\r\n },\r\n ];\r\n var honorXAxisData = [\"No.3\", \"No.2\", \"No.1\"];\r\n var nameList = [\r\n \"PMS_晨光满园9台区\",\r\n \"滨河华苑3台区\",\r\n \"PMS_晨光满园11台区\",\r\n ];\r\n var option = {\r\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"none\",\r\n },\r\n },\r\n legend: {\r\n right: 20,\r\n top: \"5%\",\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n itemGap: 15,\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 18,\r\n },\r\n },\r\n grid: {\r\n top: \"15%\",\r\n left: \"14%\",\r\n right: \"0%\",\r\n bottom: \"0%\",\r\n },\r\n xAxis: [\r\n {\r\n type: \"value\",\r\n show: false,\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n formatter: function (value) {\r\n return value + \"(万元)\";\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"category\",\r\n offset: 17,\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#00FFFF\",\r\n fontSize: 20, // 文字大小\r\n fontWeight: 700,\r\n interval: 0,\r\n },\r\n\r\n data: honorXAxisData,\r\n },\r\n {\r\n //名称\r\n type: \"category\",\r\n offset: -10,\r\n position: \"left\",\r\n axisLine: {\r\n show: false,\r\n },\r\n inverse: true,\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: \"#fff\",\r\n align: \"left\",\r\n verticalAlign: \"bottom\",\r\n lineHeight: 40,\r\n fontSize: 20,\r\n },\r\n data: nameList,\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"60天内掉电客户数\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"25%\",\r\n barMinHeight: 20,\r\n barGap: 15, // 柱图之间的间距\r\n itemStyle: {\r\n //自定义颜色\r\n // normal: { color: \"orange\" },\r\n color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [\r\n {\r\n //代表渐变色从正上方开始\r\n offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色\r\n color: \"rgba(255,165,0,.2)\",\r\n }, //柱图渐变色\r\n {\r\n offset: 1, //指100%处的颜色\r\n color: \"rgb(255,165,0)\",\r\n },\r\n ]),\r\n },\r\n label: {\r\n normal: {\r\n show: true,\r\n position: [\"80%\", \"-100%\"],\r\n formatter: function (params) {\r\n return params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n\r\n data: honorData[0].data,\r\n },\r\n {\r\n name: \"60天内掉电总数\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"25%\",\r\n itemStyle: {\r\n //自定义颜色\r\n // normal: { color: \"orange\" },\r\n color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [\r\n {\r\n //代表渐变色从正上方开始\r\n offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色\r\n color: \"#005BEA\",\r\n }, //柱图渐变色\r\n {\r\n offset: 1, //指100%处的颜色\r\n color: \"#00C6FB\",\r\n },\r\n ]),\r\n },\r\n label: {\r\n normal: {\r\n show: true,\r\n position: [\"80%\", \"-100%\"],\r\n formatter: function (params) {\r\n return params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n data: honorData[1].data,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n barCharts() {\r\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n let value = 18;\r\n let legendName = [\"华北\", \"华中\", \"华东\", \"华南\", \"东北\", \"西北\"];\r\n var option = {\r\n // backgroundColor: '#031845',\r\n // title:{\r\n // text:\"123\",\r\n // left:'center',\r\n // top:'45%',\r\n // textStyle:{\r\n // color:\"#FFF\",\r\n // fontSize:\"80px\",\r\n\r\n // }\r\n // },\r\n tooltip: {\r\n trigger: \"item\",\r\n formatter: \"{b} : {d}% <br/> {c}\",\r\n },\r\n // graphic: {\r\n // elements: [\r\n // {\r\n // type: 'text',\r\n // left: 'center', // 相对父元素居中\r\n // top: 'center', // 相对父元素上下的位置\r\n // style: {\r\n // fill: '#FFF',\r\n // text: ['357'],\r\n // zlevel:\"100\",\r\n // font: '80px Arial Normal',\r\n // }\r\n // }]\r\n // },\r\n // title: {\r\n // text:'总考生数',\r\n // left:'center',\r\n // top:'center',\r\n // padding:[24,0],\r\n // textStyle:{\r\n // color:'#fff',\r\n // fontSize:18*scale,\r\n // align:'center'\r\n // }\r\n // },\r\n title: {\r\n subtext: \"59.53万\",\r\n text: \"总计\",\r\n x: \"center\",\r\n y: \"40%\",\r\n textStyle: {\r\n fontSize: 24,\r\n fontWeight: \"normal\",\r\n color: \"#00FFFF\",\r\n },\r\n subtextStyle: {\r\n fontSize: 28,\r\n fontWeight: \"normal\",\r\n align: \"center\",\r\n color: \"#CCCCCC\",\r\n },\r\n },\r\n series: [\r\n {\r\n type: \"pie\",\r\n radius: [\"80\", \"120\"],\r\n center: [\"50%\", \"50%\"],\r\n color: [\"#80C269\", \"#00FFFF\", \"#0090F1\", \"#FFA800\", \"#4658F6\"],\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 5,\r\n borderColor: \"#031845\",\r\n },\r\n },\r\n data: [\r\n {\r\n value: 27,\r\n name: \"国网大丰市供电公司\",\r\n },\r\n {\r\n value: 30,\r\n name: \"国网射阳县供电公司\",\r\n },\r\n {\r\n value: 24,\r\n name: \"开发区供电服务中心\",\r\n },\r\n {\r\n value: 27,\r\n name: \"盐城运维检修部\",\r\n },\r\n {\r\n value: 27,\r\n name: \"设备管理部\",\r\n },\r\n {\r\n value: 27,\r\n name: \"国网响水县供电公司\",\r\n },\r\n ],\r\n labelLine: {\r\n normal: {\r\n show: true,\r\n length: 20,\r\n length2: 10,\r\n lineStyle: {\r\n color: \"#CCCCCC\",\r\n width: 2,\r\n },\r\n },\r\n },\r\n label: {\r\n normal: {\r\n formatter: \"{b|{b}}\\n{hr|}\\n{c|{c}%}\",\r\n rich: {\r\n b: {\r\n fontSize: 20,\r\n color: \"#FFF\",\r\n align: \"left\",\r\n padding: 4,\r\n },\r\n hr: {\r\n borderColor: \"#CCCCCC\",\r\n width: \"100%\",\r\n borderWidth: 2,\r\n height: 0,\r\n },\r\n c: {\r\n fontSize: 20,\r\n align: \"center\",\r\n padding: 4,\r\n color: \"#fff\",\r\n },\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n roseCharts() {\r\n var myChart = this.$echarts.init(document.getElementById(\"roseCharts\"));\r\n var option = {\r\n color: [\r\n \"#EAEA26\",\r\n \"#906BF9\",\r\n \"#FE5656\",\r\n \"#01E17E\",\r\n \"#3DD1F9\",\r\n \"#FFAD05\",\r\n ],\r\n grid: {\r\n left: -100,\r\n top: 50,\r\n bottom: 10,\r\n right: 10,\r\n containLabel: true,\r\n },\r\n tooltip: {\r\n trigger: \"item\",\r\n formatter: \"{b} : {c} ({d}%)\",\r\n },\r\n\r\n polar: {},\r\n angleAxis: {\r\n interval: 1,\r\n type: \"category\",\r\n data: [],\r\n z: 10,\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#0B4A6B\",\r\n width: 1,\r\n type: \"solid\",\r\n },\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n show: true,\r\n color: \"#0B4A6B\",\r\n margin: 8,\r\n fontSize: 16,\r\n },\r\n },\r\n radiusAxis: {\r\n min: 40,\r\n max: 120,\r\n interval: 20,\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#0B3E5E\",\r\n width: 1,\r\n type: \"solid\",\r\n },\r\n },\r\n axisLabel: {\r\n formatter: \"{value} %\",\r\n show: false,\r\n padding: [0, 0, 20, 0],\r\n color: \"#0B3E5E\",\r\n fontSize: 16,\r\n },\r\n splitLine: {\r\n lineStyle: {\r\n color: \"#0B3E5E\",\r\n width: 2,\r\n type: \"solid\",\r\n },\r\n },\r\n },\r\n calculable: true,\r\n series: [\r\n {\r\n type: \"pie\",\r\n radius: [\"5%\", \"10%\"],\r\n hoverAnimation: false,\r\n labelLine: {\r\n normal: {\r\n show: false,\r\n length: 30,\r\n length2: 55,\r\n },\r\n emphasis: {\r\n show: false,\r\n },\r\n },\r\n data: [\r\n {\r\n name: \"\",\r\n value: 0,\r\n itemStyle: {\r\n normal: {\r\n color: \"#0B4A6B\",\r\n },\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n type: \"pie\",\r\n radius: [\"90%\", \"95%\"],\r\n hoverAnimation: false,\r\n labelLine: {\r\n normal: {\r\n show: false,\r\n length: 30,\r\n length2: 55,\r\n },\r\n emphasis: {\r\n show: false,\r\n },\r\n },\r\n name: \"\",\r\n data: [\r\n {\r\n name: \"\",\r\n value: 0,\r\n itemStyle: {\r\n normal: {\r\n color: \"#0B4A6B\",\r\n },\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n stack: \"a\",\r\n type: \"pie\",\r\n radius: [\"20%\", \"80%\"],\r\n roseType: \"area\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n formatter: \"{b} {d} %\",\r\n textStyle: {\r\n fontSize: 20,\r\n color: \"#fff\",\r\n },\r\n position: \"outside\",\r\n },\r\n emphasis: {\r\n show: true,\r\n },\r\n },\r\n labelLine: {\r\n normal: {\r\n show: true,\r\n length: 20,\r\n length2: 35,\r\n borderWidth: 4,\r\n },\r\n emphasis: {\r\n show: false,\r\n },\r\n },\r\n data: [\r\n {\r\n value: 15,\r\n name: \"东台市\",\r\n },\r\n {\r\n value: 7,\r\n name: \"阜宁县\",\r\n },\r\n {\r\n value: 14,\r\n name: \"盐都区\",\r\n },\r\n {\r\n value: 23,\r\n name: \"滨海县\",\r\n },\r\n {\r\n value: 18,\r\n name: \"建湖县\",\r\n },\r\n {\r\n value: 35,\r\n name: \"射阳县\",\r\n },\r\n {\r\n value: 31,\r\n name: \"大丰区\",\r\n },\r\n {\r\n value: 28,\r\n name: \"响水县\",\r\n },\r\n {\r\n value: 36,\r\n name: \"亭湖区\",\r\n },\r\n ],\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedThree(dataList) {\r\n // console.log(this.threeImg,'图片');\r\n // var equipment = [dataList.yjlts, dataList.yjlyj];\r\n var that = this;\r\n // console.log(that,'指向');\r\n var colorList = [\r\n \"#0090ff\",\r\n \"#06d3c4\",\r\n \"#66b0ed\",\r\n \"#7cb79d\",\r\n \"#2361b4\",\r\n \"rgb(198,123,244)\",\r\n ];\r\n var colorList1 = [\"rgb(198,123,244)\", \"#2361b4\"];\r\n // 饼图数据\r\n var threeList = dataList.map((ele) => {\r\n return { name: ele.gd_type_name, value: ele.total };\r\n });\r\n // console.log(threeList, \"饼图数据\");\r\n // var legendData = dataList.concat(\r\n // {\r\n // value: equipment[0],\r\n // name: \"运检类投诉\",\r\n // },\r\n // {\r\n // value: equipment[1],\r\n // name: \"运检类意见\",\r\n // }\r\n // );\r\n this.myChartBin = this.$echarts.init(\r\n document.getElementById(\"detailedThree\")\r\n );\r\n // var graphicList = [];\r\n // legendData.forEach((ele, index) => {\r\n // if (index <= 2) {\r\n // graphicList.push({\r\n // type: \"image\",\r\n // style: {\r\n // image: this.threeImg,\r\n // width: 164,\r\n // height: 41,\r\n // x: 250,\r\n // y: 55 * (index + 1),\r\n // },\r\n // });\r\n // } else {\r\n // graphicList.push({\r\n // type: \"image\",\r\n // style: {\r\n // image: this.threeImg,\r\n // width: 164,\r\n // height: 41,\r\n // x: 424,\r\n // y: 55 * (index - 2),\r\n // },\r\n // });\r\n // }\r\n // });\r\n this.option = {\r\n borderColor: \"none\",\r\n\r\n tooltip: {\r\n formatter: function (param) {\r\n if (param.data.type == null) {\r\n return param.data.name + \":\" + param.value + \"个\";\r\n } else {\r\n return param.data.name + \":\" + param.value + \"个\";\r\n }\r\n },\r\n },\r\n\r\n legend: {\r\n icon: \"pin\",\r\n // height: 90,\r\n top: 20,\r\n show: false,\r\n // bottom:0,\r\n // itemGap: 40,\r\n // lineHeight: 80,\r\n // padding: [30, 0, 30, 0],\r\n // right: '20%',\r\n // orient: \"vertical\", //垂直显示\r\n x: \"center\", //延Y轴居中\r\n data: dataList.map((ele) => {\r\n return ele.gd_type_name;\r\n }),\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 15,\r\n\r\n // width:20,\r\n // height:60,\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"\",\r\n type: \"pie\",\r\n radius: [0, \"70%\"],\r\n center: [\"50%\", \"50%\"],\r\n startAngle: 60, //默认角度\r\n label: {\r\n position: \"inner\",\r\n show: false,\r\n },\r\n\r\n itemStyle: {\r\n normal: {\r\n borderColor: \"none\",\r\n borderWidth: 2,\r\n fontSize: 16,\r\n color: function (params) {\r\n return colorList[params.dataIndex];\r\n },\r\n },\r\n },\r\n\r\n selectedMode: \"single\",\r\n data: threeList,\r\n },\r\n // {\r\n // name: \"运检类\",\r\n // type: \"pie\",\r\n // radius: [\"70%\", \"80%\"],\r\n // center: [\"20%\", \"50%\"],\r\n // startAngle: 30,\r\n // itemStyle: {\r\n // normal: {\r\n // fontSize: 16,\r\n // color: function (params) {\r\n // return colorList1[params.dataIndex];\r\n // },\r\n // // color:'#F4C907',\r\n // },\r\n // },\r\n // label: {\r\n // normal: {\r\n // formatter: function (params) {\r\n // return params.data.name + \":\" + params.data.type + \"个\";\r\n // },\r\n // color: \"auto\",\r\n // show: false,\r\n // fontSize: 16,\r\n // },\r\n // },\r\n\r\n // data: [\r\n // {\r\n // value: equipment[0],\r\n // name: \"运检类投诉\",\r\n // type: equipment[0],\r\n // },\r\n // {\r\n // value: equipment[1],\r\n // name: \"运检类意见\",\r\n // type: equipment[1],\r\n // },\r\n // ],\r\n // animation: false,\r\n // },\r\n ],\r\n };\r\n this.myChartBin.setOption(this.option);\r\n window.addEventListener(\"resize\", () => {\r\n this.myChartBin.resize();\r\n });\r\n },\r\n doing() {\r\n this.option.series[0].startAngle = this.option.series[0].startAngle - 5;\r\n this.option.series[1].startAngle = this.option.series[1].startAngle - 5;\r\n this.myChartBin.setOption(this.option);\r\n },\r\n detailedFour(dataList) {\r\n let yearBzData = [];\r\n let yearChcg = [];\r\n let yearChbc = [];\r\n let yearWchz = [];\r\n let yearJieDi = [];\r\n let yearFenJi = [];\r\n for (let i = 0; i < dataList.length; i++) {\r\n yearBzData.push(dataList[i].bz);\r\n yearChcg.push(dataList[i].chcg);\r\n yearChbc.push(dataList[i].chbc);\r\n yearWchz.push(dataList[i].wchz);\r\n yearJieDi.push(dataList[i].jd);\r\n yearFenJi.push(dataList[i].fjbh);\r\n }\r\n // console.log(yearJieDi,'接地数据');\r\n let that = this;\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedFour\"));\r\n var option = {\r\n tooltip: {\r\n axisPointer: {\r\n type: \"shadow\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 16,\r\n },\r\n },\r\n },\r\n grid: {\r\n borderWidth: 0,\r\n top: 30,\r\n bottom: \"17%\",\r\n left: \"6%\",\r\n right: \"6%\",\r\n textStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n legend: {\r\n icon: \"rect\",\r\n right: \"4%\",\r\n textStyle: {\r\n color: \"#ffffff\",\r\n },\r\n data: [\"重合成功\", \"重合不成\", \"无重合闸\", \"接地\", \"分级保护\"],\r\n },\r\n calculable: true,\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n trigger: \"axis\",\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#fff\",\r\n fontSize: 16,\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n fontSize: 14,\r\n rotate: 30,\r\n },\r\n data: yearBzData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: \"rgb(83,83,83)\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"重合成功\",\r\n type: \"bar\",\r\n stack: \"Total1\",\r\n barMaxWidth: 15,\r\n barGap: \"10%\",\r\n label: {\r\n show: true,\r\n formatter: function (params) {\r\n if (params.value == 0) {\r\n return \"\";\r\n } else {\r\n return params.value;\r\n }\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: \"rgba(194,190,190,2)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgb(194,190,190)\",\r\n },\r\n ]),\r\n borderColor: new that.$echarts.graphic.LinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n [\r\n {\r\n offset: 0,\r\n color: \"rgba(194,190,190,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(194,190,190,0)\",\r\n },\r\n ]\r\n ),\r\n },\r\n },\r\n data: yearChcg,\r\n },\r\n {\r\n name: \"重合不成\",\r\n type: \"bar\",\r\n barMaxWidth: 15,\r\n stack: \"Total1\",\r\n label: {\r\n show: true,\r\n formatter: function (params) {\r\n if (params.value == 0) {\r\n return \"\";\r\n } else {\r\n return params.value;\r\n }\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: \"rgba(86,254,226,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(86,254,226,0)\",\r\n },\r\n ]),\r\n borderColor: new that.$echarts.graphic.LinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n [\r\n {\r\n offset: 0,\r\n color: \"rgba(86,254,226,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(86,254,226,0)\",\r\n },\r\n ]\r\n ),\r\n },\r\n },\r\n data: yearChbc,\r\n },\r\n {\r\n name: \"无重合闸\",\r\n type: \"bar\",\r\n barMaxWidth: 15,\r\n stack: \"Total1\",\r\n label: {\r\n show: true,\r\n formatter: function (params) {\r\n if (params.value == 0) {\r\n return \"\";\r\n } else {\r\n return params.value;\r\n }\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: \"rgba(237,125,49,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(237,125,49,0)\",\r\n },\r\n ]),\r\n borderColor: new that.$echarts.graphic.LinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n [\r\n {\r\n offset: 0,\r\n color: \"rgba(237,125,49,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(237,125,49,0)\",\r\n },\r\n ]\r\n ),\r\n barBorderRadius: 0,\r\n },\r\n },\r\n data: yearWchz,\r\n },\r\n {\r\n name: \"接地\",\r\n type: \"bar\",\r\n barMaxWidth: 15,\r\n stack: \"Total1\",\r\n label: {\r\n show: true,\r\n formatter: function (params) {\r\n if (params.value == 0) {\r\n return \"\";\r\n } else {\r\n return params.value;\r\n }\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: \"rgba(35,160,247,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(35,160,247,0)\",\r\n },\r\n ]),\r\n borderColor: new that.$echarts.graphic.LinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n [\r\n {\r\n offset: 0,\r\n color: \"rgba(35,160,247,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(35,160,247,0)\",\r\n },\r\n ]\r\n ),\r\n barBorderRadius: 0,\r\n },\r\n },\r\n data: yearJieDi,\r\n },\r\n {\r\n name: \"分级保护\",\r\n type: \"bar\",\r\n barMaxWidth: 15,\r\n stack: \"Total1\",\r\n label: {\r\n show: true,\r\n formatter: function (params) {\r\n if (params.value == 0) {\r\n return \"\";\r\n } else {\r\n return params.value;\r\n }\r\n },\r\n },\r\n itemStyle: {\r\n normal: {\r\n color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n {\r\n offset: 0,\r\n color: \"rgba(156,73,200,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(156,73,200,0)\",\r\n },\r\n ]),\r\n borderColor: new that.$echarts.graphic.LinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n [\r\n {\r\n offset: 0,\r\n color: \"rgba(156,73,200,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(156,73,200,0)\",\r\n },\r\n ]\r\n ),\r\n barBorderRadius: 0,\r\n },\r\n },\r\n data: yearFenJi,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedFive() {\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n grid: {\r\n left: \"5%\", //图表距离容器左侧多少距离\r\n right: \"5%\", //图表距离容器右侧侧多少距离\r\n bottom: \"0%\", //图表距离容器上面多少距离\r\n top: \"30%\", //图表距离容器下面多少距离\r\n containLabel: true, //防止标签溢出\r\n },\r\n // legend: {\r\n // textStyle: {\r\n // fontSize: 18, //字体大小\r\n // color: \"#ffffff\", //字体颜色\r\n // },\r\n\r\n // data: [\"配变名称\"],\r\n // },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\r\n \"长荡镇\",\r\n \"河海镇\",\r\n \"黄沙港镇\",\r\n \"临海镇\",\r\n \"兴桥镇\",\r\n \"合德镇\",\r\n \"四明镇\",\r\n \"特庸镇\",\r\n ],\r\n axisLabel: {\r\n interval: 0, //横轴信息全部显示\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"\",\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 18,\r\n },\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"dashed\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"配变名称\",\r\n type: \"bar\",\r\n barWidth: 40, // 柱子宽度核心代码\r\n itemStyle: {\r\n normal: {\r\n color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n {\r\n //代表渐变色从正上方开始\r\n offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色\r\n color: \"rgba(232, 155, 0,.3)\",\r\n }, //柱图渐变色\r\n {\r\n offset: 1, //指100%处的颜色\r\n color: \"rgb(232, 155, 0)\",\r\n },\r\n ]),\r\n label: {\r\n show: true, //开启显示\r\n position: \"top\", //在上方显示\r\n textStyle: {\r\n //数值样式\r\n color: \"rgb(232, 155, 0)\",\r\n fontSize: 18,\r\n },\r\n },\r\n },\r\n },\r\n data: [87.69, 84.69, 82.69, 83.69, 77.69, 67.69, 57.69, 47.69],\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n //报警详情信息弹窗\r\n enlargeBtn(index) {\r\n let that = this;\r\n this.pageShow = false;\r\n if (index == 0) {\r\n // let endDate = this.$moment(new Date())\r\n // .format(\"YYYY-MM-DD hh:mm:ss\");\r\n // let startDate = this.$moment(new Date()).subtract(1,'h').format('YYYY-MM-DD hh:mm:ss')\r\n // this.page = 1;\r\n // let cabData = {\r\n // token: localStorage.getItem(\"token\"),\r\n // pageSize: this.pageSize,\r\n // page: this.page,\r\n // sn: \"\",\r\n // startDate: startDate,\r\n // endDate: endDate,\r\n // };\r\n // getCabinetAlarmList(cabData).then((res) => {\r\n // if (res.data.data.data != null) {\r\n // this.totals = res.data.data.total;\r\n // this.alarmInformationData = res.data.data.data;\r\n // }\r\n // });\r\n this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n this.$nextTick(() => {\r\n this.$refs.audio.play();\r\n });\r\n this.alarmInformationShow = true;\r\n this.$nextTick(() => {\r\n this.pageShow = true;\r\n });\r\n this.realTimeAlarmShow = false;\r\n this.handleCurrentChange(1);\r\n } else if (index == 1) {\r\n this.enlargeShow = false;\r\n // this.$refs.iframe.contentWindow.fullscreen(1);\r\n document.getElementById(\"left\").style.display = \"none\";\r\n document.getElementById(\"right\").style.display = \"none\";\r\n // document.getElementById(\"middle\").style.width = \"100%\";\r\n // document.getElementById(\"middle\").style.height = \"100%\";\r\n document.getElementById(\"detailed\").style.display = \"none\";\r\n document.getElementById(\"threeModel\").style.height = \"100%\";\r\n document.getElementById(\"threeModel\").style.width = \"100%\";\r\n }\r\n },\r\n //报警详情信息弹窗\r\n enlargeBtn1(index) {\r\n this.pageShow = false;\r\n if (index == 0) {\r\n // this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n // this.$refs.audio.play();\r\n // this.alarmInformationShow = true;\r\n // this.realTimeAlarmShow = false;\r\n this.$refs.audio.currentTime = 0; //从头开始播放提示音\r\n this.$nextTick(() => {\r\n this.$refs.audio.play();\r\n });\r\n this.alarmInformationShow = true;\r\n this.$nextTick(() => {\r\n this.pageShow = true;\r\n });\r\n this.realTimeAlarmShow = false;\r\n this.handleCurrentChange(1);\r\n } else if (index == 1) {\r\n this.enlargeShow = true;\r\n // this.$refs.iframe.contentWindow.fullscreen(1);\r\n document.getElementById(\"left\").style.display = \"flex\";\r\n document.getElementById(\"left\").style.width = \"17.18%\";\r\n document.getElementById(\"right\").style.display = \"flex\";\r\n document.getElementById(\"right\").style.width = \"17.18%\";\r\n // document.getElementById(\"middle\").style.width = \"55.7%\";\r\n // document.getElementById(\"middle\").style.height = \"100%\";\r\n document.getElementById(\"detailed\").style.display = \"flex\";\r\n document.getElementById(\"detailed\").style.height = \"350px\";\r\n }\r\n },\r\n handleClose() {\r\n this.alarmInformationShow = false;\r\n this.$refs.audio.pause();\r\n this.page = 1;\r\n this.totals = 0;\r\n },\r\n handleDate(index) {\r\n this.currentIndex = index;\r\n // if (index == 0) {\r\n //周配变停运\r\n getPbtyqk({\r\n action: index == 0 ? \"week\" : \"month\",\r\n }).then((res) => {\r\n let dataPbty = [];\r\n dataPbty = res.data.data;\r\n this.detailedFive(dataPbty);\r\n let dataPb = [];\r\n let dataCf = [];\r\n for (let i = 0; i < dataPbty.length; i++) {\r\n dataPb.push(dataPbty[i].pbsl);\r\n dataCf.push(dataPbty[i].cftytc);\r\n }\r\n this.topContent[0].count = dataPb.reduce((x, y) => x + y);\r\n this.topContent[1].count = dataCf.reduce((x, y) => x + y);\r\n let pbCount =\r\n (this.topContent[1].count / this.topContent[0].count) * 100;\r\n let pbCountString = pbCount.toString();\r\n if (pbCountString.indexOf(\".\") != -1) {\r\n this.topContent[2].count =\r\n pbCountString.substring(0, pbCountString.indexOf(\".\") + 3) + \"%\";\r\n } else {\r\n this.topContent[2].count = pbCountString + \"%\";\r\n }\r\n });\r\n // }else if (index == 1) {\r\n // //月配变停运\r\n // getPbtyqk({\r\n // action:\"month\"\r\n // }).then((res)=>{\r\n // let dataPbty = [];\r\n // dataPbty = res.data.data\r\n // this.detailedFive(dataPbty);\r\n // let dataPb = [];\r\n // let dataCf = [];\r\n // for (let i = 0; i < dataPbty.length; i++) {\r\n // dataPb.push(dataPbty[i].pbsl);\r\n // dataCf.push(dataPbty[i].cftytc);\r\n // }\r\n // this.topContent[0].count = dataPb.reduce((x, y) => x + y)\r\n // this.topContent[1].count = dataCf.reduce((x, y) => x + y)\r\n // let pbCount = (this.topContent[1].count/this.topContent[0].count)*100\r\n // let pbCountString = pbCount.toString()\r\n // if (pbCountString.indexOf(\".\") != -1) {\r\n // this.topContent[2].count = pbCountString.substring(0,pbCountString.indexOf(\".\")+3) + '%'\r\n // }else{\r\n // this.topContent[2].count = pbCountString +'%'\r\n // }\r\n // })\r\n // }\r\n },\r\n addColor(index) {\r\n if (this.currentIndex == index) {\r\n return { active: this.acolor };\r\n }\r\n },\r\n },\r\n watch: {\r\n //监听内容\r\n value(newVal, oldVal) {\r\n if (newVal != oldVal && newVal != \"\") {\r\n this.selectLine(newVal);\r\n } else if (newVal == \"\") {\r\n this.selectLine(\"\");\r\n this.value = \"\";\r\n }\r\n },\r\n rowTime: {\r\n deep: true,\r\n handler(newVal, oldVal) {\r\n console.log(newVal, oldVal, \"pppppppppppppppp\");\r\n if (newVal != oldVal && newVal != \"\" && oldVal != \"\") {\r\n this.enlargeBtn(0);\r\n }\r\n },\r\n },\r\n },\r\n};\r\n</script>\r\n<style lang=\"less\" scoped>\r\n.content3 {\r\n /deep/ .el-table__body td .cell {\r\n white-space: normal !important;\r\n }\r\n}\r\n\r\n.two {\r\n /deep/ .el-table__body-wrapper {\r\n height: 195px !important;\r\n }\r\n}\r\n\r\n// 滚动条的宽度\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar {\r\n width: 6px; // 横向滚动条\r\n height: 6px; // 纵向滚动条 必写\r\n // display: block !important;\r\n}\r\n\r\n// 滚动条的滑块\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {\r\n background-color: rgba(35, 160, 247, 1);\r\n border-radius: 3px;\r\n}\r\n\r\n/deep/ .el-table--scrollable-x .el-table__body-wrapper {\r\n overflow-x: hidden;\r\n}\r\n\r\n.user_skills {\r\n /deep/ .el-table {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table th {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table__header {\r\n width: 100% !important;\r\n height: 70px;\r\n background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n background-size: 100% 100%;\r\n\r\n .cell {\r\n text-align: center !important;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n /deep/ .el-table__header th {\r\n border: none;\r\n padding: 0;\r\n height: 48px;\r\n\r\n .cell {\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n &.el-table__cell.is-leaf {\r\n border: none !important;\r\n }\r\n }\r\n\r\n /deep/ .el-table tr {\r\n background-color: transparent;\r\n }\r\n\r\n /deep/ .el-table--enable-row-transition .el-table__body td,\r\n .el-table .cell {\r\n background-color: transparent !important;\r\n border: none;\r\n color: #ffffff;\r\n }\r\n\r\n /deep/ .el-table__body td .cell {\r\n white-space: nowrap;\r\n // word-break: break-all;\r\n display: flex !important;\r\n justify-content: center !important;\r\n }\r\n\r\n /deep/ .el-table th.el-table__cell > .cell {\r\n color: rgb(86, 254, 226);\r\n }\r\n\r\n /deep/.el-table__body,\r\n .el-table__footer,\r\n .el-table__header {\r\n width: 100% !important;\r\n }\r\n\r\n /deep/ .el-table__body td .cell {\r\n // width: 60px !important;\r\n }\r\n\r\n // &::before {\r\n // //去除底部白线\r\n // left: 0;\r\n // bottom: 0;\r\n // width: 100%;\r\n // height: 0px;\r\n // }\r\n .el-table::before {\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.home {\r\n width: 100%;\r\n height: 100%;\r\n padding: 15px 28px;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n box-sizing: border-box;\r\n #textleft {\r\n margin-left: 30px !important;\r\n }\r\n\r\n .left {\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n\r\n & > div {\r\n width: 100%;\r\n background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n background-size: 100% 100%;\r\n position: relative;\r\n\r\n .cartitle {\r\n height: 52px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 21px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 52px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n }\r\n\r\n .content3 {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line3 {\r\n width: 30%;\r\n // display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .total {\r\n // display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n // margin-bottom: 15%;\r\n margin-bottom: 1%;\r\n height: 100%;\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n width: 100%;\r\n\r\n .num1 {\r\n background: url(\"../assets/indexN/zsjbtk.png\") no-repeat;\r\n width: 100%;\r\n height: 100%;\r\n background-size: 100%;\r\n line-height: 250%;\r\n text-align: center;\r\n }\r\n .numText {\r\n color: #ffffff;\r\n background: url(\"../assets/indexN/main.png\") no-repeat;\r\n background-size: 100%;\r\n width: 100%;\r\n height: 74px;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(254, 209, 86) !important;\r\n -webkit-mask: linear-gradient(\r\n to top,\r\n rgb(254, 162, 86),\r\n transparent\r\n );\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n #detailedTwo1 {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 100%;\r\n height: calc(100% - 170px);\r\n }\r\n\r\n #horizontalChart {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n\r\n #barCharts {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 60%;\r\n height: calc(100% - 150px);\r\n position: absolute;\r\n top: 28%;\r\n left: 33%;\r\n }\r\n }\r\n }\r\n\r\n .left1 {\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n\r\n & > div {\r\n width: 100%;\r\n background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n background-size: 100% 100%;\r\n\r\n .cartitle {\r\n height: 52px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 21px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 52px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n }\r\n\r\n .content3 {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line3 {\r\n width: 30%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .total {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 1%;\r\n height: 100%;\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n width: 100%;\r\n\r\n .num1 {\r\n background: url(\"../assets/indexN/zsjbtk.png\") no-repeat;\r\n width: 100%;\r\n // height: 100%;\r\n background-size: 100%;\r\n line-height: 250%;\r\n text-align: center;\r\n }\r\n .numText {\r\n color: #ffffff;\r\n background: url(\"../assets/indexN/main.png\") no-repeat;\r\n background-size: 100%;\r\n width: 100%;\r\n height: 74px;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(254, 209, 86) !important;\r\n -webkit-mask: linear-gradient(\r\n to top,\r\n rgb(254, 162, 86),\r\n transparent\r\n );\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n #detailedTwo1 {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n }\r\n #detailedOne {\r\n width: 100%;\r\n height: calc(100% - 160px);\r\n }\r\n #horizontalChart {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 100%;\r\n height: calc(100% - 200px);\r\n }\r\n }\r\n }\r\n\r\n .middle {\r\n // width: 1590px;\r\n width: 32.7%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n .imgboxone {\r\n background: url(\"../assets/indexN/midzsj.png\") no-repeat;\r\n background-size: 100%;\r\n width: 65%;\r\n height: 20%;\r\n position: relative;\r\n top: -28%;\r\n left: 25%;\r\n .contents {\r\n // height: 90%;\r\n position: absolute;\r\n padding: 10px;\r\n height: 100%;\r\n width: 96%;\r\n display: flex;\r\n flex-direction: row;\r\n /* 平分剩余空间 */\r\n justify-content: space-around;\r\n .lines {\r\n width: 106%;\r\n padding: 10px 0 0 0px;\r\n // background: url(\"../assets/index/mainMin.png\") no-repeat;\r\n }\r\n\r\n .total {\r\n .num {\r\n // display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: left;\r\n color: #ffffff;\r\n span {\r\n font-size: 18px;\r\n }\r\n h5 {\r\n font-size: 34px;\r\n }\r\n .yellow {\r\n padding-top: 30px;\r\n color: yellow;\r\n font-size: 24px;\r\n }\r\n .orange {\r\n padding-top: 30px;\r\n color: orange;\r\n font-size: 24px;\r\n }\r\n .yellows {\r\n padding-top: 20px;\r\n color: yellow;\r\n font-size: 24px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .imgboxtwo1 {\r\n background: url(\"../assets/indexN/tk.png\") no-repeat;\r\n background-size: 100%;\r\n float: right;\r\n right: 8%;\r\n top: 20%;\r\n width: 28vh;\r\n height: 100%;\r\n position: relative;\r\n .content2 {\r\n padding: 5px;\r\n box-sizing: border-box;\r\n // display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line1 {\r\n width: 100%;\r\n height: 100%;\r\n margin-left: 5%;\r\n text-align: left;\r\n font-size: 24px;\r\n color: #fff;\r\n }\r\n }\r\n }\r\n .map {\r\n background: url(\"../assets/indexN/map.png\") no-repeat;\r\n vertical-align: middle;\r\n display: table-cell;\r\n text-align: center;\r\n margin-left: -20%;\r\n .leftimg {\r\n position: absolute;\r\n left: 34.5%;\r\n }\r\n .rightimg {\r\n position: absolute;\r\n right: 35%;\r\n }\r\n .allimg {\r\n position: relative;\r\n left: 28.5%;\r\n top: 34%;\r\n }\r\n }\r\n }\r\n\r\n .right {\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n\r\n .enselect {\r\n position: absolute;\r\n right: 30px;\r\n top: 50%;\r\n img {\r\n float: right;\r\n }\r\n .text {\r\n float: right;\r\n // right: -10px;\r\n margin-right: -60px;\r\n font-size: 20px;\r\n\r\n color: #fff;\r\n }\r\n }\r\n & > div {\r\n width: 100%;\r\n background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n background-size: 100% 100%;\r\n position: relative;\r\n .cartitle {\r\n height: 52px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 21px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 52px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n }\r\n .content3 {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n .contentUl {\r\n display: flex;\r\n flex-wrap: wrap;\r\n height: 20%;\r\n width: 100%;\r\n position: relative;\r\n .top {\r\n position: relative;\r\n flex-basis: calc(100% / 3);\r\n height: 50%;\r\n left: 33%;\r\n img {\r\n margin-top: 15%;\r\n }\r\n .texts {\r\n color: orange;\r\n position: absolute;\r\n z-index: 2;\r\n left: 32%;\r\n top: 25%;\r\n align-items: center;\r\n font-size: 32px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 10%;\r\n }\r\n }\r\n .top1 {\r\n position: absolute;\r\n flex-basis: calc(100% / 3);\r\n height: 100%;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .texts {\r\n color: #fff;\r\n position: absolute;\r\n z-index: 2;\r\n left: 0%;\r\n top: 27%;\r\n width: 87%;\r\n height: 100%;\r\n padding-top: 27%;\r\n background: url(\"../assets/indexN/xctb2.png\") no-repeat;\r\n background-size: 100%;\r\n align-items: center;\r\n font-size: 24px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 130%;\r\n }\r\n }\r\n .top2 {\r\n position: absolute;\r\n flex-basis: calc(100% / 3);\r\n height: 100%;\r\n left: 21%;\r\n top: -33%;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .texts {\r\n color: #fff;\r\n position: absolute;\r\n z-index: 2;\r\n left: 0%;\r\n top: 27%;\r\n width: 87%;\r\n height: 100%;\r\n padding-top: 27%;\r\n background: url(\"../assets/indexN/xctb2.png\") no-repeat;\r\n background-size: 100%;\r\n align-items: center;\r\n font-size: 24px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 130%;\r\n }\r\n }\r\n .top3 {\r\n position: absolute;\r\n flex-basis: calc(100% / 3);\r\n height: 100%;\r\n left: 29%;\r\n top: 50%;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .texts {\r\n color: #fff;\r\n position: absolute;\r\n z-index: 2;\r\n left: 0%;\r\n top: 27%;\r\n width: 87%;\r\n height: 100%;\r\n padding-top: 27%;\r\n background: url(\"../assets/indexN/xctb2.png\") no-repeat;\r\n background-size: 100%;\r\n align-items: center;\r\n font-size: 24px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 130%;\r\n }\r\n }\r\n .top4 {\r\n position: absolute;\r\n flex-basis: calc(100% / 3);\r\n height: 100%;\r\n left: 64%;\r\n top: 15%;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .texts {\r\n color: #fff;\r\n position: absolute;\r\n z-index: 2;\r\n left: 0%;\r\n top: 27%;\r\n width: 87%;\r\n height: 100%;\r\n padding-top: 27%;\r\n background: url(\"../assets/indexN/xctb2.png\") no-repeat;\r\n background-size: 100%;\r\n align-items: center;\r\n font-size: 24px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 130%;\r\n }\r\n }\r\n .top5 {\r\n position: absolute;\r\n flex-basis: calc(100% / 3);\r\n height: 100%;\r\n left: 82%;\r\n top: -22%;\r\n img {\r\n margin-top: 30%;\r\n }\r\n .texts {\r\n color: #fff;\r\n position: absolute;\r\n z-index: 2;\r\n left: 0%;\r\n top: 27%;\r\n width: 87%;\r\n height: 100%;\r\n padding-top: 27%;\r\n background: url(\"../assets/indexN/xctb2.png\") no-repeat;\r\n background-size: 100%;\r\n align-items: center;\r\n font-size: 24px;\r\n }\r\n h4 {\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n line-height: 1;\r\n padding-top: 130%;\r\n }\r\n }\r\n }\r\n .line3 {\r\n width: 30%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .total {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 1%;\r\n height: 100%;\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n width: 100%;\r\n\r\n .num1 {\r\n background: url(\"../assets/indexN/zsjbtk.png\") no-repeat;\r\n width: 100%;\r\n height: 100%;\r\n background-size: 100%;\r\n line-height: 200%;\r\n text-align: center;\r\n }\r\n .numText {\r\n color: #ffffff;\r\n background: url(\"../assets/indexN/main.png\") no-repeat;\r\n background-size: 100%;\r\n width: 100%;\r\n height: 74px;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(254, 209, 86) !important;\r\n -webkit-mask: linear-gradient(\r\n to top,\r\n rgb(254, 162, 86),\r\n transparent\r\n );\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .one {\r\n .top {\r\n width: 100%;\r\n height: 10%;\r\n display: flex;\r\n justify-content: space-around;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n .topContent {\r\n width: 30%;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n }\r\n }\r\n }\r\n\r\n #detailedThree {\r\n width: 100%;\r\n // height: calc(100% - 52px);\r\n height: 100%;\r\n }\r\n\r\n #detailedTwo {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n }\r\n\r\n #detailedFive {\r\n width: 100%;\r\n height: calc(100% - 190px);\r\n }\r\n }\r\n\r\n .right1 {\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n\r\n & > div {\r\n width: 100%;\r\n background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n background-size: 100% 100%;\r\n position: relative;\r\n .cartitle {\r\n height: 52px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 21px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 52px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n }\r\n .content3 {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line3 {\r\n width: 30%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .total {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 1%;\r\n height: 100%;\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n width: 100%;\r\n\r\n .num1 {\r\n background: url(\"../assets/indexN/zsjbtk.png\") no-repeat;\r\n width: 100%;\r\n // height: 100%;\r\n background-size: 100%;\r\n line-height: 250%;\r\n text-align: center;\r\n }\r\n .numText {\r\n color: #ffffff;\r\n background: url(\"../assets/indexN/main.png\") no-repeat;\r\n background-size: 100%;\r\n width: 100%;\r\n height: 74px;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(254, 209, 86) !important;\r\n -webkit-mask: linear-gradient(\r\n to top,\r\n rgb(254, 162, 86),\r\n transparent\r\n );\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n #detailen {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n #shuzihua {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n .one {\r\n .top {\r\n width: 100%;\r\n height: 10%;\r\n display: flex;\r\n justify-content: space-around;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n .topContent {\r\n width: 30%;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n }\r\n }\r\n }\r\n\r\n #detailedThree {\r\n width: 100%;\r\n // height: calc(100% - 52px);\r\n height: 100%;\r\n }\r\n\r\n #detailedTwo {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n }\r\n\r\n #detailedFive {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n }\r\n\r\n .titleFont {\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(255, 255, 255),\r\n rgb(123, 247, 245)\r\n );\r\n img {\r\n margin: 20px;\r\n }\r\n }\r\n\r\n //弹窗样式\r\n .componentShow {\r\n width: 100%;\r\n height: 100%;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 111;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0, 0, 0, 0.8);\r\n }\r\n\r\n .realTimeAlarm {\r\n width: 517px;\r\n height: 136px;\r\n position: fixed;\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n top: 40%;\r\n background: url(\"../assets/images/realTimeAlarmKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .content3 {\r\n color: #ffffff;\r\n width: 75%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n margin-top: 4%;\r\n }\r\n }\r\n\r\n .alarmInformation {\r\n width: 900px;\r\n height: 380px;\r\n position: fixed;\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n top: 28%;\r\n background: url(\"../assets/images/baojingxinxiKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n padding: 10px 13px;\r\n\r\n ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .top {\r\n height: 10%;\r\n width: 91%;\r\n display: flex;\r\n align-content: flex-start;\r\n justify-content: space-between;\r\n\r\n .title {\r\n font-size: 20px;\r\n font-weight: 900;\r\n color: transparent;\r\n align-items: center;\r\n display: flex;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(255, 255, 255),\r\n rgb(86, 244, 254)\r\n );\r\n }\r\n }\r\n\r\n .content3 {\r\n height: 82%;\r\n width: 100%;\r\n overflow: auto;\r\n\r\n .user_skills {\r\n /deep/ .el-table {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table th {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table__header {\r\n height: 48px;\r\n background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n\r\n /deep/ .el-table__header th {\r\n border: none;\r\n padding: 0;\r\n height: 40px;\r\n\r\n .cell {\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n }\r\n\r\n &.el-table__cell.is-leaf {\r\n border: none !important;\r\n }\r\n }\r\n\r\n /deep/ .el-table tr {\r\n background-color: transparent;\r\n color: #fff !important;\r\n }\r\n\r\n /deep/ .el-table--enable-row-transition .el-table__body td,\r\n .el-table .cell {\r\n background-color: transparent !important;\r\n border: none;\r\n color: #ffffff;\r\n }\r\n\r\n /deep/ .el-table__body td .cell {\r\n white-space: nowrap;\r\n // word-break: break-all;\r\n }\r\n\r\n /deep/ .el-table th.el-table__cell > .cell {\r\n color: #ffffff;\r\n }\r\n\r\n /deep/.el-table .el-table__cell {\r\n padding: 3px 0;\r\n }\r\n\r\n &::before {\r\n //去除底部白线\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 0px;\r\n }\r\n\r\n .el-table::before {\r\n background-color: transparent;\r\n }\r\n\r\n ::v-deep .el-table .el-table__body tr.el-table__row td {\r\n background: rgba(79, 218, 255, 0.1) !important;\r\n }\r\n\r\n ::v-deep\r\n .el-table--striped\r\n .el-table__body\r\n tr.el-table__row--striped\r\n td {\r\n background: rgba(79, 218, 255, 0.06) !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .dateSelect {\r\n display: flex;\r\n font-size: 12px;\r\n background: url(\"../assets/images/dateKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n height: 25px;\r\n width: 61px;\r\n align-items: center;\r\n }\r\n\r\n .active {\r\n width: 32px;\r\n height: 25px;\r\n color: rgb(78, 230, 207);\r\n background: url(\"../assets/images/dateAction.png\") no-repeat;\r\n background-size: 100% 100%;\r\n line-height: 26px;\r\n }\r\n}\r\n\r\n.suoxiao {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n}\r\n\r\n// }\r\n</style>\r\n<style lang=\"less\" scoped>\r\n#yellow {\r\n color: yellow;\r\n line-height: 175%;\r\n}\r\n#orange {\r\n color: rgb(235, 92, 92);\r\n line-height: 175%;\r\n}\r\n.three {\r\n .three-content {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n display: flex;\r\n\r\n .three-left {\r\n width: 40%;\r\n height: 100%;\r\n }\r\n\r\n .three-right {\r\n width: 60%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n ul {\r\n width: 100%;\r\n\r\n li {\r\n width: 164px;\r\n height: 41px;\r\n margin-top: 15px;\r\n background-image: url(../assets/images/pieBorder.png);\r\n float: left;\r\n color: #fff;\r\n line-height: 41px;\r\n font-size: 18px;\r\n }\r\n\r\n li:nth-child(2n) {\r\n margin-left: 10px;\r\n }\r\n }\r\n }\r\n }\r\n .content3 {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line3 {\r\n width: 262px;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .total {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 1%;\r\n\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n\r\n .numText {\r\n color: #ffffff;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(86, 254, 246) !important;\r\n -webkit-mask: linear-gradient(\r\n to top,\r\n rgb(86, 244, 254),\r\n transparent\r\n );\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n #roseCharts {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 60%;\r\n height: calc(100% - 200px);\r\n position: absolute;\r\n top: 28%;\r\n left: 33%;\r\n }\r\n}\r\n\r\n.selectChange {\r\n width: 100% !important;\r\n height: 100% !important;\r\n\r\n .el-select {\r\n margin-left: -44px;\r\n\r\n /deep/ .el-input__inner {\r\n background: url(\"../assets/images/selectCard.png\") no-repeat;\r\n background-size: 100% 100%;\r\n border: none;\r\n padding-left: 58px;\r\n }\r\n\r\n /deep/ .el-input__prefix,\r\n /deep/ .el-input__suffix {\r\n position: absolute;\r\n top: 0;\r\n -webkit-transition: all 0.3s;\r\n height: 100%;\r\n text-align: center;\r\n margin-right: 17px;\r\n }\r\n\r\n /deep/ .el-input__inner::-webkit-input-placeholder {\r\n color: rgb(78, 230, 207); // 初始化的文字颜色\r\n }\r\n\r\n /deep/ .el-input__inner {\r\n color: rgb(78, 230, 207);\r\n }\r\n }\r\n}\r\n\r\n// .el-popper {\r\n// top: 50%;\r\n// }\r\n\r\n/deep/ .popper__arrow {\r\n left: 171px !important;\r\n top: 95px !important;\r\n}\r\n\r\n/deep/ .el-select-dropdown {\r\n background-color: rgb(14, 30, 46) !important;\r\n border: 1px solid rgba(45, 143, 148, 0.5) !important;\r\n\r\n /deep/ .el-select-dropdown__item {\r\n color: #fff !important;\r\n }\r\n\r\n /deep/ .el-select-dropdown__item.hover,\r\n /deep/ .el-select-dropdown__item:hover {\r\n background-color: rgb(18, 54, 87) !important;\r\n }\r\n}\r\n\r\n/deep/ .el-popper[x-placement^=\"bottom\"] {\r\n margin-top: -146px !important;\r\n}\r\n\r\n/**\r\n表格有滚动效果但是不显示滚动条\r\n*/\r\n</style>\r\n<style lang=\"less\">\r\n.el-table .rowColor0 {\r\n background: red !important;\r\n animation: fade 2000ms infinite ease-in-out;\r\n}\r\n\r\n@keyframes fade {\r\n from {\r\n opacity: 1;\r\n }\r\n\r\n 50% {\r\n opacity: 0.6;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n// .el-pager li:hover{\r\n// color:black\r\n// }\r\n</style>\r\n"]}]} |