shanxi_control/src/components/unpaidMatrixBlock.vue

<template>
  <div>
    <div class="box">
      <div
        :class="item.active ? 'box-' + item.status : 'unbox-' + item.status"
        :id="item.windturbineId"
        v-for="(item, index) in dataList"
        :key="index"
        @click="onSelectHandler(item)"
        @dblclick="sendMsg(item)"
      >
        <div class="info">
          <div
            :class="
              item.active ? 'left-' + item.status : 'unleft-' + item.status
            "
          >
            <div>{{ item.windturbineId.slice(0, 2) }}</div>
            <div>{{ item.windturbineId.slice(5) }}</div>
            <!-- <div>{{ item.windturbineId.slice(0, 2) }}</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 * 9.55).toFixed(2)
                  : item.rollSpeed.toFixed(2)
              }}
              rpm
            </div>
          </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>
        <div :class="'unpaid-' + item.status">
          <div
            v-if="item.status === 4"
            class="progress"
            :style="`width: ${((item.power / item.powerProduction) * 100 >= 100
              ? 100
              : (item.power / item.powerProduction) * 100
            ).toFixed(2)}%;background-color: ${
              unpaidColor[item.undeliveredStatus]
            };height: 50%;`"
          ></div>
        </div>
      </div>
    </div>
    <WindturbineDetailPages
      v-model="dialogVisible"
      :showSvg="showSvg"
      @close="handleClose"
      :windturbine="currentWindturbine"
    ></WindturbineDetailPages>
  </div>
</template>
<script>
import WindturbineDetailPages from "./WindturbineDetailPages.vue";
export default {
  components: {
    WindturbineDetailPages,
  },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {
    // this.getWindturbineFdc();
  },
  created() {
    console.log("dataList1", this.dataList);
  },
  methods: {
    onSelectHandler(values) {
      this.$emit("choose-click", values, this.dataList);
    },
    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: "场外受累天气",
      },
      unpaidColor: {
        0: "#57cf3a",
        1: "#0ec7dc",
        2: "#1974ff",
        3: "#cd4cdd",
        3: "#ff3c80",
      },
    };
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.info {
  display: flex;
  flex-direction: row;
  height: 50px;
  width: 100%;
  justify-content: space-between;
}
.box-0 {
  width: 135px;
  height: 60px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
}

.unbox-0 {
  width: 135px;
  height: 60px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
}
.unpaid-0 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(255, 255, 255, 1);
}
.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ef3af2;
}

.unbox-1 {
  width: 135px;
  height: 60px;
  color: #ffffff;
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
}
.unpaid-1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(197, 48, 200, 1);
}
.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
}

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

.unpaid-2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(05, 187, 76, 1);
}

.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
}

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

.unpaid-3 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(05, 187, 76, 1);
}

.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(75, 85, 174, 1);
  background-color: rgba(75, 85, 174, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #6876f2;
}

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

.unpaid-4 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(75, 85, 174, 1);
}

.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ff1313;
}

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

.unpaid-5 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(186, 50, 55, 1);
}

.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(225, 125, 36, 1);
  background-color: rgba(225, 125, 36, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #f28627;
}

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

.unpaid-6 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(225, 125, 36, 1);
}

.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: 60px;
  color: #ffffff;
  border: 1px solid rgba(96, 103, 105, 1);
  background-color: rgba(96, 103, 105, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
}

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

.unpaid-7 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 10px;
  border-top: 1px solid rgba(96, 103, 105, 1);
}

.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;
}
.lock {
  width: 10px;
  height: 10px;
  position: relative;
  right: 4px;
}

.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;
}

.lock_input {
  width: 140px;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
</style>