sis_zhfx/src/views/HealthControl/Health5.vue

<template>
  <div class="health-5">
    <!-- 当内容超出页面时 添加 el-scrollbar 即可自动添加滚动条 -->
    <el-scrollbar>
      <div class="health-matrix">
        <div class="health-matrix-panel" v-for="(item, index) in stationsList" :key="index">
          <div class="header">
            <i class="svg-icon svg-icon-sm svg-icon-white">
              <svg-icon :svgid="'svg-wind-site'" />
            </i>
            <span class="title">{{item.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">{{item.lhsl}}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-purple"></div>
                <div class="legend-text purple">正常数量</div>
                <div class="legend-value">{{item.zcsl}}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-yellow"></div>
                <div class="legend-text yellow">注意数量</div>
                <div class="legend-value">{{item.zysl}}</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-orange"></div>
                <div class="legend-text orange">严重数量</div>
                <div class="legend-value">{{item.yzsl}}</div>
              </div>
            </div>
          </div>
          <div class="body">
            <div class="matrix">
              <div class="item" v-for="(ele, num) in windturbineList[index]" :key="num" @click="onClickJump(ele)"> 
                <div v-if="parseInt(ele.fjzt) == 1" class="green">{{ele.wtnum}}号</div>
                <div v-if="parseInt(ele.fjzt) == 2" class="purple">{{ele.wtnum}}号</div>
                <div v-if="parseInt(ele.fjzt) == 3" class="yellow">{{ele.wtnum}}号</div>
                <div v-if="parseInt(ele.fjzt) == 4" class="orange">{{ele.wtnum}}号</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";
export default {
  setup() {},
  components: { SvgIcon },
  data() {
    return {
      stationsList:[], 
      windturbineList:[]
    };
  },
  created(){
    this.getHealthMatrix()
  },
  methods:{
    // 健康矩阵数据
    getHealthMatrix() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthmain/findHealthMatrixMap",
        success(res) {
          if (res.code == 200) {
            //以下解析顺序不可变
            that.stationsList.push(res.data.fczbmap.NSS_FDC)
            that.stationsList.push(res.data.fczbmap.XS_FDC)
            that.stationsList.push(res.data.fczbmap.SBQ_FDC)
            that.stationsList.push(res.data.fczbmap.QS_FDC)
            that.stationsList.push(res.data.fczbmap.MHS_FDC)
            that.windturbineList.push(res.data.fjmap[1]) //牛首山
            that.windturbineList.push(res.data.fjmap[4]) //香山
            that.windturbineList.push(res.data.fjmap[3]) //石板泉
            that.windturbineList.push(res.data.fjmap[2]) //青山
            that.windturbineList.push(res.data.fjmap[0]) //麻黄山
          }
        },
      });
    },
    // 跳转按钮
    onClickJump(item){
      console.warn(item);
       this.$router.push({
        path: `/health/health0/${item.wpId}/${item.wtId}`
      });
    }
  }
};
</script>

<style lang="less">
.health-5 {
  .health-matrix {
    height: calc(100vh - 7vh);

    .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: 0.741vh;
              height: 0.741vh;
              margin-right: 0.741vh;

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

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