From d6c0fd6843352830f1d101e36acceffaa04ac441 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Sat, 9 Mar 2024 09:08:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E6=95=B0?= =?UTF-8?q?=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/home/home.js | 331 ++++++++++++++--------- src/view/home/arrester/index.vue | 135 ++++++++- src/view/home/breaker/index.vue | 141 ++++++++-- src/view/home/monitoringDevice/index.vue | 95 +++++-- src/view/home/pageMidSecond/index.vue | 229 +++++++++++----- 5 files changed, 686 insertions(+), 245 deletions(-) diff --git a/src/api/home/home.js b/src/api/home/home.js index 08609bf..62348dc 100644 --- a/src/api/home/home.js +++ b/src/api/home/home.js @@ -1,151 +1,213 @@ -import request from '@/utils/request'; -import { UPMS_SREVICE } from '@/api/module/urls' +import request from "@/utils/request"; +import { UPMS_SREVICE } from "@/api/module/urls"; /** - * 获取lxId + * 获取lxId */ - export function getLxId(jgid,mtid) { - return request({ - url: '/EquipController/queryLx/' + jgid + '/' + mtid, - method: 'get' - }) +export function getLxId(jgid, mtid) { + return request({ + url: "/EquipController/queryLx/" + jgid + "/" + mtid, + method: "get", + }); } /** - * 获取EqmId + * 获取EqmId */ - export function getEqmId(jgid,lxid,mtid) { - return request({ - url: '/EquipController/queryEqmId/' + jgid + '/' + lxid + '/' + mtid, - method: 'get' - }) +export function getEqmId(jgid, lxid, mtid) { + return request({ + url: "/EquipController/queryEqmId/" + jgid + "/" + lxid + "/" + mtid, + method: "get", + }); } /** - * 油色谱 + * 油色谱 */ // 表格数据 export function oilChromaControllerTable(eqmid) { - return request({ - url: '/oilChromaController/queryTableData/' + eqmid, - method: 'get' - }) + return request({ + url: "/oilChromaController/queryTableData/" + eqmid, + method: "get", + }); } // 趋势图数据 export function oilChromaControllerLine(eqmid) { - return request({ - url: '/oilChromaController/queryLineData/' + eqmid, - method: 'get' - }) + return request({ + url: "/oilChromaController/queryLineData/" + eqmid, + method: "get", + }); } /** - * 铁芯/夹件 + * 铁芯/夹件 */ // 表格数据 export function ironCoreJoinClampControllerTable({ ...idGather }) { - return request({ - url: '/ironCoreJoinClampController/queryTableData/' + idGather.ironCoreId + '/' + idGather.clampId, - method: 'get' - }) + return request({ + url: + "/ironCoreJoinClampController/queryTableData/" + + idGather.ironCoreId + + "/" + + idGather.clampId, + method: "get", + }); } // 趋势图数据 export function ironCoreJoinClampControllerLine({ ...idGather }) { - return request({ - url: '/ironCoreJoinClampController/queryLineData/' + idGather.ironCoreId + '/' + idGather.clampId, - method: 'get' - }) + return request({ + url: + "/ironCoreJoinClampController/queryLineData/" + + idGather.ironCoreId + + "/" + + idGather.clampId, + method: "get", + }); } /** -* 电缆环流 -*/ + * 电缆环流 + */ // 表格数据 export function cableCircleControllerTable(arr) { - return request({ - url: '/cableCircleController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5], - method: 'get' - }) + return request({ + url: + "/cableCircleController/queryTableData/" + + arr[0] + + "/" + + arr[1] + + "/" + + arr[2] + + "/" + + arr[3] + + "/" + + arr[4] + + "/" + + arr[5], + method: "get", + }); } // 趋势图数据 export function cableCircleControllerLine(arr) { - return request({ - url: '/cableCircleController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5], - method: 'get' - }) + return request({ + url: + "/cableCircleController/queryLineData/" + + arr[0] + + "/" + + arr[1] + + "/" + + arr[2] + + "/" + + arr[3] + + "/" + + arr[4] + + "/" + + arr[5], + method: "get", + }); } /** -* 红外 -*/ + * 红外 + */ // 表格数据 export function InfraredThermographyControllerTable(arr) { - return request({ - url: '/InfraredThermographyController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2], - method: 'get' - }) + return request({ + url: + "/InfraredThermographyController/queryTableData/" + + arr[0] + + "/" + + arr[1] + + "/" + + arr[2], + method: "get", + }); } // 趋势图数据 export function InfraredThermographyControllerLine(arr) { - return request({ - url: '/InfraredThermographyController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2], - method: 'get' - }) + return request({ + url: + "/InfraredThermographyController/queryLineData/" + + arr[0] + + "/" + + arr[1] + + "/" + + arr[2], + method: "get", + }); } /** -* 局放 -*/ + * 局放 + */ // 表格数据 export function CablePartialDischargeControllerTable(arr) { - return request({ - url: '/cablePartialDischargeController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2], - method: 'get' - }) + return request({ + url: + "/cablePartialDischargeController/queryTableData/" + + arr[0] + + "/" + + arr[1] + + "/" + + arr[2], + method: "get", + }); } // 趋势图数据 -export function CablePartialDischargeControllerLine(arr) { - return request({ - url: '/cablePartialDischargeController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2], - method: 'get' - }) +// export function CablePartialDischargeControllerLine(arr) { +// return request({ +// url: +// "/cablePartialDischargeController/queryLineData/" + +// arr[0] + +// "/" + +// arr[1] + +// "/" + +// arr[2], +// method: "get", +// }); +// } +export function CablePartialDischargeControllerLine(eqmid) { + return request({ + url: "/cablePartialDischargeController/queryJfLineData/" + eqmid, + method: "get", + }); } /** -* 监测装置 -*/ + * 监测装置 + */ /** -* GIS -*/ + * GIS + */ // 表格数据 export function SF6ControllerTable(eqmid) { - return request({ - url: '/SF6Controller/queryTableData/' + eqmid, - method: 'get' - }) + return request({ + url: "/SF6Controller/queryTableData/" + eqmid, + method: "get", + }); } // 趋势图数据 export function SF6ControllerLine(eqmid) { - return request({ - url: '/SF6Controller/queryLineData/' + eqmid, - method: 'get' - }) + return request({ + url: "/SF6EnvController/queryLineData/" + eqmid, + method: "get", + }); } /** -* 避雷器 -*/ + * 避雷器 + */ // 表格数据 export function BlackBlqControllerTable(eqmid) { - return request({ - url: '/BlqController/queryTableData/' + eqmid, - method: 'get' - }) + return request({ + url: "/BlqController/queryTableData/" + eqmid, + method: "get", + }); } // 趋势图数据 export function BlackBlqControllerLine(eqmid) { - return request({ - url: '/BlqController/queryLineData/' + eqmid, - method: 'get' - }) + return request({ + url: "/BlqController/queryLineData/" + eqmid, + method: "get", + }); } /** @@ -153,10 +215,10 @@ export function BlackBlqControllerLine(eqmid) { */ // 设备总数 export function getEquNum() { - return request({ - url: '/EquipController/queryEquipNum', - method: 'get' - }) + return request({ + url: "/EquipController/queryEquipNum", + method: "get", + }); } /** @@ -164,51 +226,78 @@ export function getEquNum() { */ // 变电设备类型 export function getJgType() { - return request({ - url: '/EquipController/queryJg', - method: 'get' - }) + return request({ + url: "/EquipController/queryJg", + method: "get", + }); } // 设备小类 export function getLxType(jgid) { - return request({ - url: '/EquipController/getLxType/' + jgid, - method: 'get' - }) + return request({ + url: "/EquipController/getLxType/" + jgid, + method: "get", + }); } // 监测设备类型 -export function getEqType(jgid,lxid) { - return request({ - url: '/EquipController/getEqType/' + jgid +'/'+ lxid, - method: 'get' - }) +export function getEqType(jgid, lxid) { + return request({ + url: "/EquipController/getEqType/" + jgid + "/" + lxid, + method: "get", + }); } // 告警列表 export function queryAlarm(params) { - return request({ - url: '/cableCirculationController/page', - method: 'post', - data: params - }) - } + return request({ + url: "/cableCirculationController/page", + method: "post", + data: params, + }); +} // 告警详情列表 export function queryAlarmDetail(params) { - return request({ - url: '/cableCirculationController/secondPage', - method: 'post', - data: params - }) - } - + return request({ + url: "/cableCirculationController/secondPage", + method: "post", + data: params, + }); +} + // 告警处理 export function dealwarning(params) { - return request({ - url: '/cableCirculationController/deal', - method: 'post', - data: params - }) - } + return request({ + url: "/cableCirculationController/deal", + method: "post", + data: params, + }); +} + +//获取SF6环境 + +export function getSf6Api() { + return request({ + url: "/EquipController/getSf6", + method: "get", + }); +} + +//获取避雷器 + +export function getblqApi() { + return request({ + url: "/EquipController/getblq", + method: "get", + }); +} + +//获取局放 + +export function getjfApi() { + return request({ + url: "/EquipController/getjf", + method: "get", + }); +} diff --git a/src/view/home/arrester/index.vue b/src/view/home/arrester/index.vue index 1521b26..44f8688 100644 --- a/src/view/home/arrester/index.vue +++ b/src/view/home/arrester/index.vue @@ -17,9 +17,9 @@ :style="'background-image:url(' + arrester + ');'" v-show="cardShow" > -
+
避雷器 - @@ -56,12 +56,26 @@
- + + + + +
@@ -73,6 +87,7 @@ import { getLxId, BlackBlqControllerTable, BlackBlqControllerLine, + getblqApi, } from "@/api/home/home"; // 左边 import { echartData } from "@/utils/common"; @@ -126,6 +141,9 @@ export default { xAxisData: [], seriesData: [], selectIdList: [], + //新接口数据 + blqtableData: [], + blqName: "", }; }, created() { @@ -136,6 +154,15 @@ export default { }, methods: { init() { + getblqApi().then((response) => { + const { code, data, msg } = response; + if (code === 200) { + console.log("bileiqi", data); + this.blqtableData = data; + } else { + this.msgError(msg); + } + }); getLxId(3, 4) .then((response) => { const { code, data, msg } = response; @@ -166,6 +193,13 @@ export default { this.msgError(err.msg); }); }, + //点击当前行 + handleRowClick(row, column, event) { + console.log(row); // 这里会打印出被点击的行的数据 + this.blqName = row.name; + this.tableDataFun(row.id); + this.echartDataFun(row.id, "1"); + }, tableDataFun(data) { this.loading = true; BlackBlqControllerTable(data).then((response) => { @@ -212,16 +246,17 @@ export default { } this.seriesData = arr; this.xAxisData = data[0].dtimes; - if (type === '2') { - this.tendencyChartChange(); - } + this.tendencyChartChange("5"); + // if (type === "2") { + // this.tendencyChartChange(); + // } } else { this.msgError(msg); } }); }, // 点击开关 - changeStatus: function ($event) { + changeStatus: function($event) { if (!$event) { this.cardShow = false; this.hideSwitchShow = true; @@ -234,17 +269,20 @@ export default { }, dropdownClick(command) { this.tableDataFun(this.selectIdList[command]); - this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载 + this.echartDataFun(this.selectIdList[command], "2"); //后面的2，是为了区分首次加载还是选择加载 }, tendencyChartChange(type) { + console.log(type); + console.log(this.legendData); + console.log(this.xAxisData); + console.log(this.seriesData); + console.log(this.blqName); this.$emit( "dataDispose", this.legendData, this.xAxisData, this.seriesData, - this.dropdownData.length !== 0 - ? "避雷器 -" + this.dropdownData[0].name - : "避雷器 " + this.blqName ); }, }, @@ -283,4 +321,75 @@ export default { padding: 40px 0 !important; box-sizing: border-box; } - \ No newline at end of file +.cardContent { + .blqTable { + /deep/ thead { + color: #03bcff; + } + /deep/ th.el-table__cell { + background-color: transparent !important; + } + /deep/tr { + background-color: transparent !important; + } + color: #03bcff; + background-color: transparent !important; + /deep/ .el-table__cell { + padding: 0.18vw 0; + text-align: center; + } + } + /deep/.el-table--border { + border: 1px solid #03bcff; + } + /deep/.el-table td.el-table__cell, + .el-table th.el-table__cell.is-leaf { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table td.el-table__cell, + .el-table th.el-table__cell.is-leaf { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table--border .el-table__cell, + .el-table__body-wrapper + .el-table--border.is-scrolling-left + ~ .el-table__fixed { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table--border .el-table__cell, + .el-table__body-wrapper + .el-table--border.is-scrolling-left + ~ .el-table__fixed { + border-right: 1px solid #03bcff; + } + /deep/.el-table--enable-row-hover + .el-table__body + tr:hover + > td.el-table__cell { + background-color: #296479; + cursor: pointer; + } + /deep/.el-table::before { + height: 0; + } + /deep/.el-table__body tr.current-row > td.el-table__cell { + background-color: #296479; + } + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + /* 滚动条上的滚动滑块 */ + ::-webkit-scrollbar-thumb { + //background-color: #ccc; + /* 关键代码 */ + border-radius: 32px; + } + + /* 滚动条轨道 */ + ::-webkit-scrollbar-track { + //background-color: #f0f0f0; + border-radius: 32px; + } +} + diff --git a/src/view/home/breaker/index.vue b/src/view/home/breaker/index.vue index 1db1323..43e2b49 100644 --- a/src/view/home/breaker/index.vue +++ b/src/view/home/breaker/index.vue @@ -3,7 +3,8 @@
- {{ dropdownData.length !== 0 ? "SF6 -" + dropdownData[0].name : "SF6 " }} + + SF6环境
@@ -13,14 +14,14 @@ :style="'background-image:url(' + breaker + ');'" v-show="cardShow" > -
+
- SF6 - + SF6环境 - @@ -36,28 +37,42 @@ >{{ item.name }} - + --> - +
- + + + + +
@@ -69,6 +84,7 @@ import { SF6ControllerLine, getLxId, getEqmId, + getSf6Api, } from "@/api/home/home"; // 左边 import { echartData } from "@/utils/common"; @@ -121,6 +137,8 @@ export default { xAxisData: [], seriesData: [], selectIdList: [], + //新接口数据 + sf6tableData: [], }; }, created() { @@ -131,6 +149,15 @@ export default { }, methods: { init() { + getSf6Api().then((response) => { + const { code, data, msg } = response; + if (code === 200) { + console.log("sf6", data); + this.sf6tableData = data; + } else { + this.msgError(msg); + } + }); getLxId(2, 8) .then((response) => { const { code, data, msg } = response; @@ -161,6 +188,16 @@ export default { this.msgError(err.msg); }); }, + //点击当前行 + handleRowClick(row, column, event) { + console.log(row); // 这里会打印出被点击的行的数据 + this.tableDataFun(row.id); + this.echartDataFun(row.id, "1"); + // this.$nextTick(() => { + // this.echartDataFun(row.id, "1"); + // this.tendencyChartChange("5"); + // }); + }, tableDataFun(data) { this.loading = true; SF6ControllerTable(data).then((response) => { @@ -207,16 +244,17 @@ export default { } this.seriesData = arr; this.xAxisData = data[0].dtimes; - if (type === '2') { - this.tendencyChartChange(); - } + this.tendencyChartChange(); + // if (type === "2") { + // this.tendencyChartChange(); + // } } else { this.msgError(msg); } }); }, // 点击开关 - changeStatus: function ($event) { + changeStatus: function($event) { if (!$event) { this.cardShow = false; this.hideSwitchShow = true; @@ -229,7 +267,7 @@ export default { }, dropdownClick(command) { this.tableDataFun(this.selectIdList[command]); - this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载 + this.echartDataFun(this.selectIdList[command], "2"); //后面的2，是为了区分首次加载还是选择加载 }, tendencyChartChange(type) { // 通知home页图标数据处理 @@ -265,4 +303,75 @@ export default { padding: 20px 0 !important; box-sizing: border-box; } - \ No newline at end of file +.cardContent { + .sf6Table { + /deep/ thead { + color: #03bcff; + } + /deep/ th.el-table__cell { + background-color: transparent !important; + } + /deep/tr { + background-color: transparent !important; + } + color: #03bcff; + background-color: transparent !important; + /deep/ .el-table__cell { + padding: 0.18vw 0; + text-align: center; + } + } + /deep/.el-table--border { + border: 1px solid #03bcff; + } + /deep/.el-table td.el-table__cell, + .el-table th.el-table__cell.is-leaf { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table td.el-table__cell, + .el-table th.el-table__cell.is-leaf { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table--border .el-table__cell, + .el-table__body-wrapper + .el-table--border.is-scrolling-left + ~ .el-table__fixed { + border-bottom: 1px solid #03bcff; + } + /deep/.el-table--border .el-table__cell, + .el-table__body-wrapper + .el-table--border.is-scrolling-left + ~ .el-table__fixed { + border-right: 1px solid #03bcff; + } + /deep/.el-table--enable-row-hover + .el-table__body + tr:hover + > td.el-table__cell { + background-color: #296479; + cursor: pointer; + } + /deep/.el-table::before { + height: 0; + } + /deep/.el-table__body tr.current-row > td.el-table__cell { + background-color: #296479; + } + ::-webkit-scrollbar { + width: 8px !important; + height: 8px !important; + } + /* 滚动条上的滚动滑块 */ + ::-webkit-scrollbar-thumb { + //background-color: #ccc; + /* 关键代码 */ + border-radius: 32px; + } + + /* 滚动条轨道 */ + ::-webkit-scrollbar-track { + //background-color: #f0f0f0; + border-radius: 32px; + } +} + diff --git a/src/view/home/monitoringDevice/index.vue b/src/view/home/monitoringDevice/index.vue index 3c568fb..7950677 100644 --- a/src/view/home/monitoringDevice/index.vue +++ b/src/view/home/monitoringDevice/index.vue @@ -3,7 +3,10 @@
-
监测装置总数 | {{ number.totalNum }}
+
+ 监测装置总数 | {{ devNumberTotal }} +
@@ -15,18 +18,31 @@ >
- 监测装置总数 | {{ number.totalNum }} + 监测装置总数 | {{ devNumberTotal }}
- +
    +
  • + 主设备类型 + 装置数量（个） +
    • +
  • + {{ item.name }} + {{ item.num }} +
    • +
+
+
@@ -70,38 +86,41 @@ export default { data: [ { type: "变压器", - num: '0', + num: "0", prop: "byqNum", }, { type: "GIS", - num: '0', + num: "0", prop: "gisNum", }, { type: "避雷器", - num: '0', + num: "0", prop: "blqNum", }, { type: "开关柜", - num: '0', + num: "0", prop: "cwNum", }, { type: "电缆", - num: '0', + num: "0", prop: "dlNum", }, { type: "发电机", - num: '0', + num: "0", prop: "otherNum", }, ], }, samplingDate: "2021-10-11 15:15:30", number: {}, + //新接口数据 + devListNum: [], + devNumberTotal: "", }; }, created() { @@ -109,7 +128,7 @@ export default { }, methods: { // 点击开关 - changeStatus: function ($event) { + changeStatus: function($event) { if (!$event) { this.cardShow = false; this.hideSwitchShow = true; @@ -131,20 +150,26 @@ export default { }, // 获取数量 getEquNum() { - this.loading=true + this.loading = true; getEquNum().then((response) => { const { code, data, msg } = response; if (code === 200) { - this.number = data; - const arr = this.tableData.data; - for (let index = 0; index < arr.length; index++) { - const element = arr[index]; - for (const key in data) { - if (element.prop === key) { - arr[index].num = data[key].toString(); - } - } - } + this.devListNum = data.list; + this.devNumberTotal = data.totalNum; + console.log("aaaaaaaa", this.number); + // const arr = this.tableData.data; + // console.log("aaaaaaaaaa", arr); + // for (let index = 0; index < arr.length; index++) { + // const element = arr[index]; + // console.log(element); + // for (const key in data) { + // console.log(key); + // if (element.prop === key) { + // console.log(data[key]); + // arr[index].num = data[key].toString(); + // } + // } + // } } else { this.msgError(msg); } @@ -172,5 +197,29 @@ export default { .pageCard .cardContent { padding: 30px !important; box-sizing: border-box; + .devTotalNum { + border: 1px solid #03bcff; + font-size: 0.625vw; + color: #03bcff !important; + border-bottom: none; + ul { + margin: 0; + padding: 0; + li { + list-style: none; + display: flex; + //align-items: center; + justify-content: space-around; + span { + padding: 0.2vw 0; + flex: 1; + border-bottom: 1px solid #03bcff; + &:first-child { + border-right: 1px solid #03bcff; + } + } + } + } + } } - \ No newline at end of file + diff --git a/src/view/home/pageMidSecond/index.vue b/src/view/home/pageMidSecond/index.vue index 7c8e40e..2e04d5f 100644 --- a/src/view/home/pageMidSecond/index.vue +++ b/src/view/home/pageMidSecond/index.vue @@ -14,13 +14,13 @@ v-show="cardShow" > -
趋势图
+
- + 局放 - {{ jfName }} + {{ dropdownFirstNmae @@ -37,7 +37,6 @@
- {{ dropdownSecondNmae @@ -54,7 +53,7 @@
- + -->
@@ -62,26 +61,41 @@
- + > --> - + > --> - + + + + +