网省大屏

2025-11-20 13:38:35 +08:00 · 2025-11-20 13:38:35 +08:00 · 35f78eb949
parent c9d99d1855
commit 35f78eb949
9 changed files with 112 additions and 144 deletions
--- a/src/views/screen/wsScreen/components/left/EquipItem.vue
+++ b/src/views/screen/wsScreen/components/left/EquipItem.vue
@ -2,13 +2,13 @@
  <div>
    <div class="title" @click="openDialog">{{ title }}</div>
    <div class="content">
-      <div>
+      <div class="left-wrap">
        <div class="left-item">
-          <div class="left-tip">装备数 <span>（台）</span></div>
+          <div class="left-tip">装备数 <span>(台)</span></div>
          <div class="number">{{ query.num || 0 }}</div>
        </div>
        <div class="left-item">
-          <div class="left-tip">装备价值 <span>（亿元）</span></div>
+          <div class="left-tip">装备价值 <span>(亿元)</span></div>
          <div class="number">{{ query.price ? (query.price / 100000000).toFixed(4) : 0 }}</div>
        </div>
      </div>
@ -82,7 +82,7 @@ export default {
          {
            name: '装备年限',
            type: 'pie',
-            radius: '39%',
+            radius: '55%',
            avoidLabelOverlap: false,
            label: {
              show: true,
@ -91,8 +91,8 @@ export default {
            },
            labelLine: {
              show: true,
-              length: 8, // 第一段线
-              length2: 5, // 第二段线
+              length: 5, // 第一段线
+              length2: 3, // 第二段线
            },

            data: this.pieData,
@ -126,10 +126,15 @@ export default {
  -webkit-text-fill-color: transparent;
 }
 .content {
-  display: flex;
+  /* display: flex; */
+  .left-wrap {
+    display: flex;
+    justify-content: space-between;
+  }
  .left-item {
-    margin-top: 16px;
-    height: 90px;
+    width: 48%;
+    margin-top: 6px;
+    height: 65px;
    text-align: center;
    background-image: url('../../img/equip-item.png');
    background-size: 100% 100%;
@ -137,26 +142,26 @@ export default {
    .left-tip {
      padding-top: 6px;
      padding-bottom: 15px;
-      font-size: 11px;
+      font-size: 10px;
      font-weight: 600;
-      width: 50px;
+      /* width: 50px; */
    }
  }

  .right-tip {
-    margin-left: 10px;
-    margin-top: 16px;
+    /* margin-left: 10px; */
+    margin-top: 6px;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 600;
-    width: 100px;
+    width: 100%;
    text-align: center;
    background-image: url('../../img/equip-title.png');
    background-size: 100% 100%;
  }
  .pie-chart {
-    width: 120px;
-    height: 120px;
+    width: 140px;
+    height:100px;
  }
 }
 </style>
--- a/src/views/screen/wsScreen/components/left/EquipStatus.vue
+++ b/src/views/screen/wsScreen/components/left/EquipStatus.vue
@ -50,9 +50,9 @@ export default {

      const option = {
        grid: {
-          left: '22%',
-          right: '10%',
-          top: '20%',
+          left: '16%',
+          right: '6%',
+          top: '16%',
          bottom: '15%',
        },
        xAxis: {
@ -141,7 +141,7 @@ export default {
 <style lang="scss" scoped>
 .chart-container {
  width: 100%; /* 宽度 */
-  height: 300px; /* 高度 */
+  height: 230px; /* 高度 */
  margin: 0 auto;
 }
 </style>
--- a/src/views/screen/wsScreen/components/left/UnitEquipmentConfig.vue
+++ b/src/views/screen/wsScreen/components/left/UnitEquipmentConfig.vue
@ -85,10 +85,10 @@ table {

 th,
 td {
-  padding: 10px;
+  padding: 9px 3px;
  text-align: center;
  white-space: nowrap;
-  border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
+  /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
 }

 th {
--- a/src/views/screen/wsScreen/components/left/index.vue
+++ b/src/views/screen/wsScreen/components/left/index.vue
@ -1,6 +1,5 @@
 <template>
  <div>
-
    <div class="left-warp">
      <div class="top-box">
        <div class="title-tip">
@ -34,44 +33,32 @@
        </el-row>
      </div>
      <div class="bottom-box">
-        <el-row :gutter="20">
-          <el-col :span="13" :offset="0">
-            <div class="bottom-left">
-              <div class="title-tip">
-                <div class="tip-title">单位装备配置</div>
-                <div class="more" @click="openEquipConfig">更多 ></div>
-              </div>
-              <div class="bottom-list">
-                <UnitEquipmentConfig />
-              </div>
-            </div>
-            <div class="bottom-explain" @click="openRemarkMore">
-              <div>备注说明：</div>
-              <div>
-                <div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div>
-                <div>装备实际配置率=实际装配配置数量÷基本配置标准数量×装备赋值×配置折算率 </div>
-                <div>专用装备满分80分，创新装备满分20分，满分100分</div>
-              </div>
-            </div>
-          </el-col>
-          <el-col :span="11" :offset="0">
-            <div class="bottom-right">
-              <div class="title-tip">
-                <div class="tip-title">装备状态</div>
-                <div class="more" @click="openStatusMore">更多 ></div>
-              </div>
-              <div class="equip-status">
-                <EquipStatus />
-              </div>
-            </div>
-            <div class="bottom-explain">
-              <div>备注说明：再用装备包含于共享装备。</div>
-            </div>
-          </el-col>
-        </el-row>
+        <div class="bottom-left">
+          <div class="title-tip">
+            <div class="tip-title">单位装备配置</div>
+            <div class="more" @click="openEquipConfig">更多 ></div>
+          </div>
+          <div class="bottom-list">
+            <UnitEquipmentConfig />
+          </div>
+        </div>
+      </div>
+      <div class="bottom-box">
+        <div class="bottom-right">
+          <div class="title-tip">
+            <div class="tip-title">装备状态</div>
+            <div class="more" @click="openStatusMore">更多 ></div>
+          </div>
+          <div class="equip-status">
+            <EquipStatus />
+          </div>
+          <div class="bottom-explain">
+            <div>备注说明：再用装备包含于共享装备。</div>
+          </div>
+        </div>
      </div>
    </div>
-  
+
    <!-- 全量装备 -->
    <AllEquip ref="allEquip" />
    <!-- 单位装备配置 -->
@ -168,27 +155,6 @@ export default {
            this.list3[2] = item.ten
          }
        })
-        // this.state1.num = data.line.num || 0
-        // this.state1.price = data.line.price || 0
-        // this.state2.num = data.cable.num || 0
-        // this.state2.price = data.cable.price || 0
-        // this.state3.num = data.substation.num || 0
-        // this.state3.price = data.substation.price || 0
-        // this.list1[0] = data.line.five
-        // this.list1[1] = data.line.fiveOrTen
-        // this.list1[2] = data.line.ten
-        // this.list2[0] = data.cable.five
-        // this.list2[1] = data.cable.fiveOrTen
-        // this.list2[2] = data.cable.ten
-        // this.list3[0] = data.substation.five
-        // this.list3[1] = data.substation.fiveOrTen
-        // this.list3[2] = data.substation.ten
-        // console.log('🚀 ~ getEquipList ~ this.list1:', this.list1)
-        // console.log('🚀 ~ getEquipList ~ this.list2:', this.list2)
-        // console.log('🚀 ~ getEquipList ~ this.list3:', this.list3)
-        // console.log('🚀 ~ getEquipList ~ this.state1:', this.state1)
-        // console.log('🚀 ~ getEquipList ~ this.state2:', this.state2)
-        // console.log('🚀 ~ getEquipList ~ this.state3:', this.state3)
      } catch (error) {
        console.log('🚀 ~ getEquipList ~ error:', error)
      }
@ -220,7 +186,7 @@ export default {

 <style lang="scss" scoped>
 .left-warp {
-  height: calc(100vh - 79px);
+  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
@ -244,15 +210,15 @@ export default {
  }
  .top-box {
    /* height: 350px; */
-    height: 21%;
+    height: 18%;
    background-image: url('../../img/equipmentOverview.png');
    background-size: 100% 100%;

    .equip-box {
      padding-left: 20px;
-      margin-top: 20px;
-      margin-bottom: 13px;
-      height: 120px;
+      /* margin-top: 20px; */
+      /* margin-bottom: 13px; */
+      height: 100px;
      background-image: url('../../img/equipmentOverviewData.png');
      background-size: 100% 100%;
      /* position: relative; */
@ -283,36 +249,35 @@ export default {
        cursor: pointer;
      }
    }
-
  }
  .item-box {
    padding: 0 20px;
  }
  .bottom-box {
-    height: 49%;
    .bottom-explain {
      margin-top: 15px;
      color: #97aad6;
      font-size: 12px;
      display: flex;
+      justify-content: center;
      cursor: pointer;
    }
    .bottom-tip {
    }
    .bottom-left {
-      /* height: 260px; */
+      height: 210px;
      background-image: url('../../img/unit-equip.png');
-      background-size: cover;
+      background-size: 100% 100%;
      .bottom-list {
-        margin-top: 20px;
-        height: 250px;
+        margin: 5px 0 10px;
+        height: 165px;
        overflow: auto;
      }
    }
    .bottom-right {
      /* height: 250px; */
      background-image: url('../../img/equip-status.png');
-      background-size: cover;
+      background-size: 100% 100%;
    }
  }
 }
--- a/src/views/screen/wsScreen/components/right/EquipUsageRate.vue
+++ b/src/views/screen/wsScreen/components/right/EquipUsageRate.vue
@ -13,11 +13,11 @@

    <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: 15px; font-size: 10px;">{{ item.name || '-' }}</div>
-        <div style="margin: 115px 0 0 19px"
+        <div style="text-align: center; margin-top: 25px; font-size: 10px;">{{ item.name || '-' }}</div>
+        <div style="margin: 90px 0 0 40px"
          ><span style="color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
        >
-        <div style="margin-left: 19px"
+        <div style="margin-left: 40px"
          ><span style="color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
        >
      </div>
@ -63,8 +63,8 @@ export default {
        }
        const res = await getUsageStatisticsApi({ type })
        if (!res.data) return
-        if (res.data.length > 5) {
-          this.tableList = res.data.slice(0, 5)
+        if (res.data.length > 3) {
+          this.tableList = res.data.slice(0, 3)
        } else {
          this.tableList = res.data
        }
@ -160,11 +160,12 @@ export default {
  padding: 10px 0;
  display: flex;
  align-items: center;
-  /* justify-content: space-between; */
+  justify-content: space-between;
  width: 100%;
+  height: 200px;
  .item {
-    width: 25%;
-    height: 200px;
+    width: 30%;
+    height: 180px;
    font-weight: bolder;
    margin-right: 10px;
    font-size: 10px;
--- a/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
+++ b/src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
@ -13,7 +13,7 @@
            @change="getList"
            style="width: 80px"
          >
-            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
+            <el-option v-for="(item, index) in options" :key="index" :label="item.proName" :value="item.proCode" />
          </el-select>
        </div>
        <div style="margin-left: 15px" @click="openDialog">更多 ></div>
@ -134,10 +134,13 @@ export default {

 <style lang="scss" scoped>
 .table-style {
-  /* height: 350px; */
+  margin-bottom: 10px;
+  height: 219px;
+  overflow: hidden;
 }
 .scroll-container {
  width: 100%;
+  height: 219px;
  overflow: auto;

  /* 隐藏滚动条轨迹 */
@ -152,11 +155,11 @@ export default {
  background: transparent; /* 背景透明 */
 }
 .title-tip {
-  font-size: 12px;
+  font-size: 15px;
  display: flex;
  justify-content: space-between;
-  padding-top: 10px;
-  padding-left: 25px;
+  padding-top: 2px;
+  padding-left: 40px;
  font-family: DS-TITLE;
  .title-text {
    background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
@ -260,7 +263,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); // 边框颜色可根据背景调整 */
 }

 th {
--- a/src/views/screen/wsScreen/components/right/UsageRateSituationList.vue
+++ b/src/views/screen/wsScreen/components/right/UsageRateSituationList.vue
@ -66,11 +66,11 @@ export default {
  /* height: 350px; */
 }
 .title-tip {
-  font-size: 12px;
+  font-size: 15px;
  display: flex;
  justify-content: space-between;
-  padding-top: 10px;
-  padding-left: 20px;
+  padding-top: 2px;
+  padding-left: 40px;
  font-family: DS-TITLE;
  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
  -webkit-background-clip: text;
@ -86,9 +86,9 @@ export default {
  }
 }
 .table-list {
-  margin-top: 20px;
-  /* height: 280px; */
-  height: 31vh;
+  margin: 3px 0 10px;
+  height: 145px;
+  /* height: 31vh; */
  overflow: auto;
 }
 table {
@ -103,7 +103,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); // 边框颜色可根据背景调整 */
 }

 th {
--- a/src/views/screen/wsScreen/components/right/index.vue
+++ b/src/views/screen/wsScreen/components/right/index.vue
@ -9,7 +9,9 @@
        <div class="equipment-list">
          <div class="equip-item1 item">
            <div class="title">年度总投资额</div>
-            <div class="number">{{ annualTotal ? (annualTotal / 100000000).toFixed(4) : 0 }} <span class="unit">亿元</span></div>
+            <div class="number"
+              >{{ annualTotal ? (annualTotal / 100000000).toFixed(4) : 0 }} <span class="unit">亿元</span></div
+            >
          </div>
          <div class="equip-item2 item">
            <div class="title">在建工程数</div>
@ -24,7 +26,7 @@
          <div class="usage-rate">
            <div class="usage-rate-item" @click="openDialogEquip(1)">
              <img src="../../img/usage-rate.png" alt="" />
-              <div style="margin: 0 6px; font-size: 14px; width: 42px;">在用率</div>
+              <div style="margin: 0 6px; font-size: 14px; width: 42px">在用率</div>
              <div style="width: 180px">
                <SegmentProgress :value="proportion" :total="13" />
              </div>
@ -39,19 +41,11 @@
          </div>
        </div>
      </div>
-      <div class="center-box">
-        <el-row :gutter="20">
-          <el-col :span="10" :offset="0">
-            <div class="usage-rate-situation">
-              <UsageRateSituationList @openDialog="openDialog" />
-            </div>
-          </el-col>
-          <el-col :span="14" :offset="0">
-            <div class="usage-rate-pro">
-              <ProEquipSituationList @openDialog="openDialogPro" />
-            </div>
-          </el-col>
-        </el-row>
+      <div class="usage-rate-situation">
+        <UsageRateSituationList @openDialog="openDialog" />
+      </div>
+      <div class="usage-rate-pro">
+        <ProEquipSituationList @openDialog="openDialogPro" />
      </div>
      <div class="bottom-box">
        <EquipUsageRate />
@ -160,20 +154,20 @@ export default {
  .center-box {
    /* height: 350px; */
    /* flex-grow: 1; */
-    .usage-rate-situation {
-      width: 100%;
-      height: 100%;
-      /* height: 350px; */
-      background-image: url('../../img/equip-usage.png');
-      background-size: 100% 100%;
-    }
-    .usage-rate-pro {
-      width: 100%;
-      height: 100%;
-      /* height: 350px; */
-      background-image: url('../../img/equip-usage.png');
-      background-size: 100% 100%;
-    }
+  }
+  .usage-rate-situation {
+    width: 100%;
+    /* height: 100%; */
+    /* height: 350px; */
+    background-image: url('../../img/equip-usage.png');
+    background-size: 100% 100%;
+  }
+  .usage-rate-pro {
+    width: 100%;
+    /* height: 100%; */
+    /* height: 350px; */
+    background-image: url('../../img/equip-usage.png');
+    background-size: 100% 100%;
  }
  .bottom-box {
    /* height: 310px; */
--- a/src/views/screen/wsScreen/index.vue
+++ b/src/views/screen/wsScreen/index.vue
@ -40,8 +40,8 @@ export default {
 }
 #index {
  color: #d3d6dd;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
  /* width: 1920px;
  height: 1080px; */
  /* position: absolute; */