From 278a2da67f1bf5f8a42e4e0b79d334ff834ab986 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Thu, 16 Oct 2025 16:37:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/wsScreen/index.js                     | 54 +++++++++++
 .../wsScreen/components/left/AllEquip.vue     | 94 ++++++++++---------
 .../wsScreen/components/left/BottomItem.vue   | 38 ++++++--
 .../components/left/EquipItemMore.vue         | 18 ++--
 .../components/left/EquipStatusMore.vue       | 87 ++++++++++++-----
 .../wsScreen/components/left/LeftItem.vue     | 50 +++++-----
 .../wsScreen/components/left/RightItem.vue    | 21 +++--
 .../components/left/UnitEquipConfig.vue       | 31 +++---
 .../screen/wsScreen/components/left/index.vue | 10 +-
 .../components/right/EquipItemMore.vue        | 39 ++++++--
 10 files changed, 302 insertions(+), 140 deletions(-)

diff --git a/src/api/wsScreen/index.js b/src/api/wsScreen/index.js
index 78283776..a83e2c22 100644
--- a/src/api/wsScreen/index.js
+++ b/src/api/wsScreen/index.js
@@ -127,3 +127,57 @@ export const getProListApi = (data = {}) => {
     data,
   })
 }
+
+// 变电装备统计分析-装备年限
+export const getStatByTypeAndAgeDetailsApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeDetails',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 变电装备统计分析-装备价值
+export const getStatByTypeAndAgeByEquipmentApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeByEquipment',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 变电装备统计分析-地市装备
+export const getStatByTypeAndAgeByCityApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeByCity',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 单位装备配置-列表
+export const getStatByTypeAndAgeByConfigurationApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeByConfiguration',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 装备在用率
+export const getStatByTypeAndAgeByUsageRateApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeByUsageRate',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 装备周转率
+export const getStatByTypeAndAgeByTurnoverRateApi = (data = {}) => {
+  return request({
+    url: '/material-mall/largeScreen/statByTypeAndAgeByTurnoverRate',
+    method: 'get',
+    params: data,
+  })
+}
diff --git a/src/views/screen/wsScreen/components/left/AllEquip.vue b/src/views/screen/wsScreen/components/left/AllEquip.vue
index 932a0e7d..a49016cd 100644
--- a/src/views/screen/wsScreen/components/left/AllEquip.vue
+++ b/src/views/screen/wsScreen/components/left/AllEquip.vue
@@ -34,8 +34,8 @@
               <el-option v-for="item in deptNameList" :key="item.code" :label="item.name" :value="item.code" />
             </el-select>
           </el-form-item>
-          <el-form-item label="产权单位" prop="companyName">
-            <el-select v-model="queryParams.companyName" placeholder="请选择" clearable style="width: 240px">
+          <el-form-item label="产权单位" prop="propertyUnit">
+            <el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
               <el-option
                 v-for="item in companyNameList"
                 :key="item.deptId"
@@ -44,9 +44,9 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="工程专业" prop="proType">
+          <el-form-item label="专业" prop="major">
             <el-select
-              v-model="queryParams.proType"
+              v-model="queryParams.major"
               placeholder="请选择"
               clearable
               style="width: 240px"
@@ -64,17 +64,17 @@
               style="width: 240px"
             />
           </el-form-item>
-          <el-form-item label="装备名称" prop="deviceName">
-            <el-input v-model="queryParams.deviceName" placeholder="请输入" clearable style="width: 240px" />
+          <el-form-item label="装备名称" prop="name">
+            <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
-          <el-form-item label="规格型号" prop="devModel">
-            <el-input v-model="queryParams.devModel" placeholder="请输入" clearable style="width: 240px" />
+          <el-form-item label="规格型号" prop="specificationModel">
+            <el-input v-model="queryParams.specificationModel" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
           <el-form-item label="装备编号" prop="code">
             <el-input v-model="queryParams.code" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
-          <el-form-item label="装备原始编码" prop="identifyCode">
-            <el-input v-model="queryParams.identifyCode" placeholder="请输入" clearable style="width: 240px" />
+          <el-form-item label="装备原始编码" prop="originalCode">
+            <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">
@@ -86,7 +86,7 @@
               <el-option
                 v-for="item in onProjectList"
                 :key="item.proCode"
-                :label="item.proName"
+                :label="item.usingProject"
                 :value="item.proCode"
               />
             </el-select>
@@ -108,17 +108,17 @@
               style="width: 240px"
             />
           </el-form-item>
-          <el-form-item label="使用年限" prop="workingHours">
-            <el-select v-model="queryParams.workingHours" placeholder="请选择" clearable style="width: 240px">
+          <el-form-item label="使用年限" prop="maxServiceLifeYears">
+            <el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable style="width: 240px">
               <el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
-          <el-form-item label="资产原值" prop="buyPrice">
-            <el-input v-model="queryParams.buyPrice" placeholder="请输入" clearable style="width: 240px" />
+          <el-form-item label="资产原值" prop="originalValue">
+            <el-input v-model="queryParams.originalValue" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
-          <el-form-item label="下次检测日期" prop="nextCheckTime">
+          <el-form-item label="下次检测日期" prop="nextMaintenanceDate">
             <el-date-picker
-              v-model="queryParams.nextCheckTime"
+              v-model="queryParams.nextMaintenanceDate"
               type="date"
               placeholder="请选择"
               clearable
@@ -157,7 +157,7 @@
           stripe
           highlight-current-row
           style="width: 100%"
-          :height="600"
+          :height="550"
           class="table-container"
         >
           <el-table-column
@@ -183,17 +183,17 @@
             </template>
           </el-table-column>
           <!-- 操作 -->
-          <el-table-column label="操作" align="center" width="130">
+          <!-- <el-table-column label="操作" align="center" width="130">
             <template slot-scope="{ row }">
               <el-button type="text" size="mini" @click="" style="color: #409eff">查看详情</el-button>
             </template>
-          </el-table-column>
+          </el-table-column> -->
         </el-table>
 
         <!-- 分页 -->
         <pagination
           v-show="total > 0"
-          :total="88"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
@@ -218,19 +218,19 @@ export default {
         pageNum: 1,
         pageSize: 10,
         deptName: '', // 装备范围
-        companyName: '', // 地市公司
-        deviceName: '', // 装备名称
+        propertyUnit: '', // 地市公司
+        name: '', // 装备名称
         deviceSeries: '', // 装备系列
         code: '', // 装备编号
         changeStatus: '', // 装备状态
         onProject: '', // 所在项目
         purchaseDate: '', // 采购日期
         productionDate: '', // 出厂日期
-        workingHours: '', // 使用年限
-        companyName: '', // 产权单位
+        maxServiceLifeYears: '', // 使用年限
+        propertyUnit: '', // 产权单位
         brand: '', // 生产厂家
-        buyPrice: '', // 资产原值
-        nextCheckTime: '', // 下次检测日期
+        originalValue: '', // 资产原值
+        nextMaintenanceDate: '', // 下次检测日期
         featureItem: '', // 特征项
         featureValue: '', // 特征值
       },
@@ -269,26 +269,26 @@ export default {
       ],
 
       tableColumns: [
-        { label: '公司名称', prop: 'companyName' },
-        { label: '产权单位', prop: 'companyName' },
-        { label: '工程专业', prop: 'proType' },
-        { label: '主工序', prop: 'mainGx' },
-        { label: '子工序', prop: 'childGx' },
-        { label: '装备大类', prop: 'devCategory' },
-        { label: '装备小类', prop: 'devSubcategory' },
-        { label: '类型分支', prop: 'devName' },
-        { label: '装备名称', prop: 'deviceName' },
-        { label: '规格型号', prop: 'devModel' },
+        { label: '公司名称', prop: 'propertyUnit' },
+        { label: '产权单位', prop: 'propertyUnit' },
+        { label: '专业', prop: 'major' },
+        { label: '主工序', prop: 'mainProcess' },
+        { label: '子工序', prop: 'subProcess' },
+        { label: '装备大类', prop: 'mainCategory' },
+        { label: '装备小类', prop: 'subCategory' },
+        { label: '类型分支', prop: 'branch' },
+        { label: '装备名称', prop: 'name' },
+        { label: '规格型号', prop: 'specificationModel' },
         { label: '装备编号', prop: 'code' },
-        { label: '计量单位', prop: 'unitName' },
-        { label: '所在项目', prop: 'proName' },
-        { label: '使用到期时间', prop: 'buyPrice' },
-        { label: '装备原始编码', prop: 'identifyCode' },
+        { label: '计量单位', prop: 'unit' },
+        { label: '所在项目', prop: 'usingProject' },
+        { label: '使用到期时间', prop: 'expirationTime' },
+        { label: '装备原始编码', prop: 'originalCode' },
         { label: '出厂日期', prop: 'productionDate' },
-        { label: '生产厂家', prop: 'brand' },
-        { label: '资产原值', prop: 'buyPrice' },
-        { label: '下次维保日期', prop: 'nextCheckTime' },
-        { label: '使用年限', prop: 'workingHours' },
+        { label: '生产厂家', prop: 'manufacturer' },
+        { label: '资产原值', prop: 'originalValue' },
+        { label: '下次维保日期', prop: 'nextMaintenanceDate' },
+        { label: '最大使用年限 (年)', prop: 'maxServiceLifeYears' },
         { label: '特征项', prop: 'featureItem' },
         { label: '特征值', prop: 'featureValue' },
       ],
@@ -329,10 +329,12 @@ export default {
     },
     // 拼接特征项
     getFeatureItem(item) {
+      if (!item || item.length == 0) return ''
       return item.map((item) => item.propertyName).join(',')
     },
     // 拼接特征值
     getFeatureValue(item) {
+      if (!item || item.length == 0) return ''
       return item.map((item) => item.propertyValue).join(',')
     },
     // 装备范围
@@ -380,7 +382,7 @@ export default {
         this.getCompanyNameList(val)
       } else {
         this.companyNameList = []
-        this.queryParams.companyName = ''
+        this.queryParams.propertyUnit = ''
       }
     },
     // 地市公司
diff --git a/src/views/screen/wsScreen/components/left/BottomItem.vue b/src/views/screen/wsScreen/components/left/BottomItem.vue
index 51bc27fb..95f2881d 100644
--- a/src/views/screen/wsScreen/components/left/BottomItem.vue
+++ b/src/views/screen/wsScreen/components/left/BottomItem.vue
@@ -4,18 +4,44 @@
 
 <script>
 import * as echarts from 'echarts'
+import { getStatByTypeAndAgeByCityApi } from '@/api/wsScreen/index'
 
 export default {
   name: 'EChartsCompareBars',
+  props: {
+    type: {
+      type: [String, Number],
+      default: '',
+    },
+  },
   data() {
     return {
       chart: null,
-      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      seriesA: [120, 200, 150, 80, 70, 110, 130],
-      seriesB: [90, 160, 100, 60, 50, 80, 95],
+      categories: [],
+      seriesA: [],
+      seriesB: [],
     }
   },
+  mounted() {
+    this.getInfo()
+    window.addEventListener('resize', this.resize)
+  },
   methods: {
+    async getInfo() {
+      try {
+        const res = await getStatByTypeAndAgeByCityApi({ type: this.type })
+        console.log('🚀 ~ 地市装备 ~ res:', res)
+        if (!res.data || res.data.length == 0) return
+        this.categories = res.data.map((item) => item.name)
+        this.seriesA = res.data.map((item) => item.useCount)
+        this.seriesB = res.data.map((item) => item.count)
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      } catch (error) {
+        console.log('err', error)
+      }
+    },
     buildGradient(colorFrom) {
       return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         { offset: 0, color: colorFrom },
@@ -108,10 +134,6 @@ export default {
       if (this.chart) this.chart.resize()
     },
   },
-  mounted() {
-    this.initChart()
-    window.addEventListener('resize', this.resize)
-  },
   beforeDestroy() {
     window.removeEventListener('resize', this.resize)
     if (this.chart) {
@@ -124,7 +146,7 @@ export default {
 
 <style scoped>
 .chart-container {
-  width: 1400px;
+  width: 100%;
   height: 280px;
   /* color: #76fbc4; */
 }
diff --git a/src/views/screen/wsScreen/components/left/EquipItemMore.vue b/src/views/screen/wsScreen/components/left/EquipItemMore.vue
index 5307b711..34e58a81 100644
--- a/src/views/screen/wsScreen/components/left/EquipItemMore.vue
+++ b/src/views/screen/wsScreen/components/left/EquipItemMore.vue
@@ -4,7 +4,7 @@
       v-if="dialogVisible"
       v-loading="isLoading"
       :visible.sync="dialogVisible"
-      width="36%"
+      width="60%"
       :modal="false"
       class="dlg-box"
     >
@@ -16,19 +16,19 @@
           <el-col :span="9" :offset="0">
             <div class="left box">
               <div class="title" style="margin-bottom: 15px">装备年限</div>
-              <LeftItem />
+              <LeftItem :type="type" />
             </div>
           </el-col>
           <el-col :span="15" :offset="0">
             <div class="right box">
               <div class="title">装备价值</div>
-              <RightItem />
+              <RightItem :type="type" />
             </div>
           </el-col>
           <el-col :span="24" :offset="0">
             <div class="bottom box">
               <div class="title">地市装备</div>
-              <BottomItem />
+              <BottomItem :type="type" />
             </div>
           </el-col>
         </el-row>
@@ -48,14 +48,18 @@ export default {
     return {
       isLoading: false,
       dialogVisible: false,
+      type: '',
     }
   },
   created() {},
   methods: {
-    openDialog() {
-      this.dialogVisible = true
+    openDialog(type) {
+      console.log('🚀 ~ openDialog ~ :', type)
+      this.type = type
+      setTimeout(() => {
+        this.dialogVisible = true
+      }, 100)
     },
-    getList() {},
   },
 }
 </script>
diff --git a/src/views/screen/wsScreen/components/left/EquipStatusMore.vue b/src/views/screen/wsScreen/components/left/EquipStatusMore.vue
index 25518d07..47c55568 100644
--- a/src/views/screen/wsScreen/components/left/EquipStatusMore.vue
+++ b/src/views/screen/wsScreen/components/left/EquipStatusMore.vue
@@ -11,15 +11,10 @@
       <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="equip">
-            <el-select v-model="queryParams.equip" placeholder="请选择" clearable style="width: 240px">
-              <el-option v-for="item in equipList" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
           <el-form-item label="状态" prop="status">
             <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
               <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
@@ -61,6 +56,18 @@
             :prop="column.prop"
             align="center"
           >
+            <template v-slot="{ row }" v-if="column.prop == 'status'">
+              <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>
 
@@ -78,6 +85,7 @@
 </template>
 
 <script>
+import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
 export default {
   data() {
     return {
@@ -87,7 +95,6 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        equip: '', // 施工装备
         status: '', // 状态
       },
       equipList: [
@@ -95,34 +102,43 @@ export default {
         { label: '合肥市', value: 2 },
       ],
       statusList: [
-        { label: '全网省', value: 1 },
-        { label: '合肥市', value: 2 },
+        { label: '在库', value: 1 },
+        { label: '自用', value: 2 },
+        { label: '共享', value: 3 },
+        { label: '退役', value: 4 },
+        { label: '维修', value: 5 },
       ],
 
       tableColumns: [
-        { label: '施工装备', prop: 'equip' },
-        { label: '型号', prop: 'equipType' },
-        { label: '数量', prop: 'equipNum' },
-        { label: '设备编码', prop: 'equipCode' },
-        { label: '特征项1', prop: 'feature1' },
+        { label: '施工装备', prop: 'major' },
+        { label: '型号', prop: 'specificationModel' },
+        { label: '数量', prop: 'count' },
+        { label: '设备编码', prop: 'code' },
+        { label: '特征项1', prop: 'featureItem1' },
         { label: '特征值1', prop: 'featureValue1' },
-        { label: '特征项1', prop: 'feature1' },
+        { label: '特征项1', prop: 'featureItem2' },
         { label: '特征值2', prop: 'featureValue2' },
-        { label: '特征项2', prop: 'feature2' },
+        { label: '特征项2', prop: 'featureItem3' },
         { label: '特征值3', prop: 'featureValue3' },
-        { label: '特征项4', prop: 'feature4' },
+        { label: '特征项4', prop: 'featureItem4' },
         { label: '特征值4', prop: 'featureValue4' },
-        { label: '特征项5', prop: 'feature5' },
+        { label: '特征项5', prop: 'featureItem5' },
         { label: '特征值5', prop: 'featureValue5' },
-        { label: '特征项6', prop: 'feature6' },
+        { 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: 'unitPrice' },
+        { label: '资产原值（元）', prop: 'originalValue' },
         { label: '出厂日期', prop: 'productionDate' },
-        { label: '所在项目', prop: 'usefulLife' },
-        { label: 'vlook的状态', prop: 'vlookStatus' },
+        { label: '使用项目', prop: 'usingProject' },
+        // { label: 'vlook的状态', prop: 'vlookStatus' },
         { label: '状态', prop: 'status' },
-        { label: '下次检验日期', prop: 'nextCheckDate' },
+        { label: '下次维保日期', prop: 'nextMaintenanceDate' },
         { label: '生产厂家', prop: 'manufacturer' },
       ],
       tableList: [],
@@ -133,8 +149,31 @@ export default {
   methods: {
     openDialog() {
       this.dialogVisible = true
+      this.getList()
+    },
+    async getList() {
+      try {
+        // 获取设备列表
+        const res = await getDeviceListAPI(this.queryParams)
+        this.tableList = res.data?.rows || []
+        this.total = res.data?.total || 0
+      } catch (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
     },
-    getList() {},
     // 查询
     handleQuery() {
       this.queryParams.pageNum = 1
diff --git a/src/views/screen/wsScreen/components/left/LeftItem.vue b/src/views/screen/wsScreen/components/left/LeftItem.vue
index f6c3d89f..01e2f0ac 100644
--- a/src/views/screen/wsScreen/components/left/LeftItem.vue
+++ b/src/views/screen/wsScreen/components/left/LeftItem.vue
@@ -8,7 +8,7 @@
         </div>
         <div class="left-item">
           <div class="left-tip">装备价值 <span>（亿元）</span></div>
-          <div class="number">{{ query.price || 0 }}</div>
+          <div class="number">{{ (query.price / 100000000).toFixed(4) || 0 }}</div>
         </div>
       </div>
       <div>
@@ -22,40 +22,26 @@
 
 <script>
 import * as echarts from 'echarts'
+import { getStatByTypeAndAgeDetailsApi } from '@/api/wsScreen'
 
 export default {
   props: {
-    title: {
-      type: String,
+    type: {
+      type: [String, Number],
       default: '',
     },
-    state: {
-      type: Object,
-      default: () => {
-        return {
-          num: 0,
-          price: 0,
-        }
-      },
-    },
-    // pieValues: {
-    //   type: Array,
-    //   default: () => [], // 只有 value
-    // },
   },
   data() {
     return {
-      query: {},
+      query: {
+        num: 0,
+        price: 0,
+      },
       pieValues: [121, 222, 333]
     }
   },
   mounted() {
-    console.log('🚀 ~ mounted ~ this.state:', this.state)
-    console.log('state-->', this.pieValues)
-    setTimeout(() => {
-      this.query = this.state
-      this.initPieChart()
-    }, 300)
+    this.getInfo()
   },
   computed: {
     pieData() {
@@ -68,6 +54,24 @@ export default {
     },
   },
   methods: {
+    async getInfo() {
+      try {
+        console.log('🚀 ~ 装备年限 ~ res:', this.type)
+        const res = await getStatByTypeAndAgeDetailsApi({ type: this.type })
+        if (!res.data) return
+        this.query.num = res.data[0].num
+        this.query.price = res.data[0].price || 0
+        this.pieValues[0] = res.data[0].five
+        this.pieValues[1] = res.data[0].fiveOrTen
+        this.pieValues[2] = res.data[0].ten
+        this.$nextTick(() => {
+          this.initPieChart()
+        })
+        console.log('🚀 ~ getInfo ~ res:', res)
+      } catch (error) {
+        console.log('🚀 ~ getInfo ~ error:', error)
+      }
+    },
     initPieChart() {
       const chartDom = this.$refs.pieChart
       // console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
diff --git a/src/views/screen/wsScreen/components/left/RightItem.vue b/src/views/screen/wsScreen/components/left/RightItem.vue
index b1f6616c..d948ced7 100644
--- a/src/views/screen/wsScreen/components/left/RightItem.vue
+++ b/src/views/screen/wsScreen/components/left/RightItem.vue
@@ -6,27 +6,33 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getEquipmentStatusApi } from '@/api/wsScreen/index'
+import { getStatByTypeAndAgeByEquipmentApi } from '@/api/wsScreen/index'
 
 export default {
+  props: {
+    type: {
+      type: [String, Number],
+      default: '',
+    },
+  },
   data() {
     return {
       chartData: [],
     }
   },
   mounted() {
-    this.getList()
+    this.getInfo()
   },
   methods: {
-    async getList() {
+    async getInfo() {
       try {
-        const res = await getEquipmentStatusApi()
+        const res = await getStatByTypeAndAgeByEquipmentApi({ type: this.type })
         console.log('🚀 ~ 装备状态 ~ res:', res)
         if (!res.data) return
         this.chartData = res.data.map((item) => {
           return {
             ...item,
-            value: item.num,
+            value: item.price,
           }
         })
         this.$nextTick(() => {
@@ -97,8 +103,7 @@ export default {
               fontSize: 12,
               color: '#ccc',
               formatter: (params) => {
-                const proportion = this.chartData[params.dataIndex].proportion
-                return `${params.value}/${proportion}%`
+                return `${params.value}`
               },
             },
             data: yData,
@@ -138,7 +143,7 @@ export default {
 
 <style lang="scss" scoped>
 .chart-container {
-  width: 700px; /* 宽度 */
+  width: 1500px; /* 宽度 */
   height: 209px; /* 高度 */
   margin: 0 auto;
 }
diff --git a/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue b/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue
index 7bd6407d..ad882641 100644
--- a/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue
+++ b/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue
@@ -37,8 +37,8 @@
             :prop="column.prop"
             align="center"
           >
-            <template v-slot="{ row }" v-if="column.prop === 'equipPrice'">
-              <span>{{ (row.equipPrice / 100000000).toFixed(4) }}</span>
+            <template v-slot="{ row }" v-if="column.prop === 'price'">
+              <span>{{ row.price ? (row.price / 100000000).toFixed(4) : 0 }}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -57,6 +57,8 @@
 </template>
 
 <script>
+import { getStatByTypeAndAgeByConfigurationApi } from '@/api/wsScreen'
+
 export default {
   data() {
     return {
@@ -67,12 +69,12 @@ export default {
         pageSize: 10,
       },
       tableColumns: [
-        { label: '单位名称', prop: 'unitName' },
-        { label: '装备价值（亿元）', prop: 'equipPrice' },
-        { label: '装备数量', prop: 'equipNum' },
-        { label: '线路数量（台）', prop: 'lineNum' },
-        { label: '变电数量（台）', prop: 'subStationNum' },
-        { label: '电缆数量（台）', prop: 'cableNum' },
+        { label: '单位名称', prop: 'name' },
+        { label: '装备价值（亿元）', prop: 'price' },
+        { label: '装备数量', prop: 'count' },
+        { label: '线路数量（台）', prop: 'lineCount' },
+        { label: '变电数量（台）', prop: 'substationCount' },
+        { label: '电缆数量（台）', prop: 'cableCount' },
         { label: '配置率', prop: 'configRate' },
         { label: '线路配置率', prop: 'lineConfigRate' },
         { label: '变电配置率', prop: 'subStationConfigRate' },
@@ -86,8 +88,17 @@ export default {
   methods: {
     openDialog() {
       this.dialogVisible = true
+      this.getList()
+    },
+    async getList() {
+      try {
+        const res = await getStatByTypeAndAgeByConfigurationApi()
+        console.log('🚀 ~ getList ~ res:', res)
+        this.tableList = res.data
+      } catch (error) {
+        console.log('🚀 ~ getList ~ error:', error)
+      }
     },
-    getList() {},
   },
 }
 </script>
@@ -100,8 +111,6 @@ 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;
 }
 ::v-deep .el-dialog__header {
diff --git a/src/views/screen/wsScreen/components/left/index.vue b/src/views/screen/wsScreen/components/left/index.vue
index 85bbbed5..51bcfa2f 100644
--- a/src/views/screen/wsScreen/components/left/index.vue
+++ b/src/views/screen/wsScreen/components/left/index.vue
@@ -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" />
+            <EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(5474)" />
           </el-col>
           <el-col :span="8" :offset="0">
-            <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore" />
+            <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(5080)" />
           </el-col>
           <el-col :span="8" :offset="0">
-            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore" />
+            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(5010)" />
           </el-col>
         </el-row>
       </div>
@@ -201,8 +201,8 @@ export default {
     openSystemEquip() {
       this.$refs.systemEquip.openDialog()
     },
-    openEquipItemMore() {
-      this.$refs.equipItemMore.openDialog()
+    openEquipItemMore(type) {
+      this.$refs.equipItemMore.openDialog(type)
     },
     openRemarkMore() {
       this.$refs.remarkMore.openDialog()
diff --git a/src/views/screen/wsScreen/components/right/EquipItemMore.vue b/src/views/screen/wsScreen/components/right/EquipItemMore.vue
index 1182e192..94574f4d 100644
--- a/src/views/screen/wsScreen/components/right/EquipItemMore.vue
+++ b/src/views/screen/wsScreen/components/right/EquipItemMore.vue
@@ -21,6 +21,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import { getStatByTypeAndAgeByUsageRateApi, getStatByTypeAndAgeByTurnoverRateApi } from '@/api/wsScreen'
 
 export default {
   // props: {
@@ -39,6 +40,10 @@ export default {
       dialogVisible: false,
       title: '',
       unit: '',
+      categories: [],
+      line: [], // 线路
+      substation: [], // 变电
+      cable: [], // 电缆
     }
   },
   methods: {
@@ -51,9 +56,27 @@ export default {
         this.unit = '次'
       }
       this.dialogVisible = true
-      this.$nextTick(() => {
-        this.initLineChart()
-      })
+      this.getInfo(type)
+    },
+    async getInfo(type) {
+      try {
+        let res = null
+        if (type == 1) {
+          res = await getStatByTypeAndAgeByUsageRateApi()
+        } else {
+          res = await getStatByTypeAndAgeByTurnoverRateApi()
+        }
+        if (!res.data || res.data.length == 0) return
+        this.categories = res.data.map((item) => item.month)
+        this.line = res.data.map((item) => item.lineCount)
+        this.substation = res.data.map((item) => item.substationCount)
+        this.cable = res.data.map((item) => item.cableCount)
+        this.$nextTick(() => {
+          this.initLineChart()
+        })
+      } catch (error) {
+        console.log('🚀 ~ getInfo ~ error:', error)
+      }
     },
     initLineChart() {
       const chartDom = this.$refs.category
@@ -61,12 +84,12 @@ export default {
 
       const myChart = echarts.init(chartDom)
 
-      const categories = ['2020', '2021', '2022', '2023', '2024', '2025']
+      const categories = this.categories
 
       // 三条折线的假数据
-      const data1 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 1000 + 500))
-      const data2 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 800 + 300))
-      const data3 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 600 + 200))
+      const data1 = this.line
+      const data2 = this.substation
+      const data3 = this.cable
 
       const option = {
         tooltip: {
@@ -157,7 +180,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 {