{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\index.vue?vue&type=style&index=2&id=a83bd3b0&lang=less&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\index.vue","mtime":1689757335631},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\css-loader\\index.js","mtime":1689642389821},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1689642396087},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\postcss-loader\\src\\index.js","mtime":1689642393431},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\less-loader\\dist\\cjs.js","mtime":1689642392421},{"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":["\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",{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAu/HA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","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\" @click=\"routerTo('配网工程全过程物资审计')\">\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\" @click=\"routerTo('盐城东台区供电所数字化分析')\">\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\" @click=\"routerTo('盐城供电公司配网电能质量管控')\">\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\" ></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\" @click=\"routerTo('乡村振兴电力综合指数')\">\r\n <!-- <div style=\"\r\n width: 82%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \"> -->\r\n <div class=\"titleFont\"><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=\"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=\"detailedFive\"></div>\r\n </div>\r\n \r\n <div class=\"three\" style=\"height: 48%; width: 100%\">\r\n <div class=\"cartitle\" @click=\"routerTo('两高行业企业污染监测')\">\r\n <div class=\"titleFont\"><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\" @click=\"routerTo('农村生活污水治理设备电量分析')\">\r\n <!-- <div style=\"\r\n width: 82%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \"> -->\r\n <div class=\"titleFont\"><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\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 \r\n \r\n <div id=\"detailen\"></div>\r\n \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\" @click=\"routerTo('数字化排涝抗旱辅助及检修辅助决策')\">\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 \r\n </div>\r\n <div id=\"shuzihua\"></div>\r\n </div>\r\n </div>\r\n <div class=\"realTimeAlarm\" v-show=\"realTimeAlarmShow\">\r\n <div class=\"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//引入echarts\r\nimport * as echarts from \"echarts\";\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 pdxl:'3.4%',\r\n xlcd:'0.01%',\r\n pdxl:'3.4%',\r\n pdxl:'3.4%',\r\n pdxl:'3.4%',\r\n pdxl:'3.4%'\r\n },\r\n tableData: [],\r\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n btnActive: 0,\r\n iconGround: [\r\n {\r\n icon: require(\"@/assets/images/huanwanggui.png\"),\r\n name: \"环网柜\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n name: \"分支箱\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/xiangbian.png\"),\r\n name: \"箱变\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/kaibisuo.png\"),\r\n name: \"开闭所\",\r\n },\r\n ],\r\n btnEnlarge: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/btnFangDa.png\"),\r\n },\r\n ],\r\n btnEnlarge1: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/suoxiao.png\"),\r\n },\r\n ],\r\n options: [\r\n {\r\n value: \"\",\r\n label: \"\",\r\n },\r\n ],\r\n value: \"\",\r\n topContent: [\r\n {\r\n name: \"配变数量\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"重复停运台次\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"配变重复停运率\",\r\n count: \"\",\r\n },\r\n ],\r\n device: \"\",\r\n tableData: [],\r\n tableKey: +new Date(),\r\n scrollTop: 0, //table距离顶部距离\r\n option: null,\r\n myChartBin: null,\r\n\r\n gongdanList: [\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"频繁停电\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"处理时间长\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"运检类投诉\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"运检类意见\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"民事赔偿\",\r\n total: 0,\r\n },\r\n {\r\n gd_type_id: \"\",\r\n gd_type_name: \"多次停电\",\r\n total: 0,\r\n },\r\n ],\r\n\r\n // 工单\r\n orderItem: null,\r\n\r\n orderShow: \"\",\r\n // 线路故障明细\r\n routeItem: null,\r\n routeShow: \"\",\r\n\r\n // 配电线路\r\n lineItem: null,\r\n lineShow: \"\",\r\n timer: null, //定时器\r\n emergencyList: [], //告警数据\r\n rowTime: \"\",\r\n };\r\n },\r\n created() { },\r\n mounted() {\r\n // this.beginShowing();\r\n // 监听浏览器窗口大小变化\r\n window.onresize = () => {\r\n clearInterval(this.myTimer);\r\n this.beginShowing();\r\n };\r\n \r\n this.detailedTwo11()\r\n this.horizontalChart()\r\n this.detailedOne()\r\n this.barCharts()\r\n this.detailedFive()\r\n this.shuzihuaCharts()\r\n this.roseCharts()\r\n this.detailen1();\r\n this.handleDate(0);\r\n let that = this;\r\n\r\n //历史故障接口\r\n let faultData = {\r\n token: localStorage.getItem(\"token\"),\r\n pageSize: \"500\",\r\n page: \"1\",\r\n };\r\n\r\n },\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 if (data == '盐城东台区供电所数字化分析') {\r\n this.$router.push(\"/twentyKV\");\r\n }\r\n if (data == '配网工程全过程物资审计') {\r\n this.$router.push(\"/thirtyFiveKV\");\r\n }\r\n if (data == '盐城供电公司配网电能质量管控') {\r\n this.$router.push(\"/powerQualityControl\");\r\n }\r\n if (data == '乡村振兴电力综合指数') {\r\n this.$router.push(\"/ruralRevitalizationPower\");\r\n }\r\n if (data == '两高行业企业污染监测') {\r\n this.$router.push(\"/enterprisePollutionMonitoring\");\r\n }\r\n if (data == '农村生活污水治理设备电量分析') {\r\n this.$router.push(\"/ruralDomesticSewageTreatment\");\r\n }\r\n if (data == '数字化排涝抗旱辅助及检修辅助决策') {\r\n this.$router.push(\"/digitalFloodDrainageDroughtRelief\");\r\n }\r\n },\r\n detailen1() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n 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 };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n //班组\r\n getbanzhu() {\r\n getBanzugz({\r\n action: \"detail\",\r\n }).then((res) => {\r\n console.log(res, \"班组故障详情\");\r\n for (let i = 0; i < res.data.data.length; i++) {\r\n if (res.data.data[i].gz_time_deal) {\r\n let date = new Date(res.data.data[i].gz_time_deal);\r\n res.data.data[i].gz_time_deal =\r\n this.$moment(date).format(\"YYYY-MM-DD HH:mm\");\r\n // console.log(res.data.data[i].gz_time_deal,'转换后');\r\n }\r\n if (res.data.data[i].gz_time) {\r\n let time = new Date(res.data.data[i].gz_time);\r\n res.data.data[i].gz_time =\r\n this.$moment(time).format(\"YYYY-MM-DD HH:mm\");\r\n }\r\n this.tableData.push(res.data.data[i]);\r\n }\r\n });\r\n },\r\n //工单\r\n getGongdan() {\r\n getGdtj({ action: \"tongji\" }).then((res) => {\r\n console.log(res, \"工单统计数据\");\r\n let dataList = res.data.data;\r\n\r\n for (let i = 0; i < this.gongdanList.length; i++) {\r\n for (let j = 0; j < res.data.data.length; j++) {\r\n if (\r\n this.gongdanList[i].gd_type_name == res.data.data[j].gd_type_name\r\n ) {\r\n this.gongdanList[i].total = res.data.data[j].total;\r\n this.gongdanList[i].gd_type_id = res.data.data[j].gd_type_id;\r\n }\r\n }\r\n }\r\n // this.gongdanList = res.data.data;\r\n this.detailedThree(dataList);\r\n // this.$nextTick(() => {\r\n // this.detailedThree(dataList);\r\n // setInterval(() => {\r\n // this.doing();\r\n // }, 200);\r\n // });\r\n });\r\n },\r\n // //表格第一行颜色\r\n rowClass(row, rowIndex) {\r\n if (row.rowIndex === 0) {\r\n return \"rowColor0\";\r\n } else {\r\n return \"\";\r\n }\r\n },\r\n //切换当前页\r\n handleCurrentChange(val) {\r\n this.page = val\r\n let tableData = [];\r\n if (this.emergencyList.length != 0) {\r\n tableData = this.emergencyList;\r\n if (val == 1) {\r\n this.alarmInformationData = tableData.slice(0, 10);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display = \"\";\r\n } else if (val == 2) {\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n this.alarmInformationData = tableData.slice(10, 20);\r\n } else if (val == 3) {\r\n this.alarmInformationData = tableData.slice(20, 30);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n } else if (val == 4) {\r\n this.alarmInformationData = tableData.slice(30, 40);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n } else if (val == 5) {\r\n this.alarmInformationData = tableData.slice(40, 50);\r\n document.getElementsByClassName(\"rowColor0\")[0].style.display =\r\n \"none\";\r\n }\r\n } else {\r\n return false;\r\n }\r\n },\r\n // 线路详情弹窗\r\n openLineDetail(e) {\r\n // console.log(e);\r\n // var line = e + ''\r\n // console.log(line);\r\n getLine({ action: \"pdxl\" }).then(({ data }) => {\r\n console.log(data);\r\n this.lineShow = \"lineDetail\";\r\n this.lineItem = data.data;\r\n });\r\n },\r\n // 线路故障跳闸明细弹窗\r\n rowHandle(e) {\r\n // console.log(e, \"参数\");\r\n this.routeItem = e;\r\n this.routeShow = \"routeDetail\";\r\n // console.log(this.routeItem,'线路组件名称');\r\n },\r\n // 工单统计的弹窗\r\n openGdDetail(item) {\r\n this.orderItem = item;\r\n this.orderShow = \"workOrder\";\r\n },\r\n // 鼠标进入表格\r\n // mouseover() {\r\n // clearInterval(this.myTimer);\r\n // },\r\n // 鼠标离开表格\r\n mouseout() {\r\n this.roll();\r\n },\r\n //调用unity方法\r\n handleUnity(index, item) {\r\n this.btnActive = index;\r\n this.$refs.iframe.contentWindow.handleChange(item);\r\n },\r\n //选择线路\r\n selectLine(value) {\r\n getLine({\r\n action: \"query\",\r\n line_code: value,\r\n }).then((res) => {\r\n // console.log(res,'选择线路');\r\n if (res.data.data != 0 && res.data.data != null) {\r\n this.$refs.iframe.contentWindow.handleChangeLine(\r\n res.data.data.line_name\r\n );\r\n } else if (res.data.data == null) {\r\n this.$refs.iframe.contentWindow.handleChangeLine(\"\");\r\n }\r\n });\r\n },\r\n detailedOne() {\r\n \r\n\r\n let myChart = this.$echarts.init(document.getElementById(\"detailedOne\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n alignWithLabel: true,\r\n },\r\n splitArea: { show: false },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"\",\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: \"18\",\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"预计年变化趋势\",\r\n type: \"bar\",\r\n barWidth: 40,\r\n itemStyle: {\r\n // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n // { offset: 1, color: \"rgba(86,254,226,.2) \" },\r\n // { offset: 0.5, color: \"rgb(86,254,226,.6)\" },\r\n // { offset: 0, color: \"rgb(86,254,226)\" },\r\n // ]),\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 };\r\n\r\n myChart.setOption(option);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n shuzihuaCharts() {\r\n let myChart = this.$echarts.init(document.getElementById(\"shuzihua\"));\r\n var data = {\r\n id: 'multipleBarsLines',\r\n title: '',\r\n subTitle: '最近更新：07月18日',\r\n legendBar: ['投运15年以上设备数量', '统计时间所辖线路设备数量'],\r\n symbol: '%', //数值是否带百分号 --默认为空 ''\r\n legendLine: ['折线一'],\r\n xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念',\r\n '不找了', '闻窗一如初见', '关于春天的一切', '流程', '世界上另一个我'\r\n ],\r\n yAxis: [\r\n [8, 10, 10, 11, 4, 13, 6, 5, 9, 7],\r\n [10, 7, 8, 8, 7, 9, 8, 7, 3, 5],\r\n [6, 5, 4, 7, 9, 4, 5, 3, 7, 11]\r\n ],\r\n lines: [\r\n [10, 10, 9, 11, 7, 4, 13, 8, 2, 1],\r\n [6, 12, 12, 2, 4, 4, 10, 8, 13, 12]\r\n ],\r\n barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数\r\n lineColor: ['#638862', '#DA8084'], // 折线颜色\r\n\r\n}\r\n/////////////end/////////\r\n\r\nvar myData = (function test() {\r\n let yAxis = data.yAxis || []\r\n let lines = data.lines || []\r\n let legendBar = data.legendBar || []\r\n let legendLine = data.legendLine || []\r\n var symbol = data.symbol || ' '\r\n let seriesArr = []\r\n let legendArr = []\r\n yAxis && yAxis.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index]\r\n })\r\n seriesArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index],\r\n type: 'bar',\r\n barGap: '0.5px',\r\n data: item,\r\n barWidth: data.barWidth || 12,\r\n label: {\r\n normal: {\r\n show: true,\r\n formatter: '{c}' + symbol,\r\n position: 'top',\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n textAlign: 'left',\r\n fontSize: 11,\r\n },\r\n },\r\n },\r\n itemStyle: { //图形样式\r\n normal: {\r\n barBorderRadius: 4,\r\n color: data.barColor[index]\r\n },\r\n }\r\n })\r\n })\r\n\r\n lines && lines.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index]\r\n })\r\n seriesArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index],\r\n type: 'line',\r\n data: item,\r\n itemStyle: {\r\n normal: {\r\n color: data.lineColor[index],\r\n lineStyle: {\r\n width: 3,\r\n type: 'solid',\r\n }\r\n }\r\n },\r\n label: {\r\n normal: {\r\n show: false, //折线上方label控制显示隐藏\r\n position: 'top',\r\n }\r\n },\r\n symbol: 'circle',\r\n symbolSize: 10\r\n })\r\n })\r\n\r\n return {\r\n seriesArr,\r\n legendArr\r\n }\r\n})()\r\n\r\n\r\nvar option = {\r\n tooltip: {\r\n trigger: 'axis',\r\n formatter: function(params) {\r\n var time = '';\r\n var str = '';\r\n for (var i of params) {\r\n time = i.name.replace(/\\n/g, '') + '<br/>';\r\n if (i.data == 'null' || i.data == null) {\r\n str += i.seriesName + '：无数据' + '<br/>'\r\n } else {\r\n str += i.seriesName + '：' + i.data + symbol + '%<br/>'\r\n }\r\n\r\n }\r\n return time + str;\r\n },\r\n axisPointer: {\r\n type: 'none'\r\n },\r\n },\r\n legend: {\r\n right: data.legendRight || '30%',\r\n top: 12,\r\n itemGap: 16,\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n data: myData.legendArr,\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n fontSize: 12,\r\n }\r\n },\r\n grid: {\r\n x: 30,\r\n y: 80,\r\n x2: 30,\r\n y2: 60,\r\n },\r\n xAxis: {\r\n type: 'category',\r\n data: data.xAxis,\r\n axisTick: {\r\n show: false,\r\n },\r\n\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: true,\r\n interval: '0',\r\n textStyle: {\r\n lineHeight: 16,\r\n padding: [2, 2, 0, 2],\r\n height: 50,\r\n fontSize: 12,\r\n },\r\n rich: {\r\n Sunny: {\r\n height: 50,\r\n // width: 60,\r\n padding: [0, 5, 0, 5],\r\n align: 'center',\r\n },\r\n },\r\n formatter: function(params, index) {\r\n var newParamsName = \"\";\r\n var splitNumber = 5;\r\n var paramsNameNumber = params && params.length;\r\n if (paramsNameNumber && paramsNameNumber <= 4) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {\r\n splitNumber = 5;\r\n } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {\r\n splitNumber = 5;\r\n } else {\r\n params = params && params.slice(0, 15);\r\n }\r\n\r\n var provideNumber = splitNumber; //一行显示几个字\r\n var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;\r\n if (paramsNameNumber > provideNumber) {\r\n for (var p = 0; p < rowNumber; p++) {\r\n var tempStr = \"\";\r\n var start = p * provideNumber;\r\n var end = start + provideNumber;\r\n if (p == rowNumber - 1) {\r\n tempStr = params.substring(start, paramsNameNumber);\r\n } else {\r\n tempStr = params.substring(start, end) + \"\\n\";\r\n }\r\n newParamsName += tempStr;\r\n }\r\n\r\n } else {\r\n newParamsName = params;\r\n }\r\n params = newParamsName\r\n return '{Sunny|' + params + '}';\r\n },\r\n color: '#687284',\r\n },\r\n\r\n },\r\n yAxis: {\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 splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#F1F3F5',\r\n type: 'solid'\r\n },\r\n interval: 2\r\n },\r\n splitNumber: 4,\r\n },\r\n series: myData.seriesArr\r\n}\r\n\r\n myChart.setOption(option);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo() {\r\n \r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n color: \"#fff\",\r\n fontSize: \"16\",\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: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"总投资\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [80, 132, 101, 134, 121],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo11() {\r\n var fontColor = '#30eee9';\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var option = {\r\n tooltip: {\r\n show: true,\r\n trigger: \"item\",\r\n },\r\n grid: {\r\n left: \"3%\",\r\n right: \"4%\",\r\n bottom: \"3%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n boundaryGap: false,\r\n axisLabel: {\r\n color: \"#fff\",\r\n fontSize: \"16\",\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: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#fff\",\r\n },\r\n },\r\n },\r\n series: [\r\n {\r\n name: \"总投资\",\r\n type: \"line\",\r\n stack: \"Total\",\r\n symbol: \"none\",\r\n data: [80, 132, 101, 134, 121],\r\n itemStyle: {\r\n normal: {\r\n color: \"yellow\",\r\n lineStyle: {\r\n color: \"yellow\",\r\n },\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n horizontalChart() {\r\n var myChart = this.$echarts.init(document.getElementById(\"horizontalChart\"));\r\n var honorData = [\r\n {\r\n name: \"用电量（单位：亿）\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"碳排放量（单位：万）\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n \r\n ];\r\n var honorXAxisData = [\r\n \"盐都区\",\r\n \"建湖县\",\r\n \"射阳县\",\r\n \"阜宁县\",\r\n \"滨海县\",\r\n ];\r\n // // 设置灰色背景色的长度\r\n var isMax = 2000;\r\n var bjData1 = [\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n ];\r\n var option = {\r\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"none\",\r\n },\r\n },\r\n \r\n\r\n legend: {\r\n right: 5,\r\n top: \"5%\",\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n itemGap: 15,\r\n textStyle: {\r\n color: \"#ACCFFF\",\r\n fontSize: 16,\r\n },\r\n },\r\n grid: {\r\n left: \"5%\",\r\n right: \"5%\",\r\n bottom: \"5%\",\r\n top: \"10%\",\r\n containLabel: true,\r\n },\r\n xAxis: [\r\n {\r\n type: \"value\",\r\n show: false,\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n formatter: function (value) {\r\n return value + \"(万元)\";\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"category\",\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n },\r\n offset: 20,\r\n data: honorXAxisData,\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"用电量（单位：亿）\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"inside\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n },\r\n },\r\n data: honorData[0].data,\r\n },\r\n {\r\n name: \"碳排放量（单位：万）\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"top\",\r\n formatter: function (params) {\r\n console.log(params);\r\n // return params.seriesName + params.value ;\r\n return \"完成\" + params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 12,\r\n },\r\n },\r\n },\r\n data: honorData[1].data,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n barCharts() {\r\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n let value = 18;\r\n let legendName = ['华北', '华中', '华东', '华南', '东北', '西北'];\r\n var option = {\r\n // backgroundColor: '#031845',\r\n // title:{\r\n // text:\"123\",\r\n // left:'center',\r\n // top:'45%',\r\n // textStyle:{\r\n // color:\"#FFF\",\r\n // fontSize:\"80px\",\r\n\r\n // }\r\n // },\r\n tooltip: {\r\n trigger: 'item',\r\n formatter: \"{b} : {d}% <br/> {c}\"\r\n },\r\n // graphic: {\r\n // elements: [\r\n // {\r\n // type: 'text',\r\n // left: 'center', // 相对父元素居中\r\n // top: 'center', // 相对父元素上下的位置\r\n // style: {\r\n // fill: '#FFF',\r\n // text: ['357'],\r\n // zlevel:\"100\",\r\n // font: '80px Arial Normal',\r\n // }\r\n // }]\r\n // },\r\n // title: {\r\n // text:'总考生数',\r\n // left:'center',\r\n // top:'center',\r\n // padding:[24,0],\r\n // textStyle:{\r\n // color:'#fff',\r\n // fontSize:18*scale,\r\n // align:'center'\r\n // }\r\n // },\r\n title: {\r\n subtext: '59.53万',\r\n text: '总计',\r\n x: 'center',\r\n y: '40%',\r\n textStyle: {\r\n fontSize: 24,\r\n fontWeight: 'normal',\r\n color: '#00FFFF',\r\n },\r\n subtextStyle: {\r\n fontSize: 28,\r\n fontWeight: 'normal',\r\n align: \"center\",\r\n color: '#CCCCCC'\r\n },\r\n },\r\n series: [{\r\n 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() {\r\n \r\n let myChart = this.$echarts.init(document.getElementById(\"detailedFive\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"shadow\",\r\n },\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n data: [\"2018\", \"2019\", \"2020\", \"2021\", \"2022\"],\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: \"18\",\r\n },\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n alignWithLabel: true,\r\n },\r\n splitArea: { show: false },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"value\",\r\n name: \"\",\r\n axisLabel: {\r\n textStyle: {\r\n color: \"#ffffff\",\r\n fontSize: \"18\",\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"预计年变化趋势\",\r\n type: \"bar\",\r\n barWidth: 40,\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 1, color: \"rgba(86,254,226,.2) \" },\r\n { offset: 0.5, color: \"rgb(86,254,226,.6)\" },\r\n { offset: 0, color: \"rgb(86,254,226)\" },\r\n ]),\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 };\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 #detailedOne {\r\n width: 100%;\r\n height: calc(100% - 200px);\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 .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\r\n .one {\r\n .top {\r\n width: 100%;\r\n height: 10%;\r\n display: flex;\r\n justify-content: space-around;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n .topContent {\r\n width: 30%;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n }\r\n }\r\n }\r\n\r\n #detailedThree {\r\n width: 100%;\r\n // height: calc(100% - 52px);\r\n height: 100%;\r\n }\r\n\r\n #detailedTwo {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n }\r\n\r\n #detailedFive {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n }\r\n\r\n .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 .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 #detailen {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n #shuzihua {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n .one {\r\n .top {\r\n width: 100%;\r\n height: 10%;\r\n display: flex;\r\n justify-content: space-around;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n .topContent {\r\n width: 30%;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n }\r\n }\r\n }\r\n\r\n #detailedThree {\r\n width: 100%;\r\n // height: calc(100% - 52px);\r\n height: 100%;\r\n }\r\n\r\n #detailedTwo {\r\n width: 100%;\r\n height: calc(100% - 52px);\r\n }\r\n\r\n #detailedFive {\r\n width: 100%;\r\n height: calc(100% - 150px);\r\n }\r\n }\r\n\r\n .titleFont {\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(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>"]}]}