1 line
242 KiB
JSON
1 line
242 KiB
JSON
{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js!E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\index.vue","mtime":1689657980988},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\babel.config.js","mtime":1689642387810},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/es6.regexp.replace\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.object.keys\";\nimport _defineProperty from \"E:/2023/yancheng0718/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// 工单统计弹窗组件\nimport workOrder from \"../component/workOrder.vue\";\nimport 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: ringMainUnit,\n //环网柜弹窗\n workOrder: workOrder,\n //工单统计弹窗\n routeDetail: routeDetail,\n //线路故障跳闸明细\n lineDetail: 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 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 this.detailedTwo11();\n this.horizontalChart();\n this.barCharts();\n this.roseCharts();\n this.detailen1();\n // 盐都区供电公司概况\n getCompanyInfo().then(function (res) {\n // console.log(res,'....');\n _this.CompanyInfo = res.data.data;\n });\n\n // 查询总线路\n getLine({\n action: \"all\"\n }).then(function (res) {\n if (res.data != \"\") {\n _this.options = Object.keys(res.data.data).map(function (item, index) {\n return {\n value: res.data.data[index].line_code,\n label: res.data.data[index].line_name\n };\n });\n }\n });\n //周查询班组\n this.getbanzhu();\n this.timer = window.setInterval(function () {\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 = _this.$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 = _this.$moment(time).format(\"YYYY-MM-DD HH:mm\");\n }\n _this.tableData.push(res.data.data[i]);\n }\n });\n }, 60000);\n //工单统计action:'tongji'\n this.getGongdan();\n this.timer = window.setInterval(function () {\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 < _this.gongdanList.length; i++) {\n for (var j = 0; j < res.data.data.length; j++) {\n if (_this.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name) {\n _this.gongdanList[i].total = res.data.data[j].total;\n _this.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\n }\n }\n }\n // this.gongdanList = res.data.data;\n _this.detailedThree(dataList);\n // this.$nextTick(() => {\n // this.detailedThree(dataList);\n // setInterval(() => {\n // this.doing();\n // }, 200);\n // });\n });\n }, 60000);\n\n //年度查询班组\n getBanzugz({\n action: \"year\"\n }).then(function (res) {\n console.log(res, \"年数据\");\n _this.dataGzList = res.data.data;\n // console.log(this.dataGzList,'年度查询班组数据');\n for (var i = 0; i < _this.dataGzList.length; i++) {\n for (var j = 0; j < res.data.data.length; j++) {\n if (_this.dataGzList[i].bz == res.data.data[j].bz) {\n _this.dataGzList[i].chbc = res.data.data[j].chbc;\n _this.dataGzList[i].chcg = res.data.data[j].chcg;\n _this.dataGzList[i].jd = res.data.data[j].jd;\n _this.dataGzList[i].total = res.data.data[j].total;\n _this.dataGzList[i].wchz = res.data.data[j].wchz;\n }\n }\n }\n _this.detailedFour(_this.dataGzList);\n });\n //本周故障\n getDwbzgz().then(function (res) {\n var dataBzgz = [];\n dataBzgz = res.data.data;\n _this.detailedOne(dataBzgz);\n });\n //供电质量统计\n getGdsgdzl().then(function (res) {\n var dataGdzl = [];\n dataGdzl = res.data.data;\n // this.detailedTwo(dataGdzl);\n });\n // //配变停运\n // getPbtyqk({\n // action:\"week\"\n // }).then((res)=>{\n // let dataPbty = [];\n // dataPbty = res.data.data\n // console.log(dataPbty,'dataPbty');\n // this.detailedFive(dataPbty);\n // let dataPb = [];\n // let dataCf = [];\n // let dataCfl = [];\n // for (let i = 0; i < dataPbty.length; i++) {\n // dataPb.push(dataPbty[i].pbsl);\n // dataCf.push(dataPbty[i].cftytc);\n // dataCfl.push(dataPbty[i].pbcftyl)\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 this.handleDate(0);\n var that = this;\n window.addEventListener(\"message\", function (e) {\n var res = e.data;\n if (res.val != null) {\n that.modelOthers = true;\n that.componentShow = \"ringMainUnit\";\n that.device = res.val;\n }\n });\n //历史故障接口\n var faultData = {\n token: localStorage.getItem(\"token\"),\n pageSize: \"500\",\n page: \"1\"\n };\n getfaultReportList(faultData).then(function (res) {\n // this.alarmInformationData = res.data.data.data;\n });\n window.setInterval(function () {\n var endDate = _this.$moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\");\n var startDate = _this.$moment(new Date()).subtract(1, \"h\").format(\"YYYY-MM-DD HH:mm:ss\");\n var cabData = {\n token: localStorage.getItem(\"token\"),\n pageSize: 50,\n page: 1,\n sn: \"\",\n startDate: startDate,\n endDate: endDate,\n confirm: \"\"\n };\n getCabinetAlarmList(cabData).then(function (res) {\n var event_desc = '';\n if (res.data.data.data != null) {\n res.data.data.data.forEach(function (item, index) {\n if (item.event_desc.indexOf(\"开关\") != -1) {\n event_desc = item.event_desc.replace('开关', '间隔');\n } else {\n event_desc = item.event_desc;\n }\n });\n _this.emergencyList = res.data.data.data.filter(function (item) {\n return item.event_desc.indexOf(\"通讯状态\") == -1;\n });\n _this.emergencyList.forEach(function (item, index) {\n item.event_desc = event_desc;\n });\n _this.totals = _this.emergencyList.length;\n var dataList = _this.emergencyList;\n if (dataList.length != 0) {\n _this.rowTime = dataList[0].created_at;\n } else {\n return false;\n }\n }\n });\n }, 10000);\n },\n // beforeDestroy() {\n // this.dataDestroy(); // 页面摧毁前，关闭定时器\n // },\n beforeDestroy: function beforeDestroy() {\n // 离开当前路由前的操作\n clearInterval(this.timer);\n this.timer = null;\n },\n methods: {\n routerTo: function routerTo(data) {\n if (data == '盐城地区分布光伏运行监测') {\n this.$router.push(\"/stationBuilding\");\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 legend: {\n textStyle: {\n fontSize: 18,\n //字体大小\n color: \"#ffffff\" //字体颜色\n },\n\n data: [\"关联电网事故\", \"关联检修单\"]\n },\n xAxis: [{\n type: \"category\",\n data: [\"10kv北红线124\", \"10kv北红线125\", \"10kv北红线126\", \"10kv北红线127\", \"10kv北红线128\"],\n axisLabel: {\n show: true,\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }],\n yAxis: [{\n type: \"value\",\n name: \"\",\n axisLabel: {\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }],\n series: [{\n name: \"关联电网事故\",\n type: \"bar\",\n itemStyle: {\n color: \"#00ffff\",\n // 柱状图颜色\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n emphasis: {\n focus: \"series\"\n },\n data: [320, 332, 301, 334, 390]\n }, {\n name: \"关联检修单\",\n type: \"bar\",\n itemStyle: {\n color: \"yellow\",\n // 柱状图颜色\n borderRadius: [7, 7, 0, 0],\n // 柱状图圆角\n borderWidth: 0\n },\n emphasis: {\n focus: \"series\"\n },\n data: [220, 182, 191, 234, 290]\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 // beginShowing() {\n // this.$nextTick(function () {\n // // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离\n // if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {\n // this.tableHeight =\n // window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;\n // this.$refs.tableBox.doLayout();\n // this.roll();\n // }\n // });\n // },\n // roll() {\n // // 拿到表格挂载后的真实DOM\n // const table = this.$refs.tableBox;\n // // 拿到表格中承载数据的div元素\n // const bodyWrapper = table.bodyWrapper;\n // // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)\n // this.myTimer = setInterval(() => {\n // // 元素自增距离顶部1像素\n // bodyWrapper.scrollTop++;\n // // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)\n // if (\n // bodyWrapper.clientHeight + bodyWrapper.scrollTop ===\n // bodyWrapper.scrollHeight\n // ) {\n // // 重置table距离顶部距离\n // bodyWrapper.scrollTop = 0;\n // }\n // }, 100);\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(dataBzgz) {\n var _this6 = this;\n var dataList = [];\n var newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];\n var dataDw = [];\n for (var i = 0; i < dataBzgz.length; i++) {\n dataList.push(dataBzgz[i].gzcs);\n dataDw.push(dataBzgz[i].dw);\n }\n var myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\n var option = {\n tooltip: {\n show: true,\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\"\n }\n },\n grid: {\n top: \"18%\",\n left: \"5%\",\n right: \"3%\",\n bottom: \"5%\",\n containLabel: true\n },\n xAxis: [{\n type: \"category\",\n data: dataDw,\n axisTick: {\n show: false,\n alignWithLabel: true\n },\n axisLabel: {\n color: \"#ffffff\",\n interval: 0,\n fontSize: 16\n },\n axisLine: {\n show: false,\n //隐藏X轴轴线\n lineStyle: {\n color: \"#01FCE3\"\n }\n }\n }],\n yAxis: [{\n name: \"单位：次\",\n type: \"value\",\n data: [0, 2, 4, 6, 8, 10],\n nameTextStyle: {\n color: \"#ffffff\",\n // padding:[25,0,0,0]\n fontSize: 16\n },\n axisLabel: {\n color: \"#ffffff\"\n },\n splitLine: {\n show: true,\n lineStyle: {\n type: \"solid\",\n // color: 'rgba(66, 192, 255, .3)',\n color: \"rgba(102,102,102,0.6)\",\n width: 1,\n // color: 'red'\n fontSize: 16\n }\n },\n splitArea: {\n show: false\n }\n }],\n series: [\n // {\n // type: \"bar\",\n // barWidth: 22,\n // itemStyle: {\n // normal: {\n // label: {\n // fontSize: 14,\n // formatter(params) {\n // for (let i = 0; i < dataList.length; i++) {\n // if (params.dataIndex == i) {\n // return dataDw[i] + \"\\n\" + \"\\n\" + dataList[i];\n // }\n // }\n // },\n // show: true,\n // position: \"top\",\n // color: \"#ffffff\",\n // },\n // color: \"none\",\n // },\n // },\n // silent: true,\n // // barGap: \"-100%\",\n // data: newArr,\n // },\n {\n name: \"\",\n type: \"bar\",\n barWidth: 30,\n itemStyle: {\n color: function color(params) {\n // console.log(params, '数据');\n var colorList = [new _this6.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n offset: 0,\n color: \"rgba(23,74,100,0.6)\"\n }, {\n offset: 1,\n color: \"rgb(86,254,226)\"\n }]), new _this6.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n offset: 0,\n color: \"rgba(237,125,49,.2)\"\n }, {\n offset: 1,\n color: \"rgba(237,125,49,1)\"\n }])];\n if (params.name == \"盐都\") {\n return colorList[1];\n } else {\n return colorList[0];\n }\n },\n fontSize: 16\n },\n data: dataList,\n label: {\n show: true,\n position: \"top\",\n fontStyle: \"normal\",\n fontWeight: \"normal\",\n color: \"#ffffff\"\n }\n // z: -1,\n // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。\n // barGap: '-100%',\n }]\n };\n\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n detailedTwo: function detailedTwo(dataGdzl) {\n var gdsList = [];\n var xlcczList = [];\n var pbcczList = [];\n var ddyList = [];\n for (var i = 0; i < dataGdzl.length; i++) {\n gdsList.push(dataGdzl[i].gds);\n xlcczList.push(dataGdzl[i].xlccz);\n pbcczList.push(dataGdzl[i].pbccz);\n ddyList.push(dataGdzl[i].ddy);\n }\n var that = this;\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\n var option = {\n // animation: true,\n // animationDuration: 20000,\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n label: {\n backgroundColor: \"#6a7985\"\n }\n }\n },\n grid: {\n left: \"4%\",\n right: \"4%\",\n bottom: \"5%\",\n top: \"15%\",\n containLabel: true\n },\n legend: {\n top: 10,\n icon: \"rect\",\n right: 25,\n data: [\"线路重超载\", \"配变重超载\", \"低电压\"],\n textStyle: {\n color: \"#fff\",\n fontSize: 16\n }\n },\n xAxis: {\n type: \"category\",\n data: gdsList,\n axisLine: {\n // 改变x轴颜色\n lineStyle: {\n color: \"none\"\n }\n },\n axisLabel: {\n // 改变x轴字体颜色和大小\n interval: 0,\n textStyle: {\n color: \"#ffffff\",\n fontSize: 16\n }\n },\n splitLine: {\n show: false,\n lineStyle: {\n color: [\"#315070\"],\n width: 1,\n type: \"solid\"\n }\n }\n },\n yAxis: {\n type: \"value\",\n axisLine: {\n // 改变y轴颜色\n show: false,\n lineStyle: {\n color: \"none\"\n }\n },\n axisLabel: {\n // 改变y轴字体颜色和大小\n //formatter: '{value} m³ ', // 给y轴添加单位\n textStyle: {\n color: \"#ffffff\",\n fontSize: 16\n }\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: [\"#315070\"],\n width: 1,\n type: \"solid\"\n }\n }\n },\n series: [{\n type: \"line\",\n smooth: true,\n symbol: \"circle\",\n symbolSize: 7,\n markPoint: {\n symbol: \"circle\"\n },\n name: \"线路重超载\",\n data: xlcczList,\n itemStyle: {\n normal: {\n color: \"#3D7EEB\",\n borderColor: \"#3D7EEB\",\n borderWidth: 2\n }\n },\n lineStyle: {\n normal: {\n width: 2,\n color: \"#327BFA\",\n shadowColor: \"#327BFA\",\n shadowBlur: 10\n }\n },\n areaStyle: {\n color: {\n type: \"linear\",\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0.5,\n color: \"rgba(61,126,235,0.5)\" // 0% 处的颜色\n }, {\n offset: 1,\n color: \"rgba(61,126,235,0)\" // 100% 处的颜色\n }],\n\n global: false // 缺省为 false\n }\n }\n }, {\n type: \"line\",\n smooth: true,\n symbol: \"circle\",\n symbolSize: 7,\n markPoint: {\n symbol: \"circle\"\n },\n data: pbcczList,\n name: \"配变重超载\",\n itemStyle: {\n normal: {\n color: \"#17D8A1\",\n borderColor: \"#17D8A1\",\n borderWidth: 2\n }\n },\n lineStyle: {\n normal: {\n width: 2,\n color: \"#17D8A1\",\n shadowColor: \"#17D8A1\",\n shadowBlur: 10\n }\n },\n areaStyle: {\n color: {\n type: \"linear\",\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0.5,\n color: \"rgba(23,216,161,0.5)\" // 0% 处的颜色\n }, {\n offset: 1,\n color: \"rgba(23,216,161,0)\" // 100% 处的颜色\n }],\n\n global: false // 缺省为 false\n }\n }\n }, {\n type: \"line\",\n smooth: true,\n symbol: \"circle\",\n symbolSize: 7,\n markPoint: {\n symbol: \"circle\"\n },\n data: ddyList,\n name: \"低电压\",\n itemStyle: {\n normal: {\n color: \"#F4C907\",\n borderColor: \"#F4C907\",\n borderWidth: 2\n }\n },\n lineStyle: {\n normal: {\n width: 2,\n color: \"#F4C907\",\n shadowColor: \"#F4C907\",\n shadowBlur: 10\n }\n },\n areaStyle: {\n color: {\n type: \"linear\",\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0.5,\n color: \"rgba(106,117,79,1)\" // 0% 处的颜色\n }, {\n offset: 1,\n color: \"rgba(106,117,79,0)\" // 100% 处的颜色\n }],\n\n global: false // 缺省为 false\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 grid: {\n left: '5%',\n right: '10%',\n top: '20%',\n bottom: '15%',\n containLabel: true\n },\n tooltip: {\n show: true,\n trigger: 'item'\n },\n legend: {\n show: true,\n x: 'center',\n y: '35',\n icon: 'stack',\n itemWidth: 10,\n itemHeight: 10,\n textStyle: {\n color: '#1bb4f6'\n },\n data: ['已采纳', '已发布', '浏览量']\n },\n xAxis: [{\n type: 'category',\n boundaryGap: false,\n axisLabel: {\n color: fontColor\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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']\n }],\n yAxis: [{\n type: 'value',\n name: '信息量',\n min: 0,\n max: 1000,\n axisLabel: {\n formatter: '{value}',\n textStyle: {\n color: '#2ad1d2'\n }\n },\n axisLine: {\n lineStyle: {\n color: '#27b4c2'\n }\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: '#11366e',\n type: \"dashed\"\n }\n }\n }\n // {\n // \ttype : 'value',\n // \tname : '浏览量',\n // \tmin:0,\n // \tmax:1000,\n // \taxisLabel : {\n // \t\tformatter: '{value} 人',\n // \t\ttextStyle:{\n // \t\t\tcolor:'#186afe'\n // \t\t}\n // \t},\n // \taxisLine:{\n // \t\tlineStyle:{\n // \t\t\tcolor:'#186afe'\n // \t\t}\n // \t},\n // \taxisTick:{\n // \tshow:false,\n // },\n // \tsplitLine:{\n // \t\tshow:true,\n // \t\tlineStyle:{\n // \t\t\tcolor:'#11366e'\n // \t\t}\n // \t}\n // }\n ],\n\n series: [\n // {\n // \tname:'已采纳',\n // \ttype:'line',\n // \tstack: '总量',\n // \tsymbol:'circle',\n // \tsymbolSize: 8,\n // itemStyle: {\n // normal: {\n // \t\t\tcolor:'#0092f6',\n // lineStyle: {\n // \t\t\t\tcolor: \"#0092f6\",\n // \t\t\t\twidth:1\n // },\n // areaStyle: { \n // \t\t\t\tcolor: '#94C9EC'\n // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n // \t\t\t\t// \toffset: 0,\n // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\n // \t\t\t\t// }, {\n // \t\t\t\t// \toffset: 1,\n // \t\t\t\t// \tcolor: 'rgba(0,146,246,0.9)'\n // \t\t\t\t// }]),\n // }\n // }\n // \t},\n // \tmarkPoint:{\n // \t\titemStyle:{\n // \t\t\tnormal:{\n // \t\t\t\tcolor:'red'\n // \t\t\t}\n // \t\t}\n // \t},\n // \tdata:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]\n // },\n {\n name: '已发布',\n type: 'line',\n stack: '总量',\n symbol: 'circle',\n symbolSize: 8,\n itemStyle: {\n normal: {\n color: '#00d4c7',\n lineStyle: {\n color: \"#00d4c7\",\n width: 1\n }\n // areaStyle: { \n // \tcolor: '#94C9EC'\n // \t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n // \t// \toffset: 0,\n // \t// \tcolor: 'rgba(7,44,90,0.3)'\n // \t// }, {\n // \t// \toffset: 1,\n // \t// \tcolor: 'rgba(0,212,199,0.9)'\n // \t// }]),\n // }\n }\n },\n\n data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]\n }\n // {\n // \tname:'浏览量',\n // \ttype:'line',\n // \tstack: '总量',\n // \tsymbol:'circle',\n // \tsymbolSize: 8,\n // itemStyle: {\n // normal: {\n // color: '#aecb56',\n // lineStyle: {\n // \t\t\t\tcolor: \"#aecb56\",\n // \t\t\t\twidth:1\n // },\n // areaStyle: { \n // \t\t\t\tcolor: '#94C9EC'\n // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\n // \t\t\t\t// \toffset: 0,\n // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\n // \t\t\t\t// }, {\n // \t\t\t\t// \toffset: 1,\n // \t\t\t\t// \tcolor: 'rgba(114,144,89,0.9)'\n // \t\t\t\t// }]),\n // }\n // }\n // \t},\n // \tdata:[150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]\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 CubeLeft = this.$echarts.graphic.extendShape({\n shape: {\n x: 0,\n y: 0\n },\n buildPath: function buildPath(ctx, shape) {\n console.log(ctx, shape);\n var yAxisPoint = shape.yAxisPoint;\n var c0 = [shape.x, shape.y];\n var c1 = [shape.x + 9, shape.y - 9];\n var c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9];\n var c3 = [yAxisPoint[0], yAxisPoint[1]];\n ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();\n }\n });\n var CubeRight = this.$echarts.graphic.extendShape({\n shape: {\n x: 0,\n y: 0\n },\n buildPath: function buildPath(ctx, shape) {\n var yAxisPoint = shape.yAxisPoint;\n var c1 = [shape.x, shape.y];\n var c2 = [yAxisPoint[0], yAxisPoint[1]];\n var c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18];\n var c4 = [shape.x + 9, shape.y + 18];\n ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();\n }\n });\n var CubeTop = this.$echarts.graphic.extendShape({\n shape: {\n x: 0,\n y: 0\n },\n buildPath: function buildPath(ctx, shape) {\n var c1 = [shape.x, shape.y];\n var c2 = [shape.x + 9, shape.y + 18];\n var c3 = [shape.x + 18, shape.y + 9];\n var c4 = [shape.x + 9, shape.y - 9];\n ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();\n }\n });\n this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);\n this.$echarts.graphic.registerShape('CubeRight', CubeRight);\n this.$echarts.graphic.registerShape('CubeTop', CubeTop);\n var MAX = [6000, 6000, 6000, 6000, 6000];\n var VALUE = [2012, 1230, 3790, 2349, 1654];\n var NAMES = ['德州', '德城区', '陵城区', '禹城市', '乐陵市'];\n var option = {\n title: {\n text: '',\n top: 32,\n left: 18,\n textStyle: {\n color: '#00F6FF',\n fontSize: 24\n }\n },\n grid: {\n left: 20,\n right: 40,\n bottom: '19%',\n top: 107,\n containLabel: true\n },\n yAxis: {\n type: 'category',\n data: NAMES,\n axisLine: {\n show: false,\n lineStyle: {\n color: 'white'\n }\n },\n offset: 20,\n axisTick: {\n show: false,\n length: 9,\n alignWithLabel: true,\n lineStyle: {\n color: '#7DFFFD'\n }\n },\n axisLabel: {\n fontSize: 10\n }\n },\n xAxis: {\n type: 'value',\n axisLine: {\n show: false,\n lineStyle: {\n color: 'white'\n }\n },\n splitLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n show: false,\n fontSize: 16\n },\n boundaryGap: ['20%', '20%']\n },\n series: [{\n type: 'custom',\n renderItem: function renderItem(params, api) {\n var location = api.coord([api.value(0), api.value(1)]);\n return {\n type: 'group',\n children: [{\n type: 'CubeLeft',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n },\n style: {\n fill: 'rgba(7,29,97,.6)'\n }\n }, {\n type: 'CubeRight',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n },\n style: {\n fill: 'rgba(10,35,108,.7)'\n }\n }, {\n type: 'CubeTop',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n },\n style: {\n fill: 'rgba(11,42,106,.8)'\n }\n }]\n };\n },\n data: MAX\n }, {\n type: 'custom',\n renderItem: function renderItem(params, api) {\n var location = api.coord([api.value(0), api.value(1)]);\n return {\n type: 'group',\n children: [{\n type: 'CubeLeft',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n }\n // style: {\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\n // offset: 0,\n // color: '#3B80E2'\n // },\n // {\n // offset: 1,\n // color: '#49BEE5'\n // }\n // ])\n // }\n }, {\n type: 'CubeRight',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n }\n // style: {\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\n // offset: 0,\n // color: '#3B80E2'\n // },\n // {\n // offset: 1,\n // color: '#49BEE5'\n // }\n // ])\n // }\n }, {\n type: 'CubeTop',\n shape: {\n api: api,\n xValue: api.value(0),\n yValue: api.value(1),\n x: location[0],\n y: location[1],\n yAxisPoint: api.coord([0, api.value(1)])\n }\n // style: {\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\n // offset: 0,\n // color: '#3B80E2'\n // },\n // {\n // offset: 1,\n // color: '#49BEE5'\n // }\n // ])\n // }\n }]\n };\n },\n\n data: VALUE\n }, {\n type: 'bar',\n label: {\n normal: {\n show: true,\n position: 'right',\n formatter: function formatter(e) {\n switch (e.name) {\n case '10kV线路':\n return VALUE[0];\n case '公用配变':\n return VALUE[1];\n case '35kV主变':\n return VALUE[2];\n case '水':\n }\n },\n fontSize: 16,\n color: '#fff',\n offset: [25, 4]\n }\n },\n itemStyle: {\n color: 'transparent'\n },\n data: MAX\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 labelLine: {\n normal: {\n show: true,\n length: 50,\n length2: 50,\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: 14,\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: 14,\n align: 'center',\n padding: 4,\n color: '#00EDED'\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 // title: {\n // text: '网络/安全设备',\n // left: '60',\n // top: 0,\n // textAlign: 'center',\n // textStyle: {\n // color: '#fff',\n // fontSize: 14,\n // fontWeight: 0\n // }\n // },\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 legend: {\n type: \"scroll\",\n orient: \"vartical\",\n // x: \"right\",\n top: \"center\",\n right: \"15\",\n // bottom: \"0%\",\n itemWidth: 16,\n itemHeight: 8,\n itemGap: 16,\n textStyle: {\n color: '#A3E2F4',\n fontSize: 12,\n fontWeight: 0\n },\n data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']\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: \"{c}\",\n textStyle: {\n fontSize: 12\n },\n position: 'outside'\n },\n emphasis: {\n show: true\n }\n },\n labelLine: {\n normal: {\n show: true,\n length: 20,\n length2: 55\n },\n emphasis: {\n show: false\n }\n },\n data: [{\n value: 10,\n name: 'IDS'\n }, {\n value: 5,\n name: 'VPN'\n }, {\n value: 15,\n name: '交换机'\n }, {\n value: 25,\n name: '防火墙'\n }, {\n value: 20,\n name: 'WAF'\n }, {\n value: 35,\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 _this7 = 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 _this7.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,1)\"\n }, {\n offset: 1,\n color: \"rgba(194,190,190,0)\"\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(dataPbty) {\n var dataListx = [];\n var dataPb = [];\n var dataGz = [];\n var dataCf = [];\n for (var _i = 0; _i < dataPbty.length; _i++) {\n dataListx.push(dataPbty[_i].gds);\n dataGz.push(dataPbty[_i].gztytc);\n dataPb.push(dataPbty[_i].pbsl);\n dataCf.push(dataPbty[_i].cftytc);\n }\n var datacoords = [];\n var datacoords1 = [];\n for (var i = 0; i < dataListx.length; i++) {\n datacoords.push([{\n coord: [i, dataGz[i]]\n }, {\n coord: [i + 1, dataGz[i + 1]]\n }]);\n }\n for (var i = 0; i < dataListx.length; i++) {\n datacoords1.push([{\n coord: [i, dataCf[i]]\n }, {\n coord: [i + 1, dataCf[i + 1]]\n }]);\n }\n var that = this;\n var myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\n var option = {\n animation: true,\n //控制动画示否开启\n animationDuration: 2000,\n animationEasing: \"bounceOut\",\n //缓动动画\n animationThreshold: 8,\n //动画元素的阈值\n grid: {\n top: \"15%\",\n bottom: \"30%\" //也可设置left和right设置距离来控制图表的大小\n },\n\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\",\n label: {\n show: true\n }\n }\n },\n legend: {\n data: [\"配变数量\", \"故障停运\", \"重复停运\"],\n top: \"0%\",\n // icon:'roundRect',\n // itemHeight:2, // 粗细\n textStyle: {\n color: \"#ffffff\"\n }\n },\n xAxis: {\n data: dataListx,\n axisLine: {\n show: false,\n //隐藏X轴轴线\n lineStyle: {\n color: \"#01FCE3\"\n }\n },\n axisTick: {\n show: false //隐藏X轴刻度\n },\n\n axisLabel: {\n show: true,\n interval: 0,\n textStyle: {\n color: \"#ffffff\",\n //X轴文字颜色\n fontSize: \"16px\"\n }\n }\n },\n yAxis: [{\n type: \"value\",\n name: \"配变数量\",\n nameTextStyle: {\n color: \"#ffffff\",\n padding: [0, 30, 0, 0]\n },\n splitLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLine: {\n show: false,\n lineStyle: {\n color: \"#FFFFFF\"\n }\n },\n axisLabel: {\n show: true,\n interval: 0,\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }, {\n type: \"value\",\n name: \"停运台次\",\n nameTextStyle: {\n color: \"#ffffff\"\n },\n position: \"right\",\n splitLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisLabel: {\n show: true,\n // formatter: \"{value} %\", //右侧Y轴文字显示\n textStyle: {\n color: \"#ffffff\"\n }\n }\n }, {\n type: \"value\",\n gridIndex: 0,\n min: 50,\n max: 100,\n splitNumber: 8,\n splitLine: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n show: false\n },\n splitArea: {\n show: true,\n areaStyle: {\n color: [\"rgba(250,250,250,0.0)\", \"rgba(250,250,250,0.05)\"]\n }\n }\n }],\n series: [{\n name: \"故障停运\",\n type: \"line\",\n yAxisIndex: 1,\n //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\n smooth: false,\n //平滑曲线显示\n showAllSymbol: true,\n //显示所有图形。\n shadowOffsetX: 0,\n // 折线的X偏移\n shadowOffsetY: 10,\n // 折线的Y偏移\n symbol: \"circle\",\n //标记的图形为实心圆\n symbolSize: 1,\n //标记的大小\n itemStyle: {\n //折线拐点标志的样式\n color: \"rgb(237,125,49)\"\n },\n lineStyle: {\n color: \"rgb(237,125,49)\"\n },\n // areaStyle: {\n // show:false,\n // color: \"rgba(5,140,255, 0.2)\",\n // },\n emphasis: {\n focus: \"series\"\n },\n data: dataGz\n }, {\n showSymbol: false,\n name: \"故障停运\",\n type: \"lines\",\n yAxisIndex: 1,\n polyline: true,\n smooth: false,\n coordinateSystem: \"cartesian2d\",\n zlevel: 1,\n effect: {\n show: true,\n smooth: false,\n period: 6,\n trailLenth: 0.1,\n symbolSize: 6,\n symbol: \"circle\"\n },\n lineStyle: {\n color: \"#fff\",\n width: 1,\n opacity: 0,\n curveness: 0,\n cap: \"round\"\n },\n data: datacoords\n }, {\n name: \"重复停运\",\n type: \"line\",\n yAxisIndex: 1,\n //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\n smooth: false,\n //平滑曲线显示\n shadowOffsetX: 0,\n // 折线的X偏移\n shadowOffsetY: 10,\n // 折线的Y偏移\n showAllSymbol: true,\n //显示所有图形。\n symbol: \"circle\",\n //标记的图形为实心圆\n symbolSize: 1,\n //标记的大小\n itemStyle: {\n //折线拐点标志的样式\n show: false,\n color: \"#058cff\"\n },\n lineStyle: {\n show: false,\n color: \"#058cff\"\n },\n // areaStyle: {\n // show:false,\n // color: \"rgba(5,140,255, 0.2)\",\n // },\n data: dataCf\n }, {\n showSymbol: false,\n name: \"重复停运\",\n type: \"lines\",\n yAxisIndex: 1,\n polyline: true,\n smooth: false,\n coordinateSystem: \"cartesian2d\",\n zlevel: 1,\n effect: {\n show: true,\n smooth: false,\n period: 6,\n trailLenth: 0.1,\n symbolSize: 6,\n symbol: \"circle\"\n },\n lineStyle: {\n color: \"#fff\",\n width: 1,\n opacity: 0,\n curveness: 0,\n cap: \"round\"\n },\n data: datacoords1\n }, {\n name: \"配变数量\",\n type: \"bar\",\n barWidth: 15,\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 }\n },\n data: dataPb\n }]\n };\n myChart.setOption(option);\n window.addEventListener(\"resize\", function () {\n myChart.resize();\n });\n },\n //报警详情信息弹窗\n enlargeBtn: function enlargeBtn(index) {\n var _this8 = 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 _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 = 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 _this9 = 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 _this9.$refs.audio.play();\n });\n this.alarmInformationShow = true;\n this.$nextTick(function () {\n _this9.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 _this10 = 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 _this10.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 _this10.topContent[0].count = dataPb.reduce(function (x, y) {\n return x + y;\n });\n _this10.topContent[1].count = dataCf.reduce(function (x, y) {\n return x + y;\n });\n var pbCount = _this10.topContent[1].count / _this10.topContent[0].count * 100;\n var pbCountString = pbCount.toString();\n if (pbCountString.indexOf(\".\") != -1) {\n _this10.topContent[2].count = pbCountString.substring(0, pbCountString.indexOf(\".\") + 3) + \"%\";\n } else {\n _this10.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":";;;;;;AAkpBA,SACAA,gBACAC,SACAC,YACAC,SACAC,WACAC,YACAC,WACAC,gBACAC,gBACAC,oBACAC;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;EACAC;EACAC;IACAC;IAAA;IACAC;IAAA;IACAC;IAAA;IACAC;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;MACAC;MACAC;MACAC;MACAC,aACA;QACAC;QACAjC;MACA,GACA;QACAiC;QACAjC;MACA,GACA;QACAiC;QACAjC;MACA,GACA;QACAiC;QACAjC;MACA,EACA;MACAkC,aACA;QACAD;MACA,GACA;QACAA;MACA,EACA;MACAE,cACA;QACAF;MACA,GACA;QACAA;MACA,EACA;MACAG,UACA;QACAC;QACAC;MACA,EACA;MACAD;MACAE,aACA;QACAvC;QACAwC;MACA,GACA;QACAxC;QACAwC;MACA,GACA;QACAxC;QACAwC;MACA,EACA;MACAC;IAAA,sCACA,uCACA,iDACA,oCACA,2CACA,4CAEA,CACA;MACAC;MACAC;MACAzB;IACA,GACA;MACAwB;MACAC;MACAzB;IACA,GACA;MACAwB;MACAC;MACAzB;IACA,GACA;MACAwB;MACAC;MACAzB;IACA,GACA;MACAwB;MACAC;MACAzB;IACA,GACA;MACAwB;MACAC;MACAzB;IACA,EACA,sCAGA,0CAEA,wCAEA,0CACA,uCAGA,yCACA,oCACA,8CACA,sCACA;EAEA;EACA0B;EACAC;IAAA;IACA;IACA;IACAC;MACAC;MACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA1D;MACA;MACA;IACA;;IAEA;IACAC;MAAA0D;IAAA;MACA;QACA;UACA;YACAX;YACAC;UACA;QACA;MACA;IACA;IACA;IACA;IACA;MACA/C;QACAyD;MACA;QACAC;QACA;UACA;YACA;YACAC,gCACA;YACA;UACA;;UACA;YACA;YACAA,2BACA;UACA;UACA;QACA;MACA;IACA;IACA;IACA;IACA;MACA1D;QAAAwD;MAAA;QACAC;QACA;QAEA;UACA;YACA,IACA,oEACA;cACA;cACA;YACA;UACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;MACA;IACA;;IAEA;IACA1D;MACAyD;IACA;MACAC;MACA;MACA;MACA;QACA;UACA;YACA;YACA;YACA;YACA;YACA;UACA;QACA;MACA;MACA;IACA;IACA;IACAxD;MACA;MACA0D;MACA;IACA;IACA;IACAzD;MACA;MACA0D;MACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAN;MACA;MACA;QACAO;QACAA;QACAA;MACA;IACA;IACA;IACA;MACAC;MACA7C;MACAC;IACA;IACAZ;MACA;IACA;IACAgD;MACA;MACA,0CACAS,iBACAC;MACA;QACAF;QACA7C;QACAC;QACA+C;QACAC;QACAC;QACAC;MACA;MACA7D;QACA;QACA;UACAmD;YACA;cACAW;YACA;cACAA;YACA;UACA;UACA;YACA;UACA;UACA;YACAC;UACA;UACA;UACA;UACA;YACA;UACA;YACA;UACA;QACA;MACA;IACA;EACA;EACA;EACA;EACA;EACAC;IACA;IACAhB;IACA;EACA;EACAiB;IACAC;MACA;QACA;MACA;IACA;IACAC;MACA;MACA;MACA;QACAC;UACAC;UACAC;YACAC;UACA;QACA;QACAC;UACAC;YACAC;YAAA;YACAC;UACA;;UAEApE;QACA;QACAqE,QACA;UACAL;UACAhE,OACA,cACA,cACA,cACA,cACA,aACA;UACAsE;YACAC;YACAL;cACAE;YACA;UACA;QACA,EACA;QACAI,QACA;UACAR;UACAtE;UACA4E;YACAJ;cACAE;YACA;UACA;QACA,EACA;QACAK,SACA;UACA/E;UACAsE;UACAU;YACAN;YAAA;YACAO;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACA9E;QACA,GACA;UACAN;UACAsE;UACAU;YACAN;YAAA;YACAO;YAAA;YACAC;UACA;UACAC;YACAC;UACA;UACA9E;QACA;MAEA;MACA+E;MACAvC;QACAuC;MACA;IACA;IACA;IACAC;MAAA;MACA/F;QACAyD;MACA;QACAC;QACA;UACA;YACA;YACAC,gCACA;YACA;UACA;;UACA;YACA;YACAA,2BACA;UACA;UACA;QACA;MACA;IACA;IACA;IACAqC;MAAA;MACA/F;QAAAwD;MAAA;QACAC;QACA;QAEA;UACA;YACA,IACA,qEACA;cACA;cACA;YACA;UACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;MACA;IACA;IACA;IACAuC;MACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;QACA5D;QACA;UACA;UACA6D;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;MACArG;QAAA0D;MAAA;QAAA;QACAC;QACA;QACA;MACA;IACA;IACA;IACA2C;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA1G;QACA0D;QACAiD;MACA;QACA;QACA;UACA,mDACA/C,wBACA;QACA;UACA;QACA;MACA;IACA;IACAgD;MAAA;MACA;MACA;MACA;MACA;QACAC;QACAC;MACA;MAEA;MACA;QACAjC;UACAU;UACAT;UACAC;YACAC;UACA;QACA;QACA+B;UACAC;UACAC;UACAC;UACAC;UACAC;QACA;QAEA/B,QACA;UACAL;UACAhE;UACAqG;YACA9B;YACA+B;UACA;UACAhC;YACAF;YACAmC;YACApC;UACA;UACAqC;YACAjC;YAAA;YACAkC;cACArC;YACA;UACA;QACA,EACA;QACAI,QACA;UACA9E;UACAsE;UACAhE;UACA0G;YACAtC;YACA;YACAD;UACA;UACAG;YACAF;UACA;UACAuC;YACApC;YACAkC;cACAzC;cACA;cACAI;cACAwC;cACA;cACAzC;YACA;UACA;UACA0C;YACAtC;UACA;QACA,EACA;QACAE;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;UACA/E;UACAsE;UACA8C;UACApC;YACAN;cACA;cACA,iBACA,wDACA;gBAAA2C;gBAAA3C;cAAA,GACA;gBAAA2C;gBAAA3C;cAAA,EACA,GACA,wDACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA,EACA;cACA;gBACA;cACA;gBACA;cACA;YACA;YACAD;UACA;UACAnE;UACAgC;YACAuC;YACAyC;YACAC;YACAC;YACA9C;UACA;UACA;UACA;UACA;QACA;MAEA;;MAEAW;MAEAvC;QACAuC;MACA;IACA;IACAoC;MACA;MACA;MACA;MACA;MACA;QACAC;QACAC;QACAC;QACAC;MACA;MACA;MACA;MACA;QACA;QACA;QACA1D;UACAC;UACAC;YACAC;YACAhC;cACAwF;YACA;UACA;QACA;QACAzB;UACAE;UACAC;UACAC;UACAH;UACAI;QACA;QACAnC;UACA+B;UACArE;UACAuE;UACAlG;UACAkE;YACAE;YACAD;UACA;QACA;QACAE;UACAL;UACAhE;UACAwG;YACA;YACAC;cACArC;YACA;UACA;UACAE;YACA;YACAiC;YACArC;cACAE;cACAD;YACA;UACA;UACAwC;YACApC;YACAkC;cACArC;cACAwC;cACA5C;YACA;UACA;QACA;QACAQ;UACAR;UACAwC;YACA;YACAjC;YACAkC;cACArC;YACA;UACA;UACAE;YACA;YACA;YACAJ;cACAE;cACAD;YACA;UACA;UACAkC;YACA9B;UACA;UACAoC;YACApC;YACAkC;cACArC;cACAwC;cACA5C;YACA;UACA;QACA;QACAS,SACA;UACAT;UACAyD;UACAC;UACAC;UACAC;YACAF;UACA;UACAhI;UACAM;UACA0E;YACAmD;cACAzD;cACA0D;cACAlD;YACA;UACA;UACA6B;YACAoB;cACAjB;cACAxC;cACA2D;cACAC;YACA;UACA;UACAC;YACA7D;cACAJ;cACAkE;cACAC;cACAC;cACAC;cACAC,aACA;gBACAvB;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;;cACAmE;YACA;UACA;QACA,GACA;UACAvE;UACAyD;UACAC;UACAC;UACAC;YACAF;UACA;UACA1H;UACAN;UACAgF;YACAmD;cACAzD;cACA0D;cACAlD;YACA;UACA;UACA6B;YACAoB;cACAjB;cACAxC;cACA2D;cACAC;YACA;UACA;UACAC;YACA7D;cACAJ;cACAkE;cACAC;cACAC;cACAC;cACAC,aACA;gBACAvB;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;;cACAmE;YACA;UACA;QACA,GACA;UACAvE;UACAyD;UACAC;UACAC;UACAC;YACAF;UACA;UACA1H;UACAN;UACAgF;YACAmD;cACAzD;cACA0D;cACAlD;YACA;UACA;UACA6B;YACAoB;cACAjB;cACAxC;cACA2D;cACAC;YACA;UACA;UACAC;YACA7D;cACAJ;cACAkE;cACAC;cACAC;cACAC;cACAC,aACA;gBACAvB;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;;cACAmE;YACA;UACA;QACA;MAEA;;MACAxD;MACAvC;QACAuC;MACA;IACA;IACAyD;MACA;MACA;MACA;QAEAzC;UACAE;UACAC;UACAF;UACAG;UACAC;QACA;QACAvC;UACAU;UACAT;QACA;QACAG;UACAM;UACA2D;UACAC;UACAxG;UACA8G;UACAC;UACAxE;YACAE;UACA;UACApE;QACA;QACAqE,QACA;UACAL;UACA2E;UACArE;YACAF;UACA;UACAoC;YACAjC;YACAkC;cACArC;YACA;UACA;UACAiC;YACA9B;UACA;UACAoC;YACApC;YACAkC;cACArC;YACA;UACA;UACApE;QACA,EACA;QACAwE,QACA;UACAR;UACAtE;UACAkJ;UACAC;UACAvE;YACAwE;YACA5E;cACAE;YACA;UACA;UACAoC;YACAC;cACArC;YACA;UACA;UACAiC;YACA9B;UACA;UACAoC;YACApC;YACAkC;cACArC;cACAJ;YACA;UACA;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;QACA;QAAA,CACA;;QACAS;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;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA/E;UACAsE;UACA+E;UACArB;UACAC;UAEAjD;YACAmD;cACAzD;cACAqC;gBACArC;gBACAwC;cACA;cACA;cACA;cACA;cACA;cACA;cACA;cACA;cACA;cACA;cACA;YACA;UACA;;UACA5G;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;QACA;QACA;QAAA;MAEA;;MACA+E;MACAvC;QACAuC;MACA;IACA;IACAiE;MACA;MACA;QACAC;UACAf;UACAC;QACA;QACAe;UACAvG;UACA;UACA;UACA;UACA;UACA;UACAwG;QACA;MACA;MACA;QACAF;UACAf;UACAC;QACA;QACAe;UACA;UACA;UACA;UACA;UACA;UACAC;QACA;MACA;MACA;QACAF;UACAf;UACAC;QACA;QACAe;UACA;UACA;UACA;UACA;UACAC;QACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAC;UACAC;UACArD;UACAC;UACA/B;YACAE;YACAD;UACA;QACA;QACA4B;UACAE;UACAC;UACAC;UACAH;UACAI;QACA;QACA5B;UACAR;UACAhE;UACAwG;YACAjC;YACAkC;cACArC;YACA;UACA;UACA2C;UACAV;YACA9B;YACA+E;YACAhD;YACAG;cACArC;YACA;UACA;UACAE;YACAH;UACA;QACA;QACAE;UACAL;UACAwC;YACAjC;YACAkC;cACArC;YACA;UACA;UACAuC;YACApC;UACA;UACA8B;YACA9B;UACA;UACAD;YACAC;YACAJ;UACA;UACAwE;QACA;QACAlE;UACAT;UACAuF;YACA;YACA;cACAvF;cACAwF;gBACAxF;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACAC;kBACAC;gBACA;cACA;gBACA9F;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACAC;kBACAC;gBACA;cACA;gBACA9F;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACAC;kBACAC;gBACA;cACA;YACA;UACA;UACA9J;QACA,GACA;UACAgE;UACAuF;YACA;YACA;cACAvF;cACAwF;gBACAxF;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;cACA;gBACA5F;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;cACA;gBACA5F;gBACAiF;kBACAQ;kBACAC;kBACAC;kBACAzB;kBACAC;kBACAyB;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;cACA;YACA;UACA;;UACA5J;QACA,GACA;UACAgE;UACAhC;YACA6F;cACAtD;cACAyC;cACA8B;gBACA;kBACA;oBACA;kBACA;oBACA;kBACA;oBACA;kBACA;gBAAA;cAGA;cACA3E;cACAC;cACA2C;YACA;UACA;UACArC;YACAN;UACA;UACApE;QACA;MACA;MACA+E;MACAvC;QACAuC;MACA;IACA;IACAgF;MACA;MACA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;QACAlG;UACAC;UACAgF;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;QACAM;UACAY;UACAX;UACAnB;UACAC;UACAjE;YACAC;YACA+C;YACA9C;UACA;UACA6F;YACA9F;YACA+C;YACAgD;YACA9F;UACA;QACA;QACAK;UACAT;UACAmG;UACAC;UACAhG;UACAM;YACAmD;cACAjD;cACAkD;YACA;UACA;UACA9H;YACA+B;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,EAEA;UACA2K;YACAxC;cACAtD;cACA+E;cACAgB;cACA7D;gBACArC;gBACAwC;cACA;YACA;UACA;UACA5E;YACA6F;cACAiB;cACAyB;gBACAC;kBACArG;kBACAC;kBACA8F;kBACAO;gBACA;gBACAC;kBACA5C;kBACAlB;kBACAhC;kBACA+F;gBACA;gBACAC;kBACAzG;kBACA+F;kBACAO;kBACArG;gBACA;cACA;YACA;UACA;QACA;MAGA;MACAW;MACAvC;QACAuC;MACA;IACA;IACA8F;MACA;MACA;QACAzG;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA2B;UACAE;UACAD;UACAG;UACAD;UACAE;QACA;QACAvC;UACAC;UACAgF;QACA;QACA7E;UACAD;UACA8G;UACA;UACA9E;UACAE;UACA;UACAuC;UACAC;UACAqC;UACA7G;YACAE;YACAD;YACA+C;UACA;UACAlH;QACA;QACAgL;QACAC;UACA1E;UACAvC;UACAhE;UACAkL;UACA1E;YACAjC;YACAkC;cACArC;cACAwC;cACA5C;YACA;UACA;UACAM;YACAiC;YACAhC;YACAH;YACA+G;YACAhH;UACA;QACA;QACAiH;UACAxC;UACAC;UACAtC;UACAC;YACAjC;YACAkC;cACArC;cACAwC;cACA5C;YACA;UACA;UACAM;YACAwE;YACAvE;YACAkG;YACArG;YACAD;UACA;UACAwC;YACAF;cACArC;cACAwC;cACA5C;YACA;UACA;QACA;QACAqH;QACA5G;UACAT;UACAmG;UACAmB;UACAjB;YACAxC;cACAtD;cACA+E;cACAgB;YACA;YACAzF;cACAN;YACA;UACA;UACAvE;YACAN;YACAqC;YACA2C;cACAmD;gBACAzD;cACA;YACA;UACA;QACA;UACAJ;UACAmG;UACAmB;UACAjB;YACAxC;cACAtD;cACA+E;cACAgB;YACA;YACAzF;cACAN;YACA;UACA;UACA7E;UACAM;YACAN;YACAqC;YACA2C;cACAmD;gBACAzD;cACA;YACA;UACA;QACA;UACA2E;UACA/E;UACAmG;UACAoB;UACAC;UACAxJ;YACA6F;cACAtD;cACAuE;cACA5E;gBACAC;cACA;cACA6C;YACA;YACAnC;cACAN;YACA;UACA;UACA8F;YACAxC;cACAtD;cACA+E;cACAgB;YACA;YACAzF;cACAN;YACA;UACA;UACAvE;YACA+B;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA,GACA;YACAqC;YACArC;UACA;QAEA;MACA;MACAqF;MACAvC;QACAuC;MACA;IACA;IACA0G;MAAA;MACA;MACA;MACA;MACA;MACA,iBACA,WACA,WACA,WACA,WACA,WACA,mBACA;MACA;MACA;MACA;QACA;UAAA/L;UAAAqC;QAAA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,qCACAqD,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;QACA0C;QAEAjE;UACAiF;YACA;cACA;YACA;cACA;YACA;UACA;QACA;QAEA7E;UACAtC;UACA;UACAqE;UACAzB;UACA;UACA;UACA;UACA;UACA;UACA;UACA2D;UAAA;UACAlI;YACA;UACA;UACAkE;YACAE;YACAD;;YAEA;YACA;UACA;QACA;;QACAM,SACA;UACA/E;UACAsE;UACAmG;UACAC;UACAsB;UAAA;UACA1J;YACAgF;YACAzC;UACA;UAEAG;YACAmD;cACAC;cACAlD;cACAT;cACAC;gBACA;cACA;YACA;UACA;UAEAuH;UACA3L;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;MACAwC;QACA;MACA;IACA;IACAoJ;MACA;MACA;MACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;MACA;MACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA;MACA;MACA;MACA;MACA;QACAtI;UACAE;YACAC;YACAE;cACAE;cACAD;YACA;UACA;QACA;QACA4B;UACAnB;UACAoB;UACAG;UACAF;UACAC;UACAhC;YACAE;UACA;QACA;QACAH;UACAtC;UACAuE;UACAhC;YACAE;UACA;UACApE;QACA;QACAqL;QACAhH,QACA;UACAL;UACAF;UACA0C;YACAjC;YACAkC;cACArC;cACAD;YACA;UACA;UACAwC;YACApC;UACA;UACA8B;YACA9B;UACA;UACAsC;YACAtC;UACA;UACAD;YACAiC;YACApC;YACAiI;UACA;UACApM;QACA,EACA;QACAwE,QACA;UACAR;UACA2C;YACApC;YACAkC;cACArC;cACAD;YACA;UACA;UACAqC;YACAC;cACArC;cACAD;YACA;UACA;UACAkC;YACA9B;UACA;UACAD;YACAiC;UACA;UACAM;YACAtC;UACA;QACA,EACA;QACAE,SACA;UACA/E;UACAsE;UACA+E;UACAsD;UACAC;UACAtK;YACAuC;YACAuE;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACApE;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;cACA0D,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAf;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;YAEA;UACA;UACApE;QACA,GACA;UACAN;UACAsE;UACAqI;UACAtD;UACA/G;YACAuC;YACAuE;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACApE;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;cACA0D,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAf;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;YAEA;UACA;UACApE;QACA,GACA;UACAN;UACAsE;UACAqI;UACAtD;UACA/G;YACAuC;YACAuE;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACApE;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;cACA0D,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAf;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA,CACA;cACAmI;YACA;UACA;UACAvM;QACA,GACA;UACAN;UACAsE;UACAqI;UACAtD;UACA/G;YACAuC;YACAuE;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACApE;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;cACA0D,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAf;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA,CACA;cACAmI;YACA;UACA;UACAvM;QACA,GACA;UACAN;UACAsE;UACAqI;UACAtD;UACA/G;YACAuC;YACAuE;cACA;gBACA;cACA;gBACA;cACA;YACA;UACA;UACApE;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;cACA0D,sDACA,GACA,GACA,GACA,GACA,CACA;gBACAf;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA,CACA;cACAmI;YACA;UACA;UACAvM;QACA;MAEA;MACA+E;MACAvC;QACAuC;MACA;IACA;IACAyH;MACA;MACA;MACA;MACA;MACA;QACAC;QACAC;QACAC;QACAC;MACA;MACA;MACA;MACA;QACAC,iBACA;UACAC;QACA,GACA;UACAA;QACA,EACA;MACA;MACA;QACAC,kBACA;UACAD;QACA,GACA;UACAA;QACA,EACA;MACA;MACA;MACA;MACA;QACAE;QAAA;QACAC;QACAC;QAAA;QACAC;QAAA;QACApH;UACAC;UACAG;QACA;;QACAtC;UACAC;UACAC;YACAC;YACAhC;cACAuC;YACA;UACA;QACA;QACAN;UACAjE;UACAgG;UACA;UACA;UACA9B;YACAE;UACA;QACA;QACAC;UACArE;UACAwG;YACAjC;YAAA;YACAkC;cACArC;YACA;UACA;UACAiC;YACA9B;UACA;;UACAD;YACAC;YACAgC;YACArC;cACAE;cAAA;cACAD;YACA;UACA;QACA;QACAK,QACA;UACAR;UACAtE;UACAgH;YACAtC;YACAqG;UACA;UACA9D;YACApC;UACA;UACA8B;YACA9B;UACA;UACAiC;YACAjC;YACAkC;cACArC;YACA;UACA;UACAE;YACAC;YACAgC;YACArC;cACAE;YACA;UACA;QACA,GACA;UACAJ;UACAtE;UACAgH;YACAtC;UACA;UACA4C;UACAL;YACApC;UACA;UACA8B;YACA9B;UACA;UACAiC;YACAjC;UACA;UACAD;YACAC;YAEA;YACAL;cACAE;YACA;UACA;QACA,GACA;UACAJ;UACAoJ;UACAxE;UACAC;UACAwE;UACA1G;YACApC;UACA;UACAiC;YACAjC;UACA;UACA8B;YACA9B;UACA;UACAD;YACAC;UACA;UACAsC;YACAtC;YACA0D;cACA7D;YACA;UACA;QACA,EACA;QACAK,SACA;UACA/E;UACAsE;UACAsJ;UAAA;UACA7F;UAAA;UACA8F;UAAA;UACAC;UAAA;UACAC;UAAA;UACA/F;UAAA;UACAC;UAAA;UACAjD;YACA;YACAN;UACA;UACAqC;YACArC;UACA;UACA;UACA;UACA;UACA;UACAS;YACAC;UACA;UACA9E;QACA,GACA;UACA0N;UACAhO;UACAsE;UACAsJ;UACAK;UACAlG;UACAmG;UACApC;UACAqC;YACAtJ;YACAkD;YACAqG;YACAC;YACApG;YACAD;UACA;UACAjB;YACArC;YACAwC;YACAoH;YACAC;YACAC;UACA;UACAlO;QACA,GACA;UACAN;UACAsE;UACAsJ;UAAA;UACA7F;UAAA;UACA+F;UAAA;UACAC;UAAA;UACAF;UAAA;UACA7F;UAAA;UACAC;UAAA;UACAjD;YACA;YACAH;YACAH;UACA;UACAqC;YACAlC;YACAH;UACA;UACA;UACA;UACA;UACA;UACApE;QACA,GACA;UACA0N;UACAhO;UACAsE;UACAsJ;UACAK;UACAlG;UACAmG;UACApC;UACAqC;YACAtJ;YACAkD;YACAqG;YACAC;YACApG;YACAD;UACA;UACAjB;YACArC;YACAwC;YACAoH;YACAC;YACAC;UACA;UACAlO;QACA,GACA;UACAN;UACAsE;UACA8C;UACApC;YACAmD;cACAzD,6DACA;gBACA2C;gBACA3C;cACA,GACA;gBACA2C;gBACA3C;cACA,EACA;YACA;UACA;UACApE;QACA;MAEA;MACA+E;MACAvC;QACAuC;MACA;IACA;IACA;IACAoJ;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;QACA/I;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;MACA;IACA;IACA;IACAgJ;MAAA;MACA;MACA;QACA;QACA;QACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;UACA;QACA;QACA;QACA;MACA;QACA;QACA;QACAhJ;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;QACAA;MACA;IACA;IACAiJ;MACA;MACA;MACA;MACA;IACA;IACAC;MAAA;MACA;MACA;MACA;MACAjP;QACAqD;MACA;QACA;QACA6L;QACA;QACA;QACA;QACA;UACA5B;UACAC;QACA;QACA;UAAA;QAAA;QACA;UAAA;QAAA;QACA,cACA;QACA;QACA;UACA,8BACA4B;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;IACA5M;MACA;QACA;MACA;QACA;QACA;MACA;IACA;IACA6M;MACAC;MACAC;QACAnM;QACA;UACA;QACA;MACA;IACA;EACA;AACA","names":["getCompanyInfo","getLine","getBanzugz","getGdtj","getDwbzgz","getGdsgdzl","getPbtyqk","getCabinetInfo","getCabinetList","getfaultReportList","getCabinetAlarmList","name","components","ringMainUnit","workOrder","routeDetail","lineDetail","data","pageShow","totals","pageSize","page","threeImg","enlargeShow","dataGzList","bz","chbc","chcg","jd","total","wchz","dateList","acolor","currentIndex","alarmInformationData","alarmInformationShow","realTimeAlarmShow","modelOthers","componentShow","CompanyInfo","tableData","btnArr","btnActive","iconGround","icon","btnEnlarge","btnEnlarge1","options","value","label","topContent","count","device","gd_type_id","gd_type_name","created","mounted","window","clearInterval","action","console","res","dataBzgz","dataGdzl","that","token","subtract","format","sn","startDate","endDate","confirm","event_desc","item","beforeDestroy","methods","routerTo","detailen1","tooltip","trigger","axisPointer","type","legend","textStyle","fontSize","color","xAxis","axisLabel","show","yAxis","series","itemStyle","borderRadius","borderWidth","emphasis","focus","myChart","getbanzhu","getGongdan","rowClass","handleCurrentChange","document","openLineDetail","rowHandle","openGdDetail","mouseout","handleUnity","selectLine","line_code","detailedOne","dataList","dataDw","grid","top","left","right","bottom","containLabel","axisTick","alignWithLabel","interval","axisLine","lineStyle","nameTextStyle","splitLine","width","splitArea","barWidth","offset","position","fontStyle","fontWeight","detailedTwo","gdsList","xlcczList","pbcczList","ddyList","backgroundColor","smooth","symbol","symbolSize","markPoint","normal","borderColor","shadowColor","shadowBlur","areaStyle","x","y","x2","y2","colorStops","global","detailedTwo11","itemWidth","itemHeight","boundaryGap","min","max","formatter","stack","horizontalChart","shape","buildPath","ctx","title","text","length","renderItem","children","api","xValue","yValue","yAxisPoint","style","fill","barCharts","subtext","subtextStyle","align","radius","center","labelLine","length2","rich","b","padding","hr","height","c","roseCharts","orient","itemGap","polar","angleAxis","z","margin","radiusAxis","calculable","hoverAnimation","roseType","zlevel","detailedThree","startAngle","selectedMode","doing","detailedFour","yearBzData","yearChcg","yearChbc","yearWchz","yearJieDi","yearFenJi","rotate","barMaxWidth","barGap","barBorderRadius","detailedFive","dataListx","dataGz","dataPb","dataCf","datacoords","coord","datacoords1","animation","animationDuration","animationEasing","animationThreshold","gridIndex","splitNumber","yAxisIndex","showAllSymbol","shadowOffsetX","shadowOffsetY","showSymbol","polyline","coordinateSystem","effect","period","trailLenth","opacity","curveness","cap","enlargeBtn","enlargeBtn1","handleClose","handleDate","dataPbty","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 \r\n <div class=\"titleFont\"> \r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>盐城地区分布光伏运行监测</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">户数高渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">容量渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">能量渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\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\">\r\n <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>配网工程全过程物资审计</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n </div>\r\n <div class=\"content\" style=\"display:inline\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">项目数 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">预算费用总和</span> </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">计划数 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\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\">\r\n <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>盐都东台区供电所数字化分析</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">升档配变数量 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">降档配比数量</span> \r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">负荷关注配变数量 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\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\">\r\n <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>盐城供电公司配网电能质量管控</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">月供电可靠性 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">平均停电频次 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">平均停电时间 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div id=\"detailedOne\" style=\"height: calc(100% - 200px)\"></div>\r\n </div>\r\n </div>\r\n <div class=\"middle\" id=\"middle\">\r\n <div class=\"map\" style=\"height: 100%\">\r\n <div class=\"imgboxone\">\r\n <div class=\"contents\">\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">户数高渗透率</span>\r\n <h5 style=\"font-size: 28px; color: yellow\">3.40%</h5>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">容量渗透率</span>\r\n <h5 style=\"font-size: 28px; color: orange\">0.01%</h5>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">能量渗透率</span>\r\n <h5 style=\"font-size: 28px; color: yellow\">0.44%</h5>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"imgboxtwo\">\r\n <ul class=\"contentUl\">\r\n <li>\r\n <h5>发电客户数</h5>\r\n <br />\r\n <span style=\"color: yellow\">4721</span>\r\n </li>\r\n <li>\r\n <h5>变电站数量</h5>\r\n <br />\r\n <span style=\"color: orange\">90</span>\r\n </li>\r\n <li>\r\n <h5>台区总数</h5>\r\n <br />\r\n <span style=\"color: yellow\">17416</span>\r\n </li>\r\n <li>\r\n <h5>当前负载率</h5>\r\n <br />\r\n <span style=\"color: orange\">40.19%</span>\r\n </li>\r\n </ul>\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\">\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\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>乡村振兴电力综合指数</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></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=\"top\">\r\n <div class=\"topContent\" v-for=\"(item, index) in topContent\" :key=\"index\">\r\n <div style=\"color: #ffffff\">{{ item.name }}</div>\r\n <div style=\"color: rgb(86, 254, 226); font-size: 22px\">\r\n {{ item.count }}\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"height: 90%\" id=\"detailedFive\"></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 class=\"cartitle\">\r\n <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>两高行业企业污染监测</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></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=\"content\" style=\"display:inline\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">项目数 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">预算费用总和</span> </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">计划数 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\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\">\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\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>农村生活污水治理设备电量分析</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></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=\"top\">\r\n <div class=\"topContent\" v-for=\"(item, index) in topContent\" :key=\"index\">\r\n <div style=\"color: #ffffff\">{{ item.name }}</div>\r\n <div style=\"color: rgb(86, 254, 226); font-size: 22px\">\r\n {{ item.count }}\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"height: 90%\" id=\"detailedFive\"></div> -->\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\" @click=\"openLineDetail(CompanyInfo.pdxl)\">\r\n <span style=\"font-size: 18px\">户数高渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.pdxl\">{{ CompanyInfo.pdxl }}</span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">容量渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"line\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <span style=\"font-size: 18px\">能量渗透率 </span>\r\n <span style=\"\r\n font-size: 45px;\r\n font-weight: 600;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(189, 255, 231),\r\n rgb(86, 244, 254)\r\n );\r\n \" class=\"numText\" :text=\"CompanyInfo.xlcd\">{{ CompanyInfo.xlcd }}</span>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n \r\n </div>\r\n <div class=\"line\">\r\n <div class=\"enselect\">\r\n <img src=\"../assets/02/地区选择下拉菜单.png\" alt=\"\" />\r\n <span class=\"text\">能量</span>\r\n </div>\r\n <div id=\"detailen\"></div>\r\n </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 class=\"cartitle\">\r\n <div class=\"titleFont\"><img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>数字化排涝抗旱辅助及检修辅助决策</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" /></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>\r\n </div>\r\n <div class=\"realTimeAlarm\" v-show=\"realTimeAlarmShow\">\r\n <div class=\"content\">\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 @click=\"handleClose\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"table user_skills\">\r\n <el-table :data=\"alarmInformationData\" style=\"width: 100%; height: 100%\"\r\n :header-cell-style=\"{ 'text-align': 'center' }\" :cell-style=\"{ 'text-align': 'center' }\"\r\n :row-class-name=\"rowClass\">\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 prop=\"cabinet_name\" label=\"告警位置\" align=\"center\">\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 @current-change=\"handleCurrentChange\" :current-page=\"page\" :page-size=\"pageSize\"\r\n layout=\"prev, pager, next\" :total=\"totals\" v-if=\"pageShow\">\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 class=\"componentShow\" style=\"display: block; height: calc(100% - 100px); top: 100px\" v-if=\"lineItem != null\">\r\n <component :is=\"lineShow\" :lineItem=\"lineItem\"></component>\r\n </div>\r\n <audio controls=\"controls\" hidden src=\"../assets/videos/police.wav\" ref=\"audio\"></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// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\nimport 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 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 this.detailedTwo11()\r\n this.horizontalChart()\r\n this.barCharts()\r\n this.roseCharts()\r\n this.detailen1();\r\n // 盐都区供电公司概况\r\n getCompanyInfo().then((res) => {\r\n // console.log(res,'....');\r\n this.CompanyInfo = res.data.data;\r\n });\r\n\r\n // 查询总线路\r\n getLine({ action: \"all\" }).then((res) => {\r\n if (res.data != \"\") {\r\n this.options = Object.keys(res.data.data).map((item, index) => {\r\n return {\r\n value: res.data.data[index].line_code,\r\n label: res.data.data[index].line_name,\r\n };\r\n });\r\n }\r\n });\r\n //周查询班组\r\n this.getbanzhu();\r\n this.timer = window.setInterval(() => {\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 }, 60000);\r\n //工单统计action:'tongji'\r\n this.getGongdan();\r\n this.timer = window.setInterval(() => {\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 }, 60000);\r\n\r\n //年度查询班组\r\n getBanzugz({\r\n action: \"year\",\r\n }).then((res) => {\r\n console.log(res, \"年数据\");\r\n this.dataGzList = res.data.data;\r\n // console.log(this.dataGzList,'年度查询班组数据');\r\n for (let i = 0; i < this.dataGzList.length; i++) {\r\n for (let j = 0; j < res.data.data.length; j++) {\r\n if (this.dataGzList[i].bz == res.data.data[j].bz) {\r\n this.dataGzList[i].chbc = res.data.data[j].chbc;\r\n this.dataGzList[i].chcg = res.data.data[j].chcg;\r\n this.dataGzList[i].jd = res.data.data[j].jd;\r\n this.dataGzList[i].total = res.data.data[j].total;\r\n this.dataGzList[i].wchz = res.data.data[j].wchz;\r\n }\r\n }\r\n }\r\n this.detailedFour(this.dataGzList);\r\n });\r\n //本周故障\r\n getDwbzgz().then((res) => {\r\n let dataBzgz = [];\r\n dataBzgz = res.data.data;\r\n this.detailedOne(dataBzgz);\r\n });\r\n //供电质量统计\r\n getGdsgdzl().then((res) => {\r\n let dataGdzl = [];\r\n dataGdzl = res.data.data;\r\n // this.detailedTwo(dataGdzl);\r\n });\r\n // //配变停运\r\n // getPbtyqk({\r\n // action:\"week\"\r\n // }).then((res)=>{\r\n // let dataPbty = [];\r\n // dataPbty = res.data.data\r\n // console.log(dataPbty,'dataPbty');\r\n // this.detailedFive(dataPbty);\r\n // let dataPb = [];\r\n // let dataCf = [];\r\n // let dataCfl = [];\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 // dataCfl.push(dataPbty[i].pbcftyl)\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 this.handleDate(0);\r\n let that = this;\r\n window.addEventListener(\"message\", function (e) {\r\n var res = e.data;\r\n if (res.val != null) {\r\n that.modelOthers = true;\r\n that.componentShow = \"ringMainUnit\";\r\n that.device = res.val;\r\n }\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 getfaultReportList(faultData).then((res) => {\r\n // this.alarmInformationData = res.data.data.data;\r\n });\r\n window.setInterval(() => {\r\n let endDate = this.$moment(new Date()).format(\"YYYY-MM-DD HH:mm:ss\");\r\n let startDate = this.$moment(new Date())\r\n .subtract(1, \"h\")\r\n .format(\"YYYY-MM-DD HH:mm:ss\");\r\n let cabData = {\r\n token: localStorage.getItem(\"token\"),\r\n pageSize: 50,\r\n page: 1,\r\n sn: \"\",\r\n startDate: startDate,\r\n endDate: endDate,\r\n confirm: \"\",\r\n };\r\n getCabinetAlarmList(cabData).then((res) => {\r\n let event_desc = ''\r\n if (res.data.data.data != null) {\r\n res.data.data.data.forEach((item, index) => {\r\n if (item.event_desc.indexOf(\"开关\") != -1) {\r\n event_desc = item.event_desc.replace('开关', '间隔')\r\n } else {\r\n event_desc = item.event_desc\r\n }\r\n });\r\n this.emergencyList = res.data.data.data.filter(item => {\r\n return item.event_desc.indexOf(\"通讯状态\") == -1\r\n });\r\n this.emergencyList.forEach((item, index) => {\r\n item.event_desc = event_desc\r\n });\r\n this.totals = this.emergencyList.length;\r\n let dataList = this.emergencyList;\r\n if (dataList.length != 0) {\r\n this.rowTime = dataList[0].created_at;\r\n } else {\r\n return false;\r\n }\r\n }\r\n });\r\n }, 10000);\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 routerTo(data) {\r\n if (data == '盐城地区分布光伏运行监测') {\r\n this.$router.push(\"/stationBuilding\");\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 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 \"10kv北红线124\",\r\n \"10kv北红线125\",\r\n \"10kv北红线126\",\r\n \"10kv北红线127\",\r\n \"10kv北红线128\",\r\n ],\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\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 },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"关联电网事故\",\r\n type: \"bar\",\r\n itemStyle: {\r\n color: \"#00ffff\", // 柱状图颜色\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n emphasis: {\r\n focus: \"series\",\r\n },\r\n data: [320, 332, 301, 334, 390],\r\n },\r\n {\r\n name: \"关联检修单\",\r\n type: \"bar\",\r\n itemStyle: {\r\n color: \"yellow\", // 柱状图颜色\r\n borderRadius: [7, 7, 0, 0], // 柱状图圆角\r\n borderWidth: 0,\r\n },\r\n emphasis: {\r\n focus: \"series\",\r\n },\r\n data: [220, 182, 191, 234, 290],\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 // beginShowing() {\r\n // this.$nextTick(function () {\r\n // // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离\r\n // if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {\r\n // this.tableHeight =\r\n // window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;\r\n // this.$refs.tableBox.doLayout();\r\n // this.roll();\r\n // }\r\n // });\r\n // },\r\n // roll() {\r\n // // 拿到表格挂载后的真实DOM\r\n // const table = this.$refs.tableBox;\r\n // // 拿到表格中承载数据的div元素\r\n // const bodyWrapper = table.bodyWrapper;\r\n // // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)\r\n // this.myTimer = setInterval(() => {\r\n // // 元素自增距离顶部1像素\r\n // bodyWrapper.scrollTop++;\r\n // // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)\r\n // if (\r\n // bodyWrapper.clientHeight + bodyWrapper.scrollTop ===\r\n // bodyWrapper.scrollHeight\r\n // ) {\r\n // // 重置table距离顶部距离\r\n // bodyWrapper.scrollTop = 0;\r\n // }\r\n // }, 100);\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(dataBzgz) {\r\n let dataList = [];\r\n let newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];\r\n let dataDw = [];\r\n for (let i = 0; i < dataBzgz.length; i++) {\r\n dataList.push(dataBzgz[i].gzcs);\r\n dataDw.push(dataBzgz[i].dw);\r\n }\r\n\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n grid: {\r\n top: \"18%\",\r\n left: \"5%\",\r\n right: \"3%\",\r\n bottom: \"5%\",\r\n containLabel: true,\r\n },\r\n\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: dataDw,\r\n axisTick: {\r\n show: false,\r\n alignWithLabel: true,\r\n },\r\n axisLabel: {\r\n color: \"#ffffff\",\r\n interval: 0,\r\n fontSize: 16,\r\n },\r\n axisLine: {\r\n show: false, //隐藏X轴轴线\r\n lineStyle: {\r\n color: \"#01FCE3\",\r\n },\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n name: \"单位：次\",\r\n type: \"value\",\r\n data: [0, 2, 4, 6, 8, 10],\r\n nameTextStyle: {\r\n color: \"#ffffff\",\r\n // padding:[25,0,0,0]\r\n fontSize: 16,\r\n },\r\n axisLabel: {\r\n color: \"#ffffff\",\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n type: \"solid\",\r\n // color: 'rgba(66, 192, 255, .3)',\r\n color: \"rgba(102,102,102,0.6)\",\r\n width: 1,\r\n // color: 'red'\r\n fontSize: 16,\r\n },\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n // {\r\n // type: \"bar\",\r\n // barWidth: 22,\r\n // itemStyle: {\r\n // normal: {\r\n // label: {\r\n // fontSize: 14,\r\n // formatter(params) {\r\n // for (let i = 0; i < dataList.length; i++) {\r\n // if (params.dataIndex == i) {\r\n // return dataDw[i] + \"\\n\" + \"\\n\" + dataList[i];\r\n // }\r\n // }\r\n // },\r\n // show: true,\r\n // position: \"top\",\r\n // color: \"#ffffff\",\r\n // },\r\n // color: \"none\",\r\n // },\r\n // },\r\n // silent: true,\r\n // // barGap: \"-100%\",\r\n // data: newArr,\r\n // },\r\n {\r\n name: \"\",\r\n type: \"bar\",\r\n barWidth: 30,\r\n itemStyle: {\r\n color: (params) => {\r\n // console.log(params, '数据');\r\n let colorList = [\r\n new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n { offset: 0, color: \"rgba(23,74,100,0.6)\" },\r\n { offset: 1, color: \"rgb(86,254,226)\" },\r\n ]),\r\n new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [\r\n {\r\n offset: 0,\r\n color: \"rgba(237,125,49,.2)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(237,125,49,1)\",\r\n },\r\n ]),\r\n ];\r\n if (params.name == \"盐都\") {\r\n return colorList[1];\r\n } else {\r\n return colorList[0];\r\n }\r\n },\r\n fontSize: 16,\r\n },\r\n data: dataList,\r\n label: {\r\n show: true,\r\n position: \"top\",\r\n fontStyle: \"normal\",\r\n fontWeight: \"normal\",\r\n color: \"#ffffff\",\r\n },\r\n // z: -1,\r\n // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。\r\n // barGap: '-100%',\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(dataGdzl) {\r\n let gdsList = [];\r\n let xlcczList = [];\r\n let pbcczList = [];\r\n let ddyList = [];\r\n for (let i = 0; i < dataGdzl.length; i++) {\r\n gdsList.push(dataGdzl[i].gds);\r\n xlcczList.push(dataGdzl[i].xlccz);\r\n pbcczList.push(dataGdzl[i].pbccz);\r\n ddyList.push(dataGdzl[i].ddy);\r\n }\r\n let that = this;\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n // animation: true,\r\n // animationDuration: 20000,\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"cross\",\r\n label: {\r\n backgroundColor: \"#6a7985\",\r\n },\r\n },\r\n },\r\n grid: {\r\n left: \"4%\",\r\n right: \"4%\",\r\n bottom: \"5%\",\r\n top: \"15%\",\r\n containLabel: true,\r\n },\r\n legend: {\r\n top: 10,\r\n icon: \"rect\",\r\n right: 25,\r\n data: [\"线路重超载\", \"配变重超载\", \"低电压\"],\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 16,\r\n },\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n data: gdsList,\r\n axisLine: {\r\n // 改变x轴颜色\r\n lineStyle: {\r\n color: \"none\",\r\n },\r\n },\r\n axisLabel: {\r\n // 改变x轴字体颜色和大小\r\n interval: 0,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n lineStyle: {\r\n color: [\"#315070\"],\r\n width: 1,\r\n type: \"solid\",\r\n },\r\n },\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n // 改变y轴颜色\r\n show: false,\r\n lineStyle: {\r\n color: \"none\",\r\n },\r\n },\r\n axisLabel: {\r\n // 改变y轴字体颜色和大小\r\n //formatter: '{value} m³ ', // 给y轴添加单位\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: 16,\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: [\"#315070\"],\r\n width: 1,\r\n type: \"solid\",\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n type: \"line\",\r\n smooth: true,\r\n symbol: \"circle\",\r\n symbolSize: 7,\r\n markPoint: {\r\n symbol: \"circle\",\r\n },\r\n name: \"线路重超载\",\r\n data: xlcczList,\r\n itemStyle: {\r\n normal: {\r\n color: \"#3D7EEB\",\r\n borderColor: \"#3D7EEB\",\r\n borderWidth: 2,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 2,\r\n color: \"#327BFA\",\r\n shadowColor: \"#327BFA\",\r\n shadowBlur: 10,\r\n },\r\n },\r\n areaStyle: {\r\n color: {\r\n type: \"linear\",\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0.5,\r\n color: \"rgba(61,126,235,0.5)\", // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(61,126,235,0)\", // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n {\r\n type: \"line\",\r\n smooth: true,\r\n symbol: \"circle\",\r\n symbolSize: 7,\r\n markPoint: {\r\n symbol: \"circle\",\r\n },\r\n data: pbcczList,\r\n name: \"配变重超载\",\r\n itemStyle: {\r\n normal: {\r\n color: \"#17D8A1\",\r\n borderColor: \"#17D8A1\",\r\n borderWidth: 2,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 2,\r\n color: \"#17D8A1\",\r\n shadowColor: \"#17D8A1\",\r\n shadowBlur: 10,\r\n },\r\n },\r\n areaStyle: {\r\n color: {\r\n type: \"linear\",\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0.5,\r\n color: \"rgba(23,216,161,0.5)\", // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(23,216,161,0)\", // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n {\r\n type: \"line\",\r\n smooth: true,\r\n symbol: \"circle\",\r\n symbolSize: 7,\r\n markPoint: {\r\n symbol: \"circle\",\r\n },\r\n data: ddyList,\r\n name: \"低电压\",\r\n itemStyle: {\r\n normal: {\r\n color: \"#F4C907\",\r\n borderColor: \"#F4C907\",\r\n borderWidth: 2,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 2,\r\n color: \"#F4C907\",\r\n shadowColor: \"#F4C907\",\r\n shadowBlur: 10,\r\n },\r\n },\r\n areaStyle: {\r\n color: {\r\n type: \"linear\",\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0.5,\r\n color: \"rgba(106,117,79,1)\", // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(106,117,79,0)\", // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\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\r\n grid: {\r\n left: '5%',\r\n right: '10%',\r\n top: '20%',\r\n bottom: '15%',\r\n containLabel: true\r\n },\r\n tooltip: {\r\n show: true,\r\n trigger: 'item'\r\n },\r\n legend: {\r\n show: true,\r\n x: 'center',\r\n y: '35',\r\n icon: 'stack',\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n textStyle: {\r\n color: '#1bb4f6'\r\n },\r\n data: ['已采纳', '已发布', '浏览量']\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n boundaryGap: false,\r\n axisLabel: {\r\n color: fontColor\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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']\r\n }\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n name: '信息量',\r\n min: 0,\r\n max: 1000,\r\n axisLabel: {\r\n formatter: '{value}',\r\n textStyle: {\r\n color: '#2ad1d2'\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 splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#11366e',\r\n type: \"dashed\",\r\n }\r\n }\r\n },\r\n // {\r\n // \ttype : 'value',\r\n // \tname : '浏览量',\r\n // \tmin:0,\r\n // \tmax:1000,\r\n // \taxisLabel : {\r\n // \t\tformatter: '{value} 人',\r\n // \t\ttextStyle:{\r\n // \t\t\tcolor:'#186afe'\r\n // \t\t}\r\n // \t},\r\n // \taxisLine:{\r\n // \t\tlineStyle:{\r\n // \t\t\tcolor:'#186afe'\r\n // \t\t}\r\n // \t},\r\n // \taxisTick:{\r\n // \tshow:false,\r\n // },\r\n // \tsplitLine:{\r\n // \t\tshow:true,\r\n // \t\tlineStyle:{\r\n // \t\t\tcolor:'#11366e'\r\n // \t\t}\r\n // \t}\r\n // }\r\n ],\r\n series: [\r\n // {\r\n // \tname:'已采纳',\r\n // \ttype:'line',\r\n // \tstack: '总量',\r\n // \tsymbol:'circle',\r\n // \tsymbolSize: 8,\r\n // itemStyle: {\r\n // normal: {\r\n // \t\t\tcolor:'#0092f6',\r\n // lineStyle: {\r\n // \t\t\t\tcolor: \"#0092f6\",\r\n // \t\t\t\twidth:1\r\n // },\r\n // areaStyle: { \r\n // \t\t\t\tcolor: '#94C9EC'\r\n // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n // \t\t\t\t// \toffset: 0,\r\n // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n // \t\t\t\t// }, {\r\n // \t\t\t\t// \toffset: 1,\r\n // \t\t\t\t// \tcolor: 'rgba(0,146,246,0.9)'\r\n // \t\t\t\t// }]),\r\n // }\r\n // }\r\n // \t},\r\n // \tmarkPoint:{\r\n // \t\titemStyle:{\r\n // \t\t\tnormal:{\r\n // \t\t\t\tcolor:'red'\r\n // \t\t\t}\r\n // \t\t}\r\n // \t},\r\n // \tdata:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]\r\n // },\r\n {\r\n name: '已发布',\r\n type: 'line',\r\n stack: '总量',\r\n symbol: 'circle',\r\n symbolSize: 8,\r\n\r\n itemStyle: {\r\n normal: {\r\n color: '#00d4c7',\r\n lineStyle: {\r\n color: \"#00d4c7\",\r\n width: 1\r\n },\r\n // areaStyle: { \r\n // \tcolor: '#94C9EC'\r\n // \t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n // \t// \toffset: 0,\r\n // \t// \tcolor: 'rgba(7,44,90,0.3)'\r\n // \t// }, {\r\n // \t// \toffset: 1,\r\n // \t// \tcolor: 'rgba(0,212,199,0.9)'\r\n // \t// }]),\r\n // }\r\n }\r\n },\r\n data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]\r\n },\r\n // {\r\n // \tname:'浏览量',\r\n // \ttype:'line',\r\n // \tstack: '总量',\r\n // \tsymbol:'circle',\r\n // \tsymbolSize: 8,\r\n // itemStyle: {\r\n // normal: {\r\n // color: '#aecb56',\r\n // lineStyle: {\r\n // \t\t\t\tcolor: \"#aecb56\",\r\n // \t\t\t\twidth:1\r\n // },\r\n // areaStyle: { \r\n // \t\t\t\tcolor: '#94C9EC'\r\n // \t\t\t\t// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{\r\n // \t\t\t\t// \toffset: 0,\r\n // \t\t\t\t// \tcolor: 'rgba(7,44,90,0.3)'\r\n // \t\t\t\t// }, {\r\n // \t\t\t\t// \toffset: 1,\r\n // \t\t\t\t// \tcolor: 'rgba(114,144,89,0.9)'\r\n // \t\t\t\t// }]),\r\n // }\r\n // }\r\n // \t},\r\n // \tdata:[150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]\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(document.getElementById(\"horizontalChart\"));\r\n const CubeLeft = this.$echarts.graphic.extendShape({\r\n shape: {\r\n x: 0,\r\n y: 0\r\n },\r\n buildPath: function (ctx, shape) {\r\n console.log(ctx, shape);\r\n const yAxisPoint = shape.yAxisPoint\r\n const c0 = [shape.x, shape.y]\r\n const c1 = [shape.x + 9, shape.y - 9]\r\n const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]\r\n const c3 = [yAxisPoint[0], yAxisPoint[1]]\r\n ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()\r\n }\r\n })\r\n const CubeRight = this.$echarts.graphic.extendShape({\r\n shape: {\r\n x: 0,\r\n y: 0\r\n },\r\n buildPath: function (ctx, shape) {\r\n const yAxisPoint = shape.yAxisPoint\r\n const c1 = [shape.x, shape.y]\r\n const c2 = [yAxisPoint[0], yAxisPoint[1]]\r\n const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]\r\n const c4 = [shape.x + 9, shape.y + 18]\r\n ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n }\r\n })\r\n const CubeTop = this.$echarts.graphic.extendShape({\r\n shape: {\r\n x: 0,\r\n y: 0\r\n },\r\n buildPath: function (ctx, shape) {\r\n const c1 = [shape.x, shape.y]\r\n const c2 = [shape.x + 9, shape.y + 18]\r\n const c3 = [shape.x + 18, shape.y + 9]\r\n const c4 = [shape.x + 9, shape.y - 9]\r\n ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()\r\n }\r\n })\r\n this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)\r\n this.$echarts.graphic.registerShape('CubeRight', CubeRight)\r\n this.$echarts.graphic.registerShape('CubeTop', CubeTop)\r\n const MAX = [6000, 6000, 6000, 6000, 6000]\r\n const VALUE = [2012, 1230, 3790, 2349, 1654]\r\n const NAMES = ['德州', '德城区', '陵城区', '禹城市', '乐陵市'];\r\n var option = {\r\n title: {\r\n text: '',\r\n top: 32,\r\n left: 18,\r\n textStyle: {\r\n color: '#00F6FF',\r\n fontSize: 24\r\n }\r\n },\r\n grid: {\r\n left: 20,\r\n right: 40,\r\n bottom: '19%',\r\n top: 107,\r\n containLabel: true\r\n },\r\n yAxis: {\r\n type: 'category',\r\n data: NAMES,\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: 'white'\r\n }\r\n },\r\n offset: 20,\r\n axisTick: {\r\n show: false,\r\n length: 9,\r\n alignWithLabel: true,\r\n lineStyle: {\r\n color: '#7DFFFD'\r\n }\r\n },\r\n axisLabel: {\r\n fontSize: 10\r\n }\r\n },\r\n xAxis: {\r\n type: 'value',\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: 'white'\r\n }\r\n },\r\n splitLine: {\r\n show: false\r\n },\r\n axisTick: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false,\r\n fontSize: 16\r\n },\r\n boundaryGap: ['20%', '20%']\r\n },\r\n series: [{\r\n type: 'custom',\r\n renderItem: function (params, api) {\r\n const location = api.coord([api.value(0), api.value(1)])\r\n return {\r\n type: 'group',\r\n children: [{\r\n type: 'CubeLeft',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n style: {\r\n fill: 'rgba(7,29,97,.6)'\r\n }\r\n }, {\r\n type: 'CubeRight',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n style: {\r\n fill: 'rgba(10,35,108,.7)'\r\n }\r\n }, {\r\n type: 'CubeTop',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n style: {\r\n fill: 'rgba(11,42,106,.8)'\r\n }\r\n }]\r\n }\r\n },\r\n data: MAX\r\n },\r\n {\r\n type: 'custom',\r\n renderItem: (params, api) => {\r\n const location = api.coord([api.value(0), api.value(1)])\r\n return {\r\n type: 'group',\r\n children: [{\r\n type: 'CubeLeft',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n // style: {\r\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n // offset: 0,\r\n // color: '#3B80E2'\r\n // },\r\n // {\r\n // offset: 1,\r\n // color: '#49BEE5'\r\n // }\r\n // ])\r\n // }\r\n }, {\r\n type: 'CubeRight',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n // style: {\r\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n // offset: 0,\r\n // color: '#3B80E2'\r\n // },\r\n // {\r\n // offset: 1,\r\n // color: '#49BEE5'\r\n // }\r\n // ])\r\n // }\r\n }, {\r\n type: 'CubeTop',\r\n shape: {\r\n api,\r\n xValue: api.value(0),\r\n yValue: api.value(1),\r\n x: location[0],\r\n y: location[1],\r\n yAxisPoint: api.coord([0, api.value(1)])\r\n },\r\n // style: {\r\n // fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{\r\n // offset: 0,\r\n // color: '#3B80E2'\r\n // },\r\n // {\r\n // offset: 1,\r\n // color: '#49BEE5'\r\n // }\r\n // ])\r\n // }\r\n }]\r\n }\r\n },\r\n data: VALUE\r\n },\r\n {\r\n type: 'bar',\r\n label: {\r\n normal: {\r\n show: true,\r\n position: 'right',\r\n formatter: (e) => {\r\n switch (e.name) {\r\n case '10kV线路':\r\n return VALUE[0]\r\n case '公用配变':\r\n return VALUE[1]\r\n case '35kV主变':\r\n return VALUE[2]\r\n case '水':\r\n\r\n }\r\n },\r\n fontSize: 16,\r\n color: '#fff',\r\n offset: [25, 4]\r\n }\r\n },\r\n itemStyle: {\r\n color: 'transparent'\r\n },\r\n data: MAX\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 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 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 ],\r\n labelLine: {\r\n normal: {\r\n show: true,\r\n length: 50,\r\n length2: 50,\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:14,\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: 14,\r\n align: 'center',\r\n padding: 4,\r\n color: '#00EDED'\r\n }\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: [\"#EAEA26\", \"#906BF9\", \"#FE5656\", \"#01E17E\", \"#3DD1F9\", \"#FFAD05\"],\r\n // title: {\r\n // text: '网络/安全设备',\r\n // left: '60',\r\n // top: 0,\r\n // textAlign: 'center',\r\n // textStyle: {\r\n // color: '#fff',\r\n // fontSize: 14,\r\n // fontWeight: 0\r\n // }\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 legend: {\r\n type: \"scroll\",\r\n orient: \"vartical\",\r\n // x: \"right\",\r\n top: \"center\",\r\n right: \"15\",\r\n // bottom: \"0%\",\r\n itemWidth: 16,\r\n itemHeight: 8,\r\n itemGap: 16,\r\n textStyle: {\r\n color: '#A3E2F4',\r\n fontSize: 12,\r\n fontWeight: 0\r\n },\r\n data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']\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 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 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 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 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 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: \"{c}\",\r\n textStyle: {\r\n fontSize: 12,\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: 55\r\n },\r\n emphasis: {\r\n show: false\r\n }\r\n },\r\n data: [{\r\n value: 10,\r\n name: 'IDS'\r\n },\r\n {\r\n value: 5,\r\n name: 'VPN'\r\n },\r\n {\r\n value: 15,\r\n name: '交换机'\r\n },\r\n {\r\n value: 25,\r\n name: '防火墙'\r\n },\r\n {\r\n value: 20,\r\n name: 'WAF'\r\n },\r\n {\r\n value: 35,\r\n name: '堡垒机'\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,1)\",\r\n },\r\n {\r\n offset: 1,\r\n color: \"rgba(194,190,190,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(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(dataPbty) {\r\n let dataListx = [];\r\n let dataPb = [];\r\n let dataGz = [];\r\n let dataCf = [];\r\n for (let i = 0; i < dataPbty.length; i++) {\r\n dataListx.push(dataPbty[i].gds);\r\n dataGz.push(dataPbty[i].gztytc);\r\n dataPb.push(dataPbty[i].pbsl);\r\n dataCf.push(dataPbty[i].cftytc);\r\n }\r\n var datacoords = [];\r\n var datacoords1 = [];\r\n for (var i = 0; i < dataListx.length; i++) {\r\n datacoords.push([\r\n {\r\n coord: [i, dataGz[i]],\r\n },\r\n {\r\n coord: [i + 1, dataGz[i + 1]],\r\n },\r\n ]);\r\n }\r\n for (var i = 0; i < dataListx.length; i++) {\r\n datacoords1.push([\r\n {\r\n coord: [i, dataCf[i]],\r\n },\r\n {\r\n coord: [i + 1, dataCf[i + 1]],\r\n },\r\n ]);\r\n }\r\n let that = this;\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\r\n var option = {\r\n animation: true, //控制动画示否开启\r\n animationDuration: 2000,\r\n animationEasing: \"bounceOut\", //缓动动画\r\n animationThreshold: 8, //动画元素的阈值\r\n grid: {\r\n top: \"15%\",\r\n bottom: \"30%\", //也可设置left和right设置距离来控制图表的大小\r\n },\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n label: {\r\n show: true,\r\n },\r\n },\r\n },\r\n legend: {\r\n data: [\"配变数量\", \"故障停运\", \"重复停运\"],\r\n top: \"0%\",\r\n // icon:'roundRect',\r\n // itemHeight:2, // 粗细\r\n textStyle: {\r\n color: \"#ffffff\",\r\n },\r\n },\r\n xAxis: {\r\n data: dataListx,\r\n axisLine: {\r\n show: false, //隐藏X轴轴线\r\n lineStyle: {\r\n color: \"#01FCE3\",\r\n },\r\n },\r\n axisTick: {\r\n show: false, //隐藏X轴刻度\r\n },\r\n axisLabel: {\r\n show: true,\r\n interval: 0,\r\n textStyle: {\r\n color: \"#ffffff\", //X轴文字颜色\r\n fontSize: \"16px\",\r\n },\r\n },\r\n },\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"配变数量\",\r\n nameTextStyle: {\r\n color: \"#ffffff\",\r\n padding: [0, 30, 0, 0],\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#FFFFFF\",\r\n },\r\n },\r\n axisLabel: {\r\n show: true,\r\n interval: 0,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n },\r\n },\r\n },\r\n {\r\n type: \"value\",\r\n name: \"停运台次\",\r\n nameTextStyle: {\r\n color: \"#ffffff\",\r\n },\r\n position: \"right\",\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n show: true,\r\n\r\n // formatter: \"{value} %\", //右侧Y轴文字显示\r\n textStyle: {\r\n color: \"#ffffff\",\r\n },\r\n },\r\n },\r\n {\r\n type: \"value\",\r\n gridIndex: 0,\r\n min: 50,\r\n max: 100,\r\n splitNumber: 8,\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: true,\r\n areaStyle: {\r\n color: [\"rgba(250,250,250,0.0)\", \"rgba(250,250,250,0.05)\"],\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"故障停运\",\r\n type: \"line\",\r\n yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n smooth: false, //平滑曲线显示\r\n showAllSymbol: true, //显示所有图形。\r\n shadowOffsetX: 0, // 折线的X偏移\r\n shadowOffsetY: 10, // 折线的Y偏移\r\n symbol: \"circle\", //标记的图形为实心圆\r\n symbolSize: 1, //标记的大小\r\n itemStyle: {\r\n //折线拐点标志的样式\r\n color: \"rgb(237,125,49)\",\r\n },\r\n lineStyle: {\r\n color: \"rgb(237,125,49)\",\r\n },\r\n // areaStyle: {\r\n // show:false,\r\n // color: \"rgba(5,140,255, 0.2)\",\r\n // },\r\n emphasis: {\r\n focus: \"series\",\r\n },\r\n data: dataGz,\r\n },\r\n {\r\n showSymbol: false,\r\n name: \"故障停运\",\r\n type: \"lines\",\r\n yAxisIndex: 1,\r\n polyline: true,\r\n smooth: false,\r\n coordinateSystem: \"cartesian2d\",\r\n zlevel: 1,\r\n effect: {\r\n show: true,\r\n smooth: false,\r\n period: 6,\r\n trailLenth: 0.1,\r\n symbolSize: 6,\r\n symbol: \"circle\",\r\n },\r\n lineStyle: {\r\n color: \"#fff\",\r\n width: 1,\r\n opacity: 0,\r\n curveness: 0,\r\n cap: \"round\",\r\n },\r\n data: datacoords,\r\n },\r\n {\r\n name: \"重复停运\",\r\n type: \"line\",\r\n yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用\r\n smooth: false, //平滑曲线显示\r\n shadowOffsetX: 0, // 折线的X偏移\r\n shadowOffsetY: 10, // 折线的Y偏移\r\n showAllSymbol: true, //显示所有图形。\r\n symbol: \"circle\", //标记的图形为实心圆\r\n symbolSize: 1, //标记的大小\r\n itemStyle: {\r\n //折线拐点标志的样式\r\n show: false,\r\n color: \"#058cff\",\r\n },\r\n lineStyle: {\r\n show: false,\r\n color: \"#058cff\",\r\n },\r\n // areaStyle: {\r\n // show:false,\r\n // color: \"rgba(5,140,255, 0.2)\",\r\n // },\r\n data: dataCf,\r\n },\r\n {\r\n showSymbol: false,\r\n name: \"重复停运\",\r\n type: \"lines\",\r\n yAxisIndex: 1,\r\n polyline: true,\r\n smooth: false,\r\n coordinateSystem: \"cartesian2d\",\r\n zlevel: 1,\r\n effect: {\r\n show: true,\r\n smooth: false,\r\n period: 6,\r\n trailLenth: 0.1,\r\n symbolSize: 6,\r\n symbol: \"circle\",\r\n },\r\n lineStyle: {\r\n color: \"#fff\",\r\n width: 1,\r\n opacity: 0,\r\n curveness: 0,\r\n cap: \"round\",\r\n },\r\n data: datacoords1,\r\n },\r\n {\r\n name: \"配变数量\",\r\n type: \"bar\",\r\n barWidth: 15,\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 },\r\n },\r\n data: dataPb,\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.content {\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\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 .content {\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 .line {\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: 15%;\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(to top,\r\n rgb(86, 244, 254),\r\n transparent);\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% - 200px);\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% - 200px);\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 .content {\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 .line {\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: 15%;\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(to top,\r\n rgb(86, 244, 254),\r\n transparent);\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\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/02/地图弹窗三个数据外框.png\") no-repeat;\r\n background-size: 100%;\r\n float: right;\r\n width: 40vh;\r\n height: 25vh;\r\n position: relative;\r\n top: 5vh;\r\n right: 1vh;\r\n .contents {\r\n padding: 10px 10px 10px 10px;\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 .lines {\r\n width: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n background: url(\"../assets/02/弹窗里的小框子.png\") no-repeat;\r\n }\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\r\n .num {\r\n float: left;\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 }\r\n }\r\n }\r\n .imgboxtwo {\r\n padding: 0 0 0 20px;\r\n background: url(\"../assets/02/地图弹窗四个内容的框.png\") no-repeat;\r\n background-size: 100%;\r\n float: left;\r\n width: 40vh;\r\n height: 25vh;\r\n position: relative;\r\n top: 52vh;\r\n left: 30vh;\r\n display: flex;\r\n .contentUl {\r\n display: flex;\r\n margin: 0;\r\n padding: 10px;\r\n width: 100%;\r\n height: 100%;\r\n /* flex布局 */\r\n display: flex;\r\n // 开启换行\r\n flex-wrap: wrap;\r\n // 主轴上两端对齐\r\n justify-content: space-between;\r\n // 副轴上两端对齐\r\n align-content: space-between;\r\n //li盒子大小设置\r\n li {\r\n h5 {\r\n float: left;\r\n }\r\n span {\r\n font-size: 30px;\r\n }\r\n width: 49.5%;\r\n //高度调整\r\n height: 49%;\r\n list-style: none;\r\n font-size: 24px;\r\n color: #fff;\r\n background: url(\"../assets/02/弹窗里的小框子.png\") no-repeat;\r\n }\r\n }\r\n }\r\n\r\n .map {\r\n background: url(\"../assets/indexN/地图.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 }\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 &>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 }\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% - 52px);\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 }\r\n// #detailen {\r\n// width: 100%;\r\n// height: 400px;\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% - 52px);\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(to bottom,\r\n rgb(255, 255, 255),\r\n rgb(123, 247, 245));\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 .content {\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(to bottom,\r\n rgb(255, 255, 255),\r\n rgb(86, 244, 254));\r\n }\r\n }\r\n\r\n .content {\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 .el-table--striped .el-table__body tr.el-table__row--striped 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.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 .content {\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 .line {\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: 15%;\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(to top,\r\n rgb(86, 244, 254),\r\n transparent);\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 #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\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>"]}]} |