大屏样式优化

src/utils/drawMixin.js

@@ -38,7 +38,7 @@ export default {
         // 调试模式，不缩放，居中显示
         // appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
         // appRef.style.overflow = 'visible'
-         return
+        // return
       }
       // 调试模式 - end
 

src/views/screen/wsScreen/components/center/index.vue

@@ -14,7 +14,11 @@
     </div>
 
     <!-- 点击城市显示详情 -->
-    <div v-if="selectedCity && btnIndex == 1" class="city-tooltip">
+    <div
+      v-if="selectedCity && btnIndex == 1"
+      class="city-tooltip"
+      :style="{ left: tooltipPos.x + 25 + 'px', top: tooltipPos.y + 25 + 'px' }"
+    >
       <div class="city-name">{{ selectedCity.cityName }}</div>
       <div
         >装备价值： <span class="num">{{ (selectedCity.totalValue / 100000000).toFixed(4) }}</span
@@ -57,6 +61,7 @@ export default {
       btnIndex: 1,
       myChart: null,
       selectedCity: null,
+      tooltipPos: { x: 0, y: 0 },
       cityData: [
         // 调试数据
         // {
@@ -202,6 +207,7 @@ export default {
               show: true,
               position: 'top', // 先指定一个基准位置（如 'top'）
               offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
+              triggerEvent: true,
               formatter: (params) => {
                 const val = params.data.value || []
                 let unit = ''
@@ -273,6 +279,12 @@ export default {
         //   city = this.cityData.find((c) => c.cityName === params.name)
         // }
         this.selectedCity = city || null
+        if (params.event) {
+          this.tooltipPos = {
+            x: params.event.offsetX,
+            y: params.event.offsetY,
+          }
+        }
       })
 
       // 鼠标移出时隐藏

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

@@ -157,7 +157,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -468,7 +468,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/all-dialog.png');
-  background-size: 100% auto;
+  background-size: 100% 100%;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

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

@@ -43,7 +43,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -158,7 +158,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/all-dialog.png');
-  background-size: 100% auto;
+  background-size: 100% 100%;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

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

@@ -19,7 +19,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -99,6 +99,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/unit-config-dialog.png');
+  background-size: 100% 100%;
   // 以宽度为准
   background-size: 100% auto;
   color: #fff;

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="scroll-container">
     <table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
       <!-- 双层表头 -->
       <thead>
@@ -113,4 +113,20 @@ tbody tr:hover {
   background-image: url('../../img/table-hover.png');
   cursor: pointer;
 }
+.scroll-container {
+  width: 100%;
+  height: 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; /* 背景透明 */
+}
 </style>

src/views/screen/wsScreen/components/right/EquipUsageRateMore.vue

@@ -19,7 +19,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -102,7 +102,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/right-dialog.png');
-  background-size: 100% auto;
+  background-size: 100% 100%;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

src/views/screen/wsScreen/components/right/ProEquipMore.vue

@@ -34,7 +34,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -124,7 +124,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/right-dialog.png');
-  background-size: 100% auto;
+  background-size: 100% 100%;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

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

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="table-list">
+    <div class="table-list scroll-container">
       <table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
         <!-- 双层表头 -->
         <thead>
@@ -112,6 +112,21 @@ export default {
 .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;

src/views/screen/wsScreen/components/right/SegmentProgress.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="segment-progress">
+    <!-- <div class="label">
+      <slot name="label">进度</slot>
+    </div> -->
+    <div class="bars">
+      <div v-for="i in total" :key="i" class="bar" :class="{ active: i <= activeBars }"></div>
+    </div>
+    <div class="percent">{{ value }}%</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SegmentProgress',
+  props: {
+    value: { type: Number, default: 0 }, // 百分比
+    total: { type: Number, default: 20 }, // 分段数
+    color: { type: String, default: '#00cfff' }, // 激活颜色
+    bgColor: { type: String, default: '#444' }, // 背景颜色
+  },
+  computed: {
+    activeBars() {
+      return Math.round((this.value / 100) * this.total)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.segment-progress {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #9cf;
+}
+
+.bars {
+  display: flex;
+  gap: 5px;
+}
+
+.bar {
+  width: 6px;
+  height: 20px;
+  border-radius: 2px;
+  background: #294C68; /* 默认背景色，实际会用 style 动态覆盖 */
+}
+
+.bar.active {
+  background: #00cfff; /* 激活色，实际会用 style 动态覆盖 */
+  box-shadow: 0 0 4px #00cfff;
+}
+
+.percent {
+  font-weight: bold;
+  font-size: 16px;
+  color: #00cfff;
+}
+</style>

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

@@ -19,7 +19,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :max-height="650"
+          :height="600"
           class="table-container"
         >
           <el-table-column
@@ -102,7 +102,7 @@ export default {
 
 ::v-deep .el-dialog .el-dialog__body {
   background-image: url('../../img/right-dialog.png');
-  background-size: 100% auto;
+  background-size: 100% 100%;
   color: #fff;
 }
 ::v-deep .el-dialog__header {

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

@@ -5,7 +5,7 @@
       <div class="more" @click="openDialog">更多 ></div>
     </div>
 
-    <div class="table-list">
+    <div class="table-list scroll-container">
       <table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
         <!-- 双层表头 -->
         <thead>
@@ -125,4 +125,19 @@ tbody tr:hover {
   background-image: url('../../img/table-hover.png');
   cursor: pointer;
 }
+.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; /* 背景透明 */
+}
 </style>

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

@@ -25,7 +25,7 @@
             <img src="../../img/usage-rate.png" alt="" />
             <div style="margin: 0 10px">在用率</div>
             <div style="width: 250px">
-              <el-progress :stroke-width="20" :percentage="proportion" color="#409EFF"></el-progress>
+              <SegmentProgress :value="proportion" :total="20" />
             </div>
           </div>
         </div>
@@ -72,6 +72,7 @@ import { getProjectEquipmentApi } from '@/api/wsScreen'
 import UsageRateMore from './UsageRateMore.vue'
 import ProEquipMore from './ProEquipMore'
 import EquipItemMore from './EquipItemMore.vue'
+import SegmentProgress from './SegmentProgress.vue'
 
 export default {
   components: {
@@ -81,6 +82,7 @@ export default {
     UsageRateMore,
     ProEquipMore,
     EquipItemMore,
+    SegmentProgress,
   },
   data() {
     return {