From f5155a13b12ae5d834a83a2c4b2c61e21fed099d Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Mon, 1 Dec 2025 13:17:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inventorys/stocktaking.vue | 355 ++++++++++++++++++---------
 src/views/jsc/index.vue              |  22 +-
 src/views/jsc/leader.vue             | 268 +++++++++++---------
 3 files changed, 413 insertions(+), 232 deletions(-)

diff --git a/src/views/inventorys/stocktaking.vue b/src/views/inventorys/stocktaking.vue
index fb69e79..62d21bf 100644
--- a/src/views/inventorys/stocktaking.vue
+++ b/src/views/inventorys/stocktaking.vue
@@ -687,7 +687,7 @@
     </Modal>
 
     <!-- 盘点小结 Modal -->
-    <Modal v-model="summaryModal.visible" title="盘点小结" width="800">
+    <Modal v-model="summaryModal.visible" title="盘点小结" width="1100">
       <div>
         <div id="print-table">
           <div style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 12px">
@@ -696,71 +696,71 @@
           <table class="summary-table">
             <tr>
               <td>盘点计划名称</td>
-              <td>{{ summaryModal.data ? summaryModal.data.name : '' }}</td>
+              <td colspan="3">{{ summaryModal.data ? summaryModal.data.name : '' }}</td>
             </tr>
             <tr>
               <td>计划开始日期</td>
               <td>{{ summaryModal.data ? summaryModal.data.planStart : '' }}</td>
-            </tr>
-            <tr>
               <td>计划结束日期</td>
               <td>{{ summaryModal.data ? summaryModal.data.planEnd : '' }}</td>
             </tr>
             <tr>
               <td>实际开始日期</td>
               <td>{{ summaryModal.data ? summaryModal.data.actualStart : '' }}</td>
-            </tr>
-            <tr>
               <td>实际结束日期</td>
               <td>{{ summaryModal.data ? summaryModal.data.actualEnd : '' }}</td>
             </tr>
             <tr>
               <td>计划盘点清单数量</td>
               <td>{{ summaryModal.data ? summaryModal.data.planCount : '' }}</td>
-            </tr>
-            <tr>
               <td>实际盘点清单数量</td>
               <td>{{ summaryModal.data ? summaryModal.data.actualCount : '' }}</td>
             </tr>
+            <tr>
+              <td colspan="4" style="padding: 0;">
+                <div style="margin-top: 20px;">
+                  <h4 style="margin-bottom: 12px; font-size: 16px; font-weight: bold;">盘点物资计划详情列表</h4>
+                  <div style="overflow-x: auto; max-width: 100%;">
+                    <Table
+                      :columns="planDetailColumns"
+                      :data="summaryModal.inventoryList"
+                      :loading="summaryModal.loading"
+                      border
+                      style="width: 100%;"
+                    >
+                    <template slot="photos" slot-scope="{ row }">
+                      <div v-if="row.photos && row.photos.length > 0" style="display: flex; gap: 4px; flex-wrap: wrap">
+                        <img
+                          v-for="(photo, index) in row.photos.slice(0, 3)"
+                          :key="index"
+                          :src="photo.url"
+                          style="width: 50px; height: 50px; object-fit: cover; cursor: pointer; border: 1px solid #eee"
+                          @click="previewImage(photo.url)"
+                        />
+                        <span v-if="row.photos.length > 3" style="line-height: 50px; color: #999"
+                          >+{{ row.photos.length - 3 }}</span
+                        >
+                      </div>
+                      <span v-else>-</span>
+                    </template>
+                  </Table>
+                </div>
+                </div>
+              </td>
+            </tr>
             <tr>
               <td class="sign-cell">签字区</td>
-              <td style="text-align: center">
-                <img :src="summaryModal.signImage" alt="" style="max-width: 200px; max-height: 100px; border: 1px solid #eee; cursor: pointer">
+              <td colspan="3" style="text-align: left">
+                <img v-if="getSummarySignatureDataUrl()" :src="getSummarySignatureDataUrl()" alt="" style="max-width: 200px;">
               </td>
             </tr>
           </table>
         </div>
         <div style="margin: 24px 0 8px 0">
-          <span style="font-weight: bold">签字图片上传：</span>
-          <div v-if="summaryModal.signImage" style="margin-top: 8px">
-            <div style="position: relative; display: inline-block">
-              <img
-                :src="summaryModal.signImage"
-                style="max-width: 200px; max-height: 100px; border: 1px solid #eee; cursor: pointer"
-                @click="previewImage(summaryModal.signImage)"
-              />
-              <Button
-                type="error"
-                size="small"
-                style="position: absolute; top: 5px; right: 5px"
-                @click.stop="
-                  summaryModal.signImage = null
-                  summaryModal.signImageId = null
-                "
-              >
-                重新上传
-              </Button>
-            </div>
-          </div>
-          <div v-else style="margin-top: 8px">
-            <Upload
-              :before-upload="beforeSignUpload"
-              :on-success="handleSignUpload"
-              :show-upload-list="false"
-              :action="baseUrl + 'api/admin/upload-file'"
-            >
-              <Button type="primary" size="small">上传签字图片</Button>
-            </Upload>
+          <span style="font-weight: bold">签名：</span>
+          <div class="signature-pad-wrapper" style="margin-top: 8px">
+            <canvas ref="summarySignaturePad" class="signature-canvas" />
+            <Button size="small" style="margin-top: 8px;" @click="clearSummarySignature">清除签名</Button>
           </div>
         </div>
       </div>
@@ -1351,52 +1351,54 @@ export default {
       },
       planDetailColumns: [
         {
-          title: '一级分类',
-          key: 'yijifenlei',
-          width: 120,
+          title: '所属种类',
+          key: 'suoshuzhonglei',
+          width: 140,
           render: (h, params) => {
             if (!params.row.inventory || !params.row.inventory.wuzibianma_material_infos_wuzibianma_relation) {
               return h('span', '-')
             }
-            const materialInfoType = params.row.inventory.wuzibianma_material_infos_wuzibianma_relation.material_info_type
-            const value = materialInfoType ? materialInfoType.split('-')[0] : ''
-            return h('span', value || '-')
-          }
-        },
-        {
-          title: '二级分类',
-          key: 'erjifenlei',
-          width: 120,
-          render: (h, params) => {
-            if (!params.row.inventory || !params.row.inventory.wuzibianma_material_infos_wuzibianma_relation) {
-              return h('span', '-')
+            const relation = params.row.inventory.wuzibianma_material_infos_wuzibianma_relation
+            const materialInfoType = relation.material_info_type
+            const fenleiDetail = relation.fenlei_detail
+
+            // 获取一级分类
+            let yiji = ''
+            if (materialInfoType) {
+              yiji = materialInfoType.split('-')[0] || ''
             }
-            const materialInfoType = params.row.inventory.wuzibianma_material_infos_wuzibianma_relation.material_info_type
-            let value = ''
+
+            // 获取二级分类
+            let erji = ''
             if (materialInfoType) {
               const parts = materialInfoType.split('-')
-              value = parts.length > 1 ? parts[1] : parts[0]
+              erji = parts.length > 1 ? parts[1] : ''
             }
-            return h('span', value || '-')
-          }
-        },
-        {
-          title: '所属种类',
-          key: 'suoshuzhonglei',
-          width: 120,
-          render: (h, params) => {
-            if (!params.row.inventory || !params.row.inventory.wuzibianma_material_infos_wuzibianma_relation) {
+
+            // 获取所属种类
+            const suoshu = fenleiDetail ? fenleiDetail.name : ''
+
+            // 组合显示：一级分类-二级分类/所属种类
+            const parts = []
+            if (yiji) parts.push(yiji)
+            if (erji) parts.push(erji)
+            const fenci = parts.length > 0 ? parts.join('-') : ''
+
+            if (fenci && suoshu) {
+              return h('span', `${fenci}/${suoshu}`)
+            } else if (fenci) {
+              return h('span', fenci)
+            } else if (suoshu) {
+              return h('span', suoshu)
+            } else {
               return h('span', '-')
             }
-            const fenleiDetail = params.row.inventory.wuzibianma_material_infos_wuzibianma_relation.fenlei_detail
-            const value = fenleiDetail ? fenleiDetail.name : ''
-            return h('span', value || '-')
           }
         },
         {
           title: '物资名称',
           key: 'zichanmingcheng',
-          minWidth: 150,
+          width: 110,
           render: (h, params) => {
             return h('span', params.row.inventory ? params.row.inventory.zichanmingcheng : '-')
           }
@@ -1404,7 +1406,7 @@ export default {
         {
           title: '物资型号',
           key: 'guigexinghao',
-          width: 120,
+          width: 100,
           render: (h, params) => {
             return h('span', params.row.inventory ? params.row.inventory.guigexinghao : '-')
           }
@@ -1412,36 +1414,29 @@ export default {
         {
           title: '物资规格',
           key: 'wuziguige',
-          width: 120,
+          width: 100,
           render: (h, params) => {
             return h('span', params.row.inventory ? params.row.inventory.wuziguige : '-')
           }
         },
-        {
-          title: '单位',
-          key: 'jiliangdanwei',
-          width: 80,
-          render: (h, params) => {
-            return h('span', params.row.inventory ? params.row.inventory.jiliangdanwei : '-')
-          }
-        },
         {
           title: '原库存数量',
           key: 'chushishuliang',
-          width: 120,
+          width: 110,
           render: (h, params) => {
-            return h('span', params.row.inventory ? params.row.inventory.chushishuliang : '-')
+            const quantity = params.row.inventory?.chushishuliang
+            const unit = params.row.inventory?.jiliangdanwei || ''
+            // 如果原库存数量为 null、undefined 或空值，显示 "-"
+            if (quantity == null || quantity === '') {
+              return h('span', '-')
+            }
+            return h('span', `${quantity}${unit ? unit : ''}`)
           }
         },
-        {
-          title: '状态',
-          slot: 'status',
-          width: 100
-        },
         {
           title: '盘点人',
           key: 'responsible_admin_name',
-          width: 120,
+          width: 80,
           render: (h, params) => {
             return h('span', params.row.responsible_admin ? params.row.responsible_admin.name : '-')
           }
@@ -1449,32 +1444,50 @@ export default {
         {
           title: '盘点数量',
           key: 'check_num',
-          width: 100
+          width: 100,
+          render: (h, params) => {
+            const quantity = params.row.check_num || '-'
+            const unit = params.row.inventory?.jiliangdanwei || ''
+            if (quantity === '-') {
+              return h('span', '-')
+            }
+            // 获取原库存数量（可能为 null）
+            const originalQuantity = params.row.inventory?.chushishuliang
+            // 比较盘点数量和原库存数量
+            // 如果原库存数量为 null、undefined 或空值，且盘点数量有值，则显示红色
+            // 如果原库存数量存在，则比较字符串值
+            const isDifferent = (originalQuantity == null || originalQuantity === '') || (originalQuantity != null && String(quantity) !== String(originalQuantity))
+            // 如果不同，使用红色字体
+            const style = isDifferent ? { color: 'red' } : {}
+            return h('span', { style }, `${quantity}${unit ? unit : ''}`)
+          }
         },
         {
           title: '盘点日期',
           key: 'check_date',
-          width: 150
+          width: 110
         },
         {
           title: '照片',
           slot: 'photos',
-          width: 150
+          width: 100
         },
         {
           title: '备注',
           key: 'remark',
-          minWidth: 150,
+          width: 120,
           tooltip: true
         }
       ],
       summaryModal: {
         visible: false,
         data: null,
-        signImageId: null,
-        signImage: null,
-        type: 1 // 默认为日常检查
-      }
+        type: 1, // 默认为日常检查
+        inventoryList: [],
+        loading: false
+      },
+      summarySignaturePadCtx: null,
+      summarySignaturePadCanvas: null
     }
   },
   watch: {
@@ -2333,18 +2346,34 @@ export default {
         planCount: planData.chart_total || '-',
         actualCount: planData.chart_done || '-'
       }
-      this.summaryModal.signImageId = planData.sign_id || null
-      this.summaryModal.signImage = planData.sign ? planData.sign.url : null
       this.summaryModal.visible = true
+      this.loadSummaryInventoryList()
+      this.$nextTick(() => {
+        this.initSummarySignaturePad()
+      })
     },
-    beforeSignUpload(file) {
-      // 可加图片类型/大小校验
-      return true
-    },
-    handleSignUpload(response) {
-      // 假设 response.url 是图片地址
-      this.summaryModal.signImageId = response.id
-      this.summaryModal.signImage = response.url
+    async loadSummaryInventoryList() {
+      if (!this.summaryModal.data || !this.summaryModal.data.id) return
+      this.summaryModal.loading = true
+      try {
+        const params = {
+          page: 1,
+          page_size: 9999, // 获取所有数据
+          'filter[0][key]': 'material_infos_plan_id',
+          'filter[0][op]': 'eq',
+          'filter[0][value]': this.summaryModal.data.id
+        }
+
+        const res = await getStocktakingPlanLinkList(qs.stringify(params))
+        if (res && res.list) {
+          this.summaryModal.inventoryList = res.list.data || []
+        }
+      } catch (e) {
+        this.$Message.error('获取盘点物资列表失败')
+        console.error('获取盘点物资列表失败:', e)
+      } finally {
+        this.summaryModal.loading = false
+      }
     },
     handleMoreCommand(command, row) {
       if (command === 'edit') {
@@ -2356,15 +2385,27 @@ export default {
       }
     },
     async handleSummarySubmit() {
-      if (!this.summaryModal.signImageId) {
-        this.$Message.warning('请上传签字图片')
+      const signatureDataUrl = this.getSummarySignatureDataUrl()
+      if (!signatureDataUrl) {
+        this.$Message.warning('请签名')
         return
       }
 
       try {
+        // 1. 先将签名canvas转为图片并上传，拿到sign_id
+        const blob = this.dataURLtoBlob(signatureDataUrl)
+        const formData = new FormData()
+        formData.append('file', blob, 'signature.png')
+        // 调用上传接口
+        const res = await this.$axios.post(this.baseUrl + 'api/admin/upload-file', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' }
+        })
+        const sign_id = res.data?.id || res.id
+
+        // 2. 组装参数并提交
         const params = {
           id: this.summaryModal.data.id,
-          sign_id: this.summaryModal.signImageId
+          sign_id: sign_id
         }
 
         await saveStocktakingPlan(params)
@@ -2375,6 +2416,88 @@ export default {
         this.$Message.error('提交失败：' + (error.message || '未知错误'))
       }
     },
+    initSummarySignaturePad() {
+      const canvas = this.$refs.summarySignaturePad
+      if (!canvas) return
+      const ctx = canvas.getContext('2d')
+      // 适配高分屏
+      const dpr = window.devicePixelRatio || 1
+      const container = canvas.parentNode
+      const displayWidth = container.offsetWidth || 400
+      canvas.width = displayWidth * dpr
+      canvas.height = 120 * dpr
+      canvas.style.width = displayWidth + 'px'
+      canvas.style.height = '120px'
+      ctx.scale(dpr, dpr)
+      ctx.lineWidth = 2
+      ctx.lineCap = 'round'
+      let drawing = false
+      let lastX = 0; let lastY = 0
+      const getPos = e => {
+        if (e.touches && e.touches.length) {
+          const rect = canvas.getBoundingClientRect()
+          return {
+            x: e.touches[0].clientX - rect.left,
+            y: e.touches[0].clientY - rect.top
+          }
+        } else {
+          const rect = canvas.getBoundingClientRect()
+          return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+          }
+        }
+      }
+      const start = e => {
+        drawing = true
+        const pos = getPos(e)
+        lastX = pos.x
+        lastY = pos.y
+      }
+      const move = e => {
+        if (!drawing) return
+        const pos = getPos(e)
+        ctx.beginPath()
+        ctx.moveTo(lastX, lastY)
+        ctx.lineTo(pos.x, pos.y)
+        ctx.stroke()
+        lastX = pos.x
+        lastY = pos.y
+      }
+      const end = () => { drawing = false }
+      canvas.addEventListener('mousedown', start)
+      canvas.addEventListener('mousemove', move)
+      canvas.addEventListener('mouseup', end)
+      canvas.addEventListener('mouseleave', end)
+      canvas.addEventListener('touchstart', start)
+      canvas.addEventListener('touchmove', move)
+      canvas.addEventListener('touchend', end)
+      this.summarySignaturePadCtx = ctx
+      this.summarySignaturePadCanvas = canvas
+    },
+    clearSummarySignature() {
+      if (this.summarySignaturePadCtx && this.summarySignaturePadCanvas) {
+        this.summarySignaturePadCtx.clearRect(0, 0, this.summarySignaturePadCanvas.width, this.summarySignaturePadCanvas.height)
+      }
+    },
+    getSummarySignatureDataUrl() {
+      if (this.summarySignaturePadCanvas) {
+        return this.summarySignaturePadCanvas.toDataURL('image/png')
+      }
+      return ''
+    },
+    dataURLtoBlob(dataurl) {
+      // 将base64图片转为Blob对象
+      const arr = dataurl.split(',')
+      const mime = arr[0].match(/:(.*?);/)[1]
+      const bstr = atob(arr[1])
+      let n = bstr.length
+      const u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new Blob([u8arr], { type: mime })
+    },
 
     // 获取仓库
     async getCangku() {
@@ -3009,4 +3132,16 @@ export default {
   margin-right: 10px;
   margin-bottom: 5px;
 }
+.signature-pad-wrapper {
+  width: 100%;
+}
+
+.signature-canvas {
+  width: 100%;
+  height: 120px;
+  border: 1px solid #dcdee2;
+  border-radius: 4px;
+  cursor: crosshair;
+  background: #fff;
+}
 </style>
diff --git a/src/views/jsc/index.vue b/src/views/jsc/index.vue
index afbffe5..944d0f1 100644
--- a/src/views/jsc/index.vue
+++ b/src/views/jsc/index.vue
@@ -3,7 +3,7 @@
     <div class="jsc-view" @click="toLeader">切换视图</div>
     <div class="jscC">
       <div class="jscC-top">
-        <div v-for="item in topObj">
+        <div v-for="(item,index) in topObj" :key="index">
           <div class="label">{{ item.label }}</div>
           <div class="value">
             {{ item.value }} <span style="font-size: 0.2rem">{{ item.unit ? item.unit : '' }}</span>
@@ -30,11 +30,13 @@
             </div> -->
           </div>
           <div class="jscC-center-left-content">
-            <div v-for="item in upList">
-              <img :src="item.img" alt="" />
-              <span>{{ item.name }}：</span>
-              <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
-            </div>
+            <template v-for="(item,index) in upList">
+              <div v-if="item.name != '桩类'" :key="index">
+                <img :src="item.img" alt="" />
+                <span>{{ item.name }}：</span>
+                <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
+              </div>
+            </template>
 
             <!-- <div v-if="activeType === '全市'" v-for="item in upListByFloodMaterials">
               <img :src="item.img" alt="" />
@@ -65,11 +67,13 @@
               <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
             </div> -->
 
-            <div v-for="item in upListByFloodMaterials">
+            <template v-for="(item,index) in upListByFloodMaterials">
+              <div v-if="item.name != '桩类'" :key="index">
               <img :src="item.img" alt="" />
               <span>{{ item.name }}：</span>
               <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
-            </div>
+              </div>
+            </template>
           </div>
           <!-- <div class="jscC-center-top">
             <div class="jscC-center-left-title">年度物资动态</div>
@@ -102,7 +106,7 @@
         </div>
       </div>
       <div class="jscC-bottom">
-        <div v-for="item in bottomObj" @click="toUrl(item.path)">
+        <div v-for="(item,index) in bottomObj" :key="index" @click="toUrl(item.path)">
           <div class="label">{{ item.label }}</div>
         </div>
       </div>
diff --git a/src/views/jsc/leader.vue b/src/views/jsc/leader.vue
index 1845289..f893bf1 100644
--- a/src/views/jsc/leader.vue
+++ b/src/views/jsc/leader.vue
@@ -22,18 +22,20 @@
               <span>重点防汛物资统计</span>
             </div>
             <div class="jscC-center-left-content">
-              <div v-for="item in upList" :key="item.name">
-                <!-- 四个角的三角形 -->
-                <div class="corner top-left"></div>
-                <div class="corner top-right"></div>
-                <div class="corner bottom-left"></div>
-                <div class="corner bottom-right"></div>
-                <img :src="item.img" alt="" />
-                <div class="item-info">
-                  <span>{{ item.name }}：</span>
-                  <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
+              <template v-for="(item,index) in upList">
+                <div v-if="item.name != '桩类'" :key="index">
+                  <!-- 四个角的三角形 -->
+                  <div class="corner top-left"></div>
+                  <div class="corner top-right"></div>
+                  <div class="corner bottom-left"></div>
+                  <div class="corner bottom-right"></div>
+                  <img :src="item.img" alt="" />
+                  <div class="item-info">
+                    <span>{{ item.name }}：</span>
+                    <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
+                  </div>
                 </div>
-              </div>
+              </template>
             </div>
           </div>
         </div>
@@ -47,33 +49,38 @@
               <span>各地重点防汛物资</span>
             </div>
             <div class="area-selector">
-              <i class="el-icon-arrow-left"></i>
-              <div class="area-list">
+              <i class="el-icon-arrow-left" @click="prevArea"></i>
+              <div class="area-list" ref="areaListContainer">
                 <span
                   class="area-item"
                   v-for="area in areaList"
                   :key="area.id"
                   :class="{ active: currentArea === area.id }"
+                  :data-area-id="area.id"
                   @click="selectArea(area.id)"
                 >
                   {{ area.name }}
                 </span>
               </div>
-              <i class="el-icon-arrow-right"></i>
+              <i class="el-icon-arrow-right" @click="nextArea"></i>
             </div>
             <div class="materials-grid">
-              <div class="material-item" v-for="item in areaMaterials" :key="item.name">
-                <!-- 四个角的三角形 -->
-                <div class="corner top-left"></div>
-                <div class="corner top-right"></div>
-                <div class="corner bottom-left"></div>
-                <div class="corner bottom-right"></div>
-                <img :src="item.img" alt="" />
-                <div class="item-info">
-                  <span class="material-name">{{ item.value }}</span>
-                  <span class="material-value">{{ item.flood_materials_total }}{{ item.remark }}</span>
+              <template v-for="(item,index) in areaMaterials">
+                <div class="material-item" v-if="item.value != '桩类'">
+                  <!-- 四个角的三角形 -->
+                  <div class="corner top-left"></div>
+                  <div class="corner top-right"></div>
+                  <div class="corner bottom-left"></div>
+                  <div class="corner bottom-right"></div>
+                  <img :src="item.img" alt="" />
+                  <div class="item-info">
+                    <span class="material-name">{{ item.value }}</span>
+                    <span class="material-value"
+                      >{{ item.flood_materials_total }}{{ item.remark }}</span
+                    >
+                  </div>
                 </div>
-              </div>
+              </template>
             </div>
           </div>
           <div class="jscC-center-right-bottom">
@@ -185,7 +192,6 @@ export default {
 
     // 初始化区域物资数据
     this.getAreaMaterials(this.currentArea)
-    
     // 监听地图容器尺寸变化
     this.$nextTick(() => {
       if (this.$refs.echartsMap) {
@@ -271,7 +277,7 @@ export default {
       let pumpTotal = 0 // 排水类总和
       let mobilePumpTotal = 0 // 移动泵车总和
       let pumpUnit = '' // 排水类的单位
-      let pumpImg = this.imgList['排水类']
+      const pumpImg = this.imgList['排水类']
       // 第一步：遍历数组，处理常规项并统计特殊项
       arr.forEach(item => {
         const { name, total, unit, img } = item
@@ -353,6 +359,42 @@ export default {
     selectArea(areaId) {
       this.currentArea = areaId
       this.getAreaMaterials(areaId)
+      this.scrollToArea(areaId)
+    },
+    prevArea() {
+      if (this.areaList.length === 0) return
+      const currentIndex = this.areaList.findIndex(area => area.id === this.currentArea)
+      if (currentIndex === -1) return
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.areaList.length - 1
+      const prevAreaId = this.areaList[prevIndex].id
+      this.selectArea(prevAreaId)
+    },
+    nextArea() {
+      if (this.areaList.length === 0) return
+      const currentIndex = this.areaList.findIndex(area => area.id === this.currentArea)
+      if (currentIndex === -1) return
+      const nextIndex = currentIndex < this.areaList.length - 1 ? currentIndex + 1 : 0
+      const nextAreaId = this.areaList[nextIndex].id
+      this.selectArea(nextAreaId)
+    },
+    scrollToArea(areaId) {
+      this.$nextTick(() => {
+        const container = this.$refs.areaListContainer
+        if (!container) return
+        const areaItem = container.querySelector(`[data-area-id="${areaId}"]`)
+        if (!areaItem) return
+        const containerRect = container.getBoundingClientRect()
+        const itemRect = areaItem.getBoundingClientRect()
+        const scrollLeft =
+          container.scrollLeft +
+          (itemRect.left - containerRect.left) -
+          containerRect.width / 2 +
+          itemRect.width / 2
+        container.scrollTo({
+          left: scrollLeft,
+          behavior: 'smooth'
+        })
+      })
     },
     getAreaMaterials(areaId) {
       // 从areaList中找到对应区域的数据
@@ -657,39 +699,39 @@ export default {
           }
 
           // 泵类特殊样式 - 跨越底部一行
-          & > div:last-child {
-            grid-column: span 3;
-            justify-content: center;
-            text-align: center;
-
-            &:hover {
-              box-shadow: 0 4px 20px rgba(75, 227, 193, 0.3);
-            }
-
-            & > img {
-              margin: 0;
-            }
-
-            .item-info {
-              text-align: center !important;
-              align-items: center !important;
-              flex-direction: row !important;
-              gap: 10px !important;
-              justify-content: center !important;
-              width: 100% !important;
-            }
-
-            .item-info span:first-of-type {
-              margin-right: 5px !important;
-              margin-bottom: 0 !important;
-              display: inline !important;
-            }
-
-            .item-info span:last-of-type {
-              color: #4be3c1 !important;
-              display: inline !important;
-            }
-          }
+          // & > div:last-child {
+          //   grid-column: span 3;
+          //   justify-content: center;
+          //   text-align: center;
+
+          //   &:hover {
+          //     box-shadow: 0 4px 20px rgba(75, 227, 193, 0.3);
+          //   }
+
+          //   & > img {
+          //     margin: 0;
+          //   }
+
+          //   .item-info {
+          //     text-align: center !important;
+          //     align-items: center !important;
+          //     flex-direction: row !important;
+          //     gap: 10px !important;
+          //     justify-content: center !important;
+          //     width: 100% !important;
+          //   }
+
+          //   .item-info span:first-of-type {
+          //     margin-right: 5px !important;
+          //     margin-bottom: 0 !important;
+          //     display: inline !important;
+          //   }
+
+          //   .item-info span:last-of-type {
+          //     color: #4be3c1 !important;
+          //     display: inline !important;
+          //   }
+          // }
         }
       }
 
@@ -700,7 +742,7 @@ export default {
         align-items: center;
         justify-content: center;
         position: relative;
-        z-index:99;
+        z-index: 99;
         /* 确保地图组件撑满容器 */
         :deep(.echartsMap) {
           width: 100% !important;
@@ -721,7 +763,7 @@ export default {
           padding: 20px;
           // border: 1px solid rgba(110, 198, 230, 0.3);
           flex: 1;
-          padding-top:0;
+          padding-top: 0;
           .section-title {
             color: #fff;
             font-size: 20px;
@@ -764,23 +806,23 @@ export default {
             }
           }
 
-                     .area-list {
-             display: flex;
-             gap: 8px;
-             flex: 1;
-             overflow-x: auto;
-             background: #051a59;
-             padding:3px 10px;
-             border-radius: 20px;
-             
-             /* 隐藏滚动条 */
-             scrollbar-width: none; /* Firefox */
-             -ms-overflow-style: none; /* IE and Edge */
-             
-             /* Webkit browsers (Chrome, Safari, etc.) */
-             &::-webkit-scrollbar {
-               display: none;
-             }
+          .area-list {
+            display: flex;
+            gap: 8px;
+            flex: 1;
+            overflow-x: auto;
+            background: #051a59;
+            padding: 3px 10px;
+            border-radius: 20px;
+
+            /* 隐藏滚动条 */
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+
+            /* Webkit browsers (Chrome, Safari, etc.) */
+            &::-webkit-scrollbar {
+              display: none;
+            }
             .area-item {
               padding: 6px 12px;
               // background: rgba(110, 198, 230, 0.1);
@@ -904,39 +946,39 @@ export default {
             }
 
             // 泵类特殊样式 - 跨越底部一行
-            &:last-child {
-              grid-column: span 2;
-              justify-content: center;
-              text-align: center;
-
-              &:hover {
-                box-shadow: 0 4px 20px rgba(75, 227, 193, 0.3);
-              }
-
-              & > img {
-                margin: 0;
-              }
-
-              .item-info {
-                text-align: center !important;
-                align-items: center !important;
-                flex-direction: row !important;
-                gap: 10px !important;
-                justify-content: center !important;
-                width: 100% !important;
-              }
-
-              .item-info .material-name {
-                margin-right: 5px !important;
-                margin-bottom: 0 !important;
-                display: inline !important;
-              }
-
-              .item-info .material-value {
-                color: #4be3c1 !important;
-                display: inline !important;
-              }
-            }
+            // &:last-child {
+            //   grid-column: span 2;
+            //   justify-content: center;
+            //   text-align: center;
+
+            //   &:hover {
+            //     box-shadow: 0 4px 20px rgba(75, 227, 193, 0.3);
+            //   }
+
+            //   & > img {
+            //     margin: 0;
+            //   }
+
+            //   .item-info {
+            //     text-align: center !important;
+            //     align-items: center !important;
+            //     flex-direction: row !important;
+            //     gap: 10px !important;
+            //     justify-content: center !important;
+            //     width: 100% !important;
+            //   }
+
+            //   .item-info .material-name {
+            //     margin-right: 5px !important;
+            //     margin-bottom: 0 !important;
+            //     display: inline !important;
+            //   }
+
+            //   .item-info .material-value {
+            //     color: #4be3c1 !important;
+            //     display: inline !important;
+            //   }
+            // }
           }
         }
 
@@ -954,7 +996,7 @@ export default {
               color: #6dcde6;
               font-size: 12px;
               min-width: 60px;
-              text-align:right;
+              text-align: right;
             }
 
             .team-bar {