From b72618fe9cfc46e7de0e38f51ba2440b86f08794 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期一, 26 七月 2021 17:17:31 +0800
Subject: [PATCH] 首页拓扑图修改
---
src/pages/home/components/preOptionList.vue | 278 ++++++++++++++++++++++++++++++
src/pages/home/topoGraphdiagram/js/api.js | 69 +++++++
src/components/PageHeader.vue | 59 ++++++
src/pages/home/topoGraph.vue | 109 +++++++----
4 files changed, 471 insertions(+), 44 deletions(-)
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 5a7eda6..452ca4b 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,6 +1,10 @@
<template>
<div class="pageHeader">
<div class="headTitle">FMDS | 鐢垫満璇曢獙闆嗕腑娴嬫帶骞冲彴</div>
+ <div class="headInfoCon">
+ <div class="info">缃戠粶鐘舵��:姝ｅ父</div>
+ <div class="scrollCon"><span v-html="notice"></span></div>
+ </div>
<div class="headToolsCon">
<div class="avatar">
<span class="avatar-icon">
@@ -43,6 +47,7 @@
pwd: {
show: false,
},
+ notice: '鐩存祦涓婚厤鐢垫煖A鎺掔數鍘嬭繃楂樻姤璀�'
}
},
methods: {
@@ -88,7 +93,18 @@
}
.headToolsCon {
- width: 100%;
+ height: 40px;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+ padding-right: 40px;
+ }
+
+ .headInfoCon {
height: 40px;
position: absolute;
left: 0;
@@ -96,8 +112,45 @@
z-index: 2;
display: flex;
align-items: center;
- flex-direction: row-reverse;
- padding-right: 40px;
+ ;
+ padding-left: 40px;
+ }
+
+ .headInfoCon .info {
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid #ffffff;
+ padding-right: 8px;
+ margin-right: 8px;
+ }
+
+ .headInfoCon .scrollCon {
+ font-size: 16px;
+ width: 290px;
+ overflow: hidden;
+ }
+
+ .headInfoCon .scrollCon>span {
+ display: block;
+ margin-left: 100%;
+ width: 290px;
+ animation: myMove 8s linear infinite;
+ animation-fill-mode: forwards;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ /*鏂囧瓧鏃犵紳婊氬姩*/
+ @keyframes myMove {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 100% {
+ transform: translateX(-580px);
+ }
}
.avatar {
diff --git a/src/pages/home/components/preOptionList.vue b/src/pages/home/components/preOptionList.vue
new file mode 100644
index 0000000..8324115
--- /dev/null
+++ b/src/pages/home/components/preOptionList.vue
@@ -0,0 +1,278 @@
+<template>
+ <div class="pre-option-list">
+ <table>
+ <thead>
+ <tr>
+ <th>鐘舵�佸悕绉�</th>
+ <th>鐘舵��</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, key) in list" :key="'key'+key">
+ <td>{{item.label}}</td>
+ <td>
+ <el-switch v-model="item.value" @change="changeOption(item)"></el-switch>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</template>
+
+<script>
+ import MwSwitch from '@/components/smallModule/mwSwitch.vue';
+ import {
+ centralMonitorSysUpdateState,
+ centralMonitorSysSTUpdateStatus,
+ afeRectifierUpdateState2,
+ rectifierPowerUpdateState,
+ WaterCommUpdateStatus,
+ OilCommUpdateStatus,
+ } from "../topoGraphdiagram/js/api"
+ export default {
+ name: "preOptionList",
+ props: {
+ bigPower: {
+ type: Number,
+ default: 0
+ },
+ eleBoard: {
+ type: Number,
+ default: 0
+ },
+ AFEcabinet: {
+ type: Number,
+ default: 0
+ },
+ waterStation: {
+ type: Number,
+ default: 0
+ },
+ oilStation: {
+ type: Number,
+ default: 0
+ },
+ switch5000: {
+ type: Number,
+ default: 0
+ },
+ switch32001: {
+ type: Number,
+ default: 0
+ },
+ switch32002: {
+ type: Number,
+ default: 0
+ },
+ switch5200: {
+ type: Number,
+ default: 0
+ },
+ },
+ components: {
+ MwSwitch
+ },
+ data() {
+ return {
+ list: [{
+ devId: 10001,
+ label: '5000KV寮�鍏�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 10003,
+ label: '3200KV1寮�鍏�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 10004,
+ label: '3200KV2寮�鍏�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 10002,
+ label: '5200KV寮�鍏�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 10005,
+ label: '鐩存祦涓婚厤鐢垫澘',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 20001,
+ label: 'AFE鍙橀鍣�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 30001,
+ label: '澶у姛鐜囨暣娴佺數婧�',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 40002,
+ label: '姘寸珯',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ {
+ devId: 40001,
+ label: '娌圭珯',
+ value: true,
+ on: 1,
+ off: 0
+ },
+ ]
+ }
+ },
+ methods: {
+ changeOption(data) {
+ let value = data.value ? data.on : data.off;
+ if (data.devId == 10001 || data.devId == 10002 || data.devId == 10003 || data.devId == 10004) {
+ let postData1 = {
+ devId: data.devId,
+ switchClose: value
+ }
+ centralMonitorSysUpdateState(postData1).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ } else if (data.devId == 10005) {
+ let postData2 = {
+ devId: data.devId,
+ switchCloseBusScreen: value
+ }
+ centralMonitorSysSTUpdateStatus(postData2).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ } else if (data.devId == 20001) {
+ let postData3 = {
+ devId: data.devId,
+ inverterRun: value
+ }
+ afeRectifierUpdateState2(postData3).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ } else if (data.devId == 30001) {
+ let postData4 = {
+ devId: data.devId,
+ rectifierPowerState: value
+ }
+ rectifierPowerUpdateState(postData4).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ } else if (data.devId == 40002) {
+ let postData5 = {
+ devId: data.devId,
+ waterState: value
+ }
+ WaterCommUpdateStatus(postData5).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ } else if (data.devId == 40001) {
+ let postData6 = {
+ devId: data.devId,
+ oilState: value
+ }
+ OilCommUpdateStatus(postData6).then(res => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ this.$layer.msg("淇敼鎴愬姛");
+ } else {
+ this.$layer.msg("淇敼澶辫触");
+ }
+ }).catch(error => {
+
+ });
+ }
+ }
+ },
+ mounted() {
+ console.log(this.AFEcabinet)
+ this.list[0].value = this.switch5000 == 0 ? false : true;
+ this.list[1].value = this.switch32001 == 0 ? false : true;
+ this.list[2].value = this.switch32002 == 0 ? false : true;
+ this.list[3].value = this.switch5200 == 0 ? false : true;
+ this.list[4].value = this.eleBoard == 0 ? false : true;
+ this.list[5].value = this.AFEcabinet == 0 ? false : true;
+ this.list[6].value = this.bigPower == 0 ? false : true;
+ this.list[7].value = this.waterStation == 0 ? false : true;
+ this.list[8].value = this.oilStation == 0 ? false : true;
+ }
+ }
+</script>
+
+<style scoped>
+ .pre-option-list {
+ font-size: 16px;
+ color: #FFFFFF;
+ }
+
+ .pre-option-list table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .pre-option-list table th,
+ .pre-option-list table td {
+ border: 2px solid #6261CB;
+ padding: 8px 8px;
+ text-align: center;
+ }
+
+ .pre-option-list table th {
+ color: #FFF034;
+ border-top: 2px solid #797979;
+ border-left: 2px solid #797979;
+ border-right: 2px solid #797979;
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/home/topoGraph.vue b/src/pages/home/topoGraph.vue
index b8e0c6d..5515c37 100644
--- a/src/pages/home/topoGraph.vue
+++ b/src/pages/home/topoGraph.vue
@@ -2,6 +2,7 @@
<div class="contentBox">
<div class="tipTitle">绯荤粺鎷撴墤</div>
<div class="diagram-con">
+ <el-button type="primary" size="mini" class="editBtn" @click="drawer=true">鍓嶇疆鏉′欢璁剧疆</el-button>
<div class="diagram-stc" ref="static"></div>
<div class="diagram-flush" ref="flush"></div>
<axis :position="axis1" v-if="axis1.length>0"></axis>
@@ -369,6 +370,13 @@
</div>
</diagram-panel>
</transition>
+
+ <mw-drawer :visible.sync="drawer">
+ <pre-option-list :bigPower="bigPower" :eleBoard="eleBoard" :AFEcabinet="AFEcabinet"
+ :waterStation="waterStation" :oilStation="oilStation" :switch5000="switch5000"
+ :switch32001="switch32001" :switch32002="switch32002" :switch5200="switch5200" v-if="drawer">
+ </pre-option-list>
+ </mw-drawer>
</div>
</template>
@@ -376,6 +384,8 @@
import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram"
import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
+ import MwDrawer from "@/components/smallModule/mwDrawer";
+ import PreOptionList from "@/pages/home/components/preOptionList";
import {
deviceStateAllStatus,
centralMonitorSysInfoByDevId,
@@ -383,7 +393,7 @@
centralMonitorSysSTInfoByDevId,
afeInverterInfoByDeviceId,
WaterCommInfoByDevId,
- OilCommInfoByDevId
+ OilCommInfoByDevId,
} from "./topoGraphdiagram/js/api"
import Axis from '@/components/smallModule/axis.vue';
let diagram;
@@ -391,9 +401,13 @@
components: {
DiagramPanel,
Axis,
+ MwDrawer,
+ PreOptionList
},
data() {
return {
+ type: 'kz',
+ drawer: false,
axis1: [],
axis2: [],
text1Pos: [],
@@ -514,142 +528,150 @@
this.deviceList.map(item => {
switch (item.position) {
case 5: // 澶у姛鐜囩數婧�
- this.bigPower = item.commStatus;
- if (this.bigPower == 0) {
- diagramStates(diagram, 'bigPower');
- }
rectifierPowerInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.bigPower = res.data.data.rectifierPowerState;
+ if (this.bigPower == 0) {
+ diagramStates(diagram, 'bigPower');
+ }
this.panel4 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 6: // 鐩存祦涓婚厤鐢垫澘
- this.eleBoard = item.commStatus
- if (this.eleBoard == 0) {
- diagramStates(diagram, 'eleBoard');
- }
centralMonitorSysSTInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.eleBoard = res.data.data.switchCloseBusScreen
+ if (this.eleBoard == 0) {
+ diagramStates(diagram, 'eleBoard');
+ }
this.panel5 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
- case 8: // AFE鍙橀
- this.AFEcabinet = item.commStatus
- if (this.AFEcabinet == 0) {
- diagramStates(diagram, 'AFEcabinet');
- }
+ case 7: // AFE鍙橀
afeInverterInfoByDeviceId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.AFEcabinet = res.data.data.inverterRun
+ if (this.AFEcabinet == 0) {
+ diagramStates(diagram, 'AFEcabinet');
+ }
this.panel7 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 9: // 姘寸珯
- this.waterStation = item.commStatus
- if (this.waterStation == 0) {
- diagramStates(diagram, 'waterStation');
- }
WaterCommInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.waterStation = res.data.data.waterState
+ if (this.waterStation == 0) {
+ diagramStates(diagram, 'waterStation');
+ }
this.panel8 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 10: // 娌圭珯
- this.oilStation = item.commStatus
- if (this.oilStation == 0) {
- diagramStates(diagram, 'oilStation');
- }
OilCommInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.oilStation = res.data.data.oilState
+ if (this.oilStation == 0) {
+ diagramStates(diagram, 'oilStation');
+ }
this.panel9 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 1: // 5000KV寮�鍏�
- this.switch5000 = item.commStatus;
- if (this.switch5000 == 1) {
- diagramStates(diagram, 'switch5000');
- }
centralMonitorSysInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.switch5000 = res.data.data.switchClose;
+ if (this.switch5000 == 1) {
+ diagramStates(diagram, 'switch5000');
+ }
this.panel1 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 2: // 3200KV1寮�鍏�
- this.switch32001 = item.commStatus
- if (this.switch32001 == 1) {
- diagramStates(diagram, 'switch32001');
- }
centralMonitorSysInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.switch32001 = res.data.data.switchClose
+ if (this.switch32001 == 1) {
+ diagramStates(diagram, 'switch32001');
+ }
this.panel2 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 3: // 3200KV2寮�鍏�
- this.switch32002 = item.commStatus
- if (this.switch32002 == 1) {
- diagramStates(diagram, 'switch32002');
- }
centralMonitorSysInfoByDevId({
devId: item.deviceId
}).then((res) => {
- if (res.data.code == 0) {
+ if (res.data.code == 1) {
+ this.switch32002 = res.data.data.switchClose
+ if (this.switch32002 == 1) {
+ diagramStates(diagram, 'switch32002');
+ }
this.panel3 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
case 4: // 5200KV寮�鍏�
- this.switch5200 = item.commStatus
- if (this.switch5200 == 1) {
- diagramStates(diagram, 'switch5200');
- }
centralMonitorSysInfoByDevId({
devId: item.deviceId
}).then((res) => {
if (res.data.code == 1) {
+ this.switch5200 = res.data.data.switchClose
+ if (this.switch5200 == 1) {
+ diagramStates(diagram, 'switch5200');
+ }
this.panel6 = res.data.data
+ this.setDiagramByType()
}
}).catch((err) => {
console.log(err)
});
break;
}
- this.setDiagramByType()
})
}
}).catch((err) => {
@@ -870,6 +892,13 @@
position: relative;
}
+ .diagram-con .editBtn {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ z-index: 15;
+ }
+
.panel7 .panel-item .label {
width: 100px;
text-align: right;
diff --git a/src/pages/home/topoGraphdiagram/js/api.js b/src/pages/home/topoGraphdiagram/js/api.js
index a475577..e6e020e 100644
--- a/src/pages/home/topoGraphdiagram/js/api.js
+++ b/src/pages/home/topoGraphdiagram/js/api.js
@@ -49,7 +49,7 @@
export const afeInverterInfoByDeviceId = (data) => {
return axios({
method: "GET",
- url: "/afeInverter/infoByDeviceId",
+ url: "/afeRectifier/infoByDevId",
params: data
});
}
@@ -74,4 +74,71 @@
url: "/OilComm/infoByDevId",
params: data
});
+}
+
+/**
+ * 杩涘嚭绾垮睆寮�鍏崇姸鎬�-婕旂ず浣跨敤
+ */
+export const centralMonitorSysUpdateState = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/centralMonitorSys/updateState",
+ params: data
+ });
+}
+
+/**
+ * 鐩存祦涓婚厤鐢垫煖鐘舵��-婕旂ず浣跨敤
+ */
+export const centralMonitorSysSTUpdateStatus = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/centralMonitorSysST/updateStatus",
+ params: data
+ });
+}
+
+/**
+ * AFE鍙橀鍣ㄧ姸鎬�-婕旂ず浣跨敤
+ */
+export const afeRectifierUpdateState2 = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/afeRectifier/updateState2",
+ params: data
+ });
+}
+
+
+/**
+ * 澶у姛鐜囨暣娴佺姸鎬�-婕旂ず浣跨敤
+ */
+export const rectifierPowerUpdateState = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/rectifierPower/updateState",
+ params: data
+ });
+}
+
+/**
+ * 姘寸珯鐘舵��-婕旂ず浣跨敤
+ */
+export const WaterCommUpdateStatus = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/WaterComm/updateStatus",
+ params: data
+ });
+}
+
+/**
+ * 娌圭珯鐘舵��-婕旂ず浣跨敤
+ */
+export const OilCommUpdateStatus = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/OilComm/updateStatus",
+ params: data
+ });
}
\ No newline at end of file
--
Gitblit v1.9.1