国网大屏

2025-11-20 10:08:35 +08:00 · 2025-11-20 10:08:35 +08:00 · c9d99d1855
parent 168996c3a2
commit c9d99d1855
8 changed files with 181 additions and 77 deletions
--- a/src/views/screen/gwScreen/components/center/index.vue
+++ b/src/views/screen/gwScreen/components/center/index.vue
@ -424,6 +424,7 @@ export default {
  methods: {
    handleBtn(index) {
      this.btnIndex = index
+      console.log('🚀 ~ this.btnIndex:', this.btnIndex)
      // this.cityData = []
      // this.getInfo()
    },
@ -814,6 +815,7 @@ export default {
  margin-left: -180px;
  display: flex;
  justify-content: center;
+  z-index: 9999999;
  .btn:not(:last-child) {
    margin-right: 80px;
  }
--- a/src/views/screen/gwScreen/components/left/EquipStatus.vue
+++ b/src/views/screen/gwScreen/components/left/EquipStatus.vue
@ -12,15 +12,16 @@ export default {
  data() {
    return {
      chartData: [
-        // { name: '在用', value: 120 },
-        // { name: '在库', value: 80 },
-        // { name: '在修', value: 60 },
-        // { name: '共享', value: 40 },
+        { name: '在用', value: 45036, proportion: 633 },
+        { name: '在库', value: 9038, proportion: 133 },
+        { name: '在修', value: 15034, proportion: 21 },
+        { name: '共享', value: 1767, proportion: 3 },
      ],
    }
  },
  mounted() {
-    this.getList()
+    // this.getList()
+    this.initChart()
  },
  methods: {
    async getList() {
--- a/src/views/screen/gwScreen/components/left/UnitEquipmentConfig.vue
+++ b/src/views/screen/gwScreen/components/left/UnitEquipmentConfig.vue
@ -5,22 +5,11 @@
      <thead>
        <!-- 第一行：跨列合并 -->
        <tr>
-          <th rowspan="2">序号</th>
-          <th rowspan="2">单位名称</th>
-          <th rowspan="2">装备价值（亿元）</th>
-          <th colspan="4">装备数量（台）</th>
-          <th colspan="4">配置率</th>
-        </tr>
-        <!-- 第二行：子列 -->
-        <tr>
-          <th>总数</th>
-          <th>线路</th>
-          <th>变电</th>
-          <th>电缆</th>
-          <th>总数</th>
-          <th>线路</th>
-          <th>变电</th>
-          <th>电缆</th>
+          <th>序号</th>
+          <th>网省名称</th>
+          <th>装备价值（亿元）</th>
+          <th>装备数量（台）</th>
+          <th>配置率</th>
        </tr>
      </thead>

@ -29,19 +18,11 @@
        <tr v-for="(row, index) in tableData" :key="index">
          <td style="width: 60px">{{ index + 1 }}</td>
          <td style="width: 180px">{{ row.deptName }}</td>
-          <td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
+          <td style="width: 110px">{{ row.totalValue }}</td>

          <!-- 装备数量 -->
          <td>{{ row.totalEquipmentQuantity }}</td>
          <td>{{ row.lineNum }}</td>
-          <td>{{ row.substationNum }}</td>
-          <td>{{ row.cableNum }}</td>
-
-          <!-- 配置率 -->
-          <td>{{ row.configRate }}</td>
-          <td>{{ row.valueA }}</td>
-          <td>{{ row.valueB }}</td>
-          <td>{{ row.valueC }}</td>
        </tr>
      </tbody>
    </table>
@ -54,11 +35,42 @@ import { getUnitEquipmentConfigurationApi } from '@/api/wsScreen/index'
 export default {
  data() {
    return {
-      tableData: [],
+      tableData: [
+        {
+          deptName: '安徽省',
+          totalValue: '3.96',
+          totalEquipmentQuantity: '2625',
+          lineNum: '120.00',
+        },
+        {
+          deptName: '陕西省',
+          totalValue: '3.66',
+          totalEquipmentQuantity: '2325',
+          lineNum: '109.00',
+        },
+        {
+          deptName: '河北省',
+          totalValue: '2.96',
+          totalEquipmentQuantity: '2025',
+          lineNum: '119.00',
+        },
+        {
+          deptName: '湖北省',
+          totalValue: '3.86',
+          totalEquipmentQuantity: '2425',
+          lineNum: '105.07',
+        },
+        {
+          deptName: '山东省',
+          totalValue: '3.42',
+          totalEquipmentQuantity: '2405',
+          lineNum: '101.09',
+        },
+      ],
    }
  },
  created() {
-    this.getList()
+    // this.getList()
  },
  methods: {
    async getList() {
@ -88,7 +100,11 @@ 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: 23px;
 }

 th {
--- a/src/views/screen/gwScreen/components/left/index.vue
+++ b/src/views/screen/gwScreen/components/left/index.vue
@ -3,7 +3,7 @@
    <div class="top-box">
      <div class="title-tip">
        <div>装备总览</div>
-        <div class="more" @click="handleEquipOverview">更多 ></div>
+        <div class="more" @click="">更多 ></div>
      </div>
      <div class="equip-box">
        <div class="equip-item-1">装备总数</div>
@ -16,13 +16,13 @@
      <div class="item-box">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
-            <EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" />
+            <EquipItem title="线路装备" :state="state1" :pieValues="list1" />
          </el-col>
          <el-col :span="8" :offset="0">
-            <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
+            <EquipItem title="变电装备" :state="state2" :pieValues="list2" />
          </el-col>
          <el-col :span="8" :offset="0">
-            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" />
+            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" />
          </el-col>
        </el-row>
      </div>
@ -51,14 +51,14 @@
            <div class="bottom-right">
              <div class="title-tip">
                <div class="tip-title">装备状态</div>
-                <div class="more" @click="openStatusMore">更多 ></div>
+                <div class="more" @click="">更多 ></div>
              </div>
              <div class="equip-status">
                <EquipStatus />
              </div>
            </div>
            <div class="bottom-explain">
-              <div>备注说明：再用装备包含于共享装备。</div>
+              <!-- <div>备注说明：再用装备包含于共享装备。</div> -->
            </div>
          </el-col>
        </el-row>
--- a/src/views/screen/gwScreen/components/right/EquipUsageRate.vue
+++ b/src/views/screen/gwScreen/components/right/EquipUsageRate.vue
@ -2,14 +2,14 @@
  <div>
    <div class="title-tip">
      <div>装备在用率统计</div>
-      <div class="more" @click="openDialog">更多 ></div>
+      <div class="more" @click="">更多 ></div>
    </div>
-    <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">
      <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">总体</div>
      <div :class="tabIndex == 1 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(1)">线路</div>
      <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
      <div :class="tabIndex == 3 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(3)">电缆</div>
-    </div>
+    </div> -->

    <div class="item-list">
      <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
@ -37,17 +37,43 @@ 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 {
@ -157,7 +183,7 @@ export default {
 }

 .item-list {
-  margin-top: 15px;
+  margin-top: 30px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
--- a/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue
+++ b/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue
@ -8,7 +8,7 @@
            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
          </el-select>
        </div>
-        <div style="margin-left: 50px" @click="openDialog">更多 ></div>
+        <div style="margin-left: 50px" @click="">更多 ></div>
      </div>
    </div>

@ -26,7 +26,7 @@
                <img src="../../img/icon3.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
-                  <div style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
+                  <div style="font-size: 16px; font-weight: 800">{{ 7695 }}</div>
                </div>
              </div>
            </el-col>
@ -35,7 +35,7 @@
                <img src="../../img/icon1.png" class="icon" />
                <div>
                  <div style="color: #ccc; font-size: 12px; margin-top: 10px">在用装备数（台）</div>
-                  <div style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
+                  <div style="font-size: 16px; font-weight: 800">{{ 37746 }}</div>
                </div>
              </div>
            </el-col>
@ -54,7 +54,7 @@
            <th>工程名称</th>
            <th>在用装备数（台）</th>
            <th>规模（拆单公里）</th>
-            <th>百公里线路装备使用情况</th>
+            <!-- <th>百公里线路装备使用情况</th> -->
          </tr>
        </thead>

@ -65,7 +65,7 @@
            <td style="width: 200px">{{ row.projectName }}</td>
            <td style="width: 120px">{{ row.inUser }}</td>
            <td>{{ row.scale }}</td>
-            <td>{{ row.usage }}</td>
+            <!-- <td>{{ row.usage }}</td> -->
          </tr>
        </tbody>
      </table>
@ -85,12 +85,38 @@ export default {
      proNum: 0,
      equipNum: 0,
      tabIndex: 0,
-      tableData: [],
+      tableData: [
+        {
+          projectName: '埇桥-萧砀|回500千伏线路工程',
+          inUser: '82',
+          scale: '172',
+        },
+        {
+          projectName: '石岗-施桥110kV线路工程',
+          inUser: '18',
+          scale: '55.6',
+        },
+        {
+          projectName: '换流站-金牛500kV线路工程',
+          inUser: '18',
+          scale: '55.6',
+        },
+        {
+          projectName: '汤庄-平圩500kV线路工程',
+          inUser: '18',
+          scale: '55.6',
+        },
+        {
+          projectName: '魏武-木兰n入祝集变电站220kV线路工程',
+          inUser: '18',
+          scale: '55.6',
+        },
+      ],
    }
  },
  created() {
-    this.getProList()
-    this.getList()
+    // this.getProList()
+    // this.getList()
  },
  methods: {
    changTab(type) {
@ -101,7 +127,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 || []
@ -241,7 +267,10 @@ 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;
 }

 th {
--- a/src/views/screen/gwScreen/components/right/UsageRateSituationList.vue
+++ b/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="more" @click="openDialog">更多 ></div>
+      <div>各网省装备在用率情况</div>
+      <div class="more" @click="">更多 ></div>
    </div>

    <div class="table-list scroll-container">
@ -38,11 +38,37 @@ import { getDeptEquipmentApi } from '@/api/wsScreen'
 export default {
  data() {
    return {
-      tableData: [],
+      tableData: [
+        {
+          name: '安徽省',
+          proportion: '61.55',
+          turnoverRate: '2.55',
+        },
+        {
+          name: '山西',
+          proportion: '48.25',
+          turnoverRate: '2.34',
+        },
+        {
+          name: '河北',
+          proportion: '42.36',
+          turnoverRate: '2.23',
+        },
+        {
+          name: '江苏',
+          proportion: '39.56',
+          turnoverRate: '1,91',
+        },
+        {
+          name: '山东',
+          proportion: '36.05',
+          turnoverRate: '1.81',
+        },
+      ],
    }
  },
  created() {
-    this.getList()
+    // this.getList()
  },
  methods: {
    async getList() {
@ -100,7 +126,11 @@ 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 {
--- a/src/views/screen/gwScreen/components/right/index.vue
+++ b/src/views/screen/gwScreen/components/right/index.vue
@ -8,31 +8,31 @@
      <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">{{ 2600 }} <span class="unit">亿元</span></div>
        </div>
        <div class="equip-item2 item">
          <div class="title">在建工程数</div>
-          <div class="number">{{ projectNUm }} <span class="unit">个</span></div>
+          <div class="number">{{ 19467 }} <span class="unit">个</span></div>
        </div>
        <div class="equip-item3 item">
          <div class="title">在用装备数</div>
-          <div class="number">{{ num }} <span class="unit">台</span></div>
+          <div class="number">{{ 45036 }} <span class="unit">台</span></div>
        </div>
      </div>
      <div class="top-bottom">
        <div class="usage-rate">
-          <div class="usage-rate-item" @click="openDialogEquip(1)">
+          <div class="usage-rate-item" @click="">
            <img src="../../img/usage-rate.png" alt="" />
            <div style="margin: 0 10px">在用率</div>
            <div style="width: 250px">
-              <SegmentProgress :value="proportion" :total="20" />
+              <SegmentProgress :value="51" :total="20" />
            </div>
          </div>
        </div>
        <div class="turnround-rate">
-          <div class="turnround-rate-title" @click="openDialogEquip(2)">
+          <div class="turnround-rate-title" @click="">
            <span style="color: #ccc; font-size: 15px">周转率 </span>
-            {{ turnoverRate }}
+            {{ 2.41 }}
            <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 @openDialog="openDialog" />
+            <UsageRateSituationList />
          </div>
        </el-col>
        <el-col :span="14" :offset="0">
          <div class="usage-rate-pro">
-            <ProEquipSituationList @openDialog="openDialogPro" />
+            <ProEquipSituationList />
          </div>
        </el-col>
      </el-row>
@ -96,7 +96,7 @@ export default {
    }
  },
  created() {
-    this.getInfo()
+    // this.getInfo()
  },
  methods: {
    async getInfo() {