From a83740afac15af76ae7faf4dd9373df90a3590c4 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Tue, 25 Nov 2025 16:58:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/wsScreen/index.js                     |   9 ++
 .../components/engineerUsing/index.vue        |  16 +--
 .../components/engineerUsing/index.vue        |  15 +--
 .../right/ProEquipSituationList.vue           |  40 ++++---
 .../components/center/index.vue               |   2 +-
 .../components/left/AllEquip.vue              | 106 +++++++++++++++++-
 .../components/left/EquipStatusMore.vue       |  53 ++++++++-
 .../components/left/UnitEquipConfig.vue       |  35 ++++++
 .../components/right/EquipUsageRateMore.vue   |  35 ++++++
 .../components/right/ProEquipMore.vue         |  35 ++++++
 .../right/ProEquipSituationList.vue           |  83 +++++++++++---
 .../components/right/UsageRateMore.vue        |  35 ++++++
 12 files changed, 414 insertions(+), 50 deletions(-)

diff --git a/src/api/wsScreen/index.js b/src/api/wsScreen/index.js
index 97498e02..31a596a9 100644
--- a/src/api/wsScreen/index.js
+++ b/src/api/wsScreen/index.js
@@ -198,4 +198,13 @@ export const getEquipmentDetailsApi = (data = {}) => {
     method: 'get',
     params: data,
   })
+}
+
+// 电压等级
+export const getVoltageLevelApi = (data = {}) => {
+  return request({
+    url: '/material-mall/decChange/getVoltageLevel',
+    method: 'post',
+    data: data,
+  })
 }
\ No newline at end of file
diff --git a/src/views/screen/cityScreen-old/components/engineerUsing/index.vue b/src/views/screen/cityScreen-old/components/engineerUsing/index.vue
index 9aa39b57..72b8cb15 100644
--- a/src/views/screen/cityScreen-old/components/engineerUsing/index.vue
+++ b/src/views/screen/cityScreen-old/components/engineerUsing/index.vue
@@ -83,6 +83,7 @@
 
 <script> 
 import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen"; 
+import { getUsageStatisticsApi } from '@/api/wsScreen'
 
 export default {
     data() {
@@ -130,13 +131,14 @@ export default {
                 console.log(response,'getVoltageLevelApi')
                 if(response.code==200){
                     if(response.data&&response.data.length>0){
-                        response.data.forEach(item=>{
-                            let obj = {
-                                label:item.voltage+'kV',
-                                value:item.voltage
-                            }
-                            this.options.push(obj)
-                        })
+                        // response.data.forEach(item=>{
+                        //     let obj = {
+                        //         label:item.voltage+'kV',
+                        //         value:item.voltage
+                        //     }
+                        //     this.options.push(obj)
+                        // })
+                        this.options = response.data
                         // this.$set(this,'selectId',response.data[0].voltage)
                     }
                 }
diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue
index 0c1bf7f2..10b90bda 100644
--- a/src/views/screen/cityScreen/components/engineerUsing/index.vue
+++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue
@@ -134,13 +134,14 @@ export default {
         console.log(response, 'getVoltageLevelApi')
         if (response.code == 200) {
           if (response.data && response.data.length > 0) {
-            response.data.forEach((item) => {
-              let obj = {
-                label: item.voltage + 'kV',
-                value: item.voltage
-              }
-              this.options.push(obj)
-            })
+            // response.data.forEach((item) => {
+            //   let obj = {
+            //     label: item.voltage + 'kV',
+            //     value: item.voltage
+            //   }
+            //   this.options.push(obj)
+            // })
+            this.options = response.data
             // this.$set(this,'selectId',response.data[0].voltage)
           }
         }
diff --git a/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue b/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
index 6323807d..71c33062 100644
--- a/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
+++ b/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
@@ -5,16 +5,18 @@
       <div class="more more-warp">
         <div>
           <el-select
-            v-model="proCode"
+            v-model="proCodeList"
             placeholder=""
             clearable
+            multiple
+            collapse-tags
             filterable
             size="mini"
             :popper-append-to-body="false"
-            @change="getList"
-            style="width: 120px"
+            @change="changeProCode"
+            style="width: 130px"
           >
-            <el-option v-for="(item, index) in options" :key="index" :label="item.proName" :value="item.proCode" />
+            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
           </el-select>
         </div>
         <!-- <div style="margin-left: 15px" @click="openDialog">更多 ></div> -->
@@ -83,12 +85,13 @@
 </template>
 
 <script>
-import { getEquipmentUseApi } from '@/api/wsScreen'
+import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
 import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
 
 export default {
   data() {
     return {
+      proCodeList: [],
       proCode: '',
       options: [],
       proNum: 0,
@@ -123,12 +126,16 @@ export default {
     },
     async getProList() {
       try {
-        const res = await getUseProjectListAPI()
+        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')
     },
@@ -303,7 +310,7 @@ thead {
   background-image: url('../../img/tableHeader.png');
   background-size: 100% 100%;
   font-size: 13px;
-  color: #7BBBF8;
+  color: #7bbbf8;
 }
 
 tbody tr {
@@ -317,25 +324,32 @@ tbody tr:hover {
 }
 
 ::v-deep .el-select .el-input__inner {
-  background-color: #0C1837 !important ;
+  background-color: #0c1837 !important ;
   color: #fff !important;
 }
 ::v-deep .el-select-dropdown {
-  background-color: #0C1837 !important;
-  left: -300px !important;
-  width: 400px !important;
+  background-color: #0c1837 !important;
+  /* left: -300px !important;
+  width: 400px !important; */
   height: 180px !important;
-  border: 1px solid #0C1837 !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: #fff !important;
 }
 ::v-deep .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
-  background: #0C1837 !important;
+  background: #0c1837 !important;
+}
+::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  background: #28406c !important;
+}
+::v-deep .el-select__tags {
+  flex-wrap: nowrap !important;
 }
 </style>
diff --git a/src/views/screen/wsScreenWidescreen/components/center/index.vue b/src/views/screen/wsScreenWidescreen/components/center/index.vue
index 00fbc8bf..15c5786a 100644
--- a/src/views/screen/wsScreenWidescreen/components/center/index.vue
+++ b/src/views/screen/wsScreenWidescreen/components/center/index.vue
@@ -419,7 +419,7 @@ export default {
 
           console.log('🚀 ~ initChart ~ this.$router:', this.$router)
           this.$router.push({
-            path: '/screen/cityScreen',
+            path: '/screen/cityWidescreen',
             query: {
               cityName: city,
             },
diff --git a/src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue b/src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue
index a49016cd..777c1d5e 100644
--- a/src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue
+++ b/src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue
@@ -28,6 +28,7 @@
               v-model="queryParams.deptName"
               placeholder="请选择"
               clearable
+              :popper-append-to-body="false"
               style="width: 240px"
               @change="changeDept"
             >
@@ -35,7 +36,13 @@
             </el-select>
           </el-form-item>
           <el-form-item label="产权单位" prop="propertyUnit">
-            <el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.propertyUnit"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option
                 v-for="item in companyNameList"
                 :key="item.deptId"
@@ -49,6 +56,7 @@
               v-model="queryParams.major"
               placeholder="请选择"
               clearable
+              :popper-append-to-body="false"
               style="width: 240px"
               @change="changeProType"
             >
@@ -57,6 +65,7 @@
           </el-form-item>
           <el-form-item label="装备类目" prop="deviceSeries">
             <el-cascader
+              popper-class="my-cas"
               v-model="deviceSeries"
               :options="deviceSeriesList"
               clearable
@@ -77,12 +86,24 @@
             <el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
           <el-form-item label="装备状态" prop="changeStatus">
-            <el-select v-model="queryParams.changeStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.changeStatus"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="所在项目" prop="onProject">
-            <el-select v-model="queryParams.onProject" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.onProject"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option
                 v-for="item in onProjectList"
                 :key="item.proCode"
@@ -99,6 +120,7 @@
           </el-form-item>
           <el-form-item label="出厂日期" prop="productionDate">
             <el-date-picker
+              popper-class="my-date"
               v-model="queryParams.productionDate"
               type="date"
               placeholder="请选择"
@@ -109,7 +131,13 @@
             />
           </el-form-item>
           <el-form-item label="使用年限" prop="maxServiceLifeYears">
-            <el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.maxServiceLifeYears"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -118,6 +146,7 @@
           </el-form-item>
           <el-form-item label="下次检测日期" prop="nextMaintenanceDate">
             <el-date-picker
+              popper-class="my-date"
               v-model="queryParams.nextMaintenanceDate"
               type="date"
               placeholder="请选择"
@@ -464,6 +493,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
@@ -535,6 +599,22 @@ export default {
 ::v-deep .el-pagination.is-background .btn-next {
   background-color: rgba(16, 37, 81, 0.5);
 }
+::v-deep .el-select-dropdown {
+  background-color: #0c1837 !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: #fff !important;
+}
+::v-deep .el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #0c1837 !important;
+}
 
 // --
 .btn {
@@ -578,3 +658,21 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.my-cas {
+  background-color: #0c1837 !important;
+}
+.my-cas .el-cascader-menu {
+  color: #fff !important;
+}
+.my-cas .el-cascader-node:not(.is-disabled):hover,
+.el-cascader-node:not(.is-disabled):focus {
+  background-color: #0c1837 !important;
+}
+.my-date {
+  background-color: #0c1837 !important;
+}
+.my-date .el-picker-panel {
+  color: #fff !important;
+}
+</style>
diff --git a/src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue b/src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue
index bc09ad97..68d4b32f 100644
--- a/src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue
+++ b/src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue
@@ -16,7 +16,7 @@
         <!-- 表单 -->
         <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
           <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
+            <el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
               <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -191,6 +191,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
@@ -262,6 +297,22 @@ export default {
 ::v-deep .el-pagination.is-background .btn-next {
   background-color: rgba(16, 37, 81, 0.5);
 }
+::v-deep .el-select-dropdown {
+  background-color: #0c1837 !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: #fff !important;
+}
+::v-deep .el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #0c1837 !important;
+}
 
 // --
 .btn {
diff --git a/src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue b/src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue
index ad882641..93dfc755 100644
--- a/src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue
+++ b/src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue
@@ -104,6 +104,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
diff --git a/src/views/screen/wsScreenWidescreen/components/right/EquipUsageRateMore.vue b/src/views/screen/wsScreenWidescreen/components/right/EquipUsageRateMore.vue
index 16240929..0e9d8493 100644
--- a/src/views/screen/wsScreenWidescreen/components/right/EquipUsageRateMore.vue
+++ b/src/views/screen/wsScreenWidescreen/components/right/EquipUsageRateMore.vue
@@ -95,6 +95,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
diff --git a/src/views/screen/wsScreenWidescreen/components/right/ProEquipMore.vue b/src/views/screen/wsScreenWidescreen/components/right/ProEquipMore.vue
index fff3a297..63e6c286 100644
--- a/src/views/screen/wsScreenWidescreen/components/right/ProEquipMore.vue
+++ b/src/views/screen/wsScreenWidescreen/components/right/ProEquipMore.vue
@@ -123,6 +123,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
diff --git a/src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue b/src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
index 11258ea7..031fb613 100644
--- a/src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
+++ b/src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
@@ -4,8 +4,19 @@
       <div class="small_title">工程在用装备情况</div>
       <div class="more more-warp">
         <div>
-          <el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList">
-            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
+          <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>
@@ -14,7 +25,16 @@
 
     <div>
       <div class="topView">
-        <div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between;margin-bottom:20px">
+        <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>
@@ -22,10 +42,10 @@
         <div>
           <el-row :gutter="20">
             <el-col :span="12" :offset="0" style="width: 170px">
-              <div style="display: flex; text-align: center;">
+              <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="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
                   <div class="num-y" style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
                 </div>
               </div>
@@ -74,12 +94,13 @@
 </template>
 
 <script>
-import { getEquipmentUseApi } from '@/api/wsScreen'
+import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
 import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
 
 export default {
   data() {
     return {
+      proCodeList: [],
       proCode: '',
       options: [],
       proNum: 0,
@@ -101,7 +122,7 @@ export default {
       try {
         const params = {
           type: this.tabIndex,
-          proCode: this.proCode
+          proCode: this.proCode,
         }
         const res = await getEquipmentUseApi(params)
         this.tableData = res.data.equipmentUse || []
@@ -111,12 +132,16 @@ export default {
     },
     async getProList() {
       try {
-        const res = await getUseProjectListAPI()
+        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')
     },
@@ -172,10 +197,10 @@ export default {
   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;
+    background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .more {
@@ -196,11 +221,11 @@ export default {
     margin-left: 10px;
     font-size: 20px;
     font-weight: 500;
-    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
+    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;
@@ -279,7 +304,6 @@ th,
 td {
   padding: 10px;
   text-align: center;
-
 }
 
 th {
@@ -289,7 +313,7 @@ th {
 thead {
   background-image: url('../../img/tableHeader.png');
   background-size: 100% 100%;
-  color: #7BBBF8;
+  color: #7bbbf8;
 }
 
 tbody tr {
@@ -303,7 +327,32 @@ tbody tr:hover {
 }
 
 ::v-deep .el-select .el-input__inner {
-  background-color: #1f4a85 !important ;
+  background-color: #0c1837 !important ;
   color: #fff !important;
 }
+::v-deep .el-select-dropdown {
+  background-color: #0c1837 !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: #fff !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: #28406c !important;
+}
+::v-deep .el-select__tags {
+  flex-wrap: nowrap !important;
+}
 </style>
diff --git a/src/views/screen/wsScreenWidescreen/components/right/UsageRateMore.vue b/src/views/screen/wsScreenWidescreen/components/right/UsageRateMore.vue
index ed7e36f8..3af8f111 100644
--- a/src/views/screen/wsScreenWidescreen/components/right/UsageRateMore.vue
+++ b/src/views/screen/wsScreenWidescreen/components/right/UsageRateMore.vue
@@ -107,6 +107,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
+::v-deep .el-table td,
+::v-deep .el-table th.is-leaf {
+  border-bottom: none !important;
+}
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: transparent !important;
+}
+/* 隐藏表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+::v-deep .el-table__body-wrapper {
+  scrollbar-width: none !important; /* Firefox */
+  -ms-overflow-style: none !important; /* IE/Edge */
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }