升压站页面新增光伏数据，增加全部数据展示效果；

src/api/index.js

@@ -7,6 +7,30 @@ const getWindturbine = () => {
         method: "get",
     });
 };
+// 获取所有升压站tab数据
+const getAllStationTab = () => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/boost_station/stations`,
+        method: "get",
+    });
+}
+// 获取svg触发器
+const getAllStationSvgInfo = (params) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/boost_station/svginfo?id=${params.id}`,
+        method: "get",
+    });
+}
+// 获取升压站svg图片数据
+const getSvgData = (params) => {
+    return request({
+        baseURL:process.env.VUE_APP_API,
+        url: `/api/boost_station/svg?id=${params.id}`,
+        method: "get",
+    });
+}
 // 标题栏数据
 const stationOverview = () => {
     return request({
@@ -388,6 +412,9 @@ export default {
     alarmCountQuery,
     statusTime,
     getWindturbine,
+    getSvgData,
+    getAllStationTab,
+    getAllStationSvgInfo,
     stationOverview,
     alarmFault,
     recommendation,

src/components/focus/syzDetails.vue

@@ -13,65 +13,84 @@
       </div>
     </template>
     <div class="bodyy">
-      <el-tabs
-        type="border-card"
-        stretch
-        lazy
-        style="width: 100%; height: 100%"
-        v-model="activeTab"
-        @tab-click="tabClick"
-      >
-        <el-tab-pane
-          class="syzDetailsPaneItem"
-          v-for="(item, index) in syzArray"
-          :key="index"
-          :name="item.id"
+        <el-tabs
+            type="border-card"
+            stretch
+            lazy
+            style="width: 100%; height: 100%"
+            v-model="activeTab"
+            @tab-click="tabClick"
         >
-          <template #label>
-            <span v-if="pageshowMode % 2">
-              <el-badge is-dot v-if="item.isWarning === '1'">
-                <span>{{ item.name }}</span>
-              </el-badge>
-              <span v-else>{{ item.name }}</span>
-            </span>
-            <span v-else>
-              <el-badge is-dot v-if="item.isWarning === '1'">
-                <span>{{ item.name }}</span>
-              </el-badge>
-              <span v-else>{{ item.name }}</span>
-            </span>
-          </template>
-          <Mhs ref="svgRef" v-if="item.id === 'MHS_FDC'" />
-          <Nss ref="svgRef" v-if="item.id === 'NSS_FDC'" />
-          <Qs ref="svgRef" v-if="item.id === 'QS_FDC'" />
-          <Sbq ref="svgRef" v-if="item.id === 'SBQ_FDC'" />
-          <Xs ref="svgRef" v-if="item.id === 'XS_FDC'" />
-          <!-- <Pl1 ref="svgRef" v-if="item.id === 'PL1_GDC'" />
-          <Pl2 ref="svgRef" v-if="item.id === 'PL2_GDC'" />
-          <Dwk ref="svgRef" v-if="item.id === 'DWK_GDC'" />
-          <Mch ref="svgRef" v-if="item.id === 'MCH_GDC'" />
-          <Xh ref="svgRef" v-if="item.id === 'XH_GDC'" />
-          <Sbdl ref="svgRef" v-if="item.id === 'QS3_FDC'" /> -->
-          <div class="alarmIconBox" @click="switchAlarmSound(index)">
-            <el-tooltip
-              v-if="item.isMute"
-              effect="light"
-              :content="`当前${item.name}升压站报警已消音，请注意`"
-              placement="left"
+            <el-tab-pane
+            class="syzDetailsPaneItem"
+            v-for="(item, index) in syzArray"
+            :key="index"
+            :name="item.id"
             >
-              <i
-                class="el-icon-close-notification"
-                style="color: orangered"
-              ></i>
-            </el-tooltip>
-            <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-      <CurrentWarningCard
-        :currentClass="$store.state.currentWarningCardClass"
-        :activeTab="activeTab || 'MHS_FDC'"
-      />
+            <template #label>
+                <span v-if="pageshowMode % 2">
+                <el-badge is-dot v-if="item.isWarning === '1'">
+                    <span>{{ item.name }}</span>
+                </el-badge>
+                <span v-else>{{ item.name }}</span>
+                </span>
+                <span v-else>
+                <el-badge is-dot v-if="item.isWarning === '1'">
+                    <span>{{ item.name }}</span>
+                </el-badge>
+                <span v-else>{{ item.name }}</span>
+                </span>
+            </template>
+            <div class="buttonGroup">
+                <el-button-group>
+                    <el-button type="plain" size="small" @click="changeHeight('D')" :class="allHeight === 'D' ? 'showSty' : ''">大图标</el-button>
+                    <el-button type="plain" size="small" @click="changeHeight('Z')" :class="allHeight === 'Z' ? 'showSty' : ''">中图标</el-button>
+                    <el-button type="plain" size="small" @click="changeHeight('X')" :class="allHeight === 'X' ? 'showSty' : ''">小图标</el-button>
+                </el-button-group>
+            </div>
+            <div :style="allpageHeight" v-if="item.id === 'all'" style="width: 100%;display: inline-block">
+                <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
+                    <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)">
+                        <div class="showAllSvgMsg_top" v-html="item.msg"></div>
+                        <div class="showAllSvgMsg_bot">
+                            <span>{{item.name}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="svg" :style="pageHeight" v-if="item.id !== 'all' && item.id === activeTab" v-html="svgMsg" v-loading="loading"></div>
+            <!-- <Mhs ref="svgRef" v-if="item.id === 'MHS_BT'" />
+            <Nss ref="svgRef" v-if="item.id === 'NSS_FDC'" />
+            <Qs ref="svgRef" v-if="item.id === 'QS_FDC'" />
+            <Sbq ref="svgRef" v-if="item.id === 'SBQ_FDC'" />
+            <Xs ref="svgRef" v-if="item.id === 'XS_FDC'" /> -->
+            <!-- <Pl1 ref="svgRef" v-if="item.id === 'PL1_GDC'" />
+            <Pl2 ref="svgRef" v-if="item.id === 'PL2_GDC'" />
+            <Dwk ref="svgRef" v-if="item.id === 'DWK_GDC'" />
+            <Mch ref="svgRef" v-if="item.id === 'MCH_GDC'" />
+            <Xh ref="svgRef" v-if="item.id === 'XH_GDC'" />
+            <Sbdl ref="svgRef" v-if="item.id === 'QS3_FDC'" /> -->
+            <div class="alarmIconBox" v-if="item.id !== 'all'" @click="switchAlarmSound(index)">
+                <el-tooltip
+                v-if="item.isMute"
+                effect="light"
+                :content="`当前${item.name}升压站报警已消音，请注意`"
+                placement="left"
+                >
+                <i
+                    class="el-icon-close-notification"
+                    style="color: orangered"
+                ></i>
+                </el-tooltip>
+                <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
+            </div>
+            </el-tab-pane>
+        </el-tabs>
+        <CurrentWarningCard
+            :currentClass="$store.state.currentWarningCardClass"
+            :activeTab="activeTab || 'MHS_FDC'"
+            v-if="activeTab !== 'all'"
+        />
     </div>
   </el-dialog>
 </template>
@@ -88,7 +107,10 @@ import Pl2 from "../BoosterStation/pl2.vue";
 import Mch from "../BoosterStation/mch.vue";
 import Xh from "../BoosterStation/xh.vue";
 
+import api from "api/index";
+
 import CurrentWarningCard from "./currentWarningCard.vue";
+import getSvgFromApi from "../BoosterStation/getSvgFromApi.vue";
 export default {
     props: {
         activeTabStation: {
@@ -109,33 +131,258 @@ export default {
         Mch,
         Xh,
         CurrentWarningCard,
+        getSvgFromApi
     },
     data() {
         return {
-        activeTab: this.$store.state.activeTab,
-        svgVisible: true,
-        audio: null,
-        timmer: null,
-        syzArray: [],
-        pageshowMode: 0,
+            activeTab: this.$store.state.activeTab,
+            svgVisible: true,
+            audio: null,
+            timmer: null,
+            syzArray: [],
+            pageshowMode: 0,
+            svgMsg: '',
+            loading: false,
+            allTagidArr: [],
+            starTimer: null,
+            allTagsMS: {},
+            allrefreshData: {},
+            allConditions: {},
+            onlytag: {},
+            allSvgMsgData: [],
+            allHeight: 'D'
         };
     },
-    created() {
-        this.changeArr()
+    computed: {
+        pageHeight() {
+            return {
+                'height': document.documentElement.clientHeight-60 + 'px'
+            }
+        },
+        allpageHeight() {
+            return {
+                'height': document.documentElement.clientHeight-200 + 'px'
+            }
+        },
+        allpageHeight3() {
+            let num = parseInt(this.allSvgMsgData.length / 3)
+            let num1 = this.allSvgMsgData.length % 3
+            let num2 = num1 > 0 ? 3 : num+1
+            return {
+                'height': (document.documentElement.clientHeight-160) / num2 + 'px'
+            }
+        },
+        allpageHeight4() {
+            let num = parseInt(this.allSvgMsgData.length / 4)
+            return {
+                'height': (document.documentElement.clientHeight-160) / num + 'px'
+            }
+        },
+        allpageHeight5() {
+            let num = parseInt(this.allSvgMsgData.length / 5)
+            return {
+                'height': (document.documentElement.clientHeight-160) / num + 'px'
+            }
+        },
+    },
+    mounted() {
     },
-    mounted() {},
     updated() {},
     methods: {
-        // 处理数组
-        changeArr() {
-            let arr = this.$store.getters.syzArray
-            arr.forEach((item, index) =>{
-                if (item.id === 'WIND_ALL' || item.id === 'PV_ALL') {
-                    arr.splice(index, 1)
+        getStyle(type) {
+            let num = null
+            let num1 = null
+            let num2 = null
+            if (type === 'D') {
+                num = parseInt(this.allSvgMsgData.length / 3)
+                num1 = this.allSvgMsgData.length % 3
+                num2 = num1 > 0 ? num + 1 : num
+                return {
+                    'width': '33.3%',
+                    'float': 'left',
+                    'height': (document.documentElement.clientHeight-200) / num2 + 'px'
+                }
+            } else if (type === 'Z') {
+                num = parseInt(this.allSvgMsgData.length / 4)
+                num1 = this.allSvgMsgData.length % 4
+                num2 = num1 > 0 ? num + 1 : num
+                return {
+                    'width': '25%',
+                    'float': 'left',
+                    'height': (document.documentElement.clientHeight-200) / num2 + 'px'
+                }
+            } else {
+                num = parseInt(this.allSvgMsgData.length / 5)
+                num1 = this.allSvgMsgData.length % 5
+                num2 = num1 > 0 ? num + 1 : num
+                return {
+                    'width': '20%',
+                    'float': 'left',
+                    'height': (document.documentElement.clientHeight-200) / num2 + 'px'
+                }
+            }
+            
+        },
+        changeHeight(type) {
+            this.allHeight = type
+        },
+        getAllStationtab() {
+            let obj = {
+                id: 'all',
+                name: '全部'
+            }
+            api.getAllStationTab().then((res) => {
+                if (res && res.data) {
+                    res.data.unshift(obj)
+                    this.syzArray = res.data
+                    this.activeTab = res.data[0].id
+                    if (this.activeTab === 'all') {
+                        let allMsg = res.data
+                        this.allSvgMsgData = []
+                        allMsg.forEach(it =>{
+                            if (it.id !== 'all') {
+                                this.getallSvgDataFn(it.id, it.name)
+                            }
+                        })
+                        // window.sessionStorage.setItem('allSvgData', [])
+                        console.log('allSvgMsgData', this.allSvgMsgData)
+                    }
+                    // this.getSvgDataFn(res.data[0].id)
+                }
+            })
+        },
+        // 获取所有升压站数据
+        getallSvgDataFn(id, name) {
+            let params = {
+                id: id
+            }
+            api.getSvgData(params).then((res) => {
+                let str = ''
+                str = res.data.substring(res.data.indexOf('<svg'))
+                str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
+                let obj = {
+                    id: id,
+                    name: name,
+                    msg: str
+                }
+                this.allSvgMsgData.push(obj)
+            })
+        },
+        // 获取升压站数据
+        getSvgDataFn(val) {
+            this.svgMsg = ''
+            this.loading = true
+            let params = {
+                id: val
+            }
+            api.getSvgData(params).then((res) => {
+                if (res && res.data) {
+                    let str = ''
+                    str = res.data.substring(res.data.indexOf('<svg'))
+                    str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
+                    this.svgMsg = str
+                    let html = document.getElementById('svg')
+                    let svg1 = document.getElementsByTagName('svg')
+                    this.$nextTick(() =>{
+                        if (svg1) {
+                            let allTags = []
+                            let allTagsxc = []
+                            let status = ['g', 'text', 'rect', 'line']
+                            status.forEach(it =>{
+                                let allgs = []
+                                allgs = document.querySelectorAll(it);
+                                allTags.push(allgs)
+                            })
+                            allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3]]
+                            allTags.forEach((it) => {
+                                if (it.getAttribute("tagid")) {
+                                    allTagsxc.push(it);
+                                }
+                            });
+                            console.log('allTags222=>', allTagsxc)
+                            this.allTagidArr = allTagsxc
+                            this.getSvgInfo()
+                        }
+                        console.log('html111=>', html)
+                    })
+                    this.loading = false
+                }
+            })
+        },
+        // 获取触发器
+        getSvgInfo() {
+            let params = {
+                id: this.activeTab
+            }
+            api.getAllStationSvgInfo(params).then((res) => {
+                if (res && res.data) {
+                    if (res.data.tags) {
+                        let strarr = []
+                        let str = ''
+                        for(let i in res.data.tags) {
+                            strarr.push(res.data.tags[i].tag)
+                        }
+                        str = strarr.join(',')
+                        this.allTagsMS = res.data.tags
+                        this.allConditions = res.data.conditions
+                        this.starTimer = setInterval(() =>{
+                            this.getrefreshData(str)
+                        }, 2000)
+                    }
+                    console.log('SvgInfo333=>', res)
                 }
             })
-            this.syzArray = arr
-            console.log('arr', arr)
+        },
+        // 获取根盾数据
+        getrefreshData(val) {
+            api.refreshData(val).then((res) => {
+                if (res && res.data) {
+                    this.allrefreshData = res.data
+                    this.refreshDataFn(this.allTagsMS)
+                }
+                console.log('refreshData444=>', res)
+            })
+        },
+        // 刷新数据
+        refreshDataFn(datas) {
+            for (let it in datas) {
+                let tagId = datas[it];
+                this.toRefreshFn(it, tagId);
+            }
+        },
+        // 刷新自定义组件
+        toRefreshFn(val, data) {
+            var tag = this.allrefreshData[data.tag];
+            if (!tag) return;
+            this.allTagidArr.forEach(it =>{
+                this.onlytag = {}
+                if (it.attributes.tagid) {
+                    if (val === it.attributes.tagid.value) {
+                        this.onlytag = it
+                        if (this.onlytag.attributes.csid) {
+                            let csid = this.onlytag.attributes.csid.value.split(';')
+                            csid.forEach(ic =>{
+                                if (ic) {
+                                    let num = this.allConditions[ic].value === 0 ? '0' : this.allConditions[ic].value
+                                    if (num) {
+                                        let num2 = tag.value === 0 ? '0' : tag.value
+                                        if (num === num2) {
+                                            this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
+                                            return 
+                                        }
+                                    }
+                                }
+                            })
+                        }
+                    }
+                }
+            })
+            console.log('onlyTag555', this.onlytag)
+        },
+        // '全部'界面双击事件
+        dblgetSvgDataFn(name) {
+            this.activeTab = name
+            this.getSvgDataFn(name)
         },
         // 初始化第一次报警并判断是否播放声音
         initAlarm() {
@@ -279,26 +526,34 @@ export default {
 
         opened() {
         this.initAlarm();
+        this.getAllStationtab()
         this.timmer = setInterval(() => {
             this.renderAlarm();
         }, 3000);
         },
 
         closed() {
-        this.$refs.svgRef[0].closed()
-        this.$refs.svgRef[1].closed()
-        this.$refs.svgRef[2].closed()
-        this.$refs.svgRef[3].closed()
-        this.$refs.svgRef[4].closed()
-        clearInterval(this.timmer);
-        this.timmer = null;
-        this.$store.commit("activeTab", "");
-        this.$store.commit("syzDialogShow", false);
+            // this.$refs.svgRef[0].closed()
+            // this.$refs.svgRef[1].closed()
+            // this.$refs.svgRef[2].closed()
+            // this.$refs.svgRef[3].closed()
+            // this.$refs.svgRef[4].closed()
+            clearInterval(this.starTimer);
+            clearInterval(this.timmer);
+            this.starTimer = null
+            this.timmer = null;
+            this.$store.commit("activeTab", "");
+            this.$store.commit("syzDialogShow", false);
         },
 
         tabClick(res) {
-        this.$store.commit("activeTab", res.props.name);
-        this.renderAlarm(res.props.name, false);
+            clearInterval(this.starTimer);
+            this.starTimer = null;
+            this.$store.commit("activeTab", res.props.name);
+            this.renderAlarm(res.props.name, false);
+            if (res.props.name !== 'all') {
+                this.getSvgDataFn(res.props.name)
+            }
         },
     },
     watch: {
@@ -323,6 +578,50 @@ export default {
 
   .syzDetailsPaneItem {
     position: relative;
+    .buttonGroup{
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: end;
+        .el-button-group{
+            .el-button{
+                min-height: 30px !important;
+            }
+            .showSty{
+                color: #409eff;
+                border-color: #c6e2ff;
+                background-color: #ecf5ff;
+                outline: 0;
+            }
+        }
+    }
+    .showAllSvgMsg{
+        width: calc(100% - 15px);
+        height: calc(100% - 15px);
+        // padding: 20px;
+        // margin-bottom: 20px;
+        // background: #3a3a3a;
+        // border: 3px solid #3a3a3a;
+        border: 3px solid #646464;
+        border-radius: 10px;
+        .showAllSvgMsg_top{
+            border-radius: 10px 10px 0 0;
+            height: calc(100% - 40px);
+            width: 100%;
+            // background: #fff;
+        }
+        .showAllSvgMsg_bot{
+            background: #3a3a3a;
+            border-radius: 0 0 8px 8px;
+            height: 40px;
+            text-align: center;
+            span{
+                position: relative;
+                top: 10px;
+                font-weight: bold;
+                color: #fff;
+            }
+        }
+    }
 
     .alarmIconBox {
       position: absolute;
@@ -347,12 +646,12 @@ export default {
     position: relative;
   }
   .movableItem {
-    width: 100% !important;
-    height: 100% !important;
+    // width: 1920PX !important;
+    // height: 800PX !important;
 
     .svg {
-      width: 100%;
-      height: 92%;
+    //   width: 100%;
+    //   height: 92%;
       margin-left: 0;
       margin-top: 8%;
     }