|
|
@@ -0,0 +1,887 @@
|
|
|
+<template>
|
|
|
+<!-- <el-dialog-->
|
|
|
+<!-- width="90%"-->
|
|
|
+<!-- @open="opened"-->
|
|
|
+<!-- @closed="closed"-->
|
|
|
+<!-- :fullscreen="true"-->
|
|
|
+<!-- :show-close="true"-->
|
|
|
+<!-- class="dialogs"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #title>-->
|
|
|
+<!-- <div class="showTitles currentShowTitles">-->
|
|
|
+<!-- <div class="titles">升压站</div>-->
|
|
|
+<!-- </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"
|
|
|
+ >
|
|
|
+ <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" v-if="item.id === 'all'">
|
|
|
+ <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 v-if="item.id === 'all'" :style="allpageHeight"
|
|
|
+ style="width: 100%;display: inline-block;overflow-y:auto">
|
|
|
+ <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
|
|
|
+ <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)" :class="getWarnstyle(item)">
|
|
|
+ <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>
|
|
|
+ <BHB ref="svgRef" v-if="item.id === 'SXJ_KGDL_BHBF01_SBS'"/>
|
|
|
+ <BHBSQ ref="svgRef" v-if="item.id === 'SXJ_KGDL_BHB3F01_SBS'"/>
|
|
|
+ <DJY ref="svgRef" v-if="item.id === 'SXJ_KGDL_DJYF01_SBS'"/>
|
|
|
+ <GJY ref="svgRef" v-if="item.id === 'SXJ_KGDL_GJYF01_SBS'"/>
|
|
|
+ <HSM ref="svgRef" v-if="item.id === 'SXJ_KGDL_HSMF01_SBS'"/>
|
|
|
+ <MLJ ref="svgRef" v-if="item.id === 'NMM_KGDL_MLJF01_SBS'"/>
|
|
|
+ <NJL ref="svgRef" v-if="item.id === 'SXJ_KGDL_NJLF01_SBS'"/>
|
|
|
+ <PDL ref="svgRef" v-if="item.id === 'SXJ_KGDL_PDLF01_SBS'"/>
|
|
|
+ <PTZ ref="svgRef" v-if="item.id === 'SXJ_KGDL_PTZF01_SBS'"/>
|
|
|
+ <XWT ref="svgRef" v-if="item.id === 'SXJ_KGDL_XWTF01_SBS'"/>
|
|
|
+ <YF ref="svgRef" v-if="item.id === 'SXJ_KGDL_YFF01_SBS'"/>
|
|
|
+ <YLZ ref="svgRef" v-if="item.id === 'SXJ_KGDL_YLZF01_SBS'"/>
|
|
|
+ <YTY ref="svgRef" v-if="item.id === 'SXJ_KGDL_YTYF01_SBS'"/>
|
|
|
+ <ZK ref="svgRef" v-if="item.id === 'SXJ_KGDL_ZKF01_SBS'"/>
|
|
|
+ <FSSJS ref="svgRef" v-if="item.id === 'SXJ_KGDL_FSG01_SBS'"/>
|
|
|
+ <FSJR ref="svgRef" v-if="item.id === 'SXJ_KGDL_JRG01_SBS'"/>
|
|
|
+ <HRCC ref="svgRef" v-if="item.id === 'SXJ_KGDL_HRG01_SBS'"/>
|
|
|
+ <PLZH ref="svgRef" v-if="item.id === 'SXJ_KGDL_PLG01_SBS'"/>
|
|
|
+ <SYRX ref="svgRef" v-if="item.id === 'SXJ_KGDL_SYG01_SBS'"/>
|
|
|
+ <TZXS ref="svgRef" v-if="item.id === 'SXJ_KGDL_TZG01_SBS'"/>
|
|
|
+ <TLYY ref="svgRef" v-if="item.id === 'SXJ_KGDL_TLG01_SBS'"/>
|
|
|
+ <YGWJB ref="svgRef" v-if="item.id === 'SXJ_KGDL_YGG01_SBS'"/>
|
|
|
+ <YXJH ref="svgRef" v-if="item.id === 'SXJ_KGDL_YXG01_SBS'"/>
|
|
|
+ <YYYW ref="svgRef" v-if="item.id === 'SXJ_KGDL_YYG01_SBS'"/>
|
|
|
+ <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>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BHB from "../factoryMonitor/windPowerPlant/boosterStation/components/BHB.vue";
|
|
|
+import BHBSQ from "../factoryMonitor/windPowerPlant/boosterStation/components/BHBSQ.vue";
|
|
|
+import DJY from "../factoryMonitor/windPowerPlant/boosterStation/components/DJY.vue";
|
|
|
+import GJY from "../factoryMonitor/windPowerPlant/boosterStation/components/GJY.vue";
|
|
|
+import HSM from "../factoryMonitor/windPowerPlant/boosterStation/components/HSM.vue";
|
|
|
+import MLJ from "../factoryMonitor/windPowerPlant/boosterStation/components/MLJ.vue";
|
|
|
+import NJL from "../factoryMonitor/windPowerPlant/boosterStation/components/NJL.vue";
|
|
|
+import PDL from "../factoryMonitor/windPowerPlant/boosterStation/components/PDL.vue";
|
|
|
+import PTZ from "../factoryMonitor/windPowerPlant/boosterStation/components/PTZ.vue";
|
|
|
+import XWT from "../factoryMonitor/windPowerPlant/boosterStation/components/XWT.vue";
|
|
|
+import YF from "../factoryMonitor/windPowerPlant/boosterStation/components/YF.vue";
|
|
|
+import YLZ from "../factoryMonitor/windPowerPlant/boosterStation/components/YLZ.vue";
|
|
|
+import YTY from "../factoryMonitor/windPowerPlant/boosterStation/components/YTY.vue";
|
|
|
+import ZK from "../factoryMonitor/windPowerPlant/boosterStation/components/ZK.vue";
|
|
|
+import FSSJS from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fangshansunjiashan.vue";
|
|
|
+import FSJR from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fanshijunran.vue";
|
|
|
+import HRCC from "../factoryMonitor/photovoltaic/lightBoosterStation/components/huairenchuchen.vue";
|
|
|
+import PLZH from "../factoryMonitor/photovoltaic/lightBoosterStation/components/pingluzuhu.vue";
|
|
|
+import SYRX from "../factoryMonitor/photovoltaic/lightBoosterStation/components/shanyinrongxin.vue";
|
|
|
+import TZXS from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tianzhenxusheng.vue";
|
|
|
+import TLYY from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tunliuwuyuan.vue";
|
|
|
+import YGWJB from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yanggaoweijiabao.vue";
|
|
|
+import YXJH from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yingxianjinghui.vue";
|
|
|
+import YYYW from "../factoryMonitor/photovoltaic/lightBoosterStation/components/youyuyouwei.vue";
|
|
|
+
|
|
|
+import api from "@api/stateMonitor/index.js";
|
|
|
+import CurrentWarningCard from "./currentWarningCard.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ activeTabStation: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ BHB,
|
|
|
+ BHBSQ,
|
|
|
+ DJY,
|
|
|
+ GJY,
|
|
|
+ HSM,
|
|
|
+ MLJ,
|
|
|
+ NJL,
|
|
|
+ PDL,
|
|
|
+ PTZ,
|
|
|
+ XWT,
|
|
|
+ YF,
|
|
|
+ YLZ,
|
|
|
+ YTY,
|
|
|
+ ZK,
|
|
|
+ FSSJS,
|
|
|
+ FSJR,
|
|
|
+ HRCC,
|
|
|
+ PLZH,
|
|
|
+ SYRX,
|
|
|
+ TZXS,
|
|
|
+ TLYY,
|
|
|
+ YGWJB,
|
|
|
+ YXJH,
|
|
|
+ YYYW,
|
|
|
+ // CurrentWarningCard
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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',
|
|
|
+ allWarnData: [],
|
|
|
+ starTimerWarn: null,
|
|
|
+ numm: 0,
|
|
|
+ stationSort: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ pageHeight() {
|
|
|
+ return {
|
|
|
+ 'height': document.documentElement.clientHeight - 60 + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ allpageHeight() {
|
|
|
+ return {
|
|
|
+ 'height': document.documentElement.clientHeight - 200 + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.opened()
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取升压站报警数据
|
|
|
+ getSyzWarnData() {
|
|
|
+ api.alarmFault().then((res) => {
|
|
|
+ if (res && res.data) {
|
|
|
+ let datas = res.data
|
|
|
+ let arr = []
|
|
|
+ datas.forEach(it => {
|
|
|
+ if (it.rank === '5' && it.category1 === 'SYZ') {
|
|
|
+ // if (it.stationName.indexOf('风电场') !== -1 ) {
|
|
|
+ // str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
|
|
|
+ // } else if (it.stationName.indexOf('光伏电站') !== -1) {
|
|
|
+ // str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
|
|
|
+ // }
|
|
|
+ arr.push(it.category2)
|
|
|
+ }
|
|
|
+ // let str = ''
|
|
|
+ })
|
|
|
+ this.allWarnData = this.unique(arr)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ unique(arr) {
|
|
|
+ let newArr = []
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (newArr.indexOf(arr[i]) === -1) {
|
|
|
+ newArr.push(arr[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return newArr
|
|
|
+ },
|
|
|
+ getWarnstyle(item) {
|
|
|
+ let showWarn = ''
|
|
|
+ this.allWarnData.forEach(it => {
|
|
|
+ if (it === item.id) {
|
|
|
+ showWarn = 'warningMaskNew'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return showWarn
|
|
|
+ },
|
|
|
+ getStyle(type) {
|
|
|
+ let num = null
|
|
|
+ let num1 = null
|
|
|
+ let num2 = null
|
|
|
+ if (type === 'D') {
|
|
|
+ return {
|
|
|
+ 'width': '33.3%',
|
|
|
+ 'float': 'left',
|
|
|
+ 'height': '400px'
|
|
|
+ }
|
|
|
+ } 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 = []
|
|
|
+ this.stationSort = []
|
|
|
+ allMsg.forEach(it => {
|
|
|
+ if (it.id !== 'all') {
|
|
|
+ this.stationSort.push(it.name)
|
|
|
+ this.getallSvgDataFn(it.id, it.name)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // window.sessionStorage.setItem('allSvgData', [])
|
|
|
+ console.log('allSvgMsgData', this.allSvgMsgData)
|
|
|
+ console.log('stationSort', this.stationSort)
|
|
|
+ console.log('allMsg', allMsg)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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 = res
|
|
|
+ str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
|
|
|
+ let obj = {
|
|
|
+ id: id,
|
|
|
+ name: name,
|
|
|
+ msg: str
|
|
|
+ }
|
|
|
+ this.allSvgMsgData.push(obj)
|
|
|
+ if (this.allSvgMsgData.length === this.stationSort.length) {
|
|
|
+ let sortArr = []
|
|
|
+ this.stationSort.forEach(itc => {
|
|
|
+ this.allSvgMsgData.forEach(itb => {
|
|
|
+ if (itc === itb.name) {
|
|
|
+ sortArr.push(itb)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.allSvgMsgData = sortArr
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取升压站数据
|
|
|
+ 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', 'polyline', 'circle', 'ellipse', 'polygon']
|
|
|
+ status.forEach(it => {
|
|
|
+ let allgs = []
|
|
|
+ allgs = document.querySelectorAll(it);
|
|
|
+ allTags.push(allgs)
|
|
|
+ })
|
|
|
+ allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
|
|
|
+ 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.getrefreshData(str)
|
|
|
+ this.starTimer = setInterval(() => {
|
|
|
+ this.getrefreshData(str)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ console.log('SvgInfo333=>', res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取根盾数据
|
|
|
+ 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 (it.nodeName === 'polyline') {
|
|
|
+ console.log('onlyTag666', this.onlytag)
|
|
|
+ }
|
|
|
+ if (it.nodeName !== 'text') {
|
|
|
+ if (this.onlytag.attributes.csid) {
|
|
|
+ let csid = this.onlytag.attributes.csid.value.split(';')
|
|
|
+ csid.forEach(ic => {
|
|
|
+ if (ic) {
|
|
|
+ if (!this.allConditions[ic].isBinding) {
|
|
|
+ let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.onlytag.textContent = tag.value.toFixed(2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log('onlyTag555', this.onlytag)
|
|
|
+ },
|
|
|
+ // '全部'界面双击事件
|
|
|
+ dblgetSvgDataFn(name) {
|
|
|
+ this.activeTab = name
|
|
|
+ // this.getSvgDataFn(name)
|
|
|
+ },
|
|
|
+ // 初始化第一次报警并判断是否播放声音
|
|
|
+ initAlarm() {
|
|
|
+ let syzAlarmArray = this.$store.getters.syzAlarmArray;
|
|
|
+
|
|
|
+ const firstAlarmItem = syzAlarmArray.find((ele) => {
|
|
|
+ return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
|
|
|
+ });
|
|
|
+
|
|
|
+ firstAlarmItem &&
|
|
|
+ this.audioPlay(this.getSound(firstAlarmItem.soundSource));
|
|
|
+
|
|
|
+ firstAlarmItem &&
|
|
|
+ this.$store.getters.syzAlarmArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === firstAlarmItem.stationId) {
|
|
|
+ ele.isConfirm = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.activeTab =
|
|
|
+ this.activeTabStation ||
|
|
|
+ firstAlarmItem?.stationId ||
|
|
|
+ syzAlarmArray.find((ele) => {
|
|
|
+ return ele.rank === this.$store.state.syzAlarmRank;
|
|
|
+ })?.stationId ||
|
|
|
+ this.$store.getters.syzArray[0].id;
|
|
|
+
|
|
|
+ syzAlarmArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === firstAlarmItem?.stationId) {
|
|
|
+ ele.isConfirm = true;
|
|
|
+ this.clearWarningTag(ele.stationId);
|
|
|
+ } else if (
|
|
|
+ !ele.isConfirm &&
|
|
|
+ ele.stationId !== firstAlarmItem?.stationId
|
|
|
+ ) {
|
|
|
+ this.renderWarningTag(ele.stationId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$store.commit("syzAlarmArray", syzAlarmArray);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 定时器循环数据判断小红点渲染及是否播放声音
|
|
|
+ renderAlarm(stationId = "", playSound = true) {
|
|
|
+ let syzAlarmArray = this.$store.getters.syzAlarmArray;
|
|
|
+
|
|
|
+ syzAlarmArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === stationId) {
|
|
|
+ ele.isConfirm = true;
|
|
|
+ this.clearWarningTag(ele.stationId);
|
|
|
+ } else if (!ele.isConfirm && ele.stationId !== stationId) {
|
|
|
+ this.renderWarningTag(ele.stationId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const res = syzAlarmArray.find((ele) => {
|
|
|
+ return !ele.isConfirm;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (playSound) {
|
|
|
+ // this.audioPlay("./static/sound/syz.mp3");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$store.commit("syzAlarmArray", syzAlarmArray);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 返回音频文件路径
|
|
|
+ getSound(fileName) {
|
|
|
+ return `./static/sound/${fileName}.mp3`;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 播放音频
|
|
|
+ audioPlay(audioPath) {
|
|
|
+ let soundMuteSelf = [];
|
|
|
+ let soundMuteOther = [];
|
|
|
+
|
|
|
+ this.$store.getters.syzAlarmArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === this.activeTab) {
|
|
|
+ soundMuteSelf.push(ele);
|
|
|
+ } else {
|
|
|
+ soundMuteOther.push(ele);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let alarmSelfLock = soundMuteSelf.some((ele) => {
|
|
|
+ return !ele.isConfirm;
|
|
|
+ });
|
|
|
+
|
|
|
+ let alarmOtherLock = soundMuteOther.some((ele) => {
|
|
|
+ return !ele.isConfirm;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (alarmOtherLock) {
|
|
|
+ this.audio = new Audio(audioPath);
|
|
|
+ this.audio.play();
|
|
|
+ } else if (alarmSelfLock) {
|
|
|
+ this.$store.getters.syzArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === this.activeTab) {
|
|
|
+ ele.isMute = false;
|
|
|
+ this.audio = new Audio(audioPath);
|
|
|
+ this.audio.play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (!alarmSelfLock) {
|
|
|
+ this.$store.getters.syzArray.forEach((ele) => {
|
|
|
+ if (ele.stationId === this.activeTab) {
|
|
|
+ if (!ele.isMute) {
|
|
|
+ this.audio = new Audio(audioPath);
|
|
|
+ this.audio.play();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示某个小红点
|
|
|
+ renderWarningTag(stationId = "") {
|
|
|
+ this.$store.getters.syzArray.forEach((ele) => {
|
|
|
+ if (ele.id === stationId) {
|
|
|
+ ele.isWarning = "1";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.pageshowMode++;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清除某个小红点
|
|
|
+ clearWarningTag(stationId = "") {
|
|
|
+ this.$store.getters.syzArray.forEach((ele) => {
|
|
|
+ if (ele.id === stationId) {
|
|
|
+ ele.isWarning = "0";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.pageshowMode++;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换报警声音开关
|
|
|
+ switchAlarmSound(index) {
|
|
|
+ this.$store.getters.syzArray[index].isMute =
|
|
|
+ !this.$store.getters.syzArray[index].isMute;
|
|
|
+ },
|
|
|
+
|
|
|
+ opened() {
|
|
|
+ // this.initAlarm();
|
|
|
+ this.getAllStationtab()
|
|
|
+ /*this.timmer = setInterval(() => {
|
|
|
+ this.renderAlarm();
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ let starTimerWarn = setInterval(() => {
|
|
|
+ this.getSyzWarnData()
|
|
|
+ }, 2000)
|
|
|
+ if (this.activeTabStation) {
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(this.starTimer);
|
|
|
+ this.starTimer = null;
|
|
|
+ this.$store.commit("activeTab", this.activeTabStation);
|
|
|
+ this.renderAlarm(this.activeTabStation, false);
|
|
|
+ if (this.activeTabStation !== 'all') {
|
|
|
+ this.activeTab = this.activeTabStation
|
|
|
+ this.debounce(this.getSvgDataFn(this.activeTabStation), 200)
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ }*/
|
|
|
+ },
|
|
|
+
|
|
|
+ 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.starTimer);
|
|
|
+ clearInterval(this.starTimerWarn);
|
|
|
+ clearInterval(this.timmer);
|
|
|
+ this.starTimer = null
|
|
|
+ this.starTimerWarn = null
|
|
|
+ this.timmer = null;
|
|
|
+ this.$store.commit("activeTab", "");
|
|
|
+ this.$store.commit("syzDialogShow", false);
|
|
|
+ },
|
|
|
+
|
|
|
+ tabClick(res) {
|
|
|
+ // 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.debounce(this.getSvgDataFn(res.props.name), 200)
|
|
|
+ // this.getSvgDataFn(res.props.name)
|
|
|
+ }*/
|
|
|
+ },
|
|
|
+ debounce(fn, delay) {
|
|
|
+ var delay = delay || 200;
|
|
|
+ var timer;
|
|
|
+ return function () {
|
|
|
+ var th = this;
|
|
|
+ var args = arguments;
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ timer = setTimeout(function () {
|
|
|
+ timer = null;
|
|
|
+ fn.apply(th, args);
|
|
|
+ }, delay);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ throttle(fn, interval) {
|
|
|
+ var last;
|
|
|
+ var timer;
|
|
|
+ var interval = interval || 200;
|
|
|
+ return function () {
|
|
|
+ var th = this;
|
|
|
+ var args = arguments;
|
|
|
+ var now = +new Date();
|
|
|
+ if (last && now - last < interval) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = setTimeout(function () {
|
|
|
+ last = now;
|
|
|
+ fn.apply(th, args);
|
|
|
+ }, interval);
|
|
|
+ } else {
|
|
|
+ last = now;
|
|
|
+ fn.apply(th, args);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "$store.state.syzArray"(res) {
|
|
|
+ this.syzArray = res;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.bodyy {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: black;
|
|
|
+ width: 98%;
|
|
|
+ margin-top: -30px;
|
|
|
+ height: 90vh;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 44px;
|
|
|
+
|
|
|
+ .syzDetailsPaneItem {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .buttonGroup {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: end;
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ .el-button-group {
|
|
|
+ .el-button {
|
|
|
+ min-height: 30px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .showSty {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #c6e2ff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warningMaskNew {
|
|
|
+ background-color: rgba(186, 50, 55, 0.5);
|
|
|
+ animation: fade 2000ms infinite;
|
|
|
+ -webkit-animation: fade 2000ms infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fade {
|
|
|
+ from {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes fade {
|
|
|
+ from {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.bodyy {
|
|
|
+ .pop-up-main,
|
|
|
+ .paln-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 90vh;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .movableItem {
|
|
|
+ // width: 1920PX !important;
|
|
|
+ // height: 800PX !important;
|
|
|
+
|
|
|
+ .svg {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 92%;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 8%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-badge__content.is-fixed.is-dot {
|
|
|
+ right: 0;
|
|
|
+ top: 10px;
|
|
|
+ background: #f25656;
|
|
|
+ animation: twinkle 0.75s infinite;
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes twinkle {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.currentShowTitles {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .alarIcon {
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: 5;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
baiyanting
