emsfront/src/views/ems/dzjk/sbjk/dtdc/List.vue

<template>
  <div>
    <template v-if="totalSize.length === 0">
      <el-empty :size="200"></el-empty>
    </template>
    <template v-else>
      <div class="lists-container clearfix">
        <div
          class="lists"
          v-for="(item, index) in tableData"
          :key="index + 'dtdcList'"
          :class="handleListClass(item)"
          @click="chartDetail(item)"
        >
          <div style="font-size: 10px; font-weight: 600">
            {{ item.clusterDeviceId }}
          </div>
          <div>#{{ item.deviceId }}</div>
          <div class="dy">{{ item.voltage }}V</div>
          <div class="wd">{{ item.temperature }}℃</div>
        </div>
      </div>

      <!-- <el-pagination
        v-show="tableData.length > 0"
        background
        @size-change="(val) => $emit('handleSizeChange', val)"
        @current-change="(val) => $emit('handleCurrentChange', val)"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        style="margin-top: 15px; text-align: center"
      >
      </el-pagination> -->
    </template>
  </div>
</template>

<script>
export default {
  props: {
    pointIdList: {
      require: true,
      type: Object,
      default: () => {
        return {};
      },
    },
    tableData: {
      require: true,
      type: Array,
      default: () => {
        return [];
      },
    },
    totalSize: {
      require: true,
      type: Number,
      default: 0,
    },
    // pageNum: {
    //   require: true,
    //   type: Number,
    //   default: 1,
    // },
    // pageSize: {
    //   require: true,
    //   type: Number,
    //   default: 10,
    // },
  },
  data() {
    return {
      //最低单体温度 最高温度 最低电压 最高电压 todo 这里的顺序需要和图形组件里的顺序保持一致，
      colorMap: {
        0: "minwd",
        1: "maxwd",
        2: "mindy",
        3: "maxdy",
      },
    };
  },
  methods: {
    //处理图形class 对应高亮设置
    handleListClass(item) {
      let className = "";
      const { clusterDeviceId, deviceId } = item,
        clusterIdList = Object.keys(this.pointIdList);
      if (clusterIdList.includes(clusterDeviceId)) {
        const index = this.pointIdList[clusterDeviceId].findIndex(
          (ids) => ids === parseInt(deviceId)
        );
        if (index > -1) {
          className = this.colorMap[index];
        }
      }
      return className;
    },
    //查看表格行图表
    chartDetail(row, dataType = "") {
      const { clusterDeviceId, deviceId } = row;
      this.$emit("chart", { clusterDeviceId, deviceId, dataType });
    },
  },
};
</script>

<style lang="scss" scoped>
.lists-container {
  padding: 20px 0;
  .lists {
    margin: 10px 5px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 20px;
    border: 1.6px solid #09ada3;
    border-radius: 5px;
    position: relative;
    color: #333333;
    float: left;
    box-sizing: content-box;
    min-width: 60px;
    width: auto;
    cursor: pointer;
    &::before {
      display: block;
      content: "";
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      width: 45%;
      height: 0;
      border-bottom: 7px solid #09ada3;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }
    &.minwd {
      border-color: #3794ff;
      .wd {
        color: #3794ff;
      }
      &::before {
        border-bottom-color: #3794ff;
      }
    }
    &.maxwd {
      border-color: #ff3a3b;
      .wd {
        color: #ff3a3b;
      }
      &::before {
        border-bottom-color: #ff3a3b;
      }
    }
    &.mindy {
      border-color: #de6902;
      .dy {
        color: #de6902;
      }
      &::before {
        border-bottom-color: #de6902;
      }
    }
    &.maxdy {
      border-color: #ffb521;
      .dy {
        color: #ffb521;
      }
      &::before {
        border-bottom-color: #ffb521;
      }
    }
  }
}
.dtdc-pagination {
  ::v-deep {
    .el-button {
      padding: 2px 10px !important;
      font-size: 11px;
      line-height: 16px;
    }
    .activeBtn {
      background-color: #09ada3;
      border-color: #09ada3;
    }
  }
}
</style>