project-neic/src/components/BasicInformationDetail.vue

<template>
  <div class="firstdiv">
    <el-row>
      <el-col :span="12">
        <StandAloneImg :activeIndex="showIndex" @selectSvg="selectSvg" class="sai"></StandAloneImg>
      </el-col>
      <el-col :span="12" class="rights">
        <div class="marks" v-if="healthInfo.bj">
          <div class="healthInfo">健康指数：</div>
          <div class="healthTable" v-if="healthInfo.other">
            <div class="healthTitle">
              <div class="name">名称</div>
              <div class="level">等级</div>
              <div class="times">重要报警次数</div>
              <div class="times">一般报警次数</div>
            </div>
            <div :class="showIndex===3?'healthContent_on':'healthContent'" @click="chooseInfo(3)">
              <div class="contentName">变桨</div>
              <el-rate class="starLevel" v-model="healthInfo.bj.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.bj.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.bj.lowCount}}</div>
            </div>
            <div :class="showIndex===2?'healthContent_on':'healthContent'" @click="chooseInfo(2)">
              <div class="contentName">齿轮箱</div>
              <el-rate class="starLevel" v-model="healthInfo.clx.star" disabled :max="max" void-color="#242424"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.clx.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.clx.lowCount}}</div>
            </div>
            <div :class="showIndex===1?'healthContent_on':'healthContent'" @click="chooseInfo(1)">
              <div class="contentName">发电机</div>
              <el-rate class="starLevel" v-model="healthInfo.fdj.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.fdj.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.fdj.lowCount}}</div>
            </div>
            <div :class="showIndex===5?'healthContent_on':'healthContent'" @click="chooseInfo(5)">
              <div class="contentName">液压</div>
              <el-rate class="starLevel" v-model="healthInfo.yy.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.yy.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.yy.lowCount}}</div>
            </div>
            <div :class="showIndex===4?'healthContent_on':'healthContent'" @click="chooseInfo(4)">
              <div class="contentName">偏航</div>
              <el-rate class="starLevel" v-model="healthInfo.ph.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.ph.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.ph.lowCount}}</div>
            </div>
            <div :class="showIndex===6?'healthContent_on':'healthContent'">
              <div class="contentName">其他</div>
              <el-rate class="starLevel" v-model="healthInfo.other.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.other.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.other.lowCount}}</div>
            </div>
          </div>
        </div>
        <div class="showDate">
          <!-- <div class="label">
            <div class="title">标注信息：</div>
            <el-autocomplete @blur="labelChange(state1)" class="inputs" v-model="state1"
              :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" style="width: 174px">
            </el-autocomplete>
          </div> -->
          <div class="label1">
            <div class="title">挂牌信息：</div>
            <!-- <div>挂牌原因</div> -->
            <el-select filterable allow-create default-first-option @change="listedChange(value)" class="inputs"
              v-model="selectValue" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="label">
          <div class="button" v-if="types === 2" @click="sendCommand({controlType:'1' })">启动</div>
          <div class="button" v-if="types === 4" @click="sendCommand({controlType:'2' })">停机</div>
          <div class="button" v-if="types === 0 ||types === 5 " @click="sendCommand({controlType:'5' })">
            复位</div>
          <div class="button" v-if="types === 2" @click="sendCommand({controlType:'6' })">维护</div>
          <div class="button" v-if="types === 6" @click="sendCommand({controlType:'8' })">取消维护</div>
          <div class="button" v-if="selectValue !==''" @click="sendLock({value: 'UnLock' })">取消挂牌
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="datas">
      <el-col :span="12">
        <div class="dataList">
          <div class="dataTitle">
            <div style="margin-left: 24px;">部件主要参数</div>
          </div>
          <div class="dataContent" @dblclick="dbClicks()">
            <div class="dataBlock" v-for="(item,index) in showData" :key="index">
              <div class="dataName">{{item.name}}</div>
              <div class="numerical">
                <div class="values">{{item.value}}</div>
                <div class="unit">{{item.unit}}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dataLists">
          <div class="dataTitle">
            <div style="margin-left: 24px;">报警记录</div>
          </div>
          <el-scrollbar class="scorll">
            <el-table stripe="true" border-color="#141414" :data="warning" style="width: 100%" :header-cell-style="{
              background: '#141414',
              color: '#B3B3B3',
              'border-bottom':'solid 1px #242424',
              'text-align':'center'
            }"
              :cell-style="{ background: '#141414', color: '#B3B3B3', 'border-bottom': 'solid 1px #242424','text-align':'center' }">
              <el-table-column prop="time" label="时间" width="220">
              </el-table-column>
              <el-table-column prop="alertText" label="故障信息" width="280">
              </el-table-column>
              <el-table-column prop="rankName" label="故障级别">
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
    <BasicDataDetails @closed="closeds()" v-model="display"></BasicDataDetails>
  </div>
</template>

<script>
  import BackgroundData from 'utils/BackgroundData'
  import BasicDataDetails from "./basicDataDetails.vue";
  import StandAloneImg from "./StandAloneImg.vue";
  import dayjs from 'dayjs'
  import api from "api/index";
  export default {
    name: "BasicInformationDetail",
    components: {
      // Worning,
      StandAloneImg,
      BasicDataDetails,
    },
    props: {
      types: {
        type: Number,
        default: null,
      },
      windturbine: Object,
    },
    mounted() {
      this.getLocks()
      this.getHealthDate()
      this.getWarning()
      this.getDetial()
    },
    beforeUpdate() {
      this.getLocks()
      this.getHealthDate()
      this.getWarning()
      this.getDetial()
    },

    data() {
      return {
        // warnList: [],
        display: false,
        BasicInfo: {},
        temperatureInfo: new Array() /* 温度信息 */,
        pitchInfo: new Array() /* 变桨信息 */,
        generalInfo: new Array() /* 基本信息 */,
        powerGridInfo: new Array() /* 电网信息 */,
        restaurants: [],
        lockValues: [],
        state1: "",
        showIndex: 1,
        starValue: 3,
        max: 4,
        current: null,
        disableds: true,
        options: [{
          value: '8',
          label: '检修'
        }, {
          value: '7',
          label: '故障维修'
        }, {
          value: '2',
          label: '场内受累检修'
        }, {
          value: '3',
          label: '场内受累故障'
        }, {
          value: '4',
          label: '场外受累电网'
        }, {
          value: '5',
          label: '场外受累天气'
        }],
        selectValue: '7',
        healthInfo: {},
        warning: ["-"],
        showData: [],
        controlErorCodes: [
          "控制成功",
          "控制命令发送失败",
          "无效的控制地址",
          "被控设备异常",
          "网络连接错误,检查场站通信",
          "控制结果读取超时",
          "未知错误",
          "控制命令错误",
          "收到无法识别数据",
          "未读取到数据包",
          "未知错误",
          "风机操作过频繁",
          "风机被挂牌",
          "风机操作与风机状态不符",
          "需要登录",
        ],
      };
    },
    methods: {
      getHealthDate() {
        api.getHealthDate(this.windturbine.stationId, this.windturbine.windturbineId).then(msg => {
          if (msg.data.code === 200) {
            this.healthInfo = msg.data.data;
          }

        })
          .catch(err => {
            console.log(err);
          });
      },
      getDetial() {
        api.getDetial(this.windturbine.windturbineId).then(msg => {
          let restaurants = []
          if(msg.data.lockType === 9){
            this.selectValue = this.lockValues?.filter(item => this.windturbine.windturbineId === item.windturbineID)[0]?.value;
          }else{
            this.selectValue = (msg.data.lockType === 0 ? '' : String(msg.data.lockType))
          }
          this.state1 = msg.data.markValue
          msg.data.markValues.forEach(item => {
            let data = {}
            data.value = item
            restaurants.push(data)
          })
          this.restaurants = restaurants
        })
      },
      getLocks(){
                api.getCustomerLock().then(res =>{
                    if(res){
                        this.lockValues = res.data
                    }
                })
            },
      getWarning() {
        let parts = ''
        switch (this.showIndex) {
          case 1:
            parts = 'fdj'
            break;
          case 2:
            parts = 'clx'
            break;
          case 3:
            parts = 'bj'
            break;
          case 4:
            parts = 'ph'
            break;
          case 5:
            parts = 'yy'
            break;
        }
        api.getWarning(this.windturbine.stationId, this.windturbine.windturbineId, parts).then(msg => {
          if (msg.data.code === 200) {
            msg.data.data && msg.data.data.forEach(item => {
              item.time = dayjs(item.time).format('MM-DD HH:mm:ss')
            })
            this.warning = msg.data.data;
          }

        })
          .catch(err => {
            console.log(err);
          });
      },
      chooseInfo(value) {
        this.showIndex = value
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
        this.getWarning()
      },
      listedChange() {
        switch (this.selectValue) {
          case '8':
            this.sendLock({ value: "CheckLock" });
            break;
          case '7':
            this.sendLock({ value: "FaultLock" });
            break;
          case '2':
            this.sendLock({ value: "StationCheckLock" });
            break;
          case '3':
            this.sendLock({ value: "StationFaulLock" });
            break;
          case '4':
            this.sendLock({ value: "StationPowerLineLock" });
            break;
          case '5':
            this.sendLock({ value: "StationWeatherLock" });
            break;
          default:
            this.sendLock({ value: "CustomerLock", lockValue: this.selectValue});
            break;
        }
      },
      // labelChange() {
      //   let values = BackgroundData.getInstance().Marks;
      //   if (!values.filter(item => item.title = this.windturbine.windturbineId)[0]) {
      //     this.menuClicked({ type: "marking" })
      //   }
      //   BackgroundData.getInstance().updateMarks(this.windturbine, this.state1);
      // },

      start(bi) {
        this.BasicInfo = bi;
        this.bindData();
        this.refreshData();
        this.refreshTimer = setInterval(this.refreshData, 3000);
      },
      end() {
        clearInterval(this.refreshTimer);
      },
      /* 刷新数据 */
      refreshData() {
        var bg = BackgroundData.getInstance();
        let mark = BackgroundData.getInstance().Marks;
        console.log(mark);
        bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);

      },

      /* 获得数据 */
      onMessage(msg) {
        this.BasicInfo.BasicInfo.forEach((element) => {
          element.param.forEach((im) => {
            var val = msg[im.code];
            if (typeof val !== "undefined") {
              if (im.unit == "万度") {
                im.value = (val.doubleValue / 10000).toFixed(2);
              } else {
                im.value = val.doubleValue === 0 ? val.doubleValue : val.doubleValue ? val.doubleValue.toFixed(2) : val.longValue ? val.longValue : val.booleanValue;
              }
            }
          });
        });
        console.log(msg);
        console.log(this.BasicInfo.BasicInfo);
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
      },

      bindData() {
        this.BasicInfo.BasicInfo.forEach((element) => {
          if (element.tag == "基本信息") {
            this.generalInfo = element.param;
          } else if (element.tag == "温度信息") {
            this.temperatureInfo = element.param;
          } else if (element.tag == "电网信息") {
            this.powerGridInfo = element.param;
          } else if (element.tag == "桨叶信息") {
            this.pitchInfo = element.param;
          }
        });
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
            0
          );
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      selectSvg(index) {
        this.showIndex = index;
        // this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === `part${this.showIndex+5}`)[0]?.param
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === `part6`)[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
        this.getWarning()
      },
      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 = []
        this.windturbine.controlType = Number(msg.controlType)
        sendList.push(this.windturbine)
        if (sendList.length > 0) {
          bd.checkout(sendList);
          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.windturbControl(pairs).then(res => {
            if (res) {
              this.controlSuccess(res)
            }
          })
        }
      },

      sendLock(msg) {
        let bd = BackgroundData.getInstance();
        if (!bd.LoginUser) {
          this.$notify({
            title: "请登录",
            message: "控制风机需要先登录！",
            type: "warning",
            position: "bottom-right",
            offset: 60,
            duration: 3000,
          });
          return;
        }
        let sendList = []
        this.windturbine.lockType = msg.value;
        if(msg.lockValue){
          this.windturbine.lockValue = msg.lockValue
        }
        sendList.push(this.windturbine)
        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,
              lockValue: item.lockValue,
              userName: `system_${bd.LoginUser.name}`,
              userId: 0,
            };
            pairs[ct.windturbineId] = ct;
          })
          api.windturbControlLock(pairs).then(res => {
            if (res) {
              this.controlSuccess(res)
            }
          })
        }
      },
      /* 控制成功 */
      controlSuccess(msg) {
        console.log(msg);
        var mss = '';     // 信息
        var iserror = false;// 是否有控制错误的风机
        for (var v in msg.data) {
          var val = msg.data[v];
          if (val.errorCode > 0) {
            iserror = true;
            mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
          }
        }
        var tp = iserror ? "warning" : "success";
        var dt = iserror ? 0 : 4500;
        if (!iserror) {
          mss = "控制成功";
        }

        this.$notify({
          title: "控制",
          message: mss,
          type: tp,
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
      },

      /* 控制失败 */
      controlError(err) {
        this.$notify({
          title: "控制出现错误",
          message: err.message,
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
      },

      dbClicks() {
        this.display = true;
      },
      closeds() {
        this.display = false;
      }
    },
  };
</script>

<style scoped>
  .firstdiv {
    height: 70vh;
  }

  .onediv {
    float: left;
    margin-right: 30px;
  }

  .twodiv {
    float: right;
    margin-right: 30px;
  }

  td:nth-child(1) {
    height: 25px;
    width: 130px;
    text-align: right;
  }

  td:nth-child(2) {
    width: 78px;
    text-align: right;
    color: rgb(5, 176, 71);
  }

  td:nth-child(3) {
    text-align: center;
    width: 30px;
  }

  tr:nth-child(1) {
    font-size: 20px;
    width: 90px;
    text-align: right;
  }

  th {
    height: 40px;
  }

  table {
    margin-top: 30px;
  }

  /* .worning1{
    position: absolute;
    top: 143px;
    left: 119px;
    z-index: 999;
  }
  .worning2{
    position: absolute;
    top: 210px;
    left: 282px;
    z-index: 99;
  }
  .worning3{
    position: absolute;
    top: 219px;
    left: 348px;
    z-index: 0;
  }
  .worning4{
    position: absolute;
    top: 273px;
    left: 296px;
    z-index: 0;
  }
  .worning5{
    position: absolute;
    top: 287px;
    left: 252px;
    z-index: 0;
  } */
  .sai {
    float: left;
    margin-left: 40px;
    margin-top: 30px;
    margin-bottom: 15px;
    width: 55vh;
    height: 34vh;
  }

  /* .inline-input {
    .el-scrollbar{
      max-height: 160px; 
    }
  } */
  .rights {
    display: flex;
    flex-direction: column;
  }

  .marks {
    display: flex;
    flex-direction: column;
  }

  .title {
    margin-right: 16px;
    font-size: 18px;
    color: #ffffff;
  }

  .inputs {
    border: none;
    width: 174px !important;
  }

  .area {
    border: 2px dashed #ffffff;
    height: 200px;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 5.5%;
  }

  .healthInfo {
    margin-top: 16px;
    margin-bottom: 11px;
    font-size: 18px;
    color: #FFFFFF;
  }

  .healthTable {
    width: 688px;
    background-color: #141414;
  }

  .healthTitle {
    width: 100%;
    height: 37px;
    background-color: #242424;
    font-size: 12px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
  }

  .name {
    width: 172px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .level {
    width: 211px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .times {
    width: 153px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .healthContent {
    height: 30px;
    display: flex;
    flex-direction: row;
    width: 96%;
    margin-left: 2%;
    border-bottom: 1px solid #242424;
    font-size: 12px;
    color: #B3B3B3;
  }

  .healthContent_on {
    height: 30px;
    display: flex;
    flex-direction: row;
    width: 96%;
    margin-left: 2%;
    border-bottom: 1px solid #242424;
    background-color: #242424;
    font-size: 12px;
    color: #05BB4C;
  }

  .contentName {
    width: 158px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -5px;
  }

  .starLevel {
    width: 211px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  .contentTimes {
    width: 124px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 11px;
  }

  .contentTimess {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 30px;
  }

  .label {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
  }

  .label1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
    margin-right: 15px;
  }

  .button {
    width: 100px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    background-color: #242424;
    border: 1px solid #3D3D3D;
    margin-right: 12px;
  }

  .datas {
    margin-top: 15px;
  }

  .dataList {
    width: 94%;
    /* min-height: 250px; */
    height: 28vh;
    background-color: #141414;
    display: flex;
    flex-direction: column;
    margin-left: 2%;
  }

  .dataLists {
    width: 97%;
    /* min-height: 250px; */
    height: 28vh;
    background-color: #141414;
    display: flex;
    flex-direction: column;
  }

  .dataTitle {
    display: flex;
    height: 37px;
    width: 100%;
    background-color: #242424;
    color: #FFFFFF;
    font-size: 12px;
    align-items: center;
  }

  .dataContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dataBlock {
    width: 145px;
    height: 62px;
    background-color: #242424;
    border: 1px solid #3D3D3D;
    margin-left: 16px;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dataName {
    font-size: 12px;
    color: #FFFFFF;
    margin-left: 26px;
    margin-bottom: 6px;
  }

  .numerical {
    display: flex;
    flex-direction: row;
    color: #05BB4C;
    align-items: baseline;
    margin-left: 26px;
  }

  .values {
    font-size: 16px;
  }

  .unit {
    font-size: 12px;
    margin-left: 8px;
  }

  .scorll {
    height: 212px;
  }

  .showDate {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .el-table::before {
    width: 0;
  }
</style>