1 line
65 KiB
JSON
1 line
65 KiB
JSON
{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\HomePop\\ringMainUnit.vue?vue&type=style&index=0&id=69e71d64&lang=less&scoped=true&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\HomePop\\ringMainUnit.vue","mtime":1689642397095},{"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.fenzhiMessage {\r\n width: 100%;\r\n margin-top: 6px;\r\n height: calc(100% - 30px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n .fenzhiItem {\r\n background-image: url(\"../../assets/images/fenzhiBg.png\");\r\n width: 295px;\r\n height: 116px;\r\n background-size: 100% 100%;\r\n .unitNum {\r\n height: 83px;\r\n line-height: 83px;\r\n width: 100%;\r\n text-align: center;\r\n font-size: 30px;\r\n color: #56fefe;\r\n }\r\n .fenzhiUnit {\r\n height: 33px;\r\n text-align: center;\r\n font-size: 20px;\r\n line-height: 28px;\r\n color: #fff;\r\n }\r\n }\r\n}\r\n.addTitle {\r\n color: rgb(86, 244, 254);\r\n text-align: left;\r\n}\r\n//表格\r\n.user_skills {\r\n /**\r\n 表格有滚动效果但是不显示滚动条\r\n */\r\n /deep/ .is-scrolling-none {\r\n overflow: hidden;\r\n overflow-y: auto;\r\n overflow-x: scroll;\r\n }\r\n /deep/ .is-scrolling-none::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/.el-table--scrollable-y ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/.el-table--scrollable-x ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/ .el-table {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-table th {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-table__header {\r\n height: 48px;\r\n background: url(\"../../assets/images/intervalTable.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n /deep/ .el-table__header th {\r\n border: none;\r\n padding: 0;\r\n height: 40px;\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 &.el-table__cell.is-leaf {\r\n border: none !important;\r\n }\r\n }\r\n /deep/ .el-table tr {\r\n background-color: transparent !important;\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 /deep/ .el-table__body td .cell {\r\n white-space: nowrap !important;\r\n // word-break: break-all;\r\n }\r\n /deep/ .el-table th.el-table__cell > .cell {\r\n color: rgb(86, 254, 226);\r\n }\r\n /deep/.el-table .el-table__cell {\r\n padding: 5px 0;\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::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::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.ringMain {\r\n width: 1332px !important;\r\n height: 739px !important;\r\n background-image: url(\"../../assets/images/ringMain.png\") !important;\r\n .main {\r\n height: 93% !important;\r\n .basic {\r\n margin-top: 20px;\r\n .title {\r\n margin-bottom: 5px;\r\n }\r\n }\r\n }\r\n}\r\n.ringMainUnit {\r\n width: 1511px;\r\n height: 1071px;\r\n background: url(\"../../assets/images/ringMainUnitKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n -webkit-animation: fadeInDown 0.3s;\r\n animation: fadeInDown 0.3s;\r\n padding: 15px 25px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-content: space-between;\r\n .top {\r\n height: 4%;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n .title {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(255, 255, 255),\r\n rgb(86, 244, 254)\r\n );\r\n }\r\n }\r\n .main {\r\n height: 95%;\r\n width: 100%;\r\n // border: 1px solid blue;\r\n .basic {\r\n height: 8.8%;\r\n width: 100%;\r\n // border: 1px solid red;\r\n .title {\r\n height: 27%;\r\n width: 100%;\r\n // border: 1px solid yellow;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .content {\r\n height: 73%;\r\n width: 100%;\r\n background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n display: flex;\r\n background-size: 100% 100%;\r\n justify-content: space-around;\r\n overflow: auto;\r\n .information {\r\n color: #ffffff;\r\n height: 100%;\r\n width: 96%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n .informationContent {\r\n height: 35px;\r\n line-height: 35px;\r\n background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n }\r\n }\r\n .earlyWarning {\r\n height: 8.8%;\r\n width: 100%;\r\n margin-top: 10px;\r\n // border: 1px solid red;\r\n .title {\r\n height: 27%;\r\n width: 100%;\r\n // border: 1px solid yellow;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .content {\r\n height: 73%;\r\n width: 100%;\r\n background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n display: flex;\r\n background-size: 100% 100%;\r\n justify-content: flex-start;\r\n .information {\r\n color: #ffffff;\r\n height: 100%;\r\n width: 79%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n display: flex;\r\n align-items: center;\r\n -webkit-box-pack: justify;\r\n padding-left: 24px;\r\n .informationContent {\r\n height: 35px;\r\n background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n }\r\n }\r\n .interval {\r\n height: 40%;\r\n width: 100%;\r\n margin-top: 10px;\r\n .title {\r\n height: 7%;\r\n width: 100%;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .table {\r\n height: 85%;\r\n // border: 1px solid red;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n background-size: 100% 100%;\r\n padding: 15px 20px;\r\n }\r\n }\r\n .intervalData {\r\n height: 33%;\r\n margin-top: 10px;\r\n padding-left: 10px;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n background-size: 100% 100%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n /deep/ .el-tabs__nav-wrap::after {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-tabs--top{\r\n width: 50%;\r\n }\r\n #intervalShow {\r\n width: 100%;\r\n height: calc(100% - 54px);\r\n }\r\n #temperatureShow{\r\n width: 100%;\r\n height: calc(100% - 54px);\r\n }\r\n }\r\n .InfraredVideo {\r\n .title {\r\n height: 100%;\r\n .content {\r\n margin-left: 30px;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n }\r\n }\r\n /deep/ .el-tabs__item {\r\n margin-top: 20px;\r\n padding: 0 30px;\r\n }\r\n }\r\n }\r\n}\r\n.content1 {\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n/deep/.el-tabs__content {\r\n height: 100%;\r\n overflow: auto;\r\n position: relative;\r\n}\r\n/**\r\n下拉显示动画效果\r\n*/\r\n@keyframes fadeInDown {\r\n 0% {\r\n -webkit-transform: translate3d(0, -20%, 0);\r\n transform: translate3d(0, -20%, 0);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n -webkit-transform: none;\r\n transform: none;\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@-webkit-keyframes fadeInDown {\r\n 0% {\r\n -webkit-transform: translate3d(0, -20%, 0);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n -webkit-transform: none;\r\n opacity: 1;\r\n }\r\n}\r\n",{"version":3,"sources":["ringMainUnit.vue"],"names":[],"mappings":";AAuwCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"ringMainUnit.vue","sourceRoot":"src/views/HomePop","sourcesContent":["<template>\r\n <div :class=\"equipmentName=='分支箱'?'ringMain':''\" class=\"ringMainUnit\"> \r\n <div class=\"top\">\r\n <div class=\"title\">{{ ringMainUnit }}</div>\r\n <div class=\"close\">\r\n <img\r\n @click=\"handleClose\"\r\n src=\"@/assets/images/close.png\"\r\n style=\"cursor: pointer\"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"main\">\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('总览')||ringMainUnit.includes('环网柜')\">\r\n </el-tab-pane><el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" > </el-tab-pane>\r\n <el-tab-pane label=\"现场照片/红外视频\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n \r\n </el-tabs>\r\n <!-- 分支箱 -->\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('分支箱')\">\r\n <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n <el-tab-pane label=\"现场照片\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n </el-tabs>\r\n <!-- 箱变 -->\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('箱变')\">\r\n <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n <el-tab-pane label=\"现场照片/红外视频\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n </el-tabs>\r\n <!-- 开闭所 -->\r\n <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\" style=\"height: 4%\" v-if=\"ringMainUnit.includes('开闭所')\">\r\n <el-tab-pane label=\"设备信息\" name=\"first\" style=\"font-size:20px\" ></el-tab-pane>\r\n <el-tab-pane label=\"红外线视频/监检视频/现场照片\" name=\"second\" style=\"font-size:20px\"></el-tab-pane>\r\n </el-tabs>\r\n <div v-if=\"activeName == 'first'\" style=\"height: 100%; width: 100%\">\r\n <div class=\"basic\">\r\n <div class=\"title\" style=\"margin-top: 10px\">基本信息</div>\r\n <div class=\"content\">\r\n <div class=\"information\">\r\n <div class=\"informationContent\">\r\n {{ equipmentName }}名称 {{\r\n ringMainUnit\r\n }}\r\n </div>\r\n <div class=\"informationContent\">\r\n {{ equipmentName }}编号 {{ deviceSn }}\r\n </div>\r\n <div class=\"informationContent\" v-if='equipmentName==\"分支箱\"'> \r\n 蓄电池电压(v)\r\n </div>\r\n <template v-else-if='equipmentName==\"箱变\"'>\r\n\r\n </template>\r\n\r\n <template v-else>\r\n <div class=\"informationContent\" >\r\n IP地址 {{ deviceInformation.device_ip }}\r\n </div>\r\n <div class=\"informationContent\">\r\n 总间隔 {{ totalInterval }}\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"earlyWarning\" v-show='equipmentName!=\"分支箱\"'>\r\n <div class=\"title\">预警信息</div>\r\n <div class=\"content\">\r\n <div class=\"information\">\r\n <div class=\"informationContent\">\r\n <img src=\"@/assets/images/shiliangIcon1.png\" />\r\n 电缆沟水位 : {{ waterLevel }}米\r\n \r\n </div>\r\n <div class=\"informationContent\">\r\n <span v-if=\"equipmentName!='箱变'\" style=\"margin-left:10px\"> 状态: {{ waterLevel1 }}</span>\r\n </div>\r\n <div class=\"informationContent\">\r\n <img src=\"@/assets/images/shiliangIcon2.png\" />\r\n 小电流接地故障状态 : {{ grounding }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div v-if=\"equipmentName=='分支箱'\" class=\"interval\" >\r\n <div class=\"title\" >出现线缆温度监测</div>\r\n <div class=\"fenzhiMessage\">\r\n <div class=\"fenzhiItem\" v-for=\"s in fenzhiArr\">\r\n <div class=\"unitNum\">\r\n <span>55</span>\r\n </div>\r\n <div class=\"fenzhiUnit\">\r\n <span>{{s}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"interval\" v-else>\r\n <div class=\"title\" v-if='equipmentName==\"箱变\"'>电参数监测</div>\r\n \r\n <div class=\"title\" v-else>间隔监测</div>\r\n <!-- 分支箱 -->\r\n \r\n <div class=\"table user_skills\">\r\n <el-table\r\n :data=\"tableData\"\r\n style=\"width: 100%; height: 100%\"\r\n :header-cell-style=\"{ 'text-align': 'center' }\"\r\n :cell-style=\"{ 'text-align': 'center' }\"\r\n stripe\r\n >\r\n <el-table-column prop=\"name\" label=\"\" align=\"center\" width=\"150\">\r\n </el-table-column>\r\n <el-table-column prop=\"phase\" label=\"相位\"> </el-table-column>\r\n <el-table-column\r\n v-for=\"(item, index) in tableColumns\"\r\n :key=\"index\"\r\n :prop=\"item.key\"\r\n align=\"center\"\r\n :label=\"item.name\"\r\n >\r\n </el-table-column>\r\n </el-table>\r\n </div>\r\n </div>\r\n \r\n <div class=\"addTitle\" v-if='equipmentName==\"箱变\"'>进线局放数据</div>\r\n <div class=\"addTitle\" v-else-if='equipmentName==\"分支箱\"'>局放数据</div>\r\n \r\n <div class=\"intervalData\">\r\n <!-- <template v-if='equipmentName==\"箱变\"||equipmentName==\"分支箱\"'>\r\n </template> -->\r\n <el-tabs v-model=\"intervalName\" @tab-click=\"intervalClick\">\r\n <el-tab-pane\r\n :label=\"item.name\"\r\n :name=\"item.key\"\r\n v-for=\"(item, index) in echartsTab\"\r\n :key=\"index\"\r\n ></el-tab-pane>\r\n </el-tabs>\r\n <el-tabs v-model=\"intervalName1\" @tab-click=\"intervalClick1\">\r\n <el-tab-pane\r\n :label=\"item.name\"\r\n :name=\"item.key\"\r\n v-for=\"(item, index) in echartsTab1\"\r\n :key=\"index\"\r\n ></el-tab-pane>\r\n </el-tabs>\r\n <div id=\"intervalShow\" v-show=\"echartsShow\"></div>\r\n <div id=\"temperatureShow\" v-show=\"!echartsShow\"></div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"InfraredVideo\"\r\n v-if=\"activeName == 'second'\"\r\n style=\"height: 96%; width: 100%\"\r\n >\r\n <div class=\"title\">\r\n <el-tabs\r\n :tab-position=\"tabPosition\"\r\n v-model=\"InfraredName\"\r\n style=\"height: 100%\"\r\n >\r\n <el-tab-pane v-for=\"(item, index) in vectorgraphData\" :key=\"index\">\r\n <span\r\n slot=\"label\"\r\n style=\"display: flex; align-items: center\"\r\n @click=\"InfraredClick(index)\"\r\n >\r\n <img :src=\"item.vectorgraph\" />\r\n <span\r\n style=\"margin-left: 10px; font-size: 19px\"\r\n :style=\"{ color: item.color }\"\r\n >{{ item.name }}</span\r\n >\r\n </span>\r\n </el-tab-pane>\r\n <div class=\"content\" v-show=\"photoShow\">\r\n <div\r\n v-for=\"(item, index) in photoList\"\r\n :key=\"index\"\r\n style=\"margin-top: 40px; margin-right: 20px\"\r\n >\r\n <img :src=\"item.photo\" style=\"width: 407px; height: 274px\" />\r\n </div>\r\n </div>\r\n <div class=\"content1\" v-show=\"videoShow\">\r\n <canvas id=\"canvas\" style=\"width: 100%; height: 100%\"></canvas>\r\n <!-- <video id=\"video\" autoplay style=\"width:100%; height:100%\"></video> -->\r\n </div>\r\n <div class=\"content1\" v-show=\"videoShow1\">\r\n <canvas id=\"canvas1\" style=\"width: 100%; height: 100%\"></canvas>\r\n <!-- <video id=\"video\" autoplay style=\"width:100%; height:100%\"></video> -->\r\n </div>\r\n </el-tabs>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport {\r\n getDevice,\r\n getCabinetInfo,\r\n getCabinetList,\r\n getCabinetData,\r\n getCabinetCameraList,\r\n getCabinetPointHistory\r\n} from \"../../api/index.js\";\r\nimport JSMpeg from \"../../util/jsmpeg.min\";\r\nimport axios from \"axios\";\r\n// import JSMpeg from 'jsmpeg'\r\nexport default {\r\n name: \"ringMainUnit\",\r\n props: [\"ringMainUnit\"],\r\n data() {\r\n return {\r\n echartsShow:true,\r\n //\r\n fenzhiArr: [\"电压/KV\", \"电流/A\", \"温度/℃\"],\r\n JSMpeg: null, //视频\r\n player: null,\r\n webRtcServer: null,\r\n rtsp: \"\", //红外视频地址\r\n rtsp1: \"\", //普通视频地址\r\n waterLevel: \"\", //水位值\r\n waterLevel1: \"\", //水位告警\r\n grounding: \"\",\r\n photoShow: true,\r\n videoShow: false,\r\n videoShow1: false,\r\n deviceId: \"\",\r\n tabPosition: \"left\",\r\n activeName: \"first\",\r\n intervalName: \"interval1\",\r\n intervalName1: \"\",\r\n InfraredName: \"first\",\r\n vectorgraphData: [\r\n {\r\n vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n name: \"现场照片\",\r\n color: \"rgb(60,127,127)\",\r\n },\r\n {\r\n vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n name: \"红外视频\",\r\n color: \"rgb(60,127,127)\",\r\n },\r\n {\r\n vectorgraph: require(\"@/assets/images/shiliangIcon4.png\"),\r\n name: \"普通视频\",\r\n color: \"rgb(60,127,127)\",\r\n },\r\n ],\r\n tableData1: [],\r\n tableData: [\r\n {\r\n name: \"\",\r\n phase: \"Uab\",\r\n interval1: \"220\",\r\n interval2: \"220\",\r\n interval3: \"220\",\r\n interval4: \"220\",\r\n interval5: \"220\",\r\n interval6: \"220\",\r\n interval7: \"220\",\r\n interval8: \"220\",\r\n },\r\n {\r\n name: \"电压/V\",\r\n phase: \"Ubc\",\r\n interval1: \"220\",\r\n interval2: \"220\",\r\n interval3: \"220\",\r\n interval4: \"220\",\r\n interval5: \"220\",\r\n interval6: \"220\",\r\n interval7: \"220\",\r\n interval8: \"220\",\r\n },\r\n {\r\n name: \"\",\r\n phase: \"Uca\",\r\n interval1: \"220\",\r\n interval2: \"220\",\r\n interval3: \"220\",\r\n interval4: \"220\",\r\n interval5: \"220\",\r\n interval6: \"220\",\r\n interval7: \"220\",\r\n interval8: \"220\",\r\n },\r\n {\r\n name: \"\",\r\n phase: \"A\",\r\n interval1: \"21\",\r\n interval2: \"25\",\r\n interval3: \"23\",\r\n interval4: \"27\",\r\n interval5: \"24\",\r\n interval6: \"28\",\r\n interval7: \"22\",\r\n interval8: \"21\",\r\n },\r\n {\r\n name: \"电流/A\",\r\n phase: \"B\",\r\n interval1: \"25\",\r\n interval2: \"20\",\r\n interval3: \"24\",\r\n interval4: \"23\",\r\n interval5: \"24\",\r\n interval6: \"22\",\r\n interval7: \"21\",\r\n interval8: \"29\",\r\n },\r\n {\r\n name: \"\",\r\n phase: \"C\",\r\n interval1: \"21\",\r\n interval2: \"25\",\r\n interval3: \"23\",\r\n interval4: \"27\",\r\n interval5: \"24\",\r\n interval6: \"28\",\r\n interval7: \"22\",\r\n interval8: \"21\",\r\n },\r\n {\r\n name: \"\",\r\n phase: \"A\",\r\n interval1: \"21\",\r\n interval2: \"25\",\r\n interval3: \"23\",\r\n interval4: \"27\",\r\n interval5: \"24\",\r\n interval6: \"28\",\r\n interval7: \"22\",\r\n interval8: \"21\",\r\n },\r\n {\r\n name: \"温度/℃\",\r\n phase: \"B\",\r\n interval1: \"25\",\r\n interval2: \"20\",\r\n interval3: \"24\",\r\n interval4: \"23\",\r\n interval5: \"24\",\r\n interval6: \"22\",\r\n interval7: \"21\",\r\n interval8: \"29\",\r\n },\r\n {\r\n name: \"\",\r\n phase: \"C\",\r\n interval1: \"25\",\r\n interval2: \"20\",\r\n interval3: \"24\",\r\n interval4: \"23\",\r\n interval5: \"24\",\r\n interval6: \"22\",\r\n interval7: \"21\",\r\n interval8: \"29\",\r\n },\r\n ],\r\n tableColumns: [\r\n {\r\n name: \"间隔1\",\r\n },\r\n {\r\n name: \"间隔2\",\r\n },\r\n {\r\n name: \"间隔3\",\r\n },\r\n {\r\n name: \"间隔4\",\r\n },\r\n ],\r\n echartsTab: [],\r\n echartsTab1: [],\r\n echartsData: {\r\n time: [\r\n \"0点\",\r\n \"1点\",\r\n \"2点\",\r\n \"3点\",\r\n \"4点\",\r\n \"5点\",\r\n \"6点\",\r\n \"7点\",\r\n \"8点\",\r\n \"9点\",\r\n \"10点\",\r\n \"11点\",\r\n \"12点\",\r\n \"13点\",\r\n \"14点\",\r\n \"15点\",\r\n \"16点\",\r\n \"17点\",\r\n \"18点\",\r\n \"19点\",\r\n \"20点\",\r\n \"21点\",\r\n \"22点\",\r\n \"23点\",\r\n ],\r\n num: [],\r\n },\r\n photoList: [\r\n {\r\n photo: \"\",\r\n },\r\n ],\r\n\r\n deviceInformation: {},\r\n equipmentName: \"\",\r\n deviceSn: \"\",\r\n partialDischarge: [], //局放数据\r\n totalInterval: \"\",\r\n tabName:'',//选择温度tab\r\n temperatureChildDataA : [],\r\n temperatureChildDataB : [],\r\n temperatureChildDataC :[],\r\n voltageDataAB : [],\r\n voltageDataBC : [],\r\n voltageDataCA :[],\r\n };\r\n },\r\n mounted() {\r\n var that = this;\r\n //sssss\r\n getDevice({\r\n action: \"querydevice\",\r\n device_name: this.ringMainUnit,\r\n }).then((res) => {\r\n if (res.data.data != null) {\r\n this.deviceInformation = res.data.data.device;\r\n }\r\n });\r\n this.equipmentName = this.ringMainUnit.substring(\r\n this.ringMainUnit.length - 3,\r\n this.ringMainUnit.length\r\n );\r\n if (\r\n this.equipmentName.substring(\r\n this.equipmentName.length - 2,\r\n this.equipmentName.length\r\n ) == \"箱变\"\r\n ) {\r\n this.equipmentName = \"箱变\";\r\n }\r\n this.getDeviceData();\r\n\r\n if (this.ringMainUnit != \"金盾FH9环网柜\") {\r\n window.setTimeout(() => {\r\n let tab = { index: 0, name: \"interval1\" };\r\n this.intervalClick(tab);\r\n }, 1000);\r\n } else {\r\n window.setTimeout(() => {\r\n let tab = { index: 1, name: \"interval2\" };\r\n this.intervalClick(tab);\r\n }, 1000);\r\n }\r\n },\r\n // beforeDestroy() {\r\n // this.webRtcServer.disconnect();\r\n // this.webRtcServer = null;\r\n // },\r\n // beforeDestroy () {\r\n // // 页面销毁前 关闭flvjs\r\n // this.player.destroy()\r\n // },\r\n methods: {\r\n //查询所有网柜信息\r\n getDeviceData() {\r\n let params = {\r\n pageSize: 50,\r\n token: localStorage.getItem(\"token\"),\r\n };\r\n getCabinetList(params).then((res) => {\r\n res.data.data.data.forEach((item, index) => {\r\n if (item.name == this.ringMainUnit) {\r\n this.deviceSn = item.sn;\r\n }\r\n });\r\n //查询单个网柜\r\n let data = {\r\n sn: this.deviceSn,\r\n token: localStorage.getItem(\"token\"),\r\n };\r\n //现场图片\r\n getCabinetInfo(data).then((res) => {\r\n console.log(res.data.data, \"Jieguo\");\r\n });\r\n //间隔监测\r\n getCabinetData(data).then((res) => {\r\n let units = [];\r\n console.log(res.data.data,'---------');\r\n Object.keys(res.data.data.units).map((item, index) => {\r\n if (res.data.data.units[item].name.indexOf(\"开关\") != -1) {\r\n units.push(res.data.data.units[item]);\r\n }\r\n });\r\n this.tableColumns = Object.keys(units).map((x, y) => {\r\n let heardName = [];\r\n heardName.push(\r\n (heardName = \"间隔\" + units[x].name.substring(0, 1))\r\n );\r\n return {\r\n name: heardName,\r\n key: \"interval\" + units[x].name.substring(0, 1),\r\n };\r\n });\r\n this.totalInterval = this.tableColumns.length;\r\n this.echartsTab = Object.keys(units).map((x, y) => {\r\n let heardName = [];\r\n heardName.push(\r\n (heardName = \"间隔\" + units[x].name.substring(0, 1) + \"局放数据\")\r\n );\r\n return {\r\n name: heardName,\r\n key: \"interval\" + units[x].name.substring(0, 1),\r\n };\r\n });\r\n this.echartsTab1 = Object.keys(units).map((x, y) => {\r\n let heardName = [];\r\n heardName.push(\r\n (heardName = \"间隔\" + units[x].name.substring(0, 1) + \"温度数据\")\r\n );\r\n return {\r\n name: heardName,\r\n key: \"interval\" + units[x].name.substring(0, 1),\r\n };\r\n });\r\n \r\n let electricCurrentA = [];\r\n let electricCurrentB = [];\r\n let electricCurrentC = [];\r\n // let voltageA = []\r\n // let voltageB = []\r\n // let voltageC = []\r\n res.data.data.units.forEach((item, index) => {\r\n res.data.data.yc.forEach((n, i) => {\r\n if (n.name == \"温度\") {\r\n n.child.forEach((z, j) => {\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"A\") != -1\r\n ) {\r\n this.temperatureChildDataA.push(z);\r\n }\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"B\") != -1\r\n ) {\r\n this.temperatureChildDataB.push(z);\r\n }\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"C\") != -1\r\n ) {\r\n this.temperatureChildDataC.push(z);\r\n }\r\n });\r\n } else if (n.name == \"电流\") {\r\n n.child.forEach((z, j) => {\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"a\") != -1\r\n ) {\r\n electricCurrentA.push(z);\r\n }\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"b\") != -1\r\n ) {\r\n electricCurrentB.push(z);\r\n }\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"c\") != -1\r\n ) {\r\n electricCurrentC.push(z);\r\n }\r\n });\r\n } else if (n.name == \"局放\") {\r\n n.child.forEach((z, j) => {\r\n if (\r\n item.name == z.point_name.substring(0,4) &&\r\n z.point_name.indexOf(\"均值\") != -1\r\n ) {\r\n this.partialDischarge.push(z);\r\n }\r\n });\r\n } else if (n.name == \"水位\") {\r\n n.child.forEach((z, j) => {\r\n this.waterLevel = z.value;\r\n });\r\n }else if (n.name == \"电压\") {\r\n n.child.forEach((z, j) => {\r\n if (\r\n z.point_name.indexOf(\"Uab\") != -1\r\n ) {\r\n this.voltageDataAB.push(z);\r\n }\r\n if (\r\n z.point_name.indexOf(\"Ubc\") != -1\r\n ) {\r\n this.voltageDataBC.push(z);\r\n }\r\n if (\r\n z.point_name.indexOf(\"Uca\") != -1\r\n ) {\r\n this.voltageDataCA.push(z);\r\n }\r\n });\r\n }\r\n });\r\n });\r\n //表格电流\r\n for (let i = 0; i < electricCurrentA.length; i++) {\r\n let interval = \"interval\" + electricCurrentA[i].point_name.substring(0,1);\r\n this.tableData[3][interval] = electricCurrentA[i].value;\r\n }\r\n for (let i = 0; i < electricCurrentB.length; i++) {\r\n let interval = \"interval\" + electricCurrentB[i].point_name.substring(0,1);\r\n this.tableData[4][interval] = electricCurrentB[i].value;\r\n }\r\n for (let i = 0; i < electricCurrentC.length; i++) {\r\n let interval = \"interval\" + electricCurrentC[i].point_name.substring(0,1);\r\n this.tableData[5][interval] = electricCurrentC[i].value;\r\n }\r\n //电压\r\n for (let i = 0; i < this.voltageDataAB.length; i++) {\r\n for (let j = 0; j < units.length; j++) {\r\n let interval = \"interval\" + units[j].name.substring(0,1);\r\n this.tableData[0][interval] = this.voltageDataAB[i].value + ' kV';\r\n }\r\n }\r\n for (let i = 0; i < this.voltageDataBC.length; i++) {\r\n for (let j = 0; j < units.length; j++) {\r\n let interval = \"interval\" + units[j].name.substring(0,1);\r\n this.tableData[1][interval] = this.voltageDataBC[i].value + ' kV';\r\n }\r\n }\r\n for (let i = 0; i < this.voltageDataCA.length; i++) {\r\n for (let j = 0; j < units.length; j++) {\r\n let interval = \"interval\" + units[j].name.substring(0,1);\r\n this.tableData[2][interval] = this.voltageDataCA[i].value + ' kV';\r\n }\r\n }\r\n //警告\r\n res.data.data.yx.forEach((item, index) => {\r\n if (item.name == \"水位告警\") {\r\n this.waterLevel1 = item.child[0].value;\r\n } else if (item.name == \"接地告警\") {\r\n this.grounding = item.child[0].value;\r\n }\r\n });\r\n this.getIntervalTep(null)\r\n });\r\n });\r\n \r\n },\r\n handleClick(tab) {\r\n let that = this;\r\n if (tab.index == 0) {\r\n this.activeName = \"first\";\r\n this.$nextTick(() => {\r\n let tab = {\r\n name:'interval1'\r\n }\r\n this.intervalClick(tab);\r\n });\r\n } else if (tab.index == 1) {\r\n this.activeName = \"second\";\r\n this.photoShow = true;\r\n this.videoShow = false;\r\n this.videoShow1 = false;\r\n this.InfraredClick(0);\r\n getDevice({\r\n action: \"querydevice\",\r\n device_name: that.ringMainUnit,\r\n }).then((res) => {\r\n if (res.data.data.pic != null) {\r\n this.photoList = Object.keys(res.data.data.pic).map(\r\n (item, index) => {\r\n let photoUrl = res.data.data.pic[index].url;\r\n return { photo: photoUrl };\r\n }\r\n );\r\n }\r\n });\r\n }\r\n },\r\n //echarts切换\r\n intervalClick(tab) {\r\n if (tab != null) {\r\n this.intervalName = tab.name;\r\n this.intervalName1 = '';\r\n let echartsData = [];\r\n // let index = Number(tab.index) + 1;\r\n let index = tab.name.substring(8,9)\r\n for (let i = 0; i < this.partialDischarge.length; i++) {\r\n if (this.partialDischarge[i].point_name.substring(0,4).indexOf(index) != -1) {\r\n echartsData.push(this.partialDischarge[i]);\r\n }\r\n }\r\n this.intervalShow(echartsData);\r\n this.echartsShow = true\r\n } else {\r\n this.intervalShow(null);\r\n }\r\n },\r\n intervalClick1(tab) {\r\n this.intervalName = '';\r\n this.intervalName1 = tab.name;\r\n this.echartsShow = false\r\n if (tab != null) {\r\n this.getIntervalTep(tab.name)\r\n } else {\r\n this.getIntervalTep(null);\r\n }\r\n },\r\n //获取间隔温度\r\n getIntervalTep(tabName){\r\n let dataA = []\r\n let dataB = []\r\n let dataC = []\r\n let time = []\r\n //表格温度\r\n for (let i = 0; i < this.temperatureChildDataA.length; i++) {\r\n let interval = \"interval\" + this.temperatureChildDataA[i].point_name.substring(0,1);\r\n this.tableData[6][interval] = this.temperatureChildDataA[i].value;\r\n if (tabName == interval) {\r\n let data = {\r\n token:localStorage.getItem(\"token\"),\r\n sn: this.deviceSn,\r\n point:this.temperatureChildDataA[i].point_id,\r\n date:this.$moment().format(\"YYYY-MM-DD\")\r\n }\r\n getCabinetPointHistory(data).then((res)=>{\r\n for (let i = 0; i < res.data.data.value.length; i++) {\r\n dataA.push(parseInt(res.data.data.value[i]))\r\n }\r\n })\r\n }\r\n }\r\n for (let i = 0; i < this.temperatureChildDataB.length; i++) {\r\n let interval = \"interval\" + this.temperatureChildDataB[i].point_name.substring(0,1);\r\n this.tableData[7][interval] = this.temperatureChildDataB[i].value;\r\n if (tabName == interval) {\r\n let data = {\r\n token:localStorage.getItem(\"token\"),\r\n sn: this.deviceSn,\r\n point:this.temperatureChildDataA[i].point_id,\r\n date:this.$moment().format(\"YYYY-MM-DD\")\r\n }\r\n getCabinetPointHistory(data).then((res)=>{\r\n for (let i = 0; i < res.data.data.value.length; i++) {\r\n dataB.push(parseInt(res.data.data.value[i]))\r\n }\r\n })\r\n }\r\n }\r\n for (let i = 0; i < this.temperatureChildDataC.length; i++) {\r\n let interval = \"interval\" + this.temperatureChildDataC[i].point_name.substring(0,1);\r\n this.tableData[8][interval] = this.temperatureChildDataC[i].value;\r\n if (tabName == interval) {\r\n let data = {\r\n token:localStorage.getItem(\"token\"),\r\n sn: this.deviceSn,\r\n point:this.temperatureChildDataA[i].point_id,\r\n date:this.$moment().format(\"YYYY-MM-DD\")\r\n }\r\n getCabinetPointHistory(data).then((res)=>{\r\n \r\n for (let i = 0; i < res.data.data.value.length; i++) {\r\n dataC.push(parseInt(res.data.data.value[i]))\r\n }\r\n for (let i = 0; i < res.data.data.time.length; i++) {\r\n time.push(parseInt(res.data.data.time[i]))\r\n }\r\n setTimeout(()=>{\r\n this.$nextTick(()=>{\r\n this.temperatureShow(dataA,dataB,dataC,time);\r\n })\r\n },100)\r\n \r\n })\r\n }\r\n }\r\n },\r\n //视频切换\r\n InfraredClick(index) {\r\n let data = {\r\n sn: this.deviceSn,\r\n token: localStorage.getItem(\"token\"),\r\n };\r\n if (index == 1) {\r\n let that = this;\r\n Object.keys(this.vectorgraphData).forEach((key) => {\r\n this.vectorgraphData[\r\n key\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n if (key == index) {\r\n this.vectorgraphData[\r\n index\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n this.vectorgraphData[index].color = \"#56fefe\";\r\n this.photoShow = false;\r\n this.videoShow = true;\r\n this.videoShow1 = false;\r\n //这里的port要与index.js的port保持一致\r\n //解析视频流\r\n //视频数据\r\n getCabinetCameraList(data).then((res) => {\r\n console.log(res.data.data, \"视频\");\r\n this.rtsp = res.data.data[1].url;\r\n this.$nextTick(() => {\r\n this.JSMpeg = new JSMpeg.Player(\r\n \"ws://localhost:9999/rtsp?url=\" + btoa(this.rtsp),\r\n {\r\n canvas: document.getElementById(\"canvas\"),\r\n }\r\n );\r\n });\r\n });\r\n\r\n // let video = document.getElementById('video')\r\n // try{\r\n // if ('srcObject' in video) {\r\n // video.srcObject = null;\r\n // this.webRtcServer = new WebRtcStreamer(\r\n // \"video\",\r\n // location.protocol + \"//127.0.0.1:8000\"\r\n // );\r\n // // //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用\r\n // this.webRtcServer.connect(\r\n // \"rtsp://221.231.99.214:554/cam=109/channel=0\"\r\n // );\r\n // this.webRtcServer.connect(\r\n // \"rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4\"\r\n // );\r\n // }else{\r\n // video.src = null;\r\n // }\r\n\r\n // }catch(e){\r\n // console.log(e)\r\n // }\r\n }\r\n });\r\n } else if (index == 0) {\r\n let that = this;\r\n Object.keys(this.vectorgraphData).forEach((key) => {\r\n this.vectorgraphData[\r\n key\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n if (key == index) {\r\n this.vectorgraphData[\r\n index\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n this.vectorgraphData[index].color = \"#56fefe\";\r\n (this.photoShow = true), (this.videoShow = false);\r\n this.videoShow1 = false;\r\n }\r\n });\r\n } else if (index == 2) {\r\n let that = this;\r\n Object.keys(this.vectorgraphData).forEach((key) => {\r\n this.vectorgraphData[\r\n key\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon4.png\");\r\n this.vectorgraphData[key].color = \"rgb(60,127,127)\";\r\n if (key == index) {\r\n this.vectorgraphData[\r\n index\r\n ].vectorgraph = require(\"@/assets/images/shiliangIcon3.png\");\r\n this.vectorgraphData[index].color = \"#56fefe\";\r\n this.photoShow = false;\r\n this.videoShow = false;\r\n this.videoShow1 = true;\r\n //这里的port要与index.js的port保持一致\r\n //解析视频流\r\n getCabinetCameraList(data).then((res) => {\r\n console.log(res.data.data, \"视频\");\r\n this.rtsp1 = res.data.data[0].url;\r\n this.JSMpeg = new JSMpeg.Player(\r\n \"ws://localhost:9999/rtsp?url=\" + btoa(this.rtsp1),\r\n {\r\n canvas: document.getElementById(\"canvas1\"),\r\n }\r\n );\r\n });\r\n }\r\n });\r\n }\r\n },\r\n closeJSMpeg() {\r\n //销毁\r\n this.JSMpeg.destroy();\r\n },\r\n handleClose() {\r\n this.$parent.componentShow = \"\";\r\n this.$parent.modelOthers = false;\r\n // this.$emit(\"closeStatus\", this.closeStatus)\r\n this.rtsp = \"\";\r\n this.rtsp1 = \"\";\r\n if (this.JSMpeg != null) {\r\n this.closeJSMpeg();\r\n }\r\n },\r\n //局放图\r\n intervalShow(InintervalData) {\r\n let num = [];\r\n let time = [];\r\n if (InintervalData != null && InintervalData != []) {\r\n for (const i in InintervalData[0].hour_data) {\r\n num.push(InintervalData[0].hour_data[i]);\r\n time.push(i);\r\n }\r\n this.echartsData.num = num;\r\n this.echartsData.time = time;\r\n }\r\n let that = this;\r\n var data = this.echartsData;\r\n var myChart = this.$echarts.init(document.getElementById(\"intervalShow\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n formatter:function(params){\r\n return '时间：' + params[0].name+'<br/>'+'局放数据：'+params[0].value+'dbm'\r\n }\r\n },\r\n grid: {\r\n top: \"10%\",\r\n left: \"3%\",\r\n right: \"3%\",\r\n bottom: \"10%\",\r\n // containLabel: true\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n boundaryGap: true,\r\n axisLine: {\r\n //坐标轴轴线相关设置。数学上的x轴\r\n show: true,\r\n lineStyle: {\r\n color: 'color:\"#93dcfe\"',\r\n },\r\n },\r\n axisLabel: {\r\n //坐标轴刻度标签的相关设置\r\n textStyle: {\r\n color: \"#93dcfe\",\r\n margin: 15,\r\n },\r\n formatter: function (data) {\r\n return data;\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n data: data.time,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n // min: 0,\r\n // max: 100,\r\n name: \"dbm\",\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: \"rgba(147,220,254,0.3)\",\r\n },\r\n },\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#93dcfe\",\r\n },\r\n },\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#93dcfe\",\r\n },\r\n // formatter: function (value) {\r\n // if (value === 0) {\r\n // return value;\r\n // }\r\n // return value + \"%\";\r\n // },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"局放数据\",\r\n type: \"line\",\r\n symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n showAllSymbol: true,\r\n symbolSize: 8,\r\n lineStyle: {\r\n normal: {\r\n color: \"#1f93fa\", // 线条颜色\r\n },\r\n borderColor: \"rgba(0,0,0,.4)\",\r\n },\r\n itemStyle: {\r\n color: \"#1f93fa\",\r\n borderColor: \"#1f93fa\",\r\n borderWidth: 2,\r\n },\r\n label: {\r\n normal: {\r\n show: false,\r\n position: \"top\",\r\n formatter: [\" {a|{c}%}\"].join(\",\"),\r\n rich: {\r\n a: {\r\n color: \"#fff\",\r\n align: \"center\",\r\n },\r\n },\r\n },\r\n },\r\n tooltip: {\r\n show: true,\r\n },\r\n\r\n data: data.num,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n },\r\n //图\r\n temperatureShow(dataA,dataB,dataC,date) {\r\n let numA = dataA;\r\n let time = date;\r\n let numB = dataB;\r\n let numC = dataC;\r\n // if (temperatureData != null && temperatureData != []) {\r\n // for (const i in temperatureData[0].hour_data) {\r\n // num.push(temperatureData[0].hour_data[i]);\r\n // time.push(i);\r\n // }\r\n // this.echartsData.num = num;\r\n // this.echartsData.time = time;\r\n // }\r\n let that = this;\r\n // var data = this.echartsData;\r\n var myChart = this.$echarts.init(document.getElementById(\"temperatureShow\"));\r\n var option = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n formatter:function(params){\r\n return '时间：' + params[0].name+'<br/>'+'温度A：'+params[0].value+'℃'\r\n +'<br/>'+'温度B：'+params[1].value+'℃'\r\n +'<br/>'+'温度C：'+params[2].value+'℃'\r\n }\r\n },\r\n legend:{\r\n origin:'horizontal',\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: \"18px\",\r\n },\r\n },\r\n grid: {\r\n top: \"10%\",\r\n left: \"3%\",\r\n right: \"3%\",\r\n bottom: \"10%\",\r\n // containLabel: true\r\n },\r\n xAxis: [\r\n {\r\n type: \"category\",\r\n boundaryGap: true,\r\n axisLine: {\r\n //坐标轴轴线相关设置。数学上的x轴\r\n show: true,\r\n lineStyle: {\r\n color: 'color:\"#93dcfe\"',\r\n },\r\n },\r\n axisLabel: {\r\n //坐标轴刻度标签的相关设置\r\n textStyle: {\r\n color: \"#93dcfe\",\r\n margin: 15,\r\n },\r\n formatter: function (data) {\r\n return data;\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n data: time,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n // min: 0,\r\n // max: 100,\r\n name: \"℃\",\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: \"rgba(147,220,254,0.3)\",\r\n },\r\n },\r\n axisLine: {\r\n show: false,\r\n lineStyle: {\r\n color: \"#93dcfe\",\r\n },\r\n },\r\n axisLabel: {\r\n show: true,\r\n textStyle: {\r\n color: \"#93dcfe\",\r\n },\r\n // formatter: function (value) {\r\n // if (value === 0) {\r\n // return value;\r\n // }\r\n // return value + \"%\";\r\n // },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"A相位\",\r\n type: \"line\",\r\n symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n showAllSymbol: true,\r\n symbolSize: 8,\r\n lineStyle: {\r\n normal: {\r\n color: \"#1f93fa\", // 线条颜色\r\n },\r\n borderColor: \"rgba(0,0,0,0.4)\",\r\n },\r\n itemStyle: {\r\n color: \"#1f93fa\",\r\n borderColor: \"#1f93fa\",\r\n borderWidth: 2,\r\n },\r\n label: {\r\n normal: {\r\n show: false,\r\n position: \"top\",\r\n formatter: [\" {a|{c}%}\"].join(\",\"),\r\n rich: {\r\n a: {\r\n color: \"#fff\",\r\n align: \"center\",\r\n },\r\n },\r\n },\r\n },\r\n tooltip: {\r\n show: true,\r\n },\r\n\r\n data: numA,\r\n },\r\n {\r\n name: \"B相位\",\r\n type: \"line\",\r\n symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n showAllSymbol: true,\r\n symbolSize: 8,\r\n lineStyle: {\r\n normal: {\r\n color: \"rgb(39,239,94)\", // 线条颜色\r\n },\r\n borderColor: \"rgba(0,0,0,0.4)\",\r\n },\r\n itemStyle: {\r\n color: \"rgb(39,239,94)\",\r\n borderColor: \"rgb(39,239,94)\",\r\n borderWidth: 2,\r\n },\r\n label: {\r\n normal: {\r\n show: false,\r\n position: \"top\",\r\n formatter: [\" {a|{c}%}\"].join(\",\"),\r\n rich: {\r\n a: {\r\n color: \"#fff\",\r\n align: \"center\",\r\n },\r\n },\r\n },\r\n },\r\n tooltip: {\r\n show: true,\r\n },\r\n\r\n data: numB,\r\n },\r\n {\r\n name: \"C相位\",\r\n type: \"line\",\r\n symbol: \"circle\", // 默认是空心圆（中间是白色的），改成实心圆\r\n showAllSymbol: true,\r\n symbolSize: 8,\r\n lineStyle: {\r\n normal: {\r\n color: \"rgb(255,193,64)\", // 线条颜色\r\n },\r\n borderColor: \"rgba(0,0,0,0.4)\",\r\n },\r\n itemStyle: {\r\n color: \"rgb(255,193,64)\",\r\n borderColor: \"rgb(255,193,64)\",\r\n borderWidth: 2,\r\n },\r\n label: {\r\n normal: {\r\n show: false,\r\n position: \"top\",\r\n formatter: [\" {a|{c}%}\"].join(\",\"),\r\n rich: {\r\n a: {\r\n color: \"#fff\",\r\n align: \"center\",\r\n },\r\n },\r\n },\r\n },\r\n tooltip: {\r\n show: true,\r\n },\r\n\r\n data: numC,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n },\r\n },\r\n watch: {\r\n equipmentName: {\r\n handler(newVal, oldVal) {\r\n if (newVal == \"箱变\") {\r\n this.tableColumns.forEach((item, index) => {\r\n if (index == 0 || index % 2 == 0) {\r\n item.name = \"进线\";\r\n } else {\r\n item.name = \"出线\";\r\n }\r\n });\r\n } else {\r\n this.tableColumns.forEach((item, index) => {\r\n item.name=\"间隔\"+(index+1)\r\n });\r\n }\r\n },\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n.fenzhiMessage {\r\n width: 100%;\r\n margin-top: 6px;\r\n height: calc(100% - 30px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n .fenzhiItem {\r\n background-image: url(\"../../assets/images/fenzhiBg.png\");\r\n width: 295px;\r\n height: 116px;\r\n background-size: 100% 100%;\r\n .unitNum {\r\n height: 83px;\r\n line-height: 83px;\r\n width: 100%;\r\n text-align: center;\r\n font-size: 30px;\r\n color: #56fefe;\r\n }\r\n .fenzhiUnit {\r\n height: 33px;\r\n text-align: center;\r\n font-size: 20px;\r\n line-height: 28px;\r\n color: #fff;\r\n }\r\n }\r\n}\r\n.addTitle {\r\n color: rgb(86, 244, 254);\r\n text-align: left;\r\n}\r\n//表格\r\n.user_skills {\r\n /**\r\n 表格有滚动效果但是不显示滚动条\r\n */\r\n /deep/ .is-scrolling-none {\r\n overflow: hidden;\r\n overflow-y: auto;\r\n overflow-x: scroll;\r\n }\r\n /deep/ .is-scrolling-none::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/.el-table--scrollable-y ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/.el-table--scrollable-x ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n /deep/ .el-table {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-table th {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-table__header {\r\n height: 48px;\r\n background: url(\"../../assets/images/intervalTable.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n /deep/ .el-table__header th {\r\n border: none;\r\n padding: 0;\r\n height: 40px;\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 &.el-table__cell.is-leaf {\r\n border: none !important;\r\n }\r\n }\r\n /deep/ .el-table tr {\r\n background-color: transparent !important;\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 /deep/ .el-table__body td .cell {\r\n white-space: nowrap !important;\r\n // word-break: break-all;\r\n }\r\n /deep/ .el-table th.el-table__cell > .cell {\r\n color: rgb(86, 254, 226);\r\n }\r\n /deep/.el-table .el-table__cell {\r\n padding: 5px 0;\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::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::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.ringMain {\r\n width: 1332px !important;\r\n height: 739px !important;\r\n background-image: url(\"../../assets/images/ringMain.png\") !important;\r\n .main {\r\n height: 93% !important;\r\n .basic {\r\n margin-top: 20px;\r\n .title {\r\n margin-bottom: 5px;\r\n }\r\n }\r\n }\r\n}\r\n.ringMainUnit {\r\n width: 1511px;\r\n height: 1071px;\r\n background: url(\"../../assets/images/ringMainUnitKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n -webkit-animation: fadeInDown 0.3s;\r\n animation: fadeInDown 0.3s;\r\n padding: 15px 25px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-content: space-between;\r\n .top {\r\n height: 4%;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n .title {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(255, 255, 255),\r\n rgb(86, 244, 254)\r\n );\r\n }\r\n }\r\n .main {\r\n height: 95%;\r\n width: 100%;\r\n // border: 1px solid blue;\r\n .basic {\r\n height: 8.8%;\r\n width: 100%;\r\n // border: 1px solid red;\r\n .title {\r\n height: 27%;\r\n width: 100%;\r\n // border: 1px solid yellow;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .content {\r\n height: 73%;\r\n width: 100%;\r\n background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n display: flex;\r\n background-size: 100% 100%;\r\n justify-content: space-around;\r\n overflow: auto;\r\n .information {\r\n color: #ffffff;\r\n height: 100%;\r\n width: 96%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n .informationContent {\r\n height: 35px;\r\n line-height: 35px;\r\n background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n }\r\n }\r\n .earlyWarning {\r\n height: 8.8%;\r\n width: 100%;\r\n margin-top: 10px;\r\n // border: 1px solid red;\r\n .title {\r\n height: 27%;\r\n width: 100%;\r\n // border: 1px solid yellow;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .content {\r\n height: 73%;\r\n width: 100%;\r\n background: url(\"../../assets/images/basicFrame.png\") no-repeat;\r\n display: flex;\r\n background-size: 100% 100%;\r\n justify-content: flex-start;\r\n .information {\r\n color: #ffffff;\r\n height: 100%;\r\n width: 79%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n display: flex;\r\n align-items: center;\r\n -webkit-box-pack: justify;\r\n padding-left: 24px;\r\n .informationContent {\r\n height: 35px;\r\n background: url(\"../../assets/images/cardSquare.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n }\r\n }\r\n .interval {\r\n height: 40%;\r\n width: 100%;\r\n margin-top: 10px;\r\n .title {\r\n height: 7%;\r\n width: 100%;\r\n color: rgb(86, 244, 254);\r\n display: flex;\r\n }\r\n .table {\r\n height: 85%;\r\n // border: 1px solid red;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n background-size: 100% 100%;\r\n padding: 15px 20px;\r\n }\r\n }\r\n .intervalData {\r\n height: 33%;\r\n margin-top: 10px;\r\n padding-left: 10px;\r\n background: url(\"../../assets/images/intervalFrame.png\") no-repeat;\r\n background-size: 100% 100%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n /deep/ .el-tabs__nav-wrap::after {\r\n background-color: transparent !important;\r\n }\r\n /deep/ .el-tabs--top{\r\n width: 50%;\r\n }\r\n #intervalShow {\r\n width: 100%;\r\n height: calc(100% - 54px);\r\n }\r\n #temperatureShow{\r\n width: 100%;\r\n height: calc(100% - 54px);\r\n }\r\n }\r\n .InfraredVideo {\r\n .title {\r\n height: 100%;\r\n .content {\r\n margin-left: 30px;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n }\r\n }\r\n /deep/ .el-tabs__item {\r\n margin-top: 20px;\r\n padding: 0 30px;\r\n }\r\n }\r\n }\r\n}\r\n.content1 {\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n/deep/.el-tabs__content {\r\n height: 100%;\r\n overflow: auto;\r\n position: relative;\r\n}\r\n/**\r\n下拉显示动画效果\r\n*/\r\n@keyframes fadeInDown {\r\n 0% {\r\n -webkit-transform: translate3d(0, -20%, 0);\r\n transform: translate3d(0, -20%, 0);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n -webkit-transform: none;\r\n transform: none;\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@-webkit-keyframes fadeInDown {\r\n 0% {\r\n -webkit-transform: translate3d(0, -20%, 0);\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n -webkit-transform: none;\r\n opacity: 1;\r\n }\r\n}\r\n</style>\r\n<style lang=\"less\">\r\n.el-tabs__item:hover {\r\n color: #56fefe !important;\r\n}\r\n.el-tabs__item.is-active {\r\n color: #56fefe !important;\r\n font-size: 23px;\r\n}\r\n.el-tabs__item {\r\n color: rgb(60, 127, 127) !important;\r\n font-size: 18px;\r\n}\r\n\r\n.el-tabs__active-bar {\r\n background-color: transparent !important;\r\n background: url(\"../../assets/images/ringMainGH.png\") no-repeat;\r\n background-size: 100% 100%;\r\n bottom: -5px !important;\r\n height: 19px !important;\r\n}\r\n.el-tabs__nav-wrap::after {\r\n background-color: rgb(38, 114, 120) !important;\r\n}\r\n</style>\r\n"]}]} |