jn_sis_zhfx/src/views/HealthControl/healthManagement/healthMatrix/index.vue

<template>
  <div class="health-5">
    <!-- 当内容超出页面时 添加 el-scrollbar 即可自动添加滚动条 -->
    <el-scrollbar>
      <div class="health-matrix">
        <div
          class="health-matrix-panel"
          v-for="(pEle, pIndex) in stationsList"
          :key="pIndex"
        >
          <div class="header">
            <i class="svg-icon svg-icon-sm svg-icon-white">
              <svg-icon :svgid="'svg-wind-site'" />
            </i>
            <span class="title">{{ pEle.name }}健康矩阵列表</span>
            <div class="tools">
              <div class="tool-block">
                <div class="legend bg-green"></div>
                <div class="legend-text green">良好数量(台)</div>
                <div class="legend-value">{{ pEle.lhsl }}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-purple"></div>
                <div class="legend-text purple">正常数量(台)</div>
                <div class="legend-value">{{ pEle.zcsl }}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-yellow"></div>
                <div class="legend-text yellow">注意数量(台)</div>
                <div class="legend-value">{{ pEle.zysl }}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-orange"></div>
                <div class="legend-text orange">严重数量(台)</div>
                <div class="legend-value">{{ pEle.yzsl }}</div>
              </div>
            </div>
          </div>
          <div class="body">
            <div class="matrix">
              <div
                class="item"
                v-for="(cItem, cIndex) in pEle.windturbineList"
                :key="cIndex"
                @click="onClickJump(cItem)"
              >
                <div v-if="parseInt(cItem.fjzt) == 1" class="green">
                  {{ cItem.wtCode }}号
                </div>
                <div v-if="parseInt(cItem.fjzt) == 2" class="purple">
                  {{ cItem.wtCode }}号
                </div>
                <div v-if="parseInt(cItem.fjzt) == 3" class="yellow">
                  {{ cItem.wtCode }}号
                </div>
                <div v-if="parseInt(cItem.fjzt) == 4" class="orange">
                  {{ cItem.wtCode }}号
                </div>
                <div v-if="parseInt(cItem.fjzt) == 0" class="gray">
                  {{ cItem.wtCode }}号
                </div>
              </div>
              <div class="blank" v-for="index of 25" :key="index"></div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
import api from "@api/wisdomOverhaul/health/index.js";
export default {
  name: "healthMatrix",
  setup() {},
  components: { SvgIcon },
  data() {
    return {
      stationsList: [],
    };
  },
  created() {
    this.getHealthMatrix();
  },
  methods: {
    // 健康矩阵数据
    getHealthMatrix() {
      api.healthmainFindHealthMatrixMap().then((res) => {
        if (res.code == 200) {
          let stationsList = [];

          for (let key in res.data.fczbmap) {
            let wpItem = Object.assign({}, res.data.fczbmap[key]);
            wpItem.wpId = key;
            stationsList.push(wpItem);
          }

          stationsList.forEach((ele) => {
            for (let i = 0; i < res.data.fjmap.length; i++) {
              if (res.data.fjmap[i]?.[0]?.wpId === ele.wpId) {
                ele.windturbineList = res.data.fjmap[i];
                break;
              }
            }
          });

          this.stationsList = stationsList;
        }
      });
    },
    // 跳转按钮
    onClickJump(item) {
      this.$router.push({
        path: `/health/healthDetail/wtHealth/${item.wpId}/${item.wtId}`,
      });
    },
  },
};
</script>

<style lang="less">
.health-5 {
  height: 100%;
  padding: 10px 30px;

  .health-matrix {
    height: 100%;

    .health-matrix-panel {
      margin-bottom: 8px;
      .header {
        background: fade(@gray, 20);
        line-height: 37px;
        margin-bottom: 8px;
        padding: 0 16px;

        display: flex;
        align-items: center;

        i {
          margin-right: 8px;
        }

        .title {
          font-size: @fontsize-s;
        }

        .tools {
          display: flex;

          .tool-block {
            display: flex;
            align-items: center;
            margin-left: 36px;

            .legend {
              flex: auto;
              width: 10px;
              height: 10px;
              margin-right: 10px;

              &.long {
                width: 2.963vh;
                height: 0.37vh;
              }
            }

            .legend-value {
              color: @white;
              margin-left: 16px;
            }
          }
        }
      }
    }

    .matrix {
      display: flex;
      flex-wrap: wrap;

      .item {
        flex: 1 0 calc(100% / 25 - 4px);
        line-height: 26px;
        background: fade(@gray, 20);
        color: @gray-l;
        font-size: 12px;
        margin-bottom: 4px;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;

        & + .item {
          margin-left: 4px;
        }

        &:nth-child(25n + 1) {
          margin-left: 0px;
        }

        &.green {
          color: @green;
          background: fade(@green, 20);
          border-color: @green;
        }

        &.purple {
          color: @purple;
          background: fade(@purple, 20);
          border-color: @purple;
        }

        &.yellow {
          color: @yellow;
          background: fade(@yellow, 20);
          border-color: @yellow;
        }

        &.orange {
          color: @orange;
          background: fade(@orange, 20);
          border-color: @orange;
        }

        &.red {
          color: @red;
          background: fade(@red, 20);
          border-color: @red;
        }
        &.gray {
          color: @gray;
          background: fade(@gray, 20);
          border-color: @gray;
        }
      }

      .blank {
        flex: 1 0 calc(100% / 25 - 4px);
        margin-left: 4px;
      }
    }
  }
}
</style>