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

<template>
  <div class="table-style">
    <div class="title-tip">
      <div class="title-text">工程在用装备情况</div>
      <div class="more more-warp">
        <div>
          <el-select v-model="select" placeholder="" multiple clearable filterable size="mini" @change="">
            <el-option v-for="item in options" :key="item.value" :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">
          <div :class="tabIndex == 1 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(1)">线路</div>
          <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
          <div :class="tabIndex == 3 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(3)">电缆</div>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0" style="width: 200px">
              <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 style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" :offset="0" style="width: 220px">
              <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 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 style="width: 60px">{{ index + 1 }}</td>
            <td style="width: 200px">{{ row.projectName }}</td>
            <td style="width: 120px">{{ row.inUser }}</td>
            <td>{{ row.scale }}</td>
            <td>{{ row.usage }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getEquipmentUseApi } from '@/api/wsScreen'

export default {
  data() {
    return {
      select: null,
      options: [],
      proNum: 10,
      equipNum: 233,
      tabIndex: 1,
      tableData: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changTab(type) {
      this.tabIndex = type
      this.getList()
    },
    async getList() {
      try {
        const res = await getEquipmentUseApi({ type: this.tabIndex })
        this.tableData = res.data || []
      } catch (error) {}
    },
    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; /* 背景透明 */
}
.title-tip {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 45px;
  font-family: DS-TITLE;
  .title-text {
    background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .more {
    margin-right: 20px;
    color: #5fbbdb;
    cursor: pointer;
    font-weight: 600;
    font-family: '';
  }

  .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: Arial, sans-serif;
  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%;
}

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: #1f4a85 !important ;
  color: #fff !important;
}
</style>