/* 自定义tabs */
<template>
<div>
<div class="body" :style="style">
<img class="logo" src="../../assets/img/logo.png" alt="" />
<div class="title">
<div>{{ title }}</div>
<!-- <div style="display: flex; flex-direction: row; align-items: center">
<div v-for="(item, index) in controlTypeList" :key="index">
<div
v-if="!item.type"
:class="
index === 0
? 'controlTypesLeft'
: index === (controlTypeList.length - 1)
? 'controlTypesRight'
: 'controlTypes'
"
@click="handleTypeChange(item)"
>
{{ item.name }}
</div>
<div
v-if="item.type"
:class="
index === 0
? 'onControlTypesLeft'
: index === (controlTypeList.length - 1)
? 'onControlTypesRight'
: 'onControlTypes'
"
@click="handleTypeChange(item)"
>
{{ item.name }}
</div>
</div>
</div> -->
</div>
<div style="margin-top: 50px; height: 85%" @contextmenu="contextmenu">
<div class="scoll currentScroll">
+ <div class="currentScroll" style="height: 100%; overflow-y: scroll">
<div class="matrix" v-if="startList.length > 0">
<div class="problemTitle">启动</div>
<MatrixBlock
@on-click="handleDetial"
@choose-click="handleClick"
:dataList="startList"
>
</MatrixBlock>
</div>
<div class="matrix" v-if="stopList.length > 0">
<div class="problemTitle">停机</div>
<MatrixBlock
@on-click="handleDetial"
@choose-click="handleClick"
:dataList="stopList"
>
</MatrixBlock>
</div>
<div class="matrix" v-if="maintainList.length > 0">
<div class="problemTitle">维护</div>
<MatrixBlock
@on-click="handleDetial"
@choose-click="handleClick"
:dataList="maintainList"
>
</MatrixBlock>
</div>
<div class="matrix" v-if="unMaintainList.length > 0">
<div class="problemTitle">取消维护</div>
<MatrixBlock
@on-click="handleDetial"
@choose-click="handleClick"
:dataList="unMaintainList"
>
</MatrixBlock>
</div>
</div>
</div>
</div>
<!-- <div v-if="current == 1" class="send" @click="handleSend">发送</div> -->
<div v-if="current == 1" class="sends">发送</div>
</div>
<WindturbineDetailPages
v-model="dialogVisible"
@close="handleClose"
:windturbine="currentWindturbine"
>
</WindturbineDetailPages>
</div>
<!-- <StationSvgDetailPages
v-model="svgVisible"
:stationName="stationName"
:svgWeb="svgWeb"
@close="handleClose"
>
</StationSvgDetailPages> -->
</template>
<script>
import BackgroundData from "utils/BackgroundData";
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
import MatrixBlock from "../matrixBlock.vue";
import MessageBridge from "utils/MessageBridge";
import api from "api/index";
// import StationSvgDetailPages from "../stationSvgDetailPages.vue";
export default {
name: "gy-card",
components: {
MatrixBlock,
WindturbineDetailPages,
// StationSvgDetailPages,
},
created: function () {
this.initData();
this.suggestion();
// this.getControlType();
},
emits: ["parentRun"],
props: {
title: {
type: String,
default: "",
required: true,
},
height: {
type: Number,
default: 200,
},
},
data() {
return {
current: 1,
windturbinelist: {},
titleList: [],
startList: [],
stopList: [],
maintainList: [],
unMaintainList: [],
chooseList: [],
sendList: [],
currentWindturbine: {},
dialogVisible: false,
// svgVisible: false,
svgWeb: "",
// stationName: "",
// 定时器
// timer: "",
// controlTypeList: [],
controlErorCodes: [
"控制成功",
"控制命令发送失败",
"无效的控制地址",
"被控设备异常",
"无效的控制功能",
"网络连接错误,检查场站通信",
"控制结果读取超时",
"未知错误",
"控制命令错误",
"收到无法识别数据",
"未读取到数据包",
"未知错误",
"风机操作过频繁",
"风机被挂牌",
"风机操作与风机状态不符",
"需要登录",
],
indexsss: 0,
};
},
computed: {
style() {
return `width: 100%; height: ${this.height}vh;`;
},
},
methods: {
// getControlType() {
// api.getControlType().then((res) => {
// if (res) {
// this.controlTypeList = res.data;
// }
// });
// },
control(current) {
this.current = current === 0 ? current : current === 1 ? current : 1;
this.suggestion();
},
initData: function () {
let mb = MessageBridge.getInstance();
mb.unregister({ key: "/topic/suggestion" });
let vs = [{ key: "/topic/suggestion", action: this.suggestion }];
mb.register(vs);
},
suggestion(msg, headers) {
msg ? this.$store.commit("suggestion", JSON.parse(msg)) : "";
let bd = BackgroundData.getInstance();
this.titleList = msg ? JSON.parse(msg) : this.$store.state.suggestion;
if (this.current === 0) {
let dateList = [];
this.titleList.forEach((item) => {
// let status = this.controlTypeList.filter(
// (val) =>
// val.stationId ===
// this.windturbinelist[item.windturbineId].stationId
// )[0].type;
// if (status) {
let arr = Object.keys(this.windturbinelist).sort();
this.windturbinelist =
arr.length !== 0
? this.windturbinelist
: this.$store.state.windturbinelist;
switch (item.operateStyle) {
case "Start":
this.windturbinelist[item.windturbineId].controlType = 1;
break;
case "Stop":
this.windturbinelist[item.windturbineId].controlType = 2;
break;
case "Maintain":
this.windturbinelist[item.windturbineId].controlType = 6;
break;
case "UnMaintain":
this.windturbinelist[item.windturbineId].controlType = 8;
break;
}
dateList.push(this.windturbinelist[item.windturbineId]);
// }
});
let mss = {};
mss.type = "send";
mss.deviceType = "Auto";
// setTimeout(() => {
// if (dateList.length>0) {
// this.sendCommand(mss, dateList);
// }
// }, 3000);
}
},
handleClick(values) {
if (values.active) {
let showIndex = null;
this.chooseList.forEach((item, index) => {
if (item.windturbineId === values.windturbineId) {
showIndex = index;
}
});
this.chooseList.splice(showIndex, 1);
} else {
this.chooseList.push(values);
}
this.startList.forEach((item) => {
if (item.windturbineId === values.windturbineId) {
item.active = !item.active;
}
});
this.stopList.forEach((item) => {
if (item.windturbineId === values.windturbineId) {
item.active = !item.active;
}
});
this.maintainList.forEach((item) => {
if (item.windturbineId === values.windturbineId) {
item.active = !item.active;
}
});
this.unMaintainList.forEach((item) => {
if (item.windturbineId === values.windturbineId) {
item.active = !item.active;
}
});
},
handleDetial(itm) {
this.dialogVisible = true;
this.currentWindturbine = itm;
},
handleClose() {
this.dialogVisible = false;
// this.svgVisible = false;
},
// handleSend() {
// if (this.chooseList.length > 0) {
// this.chooseList.forEach((item) => {
// if (item.operateStyle === "Start") {
// item.controlType = 1;
// } else if (item.operateStyle === "Stop") {
// item.controlType = 2;
// } else if (item.operateStyle === "Maintain") {
// item.controlType = 6;
// } else if (item.operateStyle === "UnMaintain") {
// item.controlType = 8;
// }
// });
// let mss = {};
// mss.type = "send";
// mss.deviceType = "Recommend";
// this.sendCommand(mss, this.chooseList);
// }
// },
/* 右键菜单 */
contextmenu() {
const { remote } = require("electron");
let that = this;
const menuTemplate = [
{
label: "发送",
click() {
that.handleSend();
},
},
{
label: "挂牌",
submenu: [
{
label: "检修",
click() {
that.sendLock({ value: "CheckLock" });
},
},
{
label: "故障维修",
click() {
that.sendLock({ value: "FaultLock" });
},
},
{
label: "场内受累检修",
click() {
that.sendLock({ value: "StationCheckLock" });
},
},
{
label: "场内受累故障",
click() {
that.sendLock({ value: "StationFaulLock" });
},
},
{
label: "场外受累电网",
click() {
that.sendLock({ value: "StationPowerLineLock" });
},
},
{
label: "场外受累天气",
click() {
that.sendLock({ value: "StationWeatherLock" });
},
},
],
},
];
const menu = remote.Menu.buildFromTemplate(menuTemplate);
menu.popup(remote.getCurrentWindow());
},
// sendCommand(msg, windturbine) {
// let bd = BackgroundData.getInstance();
// if (!bd.LoginUser) {
// this.$notify({
// title: "请登录",
// message: "控制风机需要先登录！",
// type: "warning",
// position: "bottom-right",
// offset: 60,
// duration: 3000,
// });
// return;
// }
// let sendList = windturbine;
// if (sendList.length > 0) {
// bd.checkout(sendList);
// this.chooseList = [];
// let pairs = {};
// sendList.forEach((item) => {
// let ct = {
// windturbineId: item.windturbineId,
// stationId: item.stationId,
// projectId: item.projectId,
// modelId: item.modelId,
// controlType: item.controlType,
// lockType: item.lockType,
// userName: `system_${bd.LoginUser.name}`,
// userId: 0,
// auto: this.current === 0 ? true : false,
// deviceType: msg.deviceType,
// };
// pairs[ct.windturbineId] = ct;
// });
// api.windturbControl(pairs).then((res) => {
// if (res) {
// this.controlSuccess(res);
// }
// });
// }
// },
sendLock(msg, windturbine) {
let bd = BackgroundData.getInstance();
if (!bd.LoginUser) {
this.$notify({
title: "请登录",
message: "控制风机需要先登录！",
type: "warning",
position: "bottom-right",
offset: 60,
duration: 3000,
});
return;
}
let sendList = [];
if (windturbine) {
windturbine.lockType = msg.value;
sendList.push(windturbine);
} else {
this.chooseList.forEach((item) => {
item.lockType = msg.value;
});
sendList = this.chooseList;
}
if (sendList.length > 0) {
this.chooseList = [];
let pairs = {};
sendList.forEach((item) => {
let ct = {
windturbineId: item.windturbineId,
stationId: item.stationId,
projectId: item.projectId,
modelId: item.modelId,
controlType: item.controlType,
lockType: item.lockType,
userName: `system_${bd.LoginUser.name}`,
userId: 0,
};
pairs[ct.windturbineId] = ct;
});
api.windturbControlLock(pairs).then((res) => {
if (res) {
this.controlSuccess(res);
}
});
}
},
clearSelected() {
this.startList.forEach((item) => {
item.active = false;
});
this.stopList.forEach((item) => {
item.active = false;
});
this.chooseList = [];
},
removeList(mk) {
let indx = -1;
for (let id in this.titleList) {
if (this.titleList[id].windturbineId == mk.windturbineId) {
indx = id;
break;
}
}
if (indx < 0) return;
this.titleList.splice(indx, 1);
},
/* 控制成功 */
controlSuccess(msg) {
let bd = BackgroundData.getInstance();
for (let id in msg.data) {
let val = msg.data[id];
if (val.errorCode !== "0") {
bd.removeCheckouts(val);
this.removeList(val);
}
}
if (msg.data || msg.data !== {}) {
let mss = ""; // 信息
let iserror = false; // 是否有控制错误的风机
for (let v in msg.data) {
let val = msg.data[v];
if (val.errorCode > 0) {
iserror = true;
mss += `${val.windturbineId} ${
this.controlErorCodes[val.errorCode]
}\n`;
}
}
let tp = iserror ? "warning" : "success";
if (!iserror) {
mss = "控制成功";
}
this.$notify({
title: "控制",
message: mss,
type: tp,
position: "bottom-right",
offset: 60,
duration: 3000,
});
} else {
this.$notify({
title: "控制出现错误",
message: "控制失败，请重试",
type: "warning",
position: "bottom-right",
offset: 60,
duration: 3000,
});
}
},
/* 控制失败 */
controlError(err) {
this.$notify({
title: "控制出现错误",
message: err.message,
type: "warning",
position: "bottom-right",
offset: 60,
duration: 3000,
});
},
handleTypeChange(val) {
let bd = BackgroundData.getInstance();
if (!bd.LoginUser) {
this.$notify({
title: "请登录",
message: "控制风机需要先登录！",
type: "warning",
position: "bottom-right",
offset: 60,
duration: 3000,
});
return;
}
api
.uodateControlType({
stationid: val.stationId,
type: !val.type,
userName: bd.LoginUser.name,
})
.then((res) => {
if (res.data === "success") {
// this.getControlType();
}
});
},
},
watch: {
"$store.getters.windturbinelist": {
deep: true,
handler: function (json) {
this.windturbinelist = json;
let arr = Object.keys(json).sort();
this.stopList = [];
this.startList = [];
this.maintainList = [];
this.unMaintainList = [];
for (let id of arr) {
let val = json[id];
this.chooseList.forEach((item) => {
if (item.windturbineId === val.windturbineId) {
val.active = true;
}
});
this.titleList.forEach((item) => {
if (item.windturbineId === val.windturbineId) {
val.operateStyle = item.operateStyle;
if (item.operateStyle === "Start" && val.status === 2) {
this.startList.push(val);
} else if (item.operateStyle === "Stop" && val.status === 4) {
if (item.reasonType === "ElectricityRestrictions") {
val.reasonType = item.reasonType;
}
this.stopList.push(val);
} else if (item.operateStyle === "Maintain" && val.status === 2) {
this.maintainList.push(val);
} else if (
item.operateStyle === "UnMaintain" &&
val.status === 6
) {
this.unMaintainList.push(val);
}
}
});
}
let checkoutList = BackgroundData.getInstance().checkouts;
checkoutList.forEach((item) => {
let starIndex = null;
let stopIndex = null;
let maintainIndex = null;
let unMaintainIndex = null;
let starFlag = false;
let stopFlag = false;
let maintainFlag = false;
let unMaintainFlag = false;
this.startList.forEach((param, index) => {
if (item.windturbineId === param.windturbineId) {
starIndex = index;
starFlag = true;
}
});
this.stopList.forEach((param, index) => {
if (item.windturbineId === param.windturbineId) {
stopIndex = index;
stopFlag = true;
}
});
this.maintainList.forEach((param, index) => {
if (item.windturbineId === param.windturbineId) {
maintainIndex = index;
maintainFlag = true;
}
});
this.unMaintainList.forEach((param, index) => {
if (item.windturbineId === param.windturbineId) {
unMaintainIndex = index;
unMaintainFlag = true;
}
});
starFlag ? this.startList.splice(starIndex, 1) : "";
stopFlag ? this.stopList.splice(stopIndex, 1) : "";
maintainFlag ? this.maintainList.splice(maintainIndex, 1) : "";
unMaintainFlag ? this.unMaintainList.splice(unMaintainIndex, 1) : "";
});
},
},
"$store.getters.current": {
handler: function (json) {
this.current = json;
// this.getControlType();
if (json === 0) {
let dateList = [];
this.titleList.forEach((item) => {
// let status = this.controlTypeList.filter(
// (val) =>
// val.stationId ===
// this.windturbinelist[item.windturbineId].stationId
// )[0].type;
// if (status) {
let arr = Object.keys(this.windturbinelist).sort();
this.windturbinelist =
arr.length !== 0
? this.windturbinelist
: this.$store.state.windturbinelist;
switch (item.operateStyle) {
case "Start":
this.windturbinelist[item.windturbineId].controlType = 1;
break;
case "Stop":
this.windturbinelist[item.windturbineId].controlType = 2;
break;
case "Maintain":
this.windturbinelist[item.windturbineId].controlType = 6;
break;
case "UnMaintain":
this.windturbinelist[item.windturbineId].controlType = 8;
break;
}
dateList.push(this.windturbinelist[item.windturbineId]);
// }
});
// let mss = {};
// mss.type = "send";
// mss.deviceType = "Auto";
// setTimeout(() => {
// if (dateList.length>0) {
// this.sendCommand(mss, dateList);
// }
// }, 3000);
}
},
},
},
};
</script>
<style scoped="scoped">
.body {
border: 1px solid #373737;
width: 100%;
margin-left: 15px;
margin-top: 20px;
}
.body .scoll {
height: 91%;
}
.title {
color: #ffffff;
font-size: 14px;
margin-left: 32px;
/* margin-top: 12px; */
margin-bottom: 10px;
/* width: 570px; */
width: 29vw;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: absolute;
background-color: #000000;
}
.title::before {
z-index: 1;
content: "";
position: absolute;
left: -18px !important;
/* top: 30px !important; */
width: 5px;
height: 5px;
background-color: #54b75a;
border-radius: 50%;
}
.logo {
position: absolute;
top: 12px;
left: 12px;
}
.matrix {
margin-left: 20px;
/* margin-right: 10px; */
padding-bottom: 20px;
border-bottom: 1px solid rgba(31, 31, 31, 1);
}
.problemTitle {
font-size: 12px;
color: #bfbfbf;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 12px;
}
.send {
width: 86px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(84, 183, 90, 1);
color: #ffffff;
font-size: 14px;
position: absolute;
bottom: 20px;
right: 10px;
}
.sends {
width: 86px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: #999999;
color: #ffffff;
font-size: 14px;
position: absolute;
bottom: 20px;
right: 10px;
}
.success {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 48px;
position: absolute;
bottom: 20px;
right: 20%;
border: 1px solid rgba(55, 55, 55, 1);
border-radius: 10px;
color: #ffffff;
font-size: 14px;
}
.controlTypes {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(51, 51, 51, 1);
}
.controlTypesLeft {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(51, 51, 51, 1);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.controlTypesRight {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(51, 51, 51, 1);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.onControlTypes {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(51, 51, 51, 1);
background-color: rgba(37, 116, 219, 1);
}
.onControlTypesLeft {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
/* border: 1px solid rgba(37, 116, 219, 1); */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background-color: rgba(37, 116, 219, 1);
}
.onControlTypesRight {
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
/* border: 1px solid rgba(37, 116, 219, 1); */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: rgba(37, 116, 219, 1);
}
</style>