|
|
@@ -0,0 +1,1168 @@
|
|
|
+<template>
|
|
|
+ <div class="bodys">
|
|
|
+ <div class="edge" v-if="Object.keys(monitorInfo).length">
|
|
|
+ <div class="info" style="position: relative">
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <!-- <div class="ps-info">
|
|
|
+ <div class="ps-title">厂商名称:</div>
|
|
|
+ <div class="ps-name">{{ otherInfo?.manufacturer }}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="ps-info" @click="handleXhClick(windInfo)">
|
|
|
+ <div class="ps-title">设备型号:</div>
|
|
|
+ <div class="ps-name">{{otherInfo?.manufacturer}} ( {{ otherInfo?.model }} )</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <div class="info-title" :class="colorList[monitorInfo.status]">
|
|
|
+ <span class="text">设备名称： {{ windname }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="wt-alarm" @click="handleAlarm(wtid)">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="'svg-icon-' + colorList[monitorInfo.status]"
|
|
|
+ >
|
|
|
+ <svgIcon svgid="svg-station-surveillance"></svgIcon>
|
|
|
+ </i>
|
|
|
+ <span :class="colorList[monitorInfo.status]">设备报警</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ 日发电量
|
|
|
+ <div class="info-value">
|
|
|
+ {{ Number(monitorInfo?.rfdl).toFixed(2) || "0" }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitoring">
|
|
|
+ <div class="monitoring-item">
|
|
|
+ <div class="point point-left bottom"></div>
|
|
|
+ <div class="point point-right bottom"></div>
|
|
|
+ 监测信息
|
|
|
+ </div>
|
|
|
+ <div class="wind-info-list">
|
|
|
+ <div class="wind-info">
|
|
|
+ 风速
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.fs).toFixed(2) }}
|
|
|
+ <div class="unit">m/s</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 风向
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.fx).toFixed(2) }}
|
|
|
+ <div class="unit">°</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 实时功率
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.ssgl).toFixed(2) }}
|
|
|
+ <div class="unit">kW</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 无功功率
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.wggl).toFixed(2) }}
|
|
|
+ <div class="unit">kW</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 理论功率
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.llgl).toFixed(2) }}
|
|
|
+ <div class="unit">kW</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 保证功率
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.bzgl).toFixed(2) }}
|
|
|
+ <div class="unit">kW</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 叶轮转速
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.ylzs).toFixed(2) }}
|
|
|
+ <div class="unit">rpm</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 故障损失
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.gzss).toFixed(2) }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 检修损失
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.jxss).toFixed(2) }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 限电损失
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.xdss).toFixed(2) }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 性能损失
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.xnss).toFixed(2) }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wind-info">
|
|
|
+ 受累损失
|
|
|
+ <div class="wind-value">
|
|
|
+ {{ Number(monitorInfo?.slss).toFixed(2) }}
|
|
|
+ <div class="unit">kWh</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="parts">
|
|
|
+ <div class="part-top">
|
|
|
+ <div class="part-title" :data-type="$store.state.moreSty">
|
|
|
+ <div
|
|
|
+ class="title-item part-left"
|
|
|
+ :class="{ active: current === 'fdj' }"
|
|
|
+ @click="handleClick('fdj')"
|
|
|
+ >
|
|
|
+ 发电机
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="otherInfo?.model != 'XE100-2000'"
|
|
|
+ class="title-item"
|
|
|
+ :class="{ active: current === 'clx' }"
|
|
|
+ @click="handleClick('clx')"
|
|
|
+ >
|
|
|
+ 齿轮箱
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="{ active: current === 'bj' }"
|
|
|
+ @click="handleClick('bj')"
|
|
|
+ >
|
|
|
+ 变桨
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="{ active: current === 'ph' }"
|
|
|
+ @click="handleClick('ph')"
|
|
|
+ >
|
|
|
+ 偏航
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="{ active: current === 'yy' }"
|
|
|
+ @click="handleClick('yy')"
|
|
|
+ >
|
|
|
+ 液压
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="{ active: current === 'jc' }"
|
|
|
+ @click="handleClick('jc')"
|
|
|
+ >
|
|
|
+ 机舱信息
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item part-right"
|
|
|
+ :class="{ active: current === 'qt' }"
|
|
|
+ @click="handleClick('qt')"
|
|
|
+ >
|
|
|
+ 其他
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="part-imgs" v-if="otherInfo?.model == 'XE100-2000'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '450px' : '500px' }"
|
|
|
+ src="@assets/imgs/zqfj.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '450px' : '500px' }"
|
|
|
+ src="@assets/imgs/zqfj_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="part-imgs" v-else>
|
|
|
+ <div v-if="current === 'fdj'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/fdj.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/fdj_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'clx'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/clx.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/clx_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'bj'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/bj.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/bj_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'ph'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/ph.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/ph_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'yy'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/yy.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/yy_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'jc'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/jc.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/jc_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="current === 'qt'">
|
|
|
+ <img
|
|
|
+ v-if="$store.state.moreSty === 'greenSty'"
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/qt.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="wind-part"
|
|
|
+ :style="{ width: flag ? '650px' : '800px' }"
|
|
|
+ src="@assets/imgs/qt_b.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="part-info">
|
|
|
+ <div
|
|
|
+ class="part-body"
|
|
|
+ style="max-height: 220px"
|
|
|
+ v-if="partDInfos.length"
|
|
|
+ >
|
|
|
+ <div class="monitoring-item">
|
|
|
+ <div class="point point-left bottom"></div>
|
|
|
+ <div class="point point-right bottom"></div>
|
|
|
+ 遥信值
|
|
|
+ </div>
|
|
|
+ <div class="part-item">
|
|
|
+ <div
|
|
|
+ class="part"
|
|
|
+ :class="{ active: index % 2 === 1 }"
|
|
|
+ v-for="(val, index) in partDInfos"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="table-item" v-for="(item, ind) in val" :key="ind">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div
|
|
|
+ class="table-value"
|
|
|
+ :class="item.value == 1 ? 'round-red' : 'round'"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="part-body"
|
|
|
+ style="max-height: 220px"
|
|
|
+ v-if="partAInfos.length"
|
|
|
+ >
|
|
|
+ <div class="monitoring-item">
|
|
|
+ <div class="point point-left bottom"></div>
|
|
|
+ <div class="point point-right bottom"></div>
|
|
|
+ 遥测值
|
|
|
+ </div>
|
|
|
+ <div class="part-item">
|
|
|
+ <div
|
|
|
+ class="part"
|
|
|
+ :class="{ active: index % 2 === 1 }"
|
|
|
+ v-for="(val, index) in partAInfos"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="table-item" v-for="(item, ind) in val" :key="ind">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div class="table-value">
|
|
|
+ {{
|
|
|
+ item.name.includes("状态")
|
|
|
+ ? item.value
|
|
|
+ : item.name == "总发电量"
|
|
|
+ ? (item.value / 10000).toFixed(2)
|
|
|
+ : Number(item.value).toFixed(2)
|
|
|
+ }}
|
|
|
+ <div v-if="item.valueUnit != 'NULL'" class="unit">
|
|
|
+ {{ item.valueUnit }}
|
|
|
+ </div>
|
|
|
+ <div v-else class="unit"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <alarmDialog ref="alarmDialog" />
|
|
|
+ <powerAndSpeed ref="powerAndSpeed" :tabEvent="-1" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { GetWtPoints, GetPointsData } from "@/api/points/index.js";
|
|
|
+import powerAndSpeed from "@/components/powerAndSpeedSearch/index.vue";
|
|
|
+import {
|
|
|
+ GetWtMonitorInfo,
|
|
|
+ GetWtTelemeteryInfo,
|
|
|
+ GetWtOtherInfo,
|
|
|
+} from "@/api/factoryMonitor/index.js";
|
|
|
+import svgIcon from "@/components/coms/icon/svg-icon.vue";
|
|
|
+import alarmDialog from "@/components/alarm";
|
|
|
+export default {
|
|
|
+ name: "windDetail",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current: "fdj",
|
|
|
+ windname: "",
|
|
|
+ wtid: "",
|
|
|
+ wpid: "",
|
|
|
+ windInfo: {},
|
|
|
+ monitorInfo: {},
|
|
|
+ otherInfo: {},
|
|
|
+ partAInfo: [],
|
|
|
+ partDInfo: [],
|
|
|
+ partAInfos: [],
|
|
|
+ partDInfos: [],
|
|
|
+ uniformcodesA: [],
|
|
|
+ uniformcodesD: [],
|
|
|
+ resA: [],
|
|
|
+ resD: [],
|
|
|
+ indexe: 0,
|
|
|
+ videoTit: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ reliable: {},
|
|
|
+ colorList: ["blue", "green", "red", "orange", "pink", "write", "gray"],
|
|
|
+ path: ["camera.png", "camera2.png"],
|
|
|
+ count: 0,
|
|
|
+ colorFlag: false,
|
|
|
+ timer: "",
|
|
|
+ times: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: { svgIcon, alarmDialog, powerAndSpeed },
|
|
|
+ apiUrl: "",
|
|
|
+ props: {
|
|
|
+ wind: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ flag: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ windSpeedRota() {
|
|
|
+ let count = this.windStatus?.SSPJFS / 25;
|
|
|
+ let result = Number((310 * count + 50).toFixed(0));
|
|
|
+ if (result) {
|
|
|
+ if (result > 310) {
|
|
|
+ return "rotateZ(310deg)";
|
|
|
+ } else {
|
|
|
+ return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return "rotateZ(50deg)";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (Object.keys(this.windInfo).length) {
|
|
|
+ this.getWtMonitorInfo(this.windInfo);
|
|
|
+ this.getPointsData(this.resA, this.resD);
|
|
|
+ }
|
|
|
+ }, 5000);
|
|
|
+
|
|
|
+ this.times = setInterval(() => {
|
|
|
+ this.count++;
|
|
|
+ if (this.count > 1) {
|
|
|
+ this.count = 0;
|
|
|
+ }
|
|
|
+ }, 800);
|
|
|
+ if (document.getElementById("ifrId")) {
|
|
|
+ const oIframe = document.getElementById("ifrId");
|
|
|
+ const deviceWidth = document.getElementById("ifVideo").offsetWidth;
|
|
|
+ const deviceHeight = document.getElementById("ifVideo").offsetHeight;
|
|
|
+ oIframe.style.width = deviceWidth + "px";
|
|
|
+ oIframe.style.height = deviceHeight + "px";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ unmounted() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ clearInterval(this.times);
|
|
|
+ this.times = null;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ wind: {
|
|
|
+ handler() {
|
|
|
+ if (Object.keys(this.wind).length) {
|
|
|
+ this.start(this.wind);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ $route: {
|
|
|
+ handler(val) {
|
|
|
+ if (
|
|
|
+ val.path.includes("lightmatrix") ||
|
|
|
+ val.path.includes("detailmatrix") ||
|
|
|
+ val.path.includes("draughtFan")
|
|
|
+ ) {
|
|
|
+ this.colorFlag = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleXhClick(wind) {
|
|
|
+ // console.log(wind);
|
|
|
+ this.$refs.powerAndSpeed && this.$refs.powerAndSpeed.init(wind);
|
|
|
+ },
|
|
|
+ cancle() {
|
|
|
+ this.windInfo = {};
|
|
|
+ this.windname = "";
|
|
|
+ this.wtid = "";
|
|
|
+ this.current = "fdj";
|
|
|
+ this.monitorInfo = {};
|
|
|
+ this.partAInfo = [];
|
|
|
+ this.partDInfo = [];
|
|
|
+ this.partAInfos = [];
|
|
|
+ this.partDInfos = [];
|
|
|
+ this.uniformcodesA = [];
|
|
|
+ this.uniformcodesD = [];
|
|
|
+ this.resA = [];
|
|
|
+ this.resD = [];
|
|
|
+ },
|
|
|
+ // 页面初始信息
|
|
|
+ start(val) {
|
|
|
+ if (Object.keys(val).length) {
|
|
|
+ this.windInfo = val;
|
|
|
+ this.windname = val.wtname;
|
|
|
+ this.wtid = val.wtid;
|
|
|
+ this.wpid = val.wpid;
|
|
|
+ this.current = "fdj";
|
|
|
+ this.getWtMonitorInfo(val);
|
|
|
+ this.getWtOtherInfo(val);
|
|
|
+ this.handleClick("fdj");
|
|
|
+ } else {
|
|
|
+ this.cancle();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设备监测信息
|
|
|
+ getWtMonitorInfo(val) {
|
|
|
+ if (val.wtType == -1) {
|
|
|
+ GetWtMonitorInfo({ wtid: val.wtid }).then(({ data }) => {
|
|
|
+ this.monitorInfo = data.data;
|
|
|
+ this.monitorInfo.rfdl =
|
|
|
+ this.monitorInfo.rfdl < 0 ? 0 : this.monitorInfo.rfdl;
|
|
|
+ // for(var key in this.monitorInfo){
|
|
|
+ // this.monitorInfo[key]=this.monitorInfo[key] < 0 ? 0 : this.monitorInfo[key];
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.monitorInfo = {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设备其他信息
|
|
|
+ getWtOtherInfo(val) {
|
|
|
+ GetWtOtherInfo({ wtid: val.wtid }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.otherInfo = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查看各部位编码
|
|
|
+ handleClick(val) {
|
|
|
+ this.current = val;
|
|
|
+ if (this.wtid) {
|
|
|
+ this.getPartInfo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 统一编码
|
|
|
+ getPartInfo() {
|
|
|
+ if (this.windInfo.wtType == -1) {
|
|
|
+ if (this.wtid.length && this.current) {
|
|
|
+ GetWtTelemeteryInfo({
|
|
|
+ part: this.current,
|
|
|
+ wtid: this.wtid,
|
|
|
+ }).then(({ data }) => {
|
|
|
+ // 拿到初始获取数据
|
|
|
+ this.partAInfo = data.data.AI;
|
|
|
+ this.partDInfo = data.data.DI;
|
|
|
+ // 拿到数据的uniformcode集合
|
|
|
+ this.uniformcodesD = this.partDInfo.length
|
|
|
+ ? this.partDInfo.map((item) => item.uniformCode)
|
|
|
+ : [];
|
|
|
+ this.uniformcodesA = this.partAInfo.length
|
|
|
+ ? this.partAInfo.map((item) => item.uniformCode)
|
|
|
+ : [];
|
|
|
+ // 获取测点数据
|
|
|
+ this.getPointsIds();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPointsIds() {
|
|
|
+ let pointsIdsA = new Promise((resolve, reject) => {
|
|
|
+ GetWtPoints({
|
|
|
+ wtid: this.wtid,
|
|
|
+ uniformcodes: this.uniformcodesA,
|
|
|
+ })
|
|
|
+ .then(({ data }) => {
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ reject("发生错误");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ let pointsIdsD = new Promise((resolve, reject) => {
|
|
|
+ GetWtPoints({
|
|
|
+ wtid: this.wtid,
|
|
|
+ uniformcodes: this.uniformcodesD,
|
|
|
+ })
|
|
|
+ .then(({ data }) => {
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // 标记失败后给定某个数据
|
|
|
+ reject("发生错误");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ Promise.all([pointsIdsA, pointsIdsD])
|
|
|
+ .then((results) => {
|
|
|
+ this.resA = results[0].data.length
|
|
|
+ ? results[0].data.map((item) => (item != null ? item.nemCode : ""))
|
|
|
+ : [];
|
|
|
+ this.resD = results[1].data.length
|
|
|
+ ? results[1].data.map((item) => (item != null ? item.nemCode : ""))
|
|
|
+ : [];
|
|
|
+ this.getPointsData(this.resA, this.resD);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log("error", e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPointsData(pointsA, pointsD) {
|
|
|
+ let pointsDataA = new Promise((resolve, reject) => {
|
|
|
+ GetPointsData({
|
|
|
+ pointIds: pointsA,
|
|
|
+ })
|
|
|
+ .then(({ data }) => {
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // 标记失败后给定某个数据
|
|
|
+ reject("发生错误");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ let pointsDataD = new Promise((resolve, reject) => {
|
|
|
+ GetPointsData({
|
|
|
+ pointIds: pointsD,
|
|
|
+ })
|
|
|
+ .then(({ data }) => {
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // 标记失败后给定某个数据
|
|
|
+ reject("发生错误");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ Promise.all([pointsDataA, pointsDataD])
|
|
|
+ .then((results) => {
|
|
|
+ let pointsInfoA = results[0].data.length ? results[0].data : [];
|
|
|
+ let pointsInfoD = results[1].data.length ? results[1].data : [];
|
|
|
+ let partAInfo = [];
|
|
|
+ let partDInfo = [];
|
|
|
+ let chunk = 4;
|
|
|
+ this.partAInfo.forEach((item, index) => {
|
|
|
+ pointsInfoA.forEach((i, ind) => {
|
|
|
+ if (index == ind) {
|
|
|
+ item.value = i.pointValueInDouble;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ for (let i = 0, j = this.partAInfo.length; i < j; i += chunk) {
|
|
|
+ partAInfo.push(this.partAInfo.slice(i, i + chunk));
|
|
|
+ }
|
|
|
+ this.partDInfo.forEach((item, index) => {
|
|
|
+ pointsInfoD.forEach((i, ind) => {
|
|
|
+ if (index == ind) {
|
|
|
+ item.value = i.pointValueInDouble;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ for (let m = 0, n = this.partDInfo.length; m < n; m += chunk) {
|
|
|
+ partDInfo.push(this.partDInfo.slice(m, m + chunk));
|
|
|
+ }
|
|
|
+ this.partDInfos = partDInfo;
|
|
|
+ this.partAInfos = partAInfo;
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // 失败的时候则返回最先被reject失败状态的值
|
|
|
+ console.log("error", e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //打开报警页面
|
|
|
+ handleAlarm(id) {
|
|
|
+ this.$refs.alarmDialog &&
|
|
|
+ this.$refs.alarmDialog.openDialog(id, this.wpid, this.windInfo.wtType);
|
|
|
+ },
|
|
|
+ clickVideo(index) {
|
|
|
+ this.indexe = index;
|
|
|
+ },
|
|
|
+
|
|
|
+ clivkFun() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.icLi {
|
|
|
+ background: rgba(0, 70, 199, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #b3b3b3;
|
|
|
+}
|
|
|
+
|
|
|
+.actives {
|
|
|
+ background: rgba(0, 70, 199, 0.4);
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #f5f7fa;
|
|
|
+}
|
|
|
+
|
|
|
+.bodys {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .edge {
|
|
|
+ width: 400px;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ //
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ padding: 10px 15px;
|
|
|
+ // background-color: rgba(11, 12, 12, 0.45);
|
|
|
+ background-color: rgba(96, 103, 105, 0.2);
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .info-wrapper {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .ps-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: -5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #959595;
|
|
|
+ font-size: 15px;
|
|
|
+
|
|
|
+ div:nth-child(2) {
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-title {
|
|
|
+ width: 50%;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ &.green {
|
|
|
+ background-color: rgba(5, 187, 76, 0.2);
|
|
|
+ // border: 1px solid #05bb4c;
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background-color: rgba(0, 70, 199, 0.2);
|
|
|
+ // border: 1px solid #3c88f7;
|
|
|
+ color: #1c99ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pink {
|
|
|
+ background-color: rgba(197, 48, 200, 0.2);
|
|
|
+ // border: 1px solid #c530c8;
|
|
|
+ color: #c530c8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ background-color: rgba(186, 50, 55, 0.2);
|
|
|
+ // border: 1px solid #ba3237;
|
|
|
+ color: #ba3237;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ background-color: rgba(225, 125, 36, 0.2);
|
|
|
+ // border: 1px solid #e17d24;
|
|
|
+ color: #e17d24;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.write {
|
|
|
+ background-color: rgba(255, 255, 255, 0.2);
|
|
|
+ // border: 1px solid #ffffff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.gray {
|
|
|
+ background-color: rgba(96, 103, 105, 0.2);
|
|
|
+ // border: 1px solid #606769;
|
|
|
+ color: #606769;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wt-alarm {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ margin-left: 5px;
|
|
|
+ &.green {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ color: #1c99ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pink {
|
|
|
+ color: #c530c8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ color: #ba3237;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ color: #e17d24;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.write {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.gray {
|
|
|
+ color: #606769;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ span {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-item {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 40px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #05bb4c;
|
|
|
+ white-space: nowrap;
|
|
|
+ .unit {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ // margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitoring {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1 0 auto;
|
|
|
+ background-color: rgba(96, 103, 105, 0.2);
|
|
|
+ // background-color: rgba(11, 12, 12, 0.45);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .wind-info-list {
|
|
|
+ height: calc(100% - 42px);
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .wind-info {
|
|
|
+ flex: 1 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #959595;
|
|
|
+
|
|
|
+ .wind-value {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #05bb4c;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #959595;
|
|
|
+ width: 40px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .parts {
|
|
|
+ width: calc(100% - 400px - 20px);
|
|
|
+ margin-left: 20px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ // position: relative;
|
|
|
+ .part-top {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .part-title[data-type~="greenSty"] {
|
|
|
+ .title-item {
|
|
|
+ border-left: 1px solid #3b6c53;
|
|
|
+ border-top: 1px solid #3b6c53;
|
|
|
+ border-bottom: 1px solid #3b6c53;
|
|
|
+ &.part-right {
|
|
|
+ border-right: 1px solid #3b6c53;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(0, 199, 19, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .part-title[data-type~="blueSty"] {
|
|
|
+ .title-item {
|
|
|
+ border-left: 1px solid #3b586c;
|
|
|
+ border-top: 1px solid #3b586c;
|
|
|
+ border-bottom: 1px solid #3b586c;
|
|
|
+ &.part-right {
|
|
|
+ border-right: 1px solid #3b4f6c;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(0, 109, 199, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .part-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ .title-item {
|
|
|
+ width: 140px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #b3bdc0;
|
|
|
+ justify-content: center;
|
|
|
+ // background: rgba(67, 81, 107, 0.2);
|
|
|
+ background: rgba(96, 103, 105, 0.2);
|
|
|
+
|
|
|
+ &.part-left {
|
|
|
+ border-radius: 15px 0px 0px 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.part-right {
|
|
|
+ border-radius: 0px 15px 15px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .part-imgs {
|
|
|
+ min-height: calc(100% - 30px);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .wind-part {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .part-info {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 440px;
|
|
|
+ bottom: 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column-reverse;
|
|
|
+ [v-cloak] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .part-body {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ // background: rgba(11, 12, 12, 0.45);
|
|
|
+ background: rgba(96, 103, 105, 0.2);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .part-item {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 42px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .part {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #959595;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .table-item {
|
|
|
+ width: 25%;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .table-value {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #817c7c;
|
|
|
+ margin-left: 5px;
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.round {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #05bb4c;
|
|
|
+ margin-right: 90px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.round-red {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: red;
|
|
|
+ margin-right: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(83, 89, 104, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.monitoring-item {
|
|
|
+ position: relative;
|
|
|
+ width: 98%;
|
|
|
+ height: 42px;
|
|
|
+ border-bottom: 1px solid #363b46;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.point {
|
|
|
+ width: 8px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ &.point-left {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.point-right {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top {
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bottom {
|
|
|
+ bottom: -1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.points {
|
|
|
+ width: 1px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ &.point-left {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.point-right {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top {
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bottom {
|
|
|
+ bottom: -1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b3b3b3;
|
|
|
+ padding: 0 0px;
|
|
|
+
|
|
|
+ .table-value {
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #05bb4c;
|
|
|
+ margin-right: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
sunzehao
