hb-neic-project/src/components/matrixBlock.vue

<template>
  <div>
    <div
      class="box"
      style="display: flex; flex-direction: row; flex-wrap: wrap"
    >
      <div
        :class="
          item.active
            ? 'box-' + item.status
            : item.flashing && item.status === 5
            ? 'unbox-flashing-' + item.status
            : 'unbox-' + item.status
        "
        :id="item.windturbineId"
        v-for="(item, index) in dataList"
        :key="index"
        @click="onSelectHandler(item)"
        @dblclick="sendMsg(item)"
        style="margin-right: 8px"
      >
        <div
          :class="item.active ? 'left-' + item.status : 'unleft-' + item.status"
        >
          <!-- <div>{{ getName(item, 'top') }}</div>
          <div>{{ getName(item, 'bot') }}</div> -->
          <div>{{ item.code }}</div>
        </div>
        <div
          :class="
            item.active ? 'right-' + item.status : 'unright-' + item.status
          "
        >
          <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>

          <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>

          <div class="rightrow">
            {{
              item.modelId.indexOf("105") >= 0
                ? (item.rollSpeed).toFixed(2)
                : item.rollSpeed.toFixed(2)
            }}
            rpm
          </div>
        </div>
        <div class="duration">
          <el-popover
            placement="bottom-start"
            :width="200"
            trigger="hover"
            class="durationPopover"
            :show-arrow="false"
            @show="handleDeal(item.ts)"
          >
            <template #reference>
              <img
                :class="item.lockValue > 0 ? 'durationImgs' : 'durationImg'"
                src="../assets/img/type/duration.png"
                alt=""
              />
            </template>
            <input
              class="lock_inputs"
              type="text"
              placeholder=""
              :value="showVlaues"
              disabled
            />
          </el-popover>
        </div>
        <div class="locks" v-if="item.lockValue > 0">
          <el-popover
            placement="bottom-start"
            :width="150"
            trigger="hover"
            class="popoverBack"
            :show-arrow="false"
          >
            <template #reference>
              <img class="lock" src="../assets/img/type/lock.png" alt="" />
            </template>
            <input
              class="lock_input"
              type="text"
              placeholder=""
              :value="
                item.lockValue === 9 ? item.lockValues : options[item.lockValue]
              "
              disabled
            />
          </el-popover>
        </div>
        <div class="locks" v-if="item.reasonType">
          <img
            class="lock"
            src="../assets/img/type/electricityRestrictions.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <WindturbineDetailPages
      v-model="dialogVisible"
      :showSvg="showSvg"
      @close="handleClose"
      :windturbine="currentWindturbine"
    ></WindturbineDetailPages>
  </div>
</template>
<script>
import WindturbineDetailPages from "./WindturbineDetailPages.vue";
import api from "api/index";
import dayjs from "dayjs";
export default {
  components: {
    WindturbineDetailPages,
  },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    area: String,
  },
  mounted() {
    // this.getWindturbineFdc();
  },
  updated() {},
  methods: {
    getName(item, type) {
        // debugger
        let name = ''
        if (type === 'top') {
            if (item.windturbineId) {
                name = item.windturbineId.slice(0, 2)
            }
        } else {
            if (item.windturbineId) {
                name = item.windturbineId.slice(item.windturbineId.indexOf('_')+1)
            }
        }
        return name
    },
    handleDeal(val) {
      let data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
      this.showVlaues = this.timeFn(data);
      // return `该状态共持续：`
    },

    timeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      return `持续时长：${dayDiff !== 0 ? dayDiff + "天" : ""}${
        hours !== 0 ? hours + "小时" : ""
      }${minutes !== 0 ? minutes + "分钟" : ""}${
        seconds !== 0 ? seconds + "秒" : ""
      }`;
    },
    // getWindturbineFdc() {
    //   api.getWindturbineFdc().then((res) => {
    //     this.station = res.data;
    //   });
    // },
    onSelectHandler(values) {
      if (this.area === "problem") {
        this.$emit("problem-click", values);
      } else {
        this.$emit("choose-click", values);
      }
    },
    sendMsg: function (itm) {
      // this.dialogVisible = true;
      this.$emit("on-click", itm);
      // this.currentWindturbine = itm;
    },
    handleClose() {
      this.dialogVisible = false;
      this.showSvg = false;
    },
  },
  data() {
    return {
      dialogVisible: false,
      showSvg: false,
      currentWindturbine: {},
      showVlaues: "",
      // station: [],
      options: {
        8: "检修",
        7: "故障维修",
        2: "场内受累检修",
        3: "场内受累故障",
        4: "场外受累电网",
        5: "场外受累天气",
      },
    };
  },
};
</script>
<style scoped>
.lock {
  width: 10px;
  height: 10px;
  position: relative;
  right: 2px;
  top: -15px;
}

.durationImg {
  width: 15px;
  height: 15px;
  position: relative;
  right: 5px;
  top: -15px;
}
.durationImgs {
  width: 15px;
  height: 15px;
  position: relative;
  right: 5px;
  top: -15px;
}
.lock-on {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.locks:hover .lock-on {
  position: fixed;
  display: flex;
  align-items: center;
  width: 80px;
  height: 30px;
  border: 1px solid #999999;
  background-color: #999999;
  opacity: 1;
  color: #ffffff;
  z-index: 999;
}

.duration {
  width: 15px;
  height: 15px;
  position: relative;
  visibility: hidden;
}
.unbox-1:hover .duration {
  visibility: visible;
}
.unbox-2:hover .duration {
  visibility: visible;
}
.unbox-3:hover .duration {
  visibility: visible;
}
.unbox-4:hover .duration {
  visibility: visible;
}
.unbox-5:hover .duration {
  visibility: visible;
}
.unbox-6:hover .duration {
  visibility: visible;
}
.unbox-7:hover .duration {
  visibility: visible;
}

.lock_input {
  width: 140px;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
.lock_inputs {
  width: 200px;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
.box-0 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
}

.unbox-0 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-0 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-0 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-0 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-0 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-1 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ef3af2;
}

.unbox-1 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-1 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-1 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-1 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-1 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-2 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
}

.unbox-2 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-2 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-2 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-2 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-2 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-3 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
}

.unbox-3 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-3 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-3 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-3 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-3 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-4 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(75, 85, 174, 1);
  background-color: rgba(75, 85, 174, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #6876f2;
}

.unbox-4 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(75, 85, 174, 1);
  background-color: rgba(75, 85, 174, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-4 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-4 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-4 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-4 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-5 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ff1313;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

.unbox-flashing-5 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  animation: fade 1600ms infinite;
  -webkit-animation: fade 1600ms infinite;
}

.unbox-5 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-5 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-5 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-5 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-5 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-6 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(225, 125, 36, 1);
  background-color: rgba(225, 125, 36, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #f28627;
}

.unbox-6 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(225, 125, 36, 1);
  background-color: rgba(225, 125, 36, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-6 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-6 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-6 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-6 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-7 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(96, 103, 105, 1);
  background-color: rgba(96, 103, 105, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
}

.unbox-7 {
  width: 135px;
  height: 50px;
  color: #ffffff;
  border: 1px solid rgba(96, 103, 105, 1);
  background-color: rgba(96, 103, 105, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
}

.left-7 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-7 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-7 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-7 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>