国网大屏

src/views/screen/gwScreen/components/left/AllEquip.vue

@@ -476,6 +476,41 @@ export default {
 ::v-deep .el-dialog__header {
   display: none;
 }
+::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-input__inner {
   background: rgba(3, 16, 44, 0.5) !important;
@@ -535,6 +570,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 +629,27 @@ 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>

src/views/screen/gwScreen/components/left/EquipItem.vue

@@ -128,6 +128,7 @@ export default {
   background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  font-family: 'DIN';
 }
 .content {
   display: flex;

src/views/screen/gwScreen/components/left/EquipStatusMore.vue

@@ -4,7 +4,7 @@
       v-if="dialogVisible"
       v-loading="isLoading"
       :visible.sync="dialogVisible"
-      width="65%"
+      width="85%"
       :modal="false"
       class="dlg-box"
     >
@@ -16,7 +16,13 @@
         <!-- 表单 -->
         <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
+              style="width: 240px"
+              :popper-append-to-body="false"
+            >
               <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -38,7 +44,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :height="600"
+          :height="510"
           class="table-container"
         >
           <el-table-column
@@ -191,6 +197,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;
 }
@@ -301,4 +342,19 @@ export default {
     font-weight: 800;
   }
 }
+::v-deep .el-select-dropdown {
+  background-color: #0C1837 !important;
+  border: 1px solid #0C1837 !important;
+  overflow: hidden;
+}
+::v-deep .el-scrollbar {
+  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;
+}
 </style>

src/views/screen/gwScreen/components/left/TotalPriceMore.vue

@@ -4,7 +4,7 @@
       v-if="dialogVisible"
       v-loading="isLoading"
       :visible.sync="dialogVisible"
-      width="36%"
+      width="45%"
       :modal="false"
       class="dlg-box"
     >
@@ -13,7 +13,7 @@
         <i class="close-btn" @click="dialogVisible = false" />
         <div class="dlg-title">总价值</div>
 
-        <div ref="category" style="height: 300px"></div>
+        <div ref="category" style="height: 600px"></div>
       </div>
     </el-dialog>
   </div>
@@ -110,6 +110,7 @@ export default {
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/right-dialog.png');
   background-size: 100% 100%;
+  height: 800px;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

src/views/screen/gwScreen/components/left/UnitEquipConfig.vue

@@ -4,14 +4,33 @@
       v-if="dialogVisible"
       v-loading="isLoading"
       :visible.sync="dialogVisible"
-      width="45%"
+      width="65%"
       :modal="false"
       class="dlg-box"
     >
       <div>
         <!-- 自定义title -->
         <i class="close-btn" @click="dialogVisible = false" />
-        <div class="dlg-title">单位装备配置</div>
+        <div class="dlg-title">装备状态</div>
+
+        <!-- 表单 -->
+        <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 :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>
+
+          <!-- 表单按钮 -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+            <el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+        </el-row>
 
         <el-table
           v-loading="isLoading"
@@ -37,48 +56,90 @@
             :prop="column.prop"
             align="center"
           >
-            <template v-slot="{ row }" v-if="column.prop === 'price'">
+            <template v-slot="{ row }" v-if="column.prop == 'status'">
-              <span>{{ row.price ? (row.price / 100000000).toFixed(4) : 0 }}</span>
+              <span v-if="row.status == 1">在库</span>
+              <span v-if="row.status == 2">自用</span>
+              <span v-if="row.status == 3">共享</span>
+              <span v-if="row.status == 4">退役</span>
+              <span v-if="row.status == 5">维修</span>
+            </template>
+            <template v-slot="{ row }" v-else-if="/^feature(Item|Value)\d+$/.test(column.prop)">
+              <span>
+                {{ getFeatureValue(row, column.prop) }}
+              </span>
             </template>
           </el-table-column>
         </el-table>
 
         <!-- 分页 -->
-        <!-- <pagination
+        <pagination
-          v-show="true"
+          v-show="total > 0"
-          :total="88"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
-        /> -->
+        />
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getStatByTypeAndAgeByConfigurationApi } from '@/api/wsScreen'
+import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
-
 export default {
   data() {
     return {
       isLoading: false,
       dialogVisible: false,
+      showSearch: true,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        status: '', // 状态
       },
+      equipList: [
+        { label: '全网省', value: 1 },
+        { label: '合肥市', value: 2 },
+      ],
+      statusList: [
+        { label: '在库', value: 1 },
+        { label: '自用', value: 2 },
+        { label: '共享', value: 3 },
+        { label: '退役', value: 4 },
+        { label: '维修', value: 5 },
+      ],
+
       tableColumns: [
-        { label: '单位名称', prop: 'name' },
+        { label: '施工装备', prop: 'major' },
-        { label: '装备价值（亿元）', prop: 'price' },
+        { label: '型号', prop: 'specificationModel' },
-        { label: '装备数量', prop: 'count' },
+        { label: '数量', prop: 'count' },
-        { label: '线路数量（台）', prop: 'lineCount' },
+        { label: '设备编码', prop: 'code' },
-        { label: '变电数量（台）', prop: 'substationCount' },
+        { label: '特征项1', prop: 'featureItem1' },
-        { label: '电缆数量（台）', prop: 'cableCount' },
+        { label: '特征值1', prop: 'featureValue1' },
-        { label: '配置率', prop: 'configRate' },
+        { label: '特征项1', prop: 'featureItem2' },
-        { label: '线路配置率', prop: 'lineConfigRate' },
+        { label: '特征值2', prop: 'featureValue2' },
-        { label: '变电配置率', prop: 'subStationConfigRate' },
+        { label: '特征项2', prop: 'featureItem3' },
-        { label: '电缆配置率', prop: 'cableConfigRate' },
+        { label: '特征值3', prop: 'featureValue3' },
+        { label: '特征项4', prop: 'featureItem4' },
+        { label: '特征值4', prop: 'featureValue4' },
+        { label: '特征项5', prop: 'featureItem5' },
+        { label: '特征值5', prop: 'featureValue5' },
+        { label: '特征项6', prop: 'featureItem6' },
+        { label: '特征值6', prop: 'featureValue6' },
+        { label: '特征项7', prop: 'featureItem7' },
+        { label: '特征值7', prop: 'featureValue7' },
+        { label: '特征项8', prop: 'featureItem8' },
+        { label: '特征值8', prop: 'featureValue8' },
+        { label: '特征项9', prop: 'featureItem9' },
+        { label: '特征值9', prop: 'featureValue9' },
+        { label: '产权单位', prop: 'propertyUnit' },
+        { label: '资产原值（元）', prop: 'originalValue' },
+        { label: '出厂日期', prop: 'productionDate' },
+        { label: '使用项目', prop: 'usingProject' },
+        // { label: 'vlook的状态', prop: 'vlookStatus' },
+        { label: '状态', prop: 'status' },
+        { label: '下次维保日期', prop: 'nextMaintenanceDate' },
+        { label: '生产厂家', prop: 'manufacturer' },
       ],
       tableList: [],
       total: 0,
@@ -92,24 +153,85 @@ export default {
     },
     async getList() {
       try {
-        const res = await getStatByTypeAndAgeByConfigurationApi()
+        // 获取设备列表
-        console.log('🚀 ~ getList ~ res:', res)
+        const res = await getDeviceListAPI(this.queryParams)
-        this.tableList = res.data
+        this.tableList = res.data?.rows || []
+        this.total = res.data?.total || 0
       } catch (error) {
-        console.log('🚀 ~ getList ~ error:', error)
+        this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
+        console.error(error)
       }
     },
+    getFeatureValue(row, prop) {
+      const match = prop.match(/feature(Item|Value)(\d+)/)
+      if (!match) return '-'
+
+      const type = match[1] // 'Item' or 'Value'
+      const index = Number(match[2]) - 1
+      const list = row.propertyVoList || []
+
+      if (!list[index]) return '-'
+
+      return type === 'Item' ? list[index].propertyName : list[index].propertyValue
+    },
+    // 查询
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 重置
+    handleReset() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 10
+      this.getList()
+    },
   },
 }
 </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;
 }
 
 ::v-deep .el-dialog .el-dialog__body {
-  background-image: url('../../img/unit-config-dialog.png');
+  background-image: url('../../img/all-dialog.png');
   background-size: 100% 100%;
   color: #fff;
 }
@@ -175,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 {
@@ -193,9 +331,6 @@ export default {
 .table-container {
   color: #fff;
   background-color: #04112a80;
-  //#071934
-  /* background: url('../../img/tableTr.png') no-repeat center center;
-  background-size: 100% 100%; */
 }
 .dlg-box {
   position: absolute;

src/views/screen/gwScreen/components/left/UnitEquipmentConfig.vue

@@ -16,13 +16,13 @@
       <!-- 表体：使用 v-for 渲染数据 -->
       <tbody>
         <tr v-for="(row, index) in tableData" :key="index">
-          <td style="width: 60px">{{ index + 1 }}</td>
+          <td class="index-num num" style="width: 60px">{{ index + 1 }}</td>
           <td style="width: 180px">{{ row.deptName }}</td>
-          <td style="width: 110px">{{ row.totalValue }}</td>
+          <td class="num" style="width: 110px">{{ row.totalValue }}</td>
 
           <!-- 装备数量 -->
-          <td>{{ row.totalEquipmentQuantity }}</td>
+          <td class="num">{{ row.totalEquipmentQuantity }}</td>
-          <td>{{ row.lineNum }}</td>
+          <td class="num">{{ row.lineNum }}</td>
         </tr>
       </tbody>
     </table>
@@ -131,6 +131,26 @@ tbody tr:hover {
   background-image: url('../../img/table-hover.png');
   cursor: pointer;
 }
+.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;
+}
 .scroll-container {
   width: 100%;
   height: 100%;

src/views/screen/gwScreen/components/left/index.vue

@@ -3,26 +3,26 @@
     <div class="top-box">
       <div class="title-tip">
         <div>装备总览</div>
-        <div class="more" @click="">更多 ></div>
+        <div class="more" @click="handleEquipOverview">更多 ></div>
       </div>
       <div class="equip-box">
         <div class="equip-item-1">装备总数</div>
-        <div class="equip-item-2" @click="">{{ equipData.total }} <span class="unit">台</span></div>
+        <div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
         <div class="equip-item-3">总价值</div>
-        <div class="equip-item-4" @click="">
+        <div class="equip-item-4" @click="openTotalPrice">
           {{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span>
         </div>
       </div>
       <div class="item-box">
         <el-row :gutter="20">
           <el-col :span="8" :offset="0">
-            <EquipItem title="线路装备" :state="state1" :pieValues="list1" />
+            <EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)"/>
           </el-col>
           <el-col :span="8" :offset="0">
-            <EquipItem title="变电装备" :state="state2" :pieValues="list2" />
+            <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)"/>
           </el-col>
           <el-col :span="8" :offset="0">
-            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" />
+            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)"/>
           </el-col>
         </el-row>
       </div>
@@ -32,7 +32,7 @@
             <div class="bottom-left">
               <div class="title-tip">
                 <div class="tip-title">网省装备配置</div>
-                <div class="more" @click="">更多 ></div>
+                <div class="more" @click="openEquipConfig">更多 ></div>
               </div>
               <div class="bottom-list">
                 <UnitEquipmentConfig />
@@ -51,7 +51,7 @@
             <div class="bottom-right">
               <div class="title-tip">
                 <div class="tip-title">装备状态</div>
-                <div class="more" @click="">更多 ></div>
+                <div class="more" @click="openStatusMore">更多 ></div>
               </div>
               <div class="equip-status">
                 <EquipStatus />

src/views/screen/gwScreen/components/right/EquipUsageRate.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="title-tip">
-      <div>装备在用率统计</div>
+      <div class="small_title">装备在用率统计</div>
-      <div class="more" @click="">更多 ></div>
+      <div class="more" @click="openDialog">更多 ></div>
     </div>
     <!-- <div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
       <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">总体</div>
@@ -13,12 +13,12 @@
 
     <div class="item-list">
       <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
-        <div style="text-align: center; margin-top: 20px">{{ item.name || '-' }}</div>
+        <div style="text-align: center; margin-top: 20px;font-size: 14px;">{{ item.name || '-' }}</div>
-        <div style="margin: 112px 0 0 42px"
+        <div style="margin: 109px 0 0 42px"
-          ><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
+          ><span style="font-size: 12px; color: #ccc;font-weight: 300;">在用率</span> <span class="num">{{ item.proportion || 0 }} %</span></div
         >
         <div style="margin-left: 42px"
-          ><span style="font-size: 12px; color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
+          ><span style="font-size: 12px; color: #ccc;font-weight: 300;">周转率</span> <span class="num" >{{ item.turnoverRate || 0 }}</span> <span style="font-size: 12px;font-weight: 300;">次/年</span></div
         >
       </div>
     </div>
@@ -37,43 +37,17 @@ export default {
   data() {
     return {
       tabIndex: 0,
-      tableList: [
+      tableList: [],
-        {
-          name: '张力机',
-          proportion: 64.58,
-          turnoverRate: 4.08,
-        },
-        {
-          name: '牵引机',
-          proportion: 53.13,
-          turnoverRate: 4.3,
-        },
-        {
-          name: '抱杆',
-          proportion: 46.88,
-          turnoverRate: 2.83,
-        },
-        {
-          name: '滤油机',
-          proportion: 17.71,
-          turnoverRate: 2.66,
-        },
-        {
-          name: '电缆输送机',
-          proportion: 13.54,
-          turnoverRate: 2.51,
-        },
-      ],
     }
   },
   created() {
-    // this.getInfo()
+    this.getInfo()
   },
   methods: {
     changTab(type) {
       console.log('🚀 ~ changTab ~ type:', type)
       this.tabIndex = type
-      // this.getInfo()
+      this.getInfo()
     },
     async getInfo() {
       try {
@@ -120,12 +94,33 @@ export default {
 
   .more {
     margin-right: 20px;
-    color: #5fbbdb;
+    color: #5b99ad;
     cursor: pointer;
-    font-weight: 600;
+    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;
   }      
 }
+.num {
+  font-size: 14px;
+  font-family: 'DIN';
+}
+
 .topView {
   width: 100%;
   height: 16%;
@@ -183,7 +178,7 @@ export default {
 }
 
 .item-list {
-  margin-top: 30px;
+  margin-top: 15px;
   display: flex;
   align-items: center;
   /* justify-content: space-between; */

src/views/screen/gwScreen/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;
 }
@@ -103,6 +138,7 @@ export default {
   background-image: url('../../img/right-dialog.png');
   background-size: 100% 100%;
   color: #fff;
+  height: 850px;
 }
 ::v-deep .el-dialog__header {
   display: none;

src/views/screen/gwScreen/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;
 }
@@ -131,6 +166,7 @@ export default {
   background-image: url('../../img/right-dialog.png');
   background-size: 100% 100%;
   color: #fff;
+  height: 850px;
 }
 ::v-deep .el-dialog__header {
   display: none;

src/views/screen/gwScreen/components/right/ProEquipSituationList.vue

@@ -1,41 +1,61 @@
 <template>
   <div class="table-style">
     <div class="title-tip">
-      <div class="title-text">工程在用装备情况</div>
+      <div class="small_title">工程在用装备情况</div>
       <div class="more more-warp">
         <!-- <div>
-          <el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList">
+          <el-select
-            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
+            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="">更多 ></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
+          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: 200px">
+            <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 style="font-size: 16px; font-weight: 800">{{ 7695 }}</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: 220px">
+            <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 style="font-size: 16px; font-weight: 800">{{ 37746 }}</div>
+                  <div class="num-y" style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
                 </div>
               </div>
             </el-col>
@@ -61,11 +81,11 @@
         <!-- 表体：使用 v-for 渲染数据 -->
         <tbody>
           <tr v-for="(row, index) in tableData" :key="index">
-            <td style="width: 60px">{{ index + 1 }}</td>
+            <td class="index-num num" style="width: 60px">{{ index + 1 }}</td>
             <td style="width: 200px">{{ row.projectName }}</td>
-            <td style="width: 120px">{{ row.inUser }}</td>
+            <td class="num" style="width: 120px">{{ row.inUser }}</td>
-            <td>{{ row.scale }}</td>
+            <td class="num">{{ row.scale }}</td>
-            <!-- <td>{{ row.usage }}</td> -->
+            <!-- <td class="num">{{ row.usage }}</td> -->
           </tr>
         </tbody>
       </table>
@@ -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,
@@ -137,12 +158,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')
     },
@@ -169,6 +194,28 @@ export default {
   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;
@@ -176,7 +223,7 @@ export default {
   padding-left: 45px;
   font-family: DS-TITLE;
   .title-text {
-    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;
@@ -184,16 +231,33 @@ export default {
 
   .more {
     margin-right: 20px;
-    color: #5fbbdb;
+    color: #5b99ad;
     cursor: pointer;
-    font-weight: 600;
+    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;
@@ -267,11 +331,6 @@ th,
 td {
   padding: 10px;
   text-align: center;
-  white-space: nowrap;
-  /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
-  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
 }
 
 th {
@@ -281,6 +340,7 @@ th {
 thead {
   background-image: url('../../img/tableHeader.png');
   background-size: 100% 100%;
+  color: #7bbbf8;
 }
 
 tbody tr {
@@ -294,7 +354,40 @@ tbody tr:hover {
 }
 
 ::v-deep .el-select .el-input__inner {
-  background-color: #0C1837 !important ;
+  background-color: #0a3362 !important ;
-  color: #fff !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>

src/views/screen/gwScreen/components/right/UsageRateMore.vue

@@ -11,7 +11,7 @@
       <div>
         <!-- 自定义title -->
         <i class="close-btn" @click="dialogVisible = false" />
-        <div class="dlg-title">各单位装备在用率情况</div>
+        <div class="dlg-title">各网省装备在用率情况</div>
 
         <el-table
           v-loading="isLoading"
@@ -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;
 }
@@ -115,6 +150,7 @@ export default {
   background-image: url('../../img/right-dialog.png');
   background-size: 100% 100%;
   color: #fff;
+  height: 850px;
 }
 ::v-deep .el-dialog__header {
   display: none;

src/views/screen/gwScreen/components/right/UsageRateSituationList.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="table-style">
     <div class="title-tip">
-      <div>各网省装备在用率情况</div>
+      <div class="small_title">各网省装备在用率情况</div>
-      <div class="more" @click="">更多 ></div>
+      <div class="more" @click="openDialog">更多 ></div>
     </div>
 
     <div class="table-list scroll-container">
@@ -21,10 +21,12 @@
         <!-- 表体：使用 v-for 渲染数据 -->
         <tbody>
           <tr v-for="(row, index) in tableData" :key="index">
-            <td style="width: 60px">{{ index + 1 }}</td>
+            <td class="num index-num" style="width: 50px">{{ index + 1 }}</td>
             <td style="width: 200px">{{ row.name }}</td>
-            <td>{{ row.proportion }} %</td>
+            <td class="num">{{ row.proportion }} %</td>
-            <td>{{ row.turnoverRate }} 次/年</td>
+            <td>
+              <span class="num">{{ row.turnoverRate }}</span> <span style="font-size: 14px">次/年</span></td
+            >
           </tr>
         </tbody>
       </table>
@@ -91,6 +93,18 @@ export default {
 .table-style {
   height: 350px;
 }
+.num {
+  font-size: 20px;
+  font-weight: 800;
+  font-family: 'DIN';
+}
+.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;
@@ -103,11 +117,29 @@ export default {
 
   .more {
     margin-right: 20px;
-    color: #5fbbdb;
+      color: #5b99ad;
       cursor: pointer;
-    font-weight: 600;
+      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;
+  } 
+
+
 }
 .table-list {
   margin-top: 20px;
@@ -126,11 +158,7 @@ td {
   padding: 10px;
   text-align: center;
   white-space: nowrap;
-  /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
+  // border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
-  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  line-height: 22px;
 }
 
 th {
@@ -141,6 +169,7 @@ th {
 thead {
   background-image: url('../../img/tableHeader.png');
   background-size: 100% 100%;
+  color: #7BBBF8;
 }
 
 tbody tr {

src/views/screen/gwScreen/components/right/index.vue

@@ -2,7 +2,7 @@
   <div class="right-warp">
     <div class="top-box">
       <div class="title-tip">
-        <div>项目装备</div>
+        <div class="small_title">项目装备</div>
         <div class="more">更多 ></div>
       </div>
       <div class="equipment-list">
@@ -21,18 +21,18 @@
       </div>
       <div class="top-bottom">
         <div class="usage-rate">
-          <div class="usage-rate-item" @click="">
+          <div class="usage-rate-item" @click="openDialogEquip(1)">
             <img src="../../img/usage-rate.png" alt="" />
             <div style="margin: 0 10px">在用率</div>
             <div style="width: 250px">
-              <SegmentProgress :value="51" :total="20" />
+              <SegmentProgress :value="proportion" :total="20" />
             </div>
           </div>
         </div>
         <div class="turnround-rate">
-          <div class="turnround-rate-title" @click="">
+          <div class="turnround-rate-title" @click="openDialogEquip(2)">
-            <span style="color: #ccc; font-size: 15px">周转率 </span>
+            <span style="color: #ccc; font-size: 15px;margin-right: 10px;font-weight: 500;">周转率 </span>
-            {{ 2.41 }}
+            {{ turnoverRate }}
             <span class="unit"> 次/年</span></div
           >
         </div>
@@ -42,12 +42,12 @@
       <el-row :gutter="20">
         <el-col :span="10" :offset="0">
           <div class="usage-rate-situation">
-            <UsageRateSituationList />
+            <UsageRateSituationList @openDialog="openDialog" />
           </div>
         </el-col>
         <el-col :span="14" :offset="0">
           <div class="usage-rate-pro">
-            <ProEquipSituationList />
+            <ProEquipSituationList @openDialog="openDialogPro" />
           </div>
         </el-col>
       </el-row>
@@ -96,7 +96,7 @@ export default {
     }
   },
   created() {
-    // this.getInfo()
+    this.getInfo()
   },
   methods: {
     async getInfo() {
@@ -141,10 +141,26 @@ export default {
 
     .more {
       margin-right: 20px;
-      color: #5fbbdb;
+      color: #5b99ad;
       cursor: pointer;
-      font-weight: 600;
+      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;
     }    
   }
   .top-box {
@@ -199,8 +215,12 @@ export default {
         -webkit-text-fill-color: transparent;
       }
       .unit {
-        font-size: 12px;
+        font-size: 14px;
-        color: #878585;
+        font-weight: 300;
+        background: linear-gradient(180deg, #fff 25.81%, #FFF 77.42%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
     }
     .equip-item1 {