From 8643f174aa83caa6df77d7e5156ec41759ecdc6b Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Fri, 19 Sep 2025 15:43:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A9=BE=E9=A9=B6=E8=88=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/jsc/components/WarehouseTable.vue | 492 ++++++++++++--------
 src/views/jsc/index.vue                     | 136 ++++--
 2 files changed, 392 insertions(+), 236 deletions(-)

diff --git a/src/views/jsc/components/WarehouseTable.vue b/src/views/jsc/components/WarehouseTable.vue
index 85ee27c..e8928a4 100644
--- a/src/views/jsc/components/WarehouseTable.vue
+++ b/src/views/jsc/components/WarehouseTable.vue
@@ -1,67 +1,158 @@
 <template>
-  <div class="warehouse-table">
-    <!-- <div class="warehouse-table-title">年度物资动态</div> -->
-    <!-- Element-UI 表格 -->
-    <el-table :data="currentPageData" style="width: 100%" height="200" :row-class-name="getRowClass"
-      :cell-style="{background: 'transparent', border: 'none'}" :header-cell-class-name="'headerRow'">
-      <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" />
-      <el-table-column show-overflow-tooltip prop="zichanmingcheng" width="120" label="物资名称" align="left" />
-      <el-table-column show-overflow-tooltip prop="total" width="80" label="数量" align="center" />
-      <el-table-column show-overflow-tooltip prop="suozaicangku_text" width="100" label="仓库" align="left" />
-      <el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
-    </el-table>
-
-    <!-- 四个角的三角形 -->
-    <div class="corner top-left"></div>
-    <div class="corner top-right"></div>
-    <div class="corner bottom-left"></div>
-    <div class="corner bottom-right"></div>
+  <div>
+    <div class="title">最新入库</div>
+    <div class="warehouse-table">
+      <!-- <div class="warehouse-table-title">年度物资动态</div> -->
+      <!-- Element-UI 表格 -->
+      <el-table
+        :data="currentPageData"
+        style="width: 100%"
+        height="200"
+        :row-class-name="getRowClass"
+        :cell-style="{ background: 'transparent', border: 'none' }"
+        :header-cell-class-name="'headerRow'"
+      >
+        <!-- <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" /> -->
+        <el-table-column
+          show-overflow-tooltip
+          prop="zichanmingcheng"
+          width="120"
+          label="物资名称"
+          align="left"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="total"
+          width="80"
+          label="数量"
+          align="center"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="suozaicangku_text"
+          width="100"
+          label="仓库"
+          align="left"
+        />
+        <el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
+      </el-table>
+      <!-- 四个角的三角形 -->
+      <div class="corner top-left"></div>
+      <div class="corner top-right"></div>
+      <div class="corner bottom-left"></div>
+      <div class="corner bottom-right"></div>
+    </div>
 
+    <div class="title">最新出库</div>
+    <div class="warehouse-table">
+      <!-- <div class="warehouse-table-title">年度物资动态</div> -->
+      <!-- Element-UI 表格 -->
+
+      <el-table
+        :data="currentPageData2"
+        style="width: 100%"
+        height="200"
+        :row-class-name="getRowClass"
+        :cell-style="{ background: 'transparent', border: 'none' }"
+        :header-cell-class-name="'headerRow'"
+      >
+        <!-- <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" /> -->
+        <el-table-column
+          show-overflow-tooltip
+          prop="zichanmingcheng"
+          width="120"
+          label="物资名称"
+          align="left"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="total"
+          width="80"
+          label="数量"
+          align="center"
+        />
+        <el-table-column
+          show-overflow-tooltip
+          prop="suozaicangku_text"
+          width="100"
+          label="仓库"
+          align="left"
+        />
+        <el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
+      </el-table>
+      <!-- 四个角的三角形 -->
+      <div class="corner top-left"></div>
+      <div class="corner top-right"></div>
+      <div class="corner bottom-left"></div>
+      <div class="corner bottom-right"></div>
+    </div>
   </div>
 </template>
 
 <script>
-  import {
-    soCharts
-  } from '@/api/charts.js'
-  export default {
-    name: 'WarehouseTable',
-    data() {
-      return {
-        // 模拟数据源，可根据实际接口返回调整结构
-        tableData: [],
-        pageSize: 3, // 每页显示 3 条数据
-        currentPage: 1, // 当前页码
-        timer: null // 定时器标识
-      }
-    },
-    computed: {
-      // 计算当前页数据
-      currentPageData() {
-        const start = (this.currentPage - 1) * this.pageSize
-        const end = start + this.pageSize
-        return this.tableData.slice(start, end)
-      },
-      // 计算总页数
-      totalPages() {
-        return Math.ceil(this.tableData.length / this.pageSize)
-      }
+import { soCharts } from '@/api/charts.js'
+export default {
+  name: 'WarehouseTable',
+  data() {
+    return {
+      // 模拟数据源，可根据实际接口返回调整结构
+      tableData: [], //入库
+      tableData2: [], //出库
+      pageSize: 3, // 每页显示 3 条数据
+      currentPage: 1, // 当前页码
+      timer: null, // 定时器标识
+      currentPage2: 1, // 当前页码
+      timer2: null // 定时器标识
+    }
+  },
+  computed: {
+    // 计算当前页数据
+    currentPageData() {
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      return this.tableData.slice(start, end)
     },
-    mounted() {
-      // 初始化定时器，3 秒切换一次
-      this.getChartData()
-      // this.startTimer()
+    // 计算总页数
+    totalPages() {
+      return Math.ceil(this.tableData.length / this.pageSize)
     },
-    beforeDestroy() {
-      // 组件销毁前清除定时器，避免内存泄漏
-      this.clearTimer()
+    currentPageData2() {
+      const start = (this.currentPage2 - 1) * this.pageSize
+      const end = start + this.pageSize
+      return this.tableData2.slice(start, end)
     },
-    methods: {
-      async getChartData() {
-        const so = await soCharts()
-        // 出入库
-        let arr = []
-        so.map(item => {
+    totalPages2() {
+      return Math.ceil(this.tableData2.length / this.pageSize)
+    }
+
+  },
+  mounted() {
+    // 初始化定时器，3 秒切换一次
+    this.getChartData()
+    // this.startTimer()
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器，避免内存泄漏
+    this.clearTimer()
+    this.clearTimer2()
+  },
+  methods: {
+    async getChartData() {
+      const so = await soCharts()
+      // 出入库
+      const arr = [] // ruku
+      const arr2 = [] //chuku
+      so.map(item => {
+        if (item.jieyongshuliang) {
+          arr2.push({
+            suozaicangku_text: item.suozaicangku_text,
+            type: item.jieyongshuliang ? '出库' : '入库',
+            total: item.jieyongshuliang ? item.jieyongshuliang : item.rukushuliang,
+            zichanmingcheng: item.zichanmingcheng,
+            fenlei_text: item.fenlei_text,
+            riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
+          })
+        } else {
           arr.push({
             suozaicangku_text: item.suozaicangku_text,
             type: item.jieyongshuliang ? '出库' : '入库',
@@ -70,161 +161,186 @@
             fenlei_text: item.fenlei_text,
             riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
           })
-        })
-        this.tableData = arr
-        if (this.tableData.length > 0) {
-          this.startTimer()
         }
-      },
-      // 切换到下一页
-      nextPage() {
-        this.currentPage = this.currentPage % this.totalPages + 1
-      },
-      // 启动定时器
-      startTimer() {
-        this.timer = setInterval(() => {
-          this.nextPage()
-        }, 3000)
-      },
-      // 清除定时器
-      clearTimer() {
-        if (this.timer) {
-          clearInterval(this.timer)
-          this.timer = null
-        }
-      },
-      // 根据行数据返回对应的类名
-      getRowClass({
-        row
-      }) {
-        if (row.type === '出库') {
-          return 'outbound-row';
-        } else if (row.type === '入库') {
-          return 'inbound-row';
-        }
-        return '';
+      })
+      this.tableData = arr
+      this.tableData2 = arr2
+      if (this.tableData.length > 0) {
+        this.startTimer()
+      }
+      if (this.tableData2.length > 0) {
+        this.startTimer2()
       }
+    },
+    // 切换到下一页
+    nextPage() {
+      this.currentPage = (this.currentPage % this.totalPages) + 1
+    },
+    nextPage2() {
+      this.currentPage2 = (this.currentPage2 % this.totalPages2) + 1
+    },
+    // 启动定时器
+    startTimer() {
+      this.timer = setInterval(() => {
+        this.nextPage()
+      }, 3000)
+    },
+    startTimer2() {
+      this.timer2 = setInterval(() => {
+        this.nextPage2()
+      }, 3000)
+    },
+    // 清除定时器
+    clearTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    clearTimer2() {
+      if (this.timer2) {
+        clearInterval(this.timer2)
+        this.timer2 = null
+      }
+    },
+    // 根据行数据返回对应的类名
+    getRowClass({ row }) {
+      if (row.type === '出库') {
+        return 'outbound-row'
+      } else if (row.type === '入库') {
+        return 'inbound-row'
+      }
+      return ''
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .warehouse-table {
-    width: 100%;
-
-    position: relative;
-    /* 可根据实际调整宽度 */
-    margin: 0 auto;
-    border: 1px solid #6dcde6;
-    box-shadow: inset 0 0 10px 2px #6dcde6;
-    padding: 20px;
-    margin-bottom: 20px;
-  }
+.title {
+  color: #6dcde6;
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 10px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.warehouse-table {
+  width: 100%;
 
+  position: relative;
+  /* 可根据实际调整宽度 */
+  margin: 0 auto;
+  border: 1px solid #6dcde6;
+  box-shadow: inset 0 0 10px 2px #6dcde6;
+  padding: 10px;
+  margin-bottom: 10px;
+}
 
+/* 四角三角形基础样式 */
+.corner {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  z-index: 10;
+  /* 确保显示在表格内容上方 */
+}
 
-  /* 四角三角形基础样式 */
-  .corner {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    z-index: 10;
-    /* 确保显示在表格内容上方 */
-  }
+/* 左上角 */
+.top-left {
+  top: 3px;
+  left: 3px;
+  border-width: 10px 10px 0 0;
+  border-color: #6dcde6 transparent transparent transparent;
+}
 
-  /* 左上角 */
-  .top-left {
-    top: 3px;
-    left: 3px;
-    border-width: 10px 10px 0 0;
-    border-color: #6dcde6 transparent transparent transparent;
-  }
+/* 右上角 */
+.top-right {
+  top: 3px;
+  right: 3px;
+  border-width: 0 10px 10px 0;
+  border-color: transparent #6dcde6 transparent transparent;
+}
 
-  /* 右上角 */
-  .top-right {
-    top: 3px;
-    right: 3px;
-    border-width: 0 10px 10px 0;
-    border-color: transparent #6dcde6 transparent transparent;
-  }
+/* 左下角 */
+.bottom-left {
+  bottom: 3px;
+  left: 3px;
+  border-width: 10px 0 0 10px;
+  border-color: transparent transparent transparent #6dcde6;
+}
 
-  /* 左下角 */
-  .bottom-left {
-    bottom: 3px;
-    left: 3px;
-    border-width: 10px 0 0 10px;
-    border-color: transparent transparent transparent #6dcde6;
-  }
+/* 右下角 */
+.bottom-right {
+  bottom: 3px;
+  right: 3px;
+  border-width: 0 0 10px 10px;
+  border-color: transparent transparent #6dcde6 transparent;
+}
 
-  /* 右下角 */
-  .bottom-right {
-    bottom: 3px;
-    right: 3px;
-    border-width: 0 0 10px 10px;
-    border-color: transparent transparent #6dcde6 transparent;
-  }
+::v-deep .el-table {
+  background: transparent !important;
+}
 
-  ::v-deep .el-table {
-    background: transparent !important;
-  }
+::v-deep .el-table tr {
+  background: transparent !important;
+}
 
-  ::v-deep .el-table tr {
-    background: transparent !important;
-  }
+::v-deep .headerRow {
+  background: transparent !important;
+  color: #fff;
+  border: none !important;
+}
 
-  ::v-deep .headerRow {
-    background: transparent !important;
-    color: #fff;
-    border: none !important;
-  }
-
-  /* 出库行样式 */
-  ::v-deep .el-table .outbound-row {
-    background-color: #084d82 !important;
-    /* 浅红色背景 */
-    color: #2fb9d6 !important;
-    /* 红色文字 */
-  }
+/* 出库行样式 */
+::v-deep .el-table .outbound-row {
+  background-color: #084d82 !important;
+  /* 浅红色背景 */
+  color: #2fb9d6 !important;
+  /* 红色文字 */
+}
 
-  /* 入库行样式 */
-  ::v-deep .el-table .inbound-row {
-    background-color: #37548c !important;
-    /* 浅绿色背景 */
-    color: #ef830f !important;
-    /* 绿色文字 */
-  }
+/* 入库行样式 */
+::v-deep .el-table .inbound-row {
+  background-color: #37548c !important;
+  /* 浅绿色背景 */
+  color: #ef830f !important;
+  /* 绿色文字 */
+}
 
-  ::v-deep .el-table .el-table__cell {
-    padding: 10px 0;
-  }
+::v-deep .el-table .el-table__cell {
+  padding: 10px 0;
+}
 
-  ::v-deep .el-table__body {
-    border-collapse: separate !important;
-    border-spacing: 0 5px !important;
-    table-layout: auto !important;
-  }
+::v-deep .el-table__body {
+  border-collapse: separate !important;
+  border-spacing: 0 5px !important;
+  table-layout: auto !important;
+}
 
-  ::v-deep .el-table,
-  .el-table__expanded-cell {
-    background-color: transparent !important;
-  }
+::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent !important;
+}
 
-  ::v-deep .el-table--enable-row-transition .el-table__body td,
-  .el-table .cell {
-    background-color: transparent;
-  }
+::v-deep .el-table--enable-row-transition .el-table__body td,
+.el-table .cell {
+  background-color: transparent;
+}
 
-  /* 移除表格边框 */
-  // ::v-deep .el-table, .el-table__header-wrapper, .el-table__body-wrapper {
-  //   border: none !important;
-  // }
+/* 移除表格边框 */
+// ::v-deep .el-table, .el-table__header-wrapper, .el-table__body-wrapper {
+//   border: none !important;
+// }
 
-  // ::v-deep .el-table__header th {
-  //   border-bottom: none !important;
-  // }
+// ::v-deep .el-table__header th {
+//   border-bottom: none !important;
+// }
 
-  // ::v-deep .el-table__body td {
-  //   border-bottom: none !important;
-  // }
-</style>
+// ::v-deep .el-table__body td {
+//   border-bottom: none !important;
+// }
+</style>
diff --git a/src/views/jsc/index.vue b/src/views/jsc/index.vue
index 2dfea00..3535195 100644
--- a/src/views/jsc/index.vue
+++ b/src/views/jsc/index.vue
@@ -15,8 +15,8 @@
         <div class="jscC-center-left">
           <!-- <Pie3DChart :data="upList"></Pie3DChart> -->
           <div class="jscC-center-left-title">
-            <span>重要防汛物资</span>
-            <div>
+            <span>市级重要防汛物资</span>
+            <!-- <div>
               <span
                 :class="['custom-btn', { active: activeType === '市级' }]"
                 @click="onTypeClick('市级')"
@@ -27,31 +27,65 @@
                 @click="onTypeClick('全市')"
                 >全市</span
               >
-            </div>
+            </div> -->
           </div>
           <div class="jscC-center-left-content">
-            <div v-if="activeType === '市级'" v-for="item in upList">
+            <div v-for="item in upList">
               <img :src="item.img" alt="" />
               <span>{{ item.name }}：</span>
               <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
             </div>
 
-            <div v-if="activeType === '全市'" v-for="item in upListByFloodMaterials">
+            <!-- <div v-if="activeType === '全市'" v-for="item in upListByFloodMaterials">
+              <img :src="item.img" alt="" />
+              <span>{{ item.name }}：</span>
+              <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
+            </div> -->
+          </div>
+
+          <div class="jscC-center-left-title">
+            <span>全市重要防汛物资</span>
+            <!-- <div>
+              <span
+                :class="['custom-btn', { active: activeType === '市级' }]"
+                @click="onTypeClick('市级')"
+                >市级</span
+              >
+              <span
+                :class="['custom-btn', { active: activeType === '全市' }]"
+                @click="onTypeClick('全市')"
+                >全市</span
+              >
+            </div> -->
+          </div>
+          <div class="jscC-center-left-content">
+            <!-- <div v-if="activeType === '市级'" v-for="item in upList">
+              <img :src="item.img" alt="" />
+              <span>{{ item.name }}：</span>
+              <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
+            </div> -->
+
+            <div v-for="item in upListByFloodMaterials">
               <img :src="item.img" alt="" />
               <span>{{ item.name }}：</span>
               <span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
             </div>
           </div>
-          <div class="jscC-center-top">
+          <!-- <div class="jscC-center-top">
             <div class="jscC-center-left-title">年度物资动态</div>
             <WarehouseTable></WarehouseTable>
-          </div>
+          </div> -->
         </div>
         <div class="jscC-center-center">
           <echartsMap ref="echartsMap" />
         </div>
         <div class="jscC-center-right">
-          <div class="chart-header">
+          <div class="jscC-center-top">
+            <!-- <div class="jscC-center-left-title">最新出库</div> -->
+            <WarehouseTable></WarehouseTable>
+          </div>
+          
+          <!-- <div class="chart-header">
             <div class="chart-title">已办任务</div>
             <div class="time-tabs">
               <span
@@ -64,8 +98,7 @@
               </span>
             </div>
           </div>
-          <Bar3DChart :x-data="chartXData" :y-data="chartYData" />
-          <!-- <Pie3DChart></Pie3DChart> -->
+          <Bar3DChart :x-data="chartXData" :y-data="chartYData" /> -->
         </div>
       </div>
       <div class="jscC-bottom">
@@ -137,25 +170,30 @@ export default {
           id: 'yingjidiaodu_count',
           unit: '次'
         },
+        // {
+        //   label: '队伍数量',
+        //   value: 0,
+        //   id: 'team_count',
+        //   unit: '个'
+        // },
+        // {
+        //   label: '队伍出动人次',
+        //   value: 0,
+        //   id: 'team_article_total',
+        //   unit: '人次'
+        // },
         {
-          label: '队伍数量',
-          value: 0,
-          id: 'team_count',
-          unit: '个'
-        },
-        {
-          label: '队伍出动人次',
+          label: '本年度物资调动',
           value: 0,
-          id: 'team_article_total',
-          unit: '人次'
+          id: 'stock_outbounds_count',
+          unit: '次'
         },
         {
-          label: '正在出动抢险队伍',
+          label: '本年度队伍出动',
           value: 0,
-          id: 'team_raxing_count',
-          unit: '个'
-        },
-        
+          id: 'team_articles_count',
+          unit: '次'
+        }
         // {
         //   label: '装备总数',
         //   value: 0,
@@ -183,14 +221,6 @@ export default {
           label: '出库管理',
           path: '/outbounds/index'
         },
-        {
-          label: '统计报表',
-          path: '/reports/stocks'
-        },
-        {
-          label: '应急防御',
-          path: '/books/index'
-        },
         {
           label: '盘点管理',
           path: '/inventorys/stocktaking'
@@ -202,6 +232,14 @@ export default {
         {
           label: '应急调令',
           path: '/workOrder/index'
+        },
+        {
+          label: '应急防御',
+          path: '/books/index'
+        },
+        {
+          label: '统计报表',
+          path: '/reports/stocks'
         }
       ],
       // 分类
@@ -476,19 +514,19 @@ export default {
       }
     },
     // 用户点击切换
-    onTypeClick(type) {
-      if (this.activeType !== type) {
-        this.activeType = type
-      }
-      this.clearAutoSwitch()
-      this.userInteracted = true
-      // 10秒后恢复自动切换
-      if (this.resumeTimer) clearTimeout(this.resumeTimer)
-      this.resumeTimer = setTimeout(() => {
-        this.userInteracted = false
-        this.startAutoSwitch()
-      }, 10000)
-    },
+    // onTypeClick(type) {
+    //   if (this.activeType !== type) {
+    //     this.activeType = type
+    //   }
+    //   this.clearAutoSwitch()
+    //   this.userInteracted = true
+    //   // 10秒后恢复自动切换
+    //   if (this.resumeTimer) clearTimeout(this.resumeTimer)
+    //   this.resumeTimer = setTimeout(() => {
+    //     this.userInteracted = false
+    //     this.startAutoSwitch()
+    //   }, 10000)
+    // },
     // 获取统计数据
     // 获取已办任务
     async getFinishData() {
@@ -560,6 +598,9 @@ export default {
       // 顶部数据
       this.topObj.map(item => {
         item.value = home.top[item.id]
+        if(item.id=='stock_outbounds_count'){
+          item.value = home.top['stock_count']+home.top['outbounds_count']
+        }
       })
 
       this.xData = []
@@ -579,7 +620,7 @@ export default {
         item.img = this.imgList[item.name]
       })
       this.upListByFloodMaterials = this.mergeAndRename(res.upListByFloodMaterials)
-      this.startAutoSwitch()
+      // this.startAutoSwitch()
     },
     mergeAndRename(arr) {
       const resultMap = new Map()
@@ -762,7 +803,7 @@ export default {
         }
 
         &-content {
-          width: 450px;
+          width: 400px;
           display: flex;
           flex-wrap: wrap;
 
@@ -813,7 +854,6 @@ export default {
           align-items: center;
           justify-content: center;
           gap: 20px;
-          
           .chart-title {
             color: #6dcde6;
             font-size: 16px;