|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="sand-table" id="sandTable">
|
|
|
<img :src="require('@assets/png/3dback.png')" class="i3dback" />
|
|
|
- <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
|
|
|
+ <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" />
|
|
|
<!-- <StBack></StBack> -->
|
|
|
<!-- <ThreeModel1
|
|
|
class="three-model-layer"
|
|
@@ -9,8 +9,12 @@
|
|
|
@when="when"
|
|
|
@clickMapItem="clickMapItem"
|
|
|
></ThreeModel1> -->
|
|
|
+
|
|
|
+ <!-- 地图总览 -->
|
|
|
+ <SvgMap> </SvgMap>
|
|
|
+
|
|
|
<div class="sand-table-left">
|
|
|
- <PanelSand
|
|
|
+ <!-- <PanelSand
|
|
|
class="left-panel"
|
|
|
title="气象预测"
|
|
|
:subTitle="timeStr + '实况'"
|
|
@@ -21,15 +25,35 @@
|
|
|
:data="tqmap1"
|
|
|
@click="openWeatherDialog"
|
|
|
/>
|
|
|
- </PanelSand>
|
|
|
+ </PanelSand> -->
|
|
|
+
|
|
|
<PanelSand class="left-panel mg-t-16" title="健康推荐">
|
|
|
<RankTable :data="rmls" @rowClick="clickHealthRow"></RankTable>
|
|
|
</PanelSand>
|
|
|
- <PanelSand class="left-panel mg-t-16" title="停机信息">
|
|
|
+ <PanelSandToolbar class="left-panel mg-t-16" title="部件">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange" @click="changeBjSwitch">
|
|
|
+ <span :class="bjSwitch ? 'gray' : 'green'">库存</span>
|
|
|
+ <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="bjSwitch ? 'green' : 'gray'">记录</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart
|
|
|
+ height="20.6vh"
|
|
|
+ :list="bjChartData.slice(11)"
|
|
|
+ title="部件情况"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sand-table-right">
|
|
|
+ <PanelSand class="right-panel mg-t-16" title="停机信息">
|
|
|
<RankTable :data="sels" @rowClick="clickStopRow"></RankTable>
|
|
|
<!-- <ComTable :data="sels"></ComTable> -->
|
|
|
</PanelSand>
|
|
|
- <PanelSandToolbar class="left-panel mg-t-16" title="隐患情况">
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="隐患情况">
|
|
|
<template v-slot:tools>
|
|
|
<div class="exchange" @click="changeWarnSwitch">
|
|
|
<span :class="warnSwitch ? 'gray' : 'green'">预警</span>
|
|
@@ -40,7 +64,7 @@
|
|
|
<template v-slot:default>
|
|
|
<RadarPieChart
|
|
|
height="20.6vh"
|
|
|
- :list="warnChartData"
|
|
|
+ :list="warnChartData"
|
|
|
title="隐患情况"
|
|
|
/>
|
|
|
</template>
|
|
@@ -159,6 +183,7 @@
|
|
|
"
|
|
|
></Ppanel>
|
|
|
</div>
|
|
|
+
|
|
|
<el-dialog
|
|
|
title=""
|
|
|
:custom-class="tableDialogClass"
|
|
@@ -435,6 +460,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import SvgMap from "../../views/Home/components/map/svg-map-nx copy.vue";
|
|
|
import ThreeModel1 from "./component/ThreeModel1.vue";
|
|
|
import PanelSand from "@com/coms/panel/panel-sand.vue";
|
|
|
import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
|
|
@@ -470,6 +496,7 @@ export default {
|
|
|
Row,
|
|
|
SvgIcon,
|
|
|
hlsVideo,
|
|
|
+ SvgMap,
|
|
|
},
|
|
|
// 数据
|
|
|
data() {
|
|
@@ -509,76 +536,7 @@ export default {
|
|
|
gxkmap: {},
|
|
|
tableItem: {},
|
|
|
mapSource: {},
|
|
|
- videoArray1: [
|
|
|
- // [
|
|
|
- // { code: "NSS_FDC_ZK", class: "", switch: true },
|
|
|
- // { code: "NSS_FDC_ZK", class: "", switch: true },
|
|
|
- // ],
|
|
|
- // [
|
|
|
- // { code: "NSS_FDC_ZK", class: "", switch: true },
|
|
|
- // { code: "QS_FDC_ZK", class: "", switch: true },
|
|
|
- // ],
|
|
|
- // [
|
|
|
- // { code: "QS_FDC_ZK", class: "", switch: true },
|
|
|
- // { code: "QS_FDC_ZK", class: "", switch: true },
|
|
|
- // ],
|
|
|
- [
|
|
|
- { code: "SBQ_FDC_SC", class: "", switch: true },
|
|
|
- { code: "NSS_FDC_SC", class: "", switch: true },
|
|
|
- ],
|
|
|
- [
|
|
|
- { code: "QS_FDC_SC", class: "", switch: true },
|
|
|
- { code: "MHS_FDC_SC", class: "", switch: true },
|
|
|
- ],
|
|
|
- [
|
|
|
- { code: "XS_FDC_SC", class: "", switch: true },
|
|
|
- { code: "PL_GDC_SC", class: "", switch: true },
|
|
|
- ],
|
|
|
- ],
|
|
|
- videoArray: [
|
|
|
- [
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=SBQ_FDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=NSS_FDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- [
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=QS_FDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=MHS_FDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- [
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=XS_FDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://192.168.10.10:9984/ws.html",
|
|
|
- token: "?token=PL_GDC_SC&autoplay=true",
|
|
|
- class: "",
|
|
|
- switch: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- ],
|
|
|
+
|
|
|
showVideoDialog: false,
|
|
|
dialogVideoUrl: "",
|
|
|
warnChartData: [],
|
|
@@ -596,48 +554,6 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
workDataIndex: 0,
|
|
|
- workData: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "人员",
|
|
|
- field: "laborname",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- click(e, row) {
|
|
|
- that.changePeople(row.index);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "职务",
|
|
|
- field: "jobcode",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- click(e, row) {
|
|
|
- that.changePeople(row.index);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "开始时间",
|
|
|
- field: "starttime",
|
|
|
- width: "150px",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- click(e, row) {
|
|
|
- that.changePeople(row.index);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "原因",
|
|
|
- field: "problem",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- click(e, row) {
|
|
|
- that.changePeople(row.index);
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
sels: {
|
|
|
column: [
|
|
|
{
|
|
@@ -753,90 +669,18 @@ export default {
|
|
|
this.gxkmap = res.data.gxkmap;
|
|
|
this.weatherChart = weatherChart;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "POST",
|
|
|
- // subUrl: "sandtable/findWtInfo",
|
|
|
- // data: {
|
|
|
- // wpId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // res.data.tqmap5.ls.forEach((ele) => {
|
|
|
- // ele.time = new Date(ele.time).formatDate("yyyy-MM-dd hh:mm");
|
|
|
- // });
|
|
|
-
|
|
|
- // const keys = ["wd", "sd"];
|
|
|
- // let weatherChart = [
|
|
|
- // {
|
|
|
- // title: "温度",
|
|
|
- // smooth: true,
|
|
|
- // value: [],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // title: "湿度",
|
|
|
- // smooth: true,
|
|
|
- // value: [],
|
|
|
- // },
|
|
|
- // ];
|
|
|
-
|
|
|
- // keys.forEach((key, keyIndex) => {
|
|
|
- // res.data.tqmap5.ls.forEach((ele) => {
|
|
|
- // weatherChart[keyIndex].value.push({
|
|
|
- // text: ele.time,
|
|
|
- // value: ele[key],
|
|
|
- // });
|
|
|
- // });
|
|
|
- // });
|
|
|
-
|
|
|
- // that.tqmap1 = res.data.tqmap1;
|
|
|
- // that.tqmap5 = res.data.tqmap5.ls;
|
|
|
-
|
|
|
- // res.data.sels.forEach((ele) => {
|
|
|
- // ele.stopTime = new Date(ele.stopTime).formatDate(
|
|
|
- // "yyyy-MM-dd hh:mm:ss"
|
|
|
- // );
|
|
|
- // ele.startTime = new Date(ele.stopTime).formatDate(
|
|
|
- // "yyyy-MM-dd hh:mm:ss"
|
|
|
- // );
|
|
|
- // });
|
|
|
-
|
|
|
- // res.data.rmls.forEach((ele) => {
|
|
|
- // ele.recodedate = new Date(ele.recodedate).formatDate(
|
|
|
- // "yyyy-MM-dd hh:mm:ss"
|
|
|
- // );
|
|
|
- // });
|
|
|
-
|
|
|
- // that.sels.data = res.data.sels;
|
|
|
- // that.rmls.data = res.data.rmls;
|
|
|
- // that.gxkmap = res.data.gxkmap;
|
|
|
- // that.weatherChart = weatherChart;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
// 获取中部地图数据
|
|
|
- getWpHealthInfo() {
|
|
|
- api
|
|
|
- .sandtableJudgeWpHealth({
|
|
|
- wpId: this.wpId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- this.mapSource = res.data;
|
|
|
- });
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "POST",
|
|
|
- // subUrl: "sandtable/judgeWpHealth",
|
|
|
- // data: {
|
|
|
- // wpId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // that.mapSource = res.data;
|
|
|
- // },
|
|
|
- // });
|
|
|
- },
|
|
|
+ // getWpHealthInfo() {
|
|
|
+ // api
|
|
|
+ // .sandtableJudgeWpHealth({
|
|
|
+ // wpId: this.wpId,
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // this.mapSource = res.data;
|
|
|
+ // });
|
|
|
+ // },
|
|
|
|
|
|
// 获取报警玫瑰图
|
|
|
getWarnMGT() {
|
|
@@ -855,27 +699,6 @@ export default {
|
|
|
}
|
|
|
this.warnChartData = warnChartData;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://192.168.1.18:8075/",
|
|
|
- // subUrl: "alarm/count/query/alltotal",
|
|
|
- // data: {
|
|
|
- // stationid: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // let warnChartData = [];
|
|
|
- // for (let key in res.data) {
|
|
|
- // const ele = res.data[key];
|
|
|
- // warnChartData.push({
|
|
|
- // value: ele.count,
|
|
|
- // name: ele.relatePartsText,
|
|
|
- // });
|
|
|
- // }
|
|
|
- // that.warnChartData = warnChartData;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
// 获取故障玫瑰图
|
|
@@ -895,27 +718,6 @@ export default {
|
|
|
}
|
|
|
this.warnChartData = warnChartData;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://192.168.1.18:8075/",
|
|
|
- // subUrl: "shutdown/count/alltotal",
|
|
|
- // data: {
|
|
|
- // stId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // let warnChartData = [];
|
|
|
- // for (let key in res.data) {
|
|
|
- // const ele = res.data[key];
|
|
|
- // warnChartData.push({
|
|
|
- // value: ele.count,
|
|
|
- // name: ele.type,
|
|
|
- // });
|
|
|
- // }
|
|
|
- // that.warnChartData = warnChartData;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
// 获取库存玫瑰图
|
|
@@ -935,27 +737,6 @@ export default {
|
|
|
}
|
|
|
this.bjChartData = bjChartData;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://192.168.1.18:9988/",
|
|
|
- // subUrl: "inventory/groupcount",
|
|
|
- // data: {
|
|
|
- // stId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // let bjChartData = [];
|
|
|
- // for (let key in res.data) {
|
|
|
- // const ele = res.data[key];
|
|
|
- // bjChartData.push({
|
|
|
- // value: ele.curbal,
|
|
|
- // name: ele.description,
|
|
|
- // });
|
|
|
- // }
|
|
|
- // that.bjChartData = bjChartData;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
// 获取记录玫瑰图
|
|
@@ -975,60 +756,22 @@ export default {
|
|
|
}
|
|
|
this.bjChartData = bjChartData;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://192.168.1.18:9988/",
|
|
|
- // subUrl: "equoperationrecord/equupdatecount",
|
|
|
- // data: {
|
|
|
- // stId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // let bjChartData = [];
|
|
|
- // for (let key in res.data) {
|
|
|
- // const ele = res.data[key];
|
|
|
- // bjChartData.push({
|
|
|
- // value: ele.count,
|
|
|
- // name: ele.description,
|
|
|
- // });
|
|
|
- // }
|
|
|
- // that.bjChartData = bjChartData;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
// 获取中部地图数据
|
|
|
- getTop4Info() {
|
|
|
- api
|
|
|
- .equoperationrecordTop4({
|
|
|
- stId: this.wpId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- res.data.forEach((ele, index) => {
|
|
|
- ele.index = index;
|
|
|
- ele.jobcode = ele.jobcode || "------";
|
|
|
- });
|
|
|
- this.workData.data = res.data;
|
|
|
- });
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://192.168.1.18:9988/",
|
|
|
- // subUrl: "equoperationrecord/top4",
|
|
|
- // data: {
|
|
|
- // stId: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // res.data.forEach((ele, index) => {
|
|
|
- // ele.index = index;
|
|
|
- // ele.jobcode = ele.jobcode || "------";
|
|
|
- // });
|
|
|
- // that.workData.data = res.data;
|
|
|
- // },
|
|
|
- // });
|
|
|
- },
|
|
|
+ // getTop4Info() {
|
|
|
+ // api
|
|
|
+ // .equoperationrecordTop4({
|
|
|
+ // stId: this.wpId,
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // res.data.forEach((ele, index) => {
|
|
|
+ // ele.index = index;
|
|
|
+ // ele.jobcode = ele.jobcode || "------";
|
|
|
+ // });
|
|
|
+ // this.workData.data = res.data;
|
|
|
+ // });
|
|
|
+ // },
|
|
|
|
|
|
// 获取主要指标
|
|
|
getWpMainInfo() {
|
|
@@ -1040,20 +783,6 @@ export default {
|
|
|
this.mainInfo = res.data;
|
|
|
this.showMainInfoDialog = true;
|
|
|
});
|
|
|
-
|
|
|
- // let that = this;
|
|
|
- // that.API.requestData({
|
|
|
- // method: "GET",
|
|
|
- // baseURL: "http://10.155.32.4:8034/",
|
|
|
- // subUrl: "benchmark/zyzb",
|
|
|
- // data: {
|
|
|
- // windPowerStation: that.wpId,
|
|
|
- // },
|
|
|
- // success(res) {
|
|
|
- // that.mainInfo = res.data;
|
|
|
- // that.showMainInfoDialog = true;
|
|
|
- // },
|
|
|
- // });
|
|
|
},
|
|
|
|
|
|
clickStopRow(row) {
|
|
@@ -1081,63 +810,6 @@ export default {
|
|
|
return number / 100;
|
|
|
},
|
|
|
|
|
|
- // 切换人员展示
|
|
|
- changePeople(index) {
|
|
|
- if (!this.peopleAnmLock && this.workDataIndex !== index) {
|
|
|
- this.peopleAnmLock = true;
|
|
|
- this.peopleClass = "fadeOutRight";
|
|
|
- setTimeout(() => {
|
|
|
- this.workDataIndex = index;
|
|
|
- this.peopleClass = "fadeInRight";
|
|
|
- this.peopleAnmLock = false;
|
|
|
- }, 150);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 点击风场或者光伏
|
|
|
- clickMapItem(videoArray, wpId) {
|
|
|
- this.wpId = wpId;
|
|
|
- // this.videoArray.forEach((pEle, pIndex) => {
|
|
|
- // pEle.forEach((cEle, cIndex) => {
|
|
|
- // setTimeout(() => {
|
|
|
- // // 设置隐藏动画
|
|
|
- // cEle.class = "animated a1 flipOutX";
|
|
|
- // setTimeout(() => {
|
|
|
- // // 修改 token
|
|
|
- // cEle.token =
|
|
|
- // "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
|
|
|
- // setTimeout(() => {
|
|
|
- // // 设置显示动画
|
|
|
- // cEle.class = "animated a1 flipInX";
|
|
|
- // }, 150);
|
|
|
- // }, 350);
|
|
|
- // }, (pIndex + cIndex + pIndex) * 150);
|
|
|
- // });
|
|
|
- // });
|
|
|
- this.videoArray1.forEach((pEle, pIndex) => {
|
|
|
- pEle.forEach((cEle, cIndex) => {
|
|
|
- setTimeout(() => {
|
|
|
- // 设置隐藏动画
|
|
|
- cEle.class = "animated a1 flipOutX";
|
|
|
- setTimeout(() => {
|
|
|
- // 修改 token
|
|
|
- cEle.code = videoArray[pIndex + cIndex];
|
|
|
- setTimeout(() => {
|
|
|
- // 设置显示动画
|
|
|
- cEle.class = "animated a1 flipInX";
|
|
|
- }, 150);
|
|
|
- }, 350);
|
|
|
- }, (pIndex + cIndex + pIndex) * 150);
|
|
|
- });
|
|
|
- });
|
|
|
- this.getWtInfo();
|
|
|
- this.getWpHealthInfo();
|
|
|
- this.getTop4Info();
|
|
|
- this.getWarnMGT();
|
|
|
- this.getRepertoryMGT();
|
|
|
- this.getWpMainInfo();
|
|
|
- },
|
|
|
-
|
|
|
// 页面跳转
|
|
|
jumpUrl(url) {
|
|
|
this.$router.push(url);
|
|
@@ -1171,8 +843,8 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getWtInfo();
|
|
|
- this.getWpHealthInfo();
|
|
|
- this.getTop4Info();
|
|
|
+ // this.getWpHealthInfo();
|
|
|
+ // this.getTop4Info();
|
|
|
this.getWarnMGT();
|
|
|
this.getRepertoryMGT();
|
|
|
this.timeStr = new Date().formatDate("MM-dd hh:mm");
|
|
@@ -1226,10 +898,12 @@ export default {
|
|
|
|
|
|
.left-panel {
|
|
|
width: 360px;
|
|
|
+ margin-bottom: 150px;
|
|
|
}
|
|
|
|
|
|
.right-panel {
|
|
|
width: 36.852vh;
|
|
|
+ margin-bottom: 150px;
|
|
|
}
|
|
|
|
|
|
.three-model-layer {
|