bonus-ui/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue

<template>
  <div class="table-style">
    <div class="title-tip">
      <div class="small_title">工程在用装备情况</div>
      <div class="more more-warp">
        <!-- <div>
          <el-select
            v-model="proCodeList"
            placeholder=""
            clearable
            multiple
            collapse-tags
            filterable
            size="mini"
            :popper-append-to-body="false"
            @change="changeProCode"
            style="width: 180px"
          >
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <div style="margin-left: 50px" @click="openDialog">更多 ></div>
      </div>
    </div>

    <div>
      <div class="topView">
        <div
          style="
            width: 25%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
          "
        >
          <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">线路</div>
          <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
          <div :class="tabIndex == 1 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(1)">电缆</div>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0" style="width: 170px">
              <div style="display: flex; text-align: center">
                <img src="../../img/icon3.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
                  <div class="num-y" style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" :offset="0" style="width: 190px">
              <div style="display: flex; text-align: center">
                <img src="../../img/icon1.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">在用装备数（台）</div>
                  <div class="num-y" style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="table-list scroll-container">
      <table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
        <!-- 双层表头 -->
        <thead>
          <!-- 第一行：跨列合并 -->
          <tr>
            <th>排名</th>
            <th>工程名称</th>
            <th>在用装备数（台）</th>
            <th>规模（拆单公里）</th>
            <!-- <th>百公里线路装备使用情况</th> -->
          </tr>
        </thead>

        <!-- 表体：使用 v-for 渲染数据 -->
        <tbody>
          <tr v-for="(row, index) in tableData" :key="index">
            <td class="index-num num" style="width: 60px">{{ index + 1 }}</td>
            <td style="width: 200px">{{ row.projectName }}</td>
            <td class="num" style="width: 120px">{{ row.inUser }}</td>
            <td class="num">{{ row.scale }}</td>
            <!-- <td class="num">{{ row.usage }}</td> -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'

export default {
  data() {
    return {
      proCodeList: [],
      proCode: '',
      options: [],
      proNum: 0,
      equipNum: 0,
      tabIndex: 0,
      tableData: [
        {
          projectName: '埇桥-萧砀|回500千伏线路工程',
          inUser: '82',
          scale: '172',
        },
        {
          projectName: '石岗-施桥110kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '换流站-金牛500kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '汤庄-平圩500kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
        {
          projectName: '魏武-木兰n入祝集变电站220kV线路工程',
          inUser: '18',
          scale: '55.6',
        },
      ],
    }
  },
  created() {
    // this.getProList()
    // this.getList()
  },
  methods: {
    changTab(type) {
      this.tabIndex = type
      this.getList()
    },
    async getList() {
      try {
        const params = {
          type: this.tabIndex,
          proCode: this.proCode,
        }
        const res = await getEquipmentUseApi(params)
        this.tableData = res.data.equipmentUse || []
        this.proNum = res.data.proNum || 0
        this.equipNum = res.data.equipmentNum || 0
      } catch (error) {}
    },
    async getProList() {
      try {
        const res = await getVoltageLevelApi()
        this.options = res.data
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    changeProCode(val) {
      this.proCode = val.length > 0 ? val.join(',') : ''
      this.getList()
    },
    openDialog() {
      this.$emit('openDialog')
    },
  },
}
</script>

<style lang="scss" scoped>
.table-style {
  height: 350px;
}
.scroll-container {
  width: 100%;
  overflow: auto;

  /* 隐藏滚动条轨迹 */
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width: none; /* Firefox */
}

/* Chrome / Safari */
.scroll-container::-webkit-scrollbar {
  width: 0; /* 或者直接隐藏 */
  height: 0;
  background: transparent; /* 背景透明 */
}

.num {
  font-size: 20px;
  font-weight: 800;
  font-family: 'DIN';
}
.num-y {
  margin-left: 20px;
  font-weight: 800;
  font-family: 'DIN';
  background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.index-num {
  background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title-tip {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 45px;
  font-family: DS-TITLE;
  .title-text {
    background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .more {
    margin-right: 20px;
    color: #5b99ad;
    cursor: pointer;
    font-weight: 400;
    font-family: '';
    font-size: 12px;
    /* 清除背景渐变相关属性 */
    background: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #5b99ad;
  }

  .small_title {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .more-warp {
    display: flex;
    align-items: center;
  }

}
.table-list {
  margin-top: -20px;
  height: 238px;
  overflow: auto;
}
.topView {
  width: 100%;
  height: 16%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fs-24 {
  margin-top: 10px;
  font-size: 15px;
  padding: 5px;
  cursor: pointer;
}
.topTab1 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab11.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab2 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab21.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab3 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../img/tab31.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active1 {
  background-image: url('../../img/tab12.png');
}
.active2 {
  background-image: url('../../img/tab22.png');
}
.active3 {
  background-image: url('../../img/tab32.png');
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Alibaba-PuHuiTi-Regular';
  font-size: 11px;
}

th,
td {
  padding: 10px;
  text-align: center;
}

th {
  font-weight: bold;
}
// 第一行背景
thead {
  background-image: url('../../img/tableHeader.png');
  background-size: 100% 100%;
  color: #7bbbf8;
}

tbody tr {
  background-image: url('../../img/tableTr.png');
  background-size: 100% 100%;
}

tbody tr:hover {
  background-image: url('../../img/table-hover.png');
  cursor: pointer;
}

::v-deep .el-select .el-input__inner {
  background-color: #0a3362 !important ;
  color: #0c1837 !important;
}
::v-deep .el-select-dropdown {
  background-color: #0a3362 !important;
  /* left: -300px !important;
  width: 400px !important;
  height: 180px !important;
  border: 1px solid #0c1837 !important;
  overflow: hidden; */
}
::v-deep .el-scrollbar {
  /* height: 184px !important; */
  background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
  color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #0c1837 !important;
}
::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background: #0c1837 !important;
}
::v-deep .el-select__tags {
  flex-wrap: nowrap !important;
}
::v-deep .el-select__tags .el-tag {
  background-color: #28406c !important;
  color: #0c1837 !important; // 标签内文字颜色设置为 #0c1837
}

::v-deep .el-select__tags .el-tag__close {
  color: #0c1837 !important; // 标签关闭按钮颜色也设置为 #0c1837
}
</style>