project-neic/src/components/control/areaCard.vue

/* 自定义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>