| | |
| | | import TextBox from "./components/textBox"; |
| | | import SvgLine from "./components/svgLine"; |
| | | |
| | | import getBinaryDigits from "@/assets/js/getBinaryDigits"; |
| | | import FileProcess from "./fileProcess"; |
| | | import getWebUrl from "@/assets/js/getWebUrl"; |
| | | import Panel from "@/components/panel.vue"; |
| | |
| | | import hrImg from "./images/hr.png"; |
| | | import ListCard from "@/components/listCard.vue"; |
| | | // import { mixin as clickaway } from "vue-clickaway"; |
| | | |
| | | import { getBreakerNamesInGroup } from "@/views/devManager/js/apis"; |
| | | |
| | | import createWs from "@/assets/js/websocket/plus"; |
| | | const WSMixin = createWs("ckRtAndSignalAndHr"); |
| | |
| | | data() { |
| | | const baseURL = getWebUrl(); |
| | | return { |
| | | breakerList: [], |
| | | curSwitch: {}, |
| | | PDG, |
| | | KGG, |
| | | HR, |
| | |
| | | top: 0, |
| | | left: 0, |
| | | }, |
| | | switchStates: { |
| | | acin1_switch_trip: [], |
| | | acin2_switch_trip: [], |
| | | ac1_outswitch1_trip: [], |
| | | ac2_outswitch1_trip: [], |
| | | dcin1_switch_trip: [], |
| | | dcin2_switch_trip: [], |
| | | dc1_switch1_trip: [], |
| | | dc2_switch1_trip: [], |
| | | }, |
| | | }; |
| | | }, |
| | | methods: { |
| | | ...mapMutations('globalData', ['UPDATE_HOMEDATA']), |
| | | showState(el) { |
| | | console.log("hhhh", el); |
| | | ...mapMutations("globalData", ["UPDATE_HOMEDATA"]), |
| | | showState(el, name) { |
| | | // console.log("hhhh", el); |
| | | let { x, y, width, height, left, right, top, bottom } = |
| | | el.getBoundingClientRect(); |
| | | console.log(x, "pos"); |
| | | this.popPosition.left = right + "px"; |
| | | this.popPosition.top = bottom + "px"; |
| | | this.getSwitchInfo(name); |
| | | this.popVisible = true; |
| | | }, |
| | | getSwitchInfo(name) { |
| | | this.curSwitch = |
| | | this.breakerList.filter((v) => v.breakerName == name)[0] || {}; |
| | | }, |
| | | onWSMessage1(res) { |
| | | let { data, data2, data3 } = JSON.parse(res.data); |
| | |
| | | ...data2, |
| | | ...data3, |
| | | }; |
| | | let { |
| | | acIn1SwitchTripReal, |
| | | acIn2SwitchTripReal, |
| | | ac1OutSwitch1TripReal, |
| | | ac2OutSwitch1TripReal, |
| | | dcIn1SwitchTripReal, |
| | | dcIn2SwitchTripReal, |
| | | dc1Switch1TripReal, |
| | | dc2Switch1TripReal, |
| | | } = data2; |
| | | |
| | | let ac1_outswitch1_trip = getBinaryDigits(ac1OutSwitch1TripReal); |
| | | let ac2_outswitch1_trip = getBinaryDigits(ac2OutSwitch1TripReal); |
| | | let dc1_switch1_trip = getBinaryDigits(dc1Switch1TripReal); |
| | | let dc2_switch1_trip = getBinaryDigits(dc2Switch1TripReal); |
| | | let acin1_switch_trip = [acIn1SwitchTripReal]; |
| | | let acin2_switch_trip = [acIn2SwitchTripReal]; |
| | | let dcin1_switch_trip = [dcIn1SwitchTripReal]; |
| | | let dcin2_switch_trip = [dcIn2SwitchTripReal]; |
| | | |
| | | this.switchStates = { |
| | | acin1_switch_trip, |
| | | acin2_switch_trip, |
| | | ac1_outswitch1_trip, |
| | | ac2_outswitch1_trip, |
| | | dcin1_switch_trip, |
| | | dcin2_switch_trip, |
| | | dc1_switch1_trip, |
| | | dc2_switch1_trip, |
| | | }; |
| | | // this.UPDATE_HOMEDATA(this.rtData); |
| | | }, |
| | | redirect(tabIdx) { |
| | | this.$router.push({ name: "realtime", params: { tabIdx } }); |
| | | }, |
| | | getBreakerNamesInGroup() { |
| | | getBreakerNamesInGroup() |
| | | .then((res) => { |
| | | let list = []; |
| | | let { code, data, data2 } = res.data; |
| | | if (code && data) { |
| | | // console.log(data); |
| | | Object.keys(data2) |
| | | .sort() |
| | | .forEach((v) => { |
| | | list.push(...data2[v]); |
| | | }); |
| | | } |
| | | this.breakerList = list; |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | | cachedViews: (state) => state.tagsView.cachedViews, |
| | | }), |
| | | switchState() { |
| | | let v = this.curSwitch; |
| | | if (!v['nodeName']) { |
| | | return '未知'; |
| | | } |
| | | return this.switchStates[v.nodeName][v.nodeBit] ? "合闸" : "分闸"; |
| | | }, |
| | | mounted() {}, |
| | | }, |
| | | mounted() { |
| | | this.getBreakerNamesInGroup(); |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | <svg width="100%" height="100%" viewBox="0 0 500 340"> |
| | | <text-box :offset="[220, 10]"></text-box> |
| | | <protector-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK12')" |
| | | :offset="[36, 10]" |
| | | sw-name="JK-12" |
| | | ></protector-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK13')" |
| | | :type="3" |
| | | :offset="[36, 134]" |
| | | sw-name="JK-13" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK14')" |
| | | :type="3" |
| | | :offset="[220, 134]" |
| | | sw-name="JK-14" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK15')" |
| | | :type="3" |
| | | :offset="[390, 134]" |
| | | sw-name="JK-15" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK16')" |
| | | :type="1" |
| | | :offset="[36, 252]" |
| | | sw-name="JK-16" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK17')" |
| | | :type="1" |
| | | :offset="[150, 252]" |
| | | sw-name="JK-17" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK18')" |
| | | :type="1" |
| | | :offset="[274, 252]" |
| | | sw-name="JK-18" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK19')" |
| | | :type="1" |
| | | :offset="[390, 252]" |
| | | sw-name="JK-19" |
| | | ></switch-box> |
| | | <svg-line |
| | | :points="[ |
| | |
| | | </div> |
| | | |
| | | <div class="yc-panel-footer"> |
| | | <div class="state">防雷保护器空开跳闸</div> |
| | | <!-- TODO 告警 滚动 --> |
| | | <div class="state"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <svg width="100%" height="100%" viewBox="0 0 500 340"> |
| | | <text-box :offset="[220, 10]"></text-box> |
| | | <protector-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK22')" |
| | | :offset="[390, 10]" |
| | | sw-name="JK-22" |
| | | ></protector-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK23')" |
| | | :type="3" |
| | | :offset="[36, 134]" |
| | | sw-name="JK-23" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK24')" |
| | | :type="3" |
| | | :offset="[220, 134]" |
| | | sw-name="JK-24" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK25')" |
| | | :type="3" |
| | | :offset="[390, 134]" |
| | | sw-name="JK-25" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK26')" |
| | | :type="1" |
| | | :offset="[36, 252]" |
| | | sw-name="JK-26" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK27')" |
| | | :type="1" |
| | | :offset="[150, 252]" |
| | | sw-name="JK-27" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK28')" |
| | | :type="1" |
| | | :offset="[274, 252]" |
| | | sw-name="JK-28" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'JK29')" |
| | | :type="1" |
| | | :offset="[390, 252]" |
| | | sw-name="JK-29" |
| | | ></switch-box> |
| | | <svg-line |
| | | :points="[ |
| | |
| | | <div class="pos-full"> |
| | | <svg width="100%" height="100%" viewBox="0 0 622 240"> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK11')" |
| | | :type="2" |
| | | :offset="[269, 14]" |
| | | sw-name="DK-11" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK12')" |
| | | small |
| | | :offset="[20, 160]" |
| | | sw-name="DK-12" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK13')" |
| | | small |
| | | :offset="[94, 160]" |
| | | sw-name="DK-13" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK14')" |
| | | small |
| | | :offset="[168, 160]" |
| | | sw-name="DK-14" |
| | | ></switch-box> |
| | | <!-- alarm --> |
| | | <switch-box |
| | | @click="showState" |
| | | alarm |
| | | @click="(el) => showState(el, 'DK15')" |
| | | small |
| | | :offset="[242, 160]" |
| | | sw-name="DK-15" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK16')" |
| | | small |
| | | :offset="[316, 160]" |
| | | sw-name="DK-16" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK17')" |
| | | small |
| | | :offset="[390, 160]" |
| | | sw-name="DK-17" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK18')" |
| | | small |
| | | :offset="[464, 160]" |
| | | sw-name="DK-18" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK19')" |
| | | small |
| | | :offset="[538, 160]" |
| | | sw-name="DK-19" |
| | | ></switch-box> |
| | | <svg-line |
| | | :points="[ |
| | |
| | | <div class="pos-full"> |
| | | <svg width="100%" height="100%" viewBox="0 0 622 240"> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK21')" |
| | | :type="2" |
| | | :offset="[269, 14]" |
| | | sw-name="DK-21" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK22')" |
| | | small |
| | | :offset="[20, 160]" |
| | | sw-name="DK-22" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK23')" |
| | | small |
| | | :offset="[94, 160]" |
| | | sw-name="DK-23" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK24')" |
| | | small |
| | | :offset="[168, 160]" |
| | | sw-name="DK-24" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK25')" |
| | | small |
| | | :offset="[242, 160]" |
| | | sw-name="DK-25" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK26')" |
| | | small |
| | | :offset="[316, 160]" |
| | | sw-name="DK-26" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK27')" |
| | | small |
| | | :offset="[390, 160]" |
| | | sw-name="DK-27" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK28')" |
| | | small |
| | | :offset="[464, 160]" |
| | | sw-name="DK-28" |
| | | ></switch-box> |
| | | <switch-box |
| | | @click="showState" |
| | | @click="(el) => showState(el, 'DK29')" |
| | | small |
| | | :offset="[538, 160]" |
| | | sw-name="DK-29" |
| | | ></switch-box> |
| | | <svg-line |
| | | :points="[ |
| | |
| | | <div class="pop-info" v-show="popVisible" :style="popPosition"> |
| | | <div class="item"> |
| | | <div class="label">开关名称</div> |
| | | <div class="value">直流微断开关DK16</div> |
| | | <div class="value">{{ curSwitch['breakerType'] + curSwitch['breakerName'] }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">开关规格</div> |
| | | <div class="value">1P/16A</div> |
| | | <div class="value">{{ curSwitch['breakerLevel'] + 'P' }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label">开关状态</div> |
| | | <div class="value">分闸</div> |
| | | <div class="value">{{ switchState }}</div> |
| | | </div> |
| | | </div> |
| | | <div |