首页统计

src/api/charts.js

@@ -40,3 +40,12 @@ export function homeCharts(params) {
   })
 }
 
+export function soCharts(params) {
+  return request({
+    url: '/api/admin/chart/stocks-and-outbounds',
+    method: 'get',
+    params: params
+  })
+}
+
+

src/views/jsc/components/WarehouseTable.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="warehouse-table">
+    <!-- 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="suozaicangku_text"  width="100" label="仓库" align="left" />
+      <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" />
+      <el-table-column show-overflow-tooltip prop="total" width="80" label="数量" align="center" />
+      <el-table-column show-overflow-tooltip prop="fenlei_text" width="120" 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>
+</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)
+      }
+    },
+    mounted() {
+      // 初始化定时器，3 秒切换一次
+      this.getChartData()
+      // this.startTimer()
+    },
+    beforeDestroy() {
+      // 组件销毁前清除定时器，避免内存泄漏
+      this.clearTimer()
+    },
+    methods: {
+      async getChartData() {
+        const so = await soCharts()
+        // 出入库
+        let arr = []
+        so.map(item=>{
+          arr.push({
+            suozaicangku_text:item.suozaicangku_text,
+            type:item.jieyongshuliang?'出库':'入库',
+            total:item.jieyongshuliang?item.jieyongshuliang:item.rukushuliang,
+            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 '';
+      }
+    }
+  }
+</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;
+  }
+
+  /* 四角三角形基础样式 */
+  .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-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-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 tr {
+    background: transparent !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 .inbound-row {
+    background-color: #37548c !important;
+    /* 浅绿色背景 */
+    color: #ef830f !important;
+    /* 绿色文字 */
+  }
+  ::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,.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, .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__body td {
+  //   border-bottom: none !important;
+  // }
+</style>

src/views/jsc/index.vue

@@ -12,6 +12,9 @@
       </div>
       <div class="jscC-center">
         <div class="jscC-center-left" >
+          <div class="jscC-center-top">
+            <WarehouseTable></WarehouseTable>
+          </div>
           <!-- <Pie3DChart :data="upList"></Pie3DChart> -->
           <div class="jscC-center-left-title">重要防汛物资</div>
           <div class="jscC-center-left-content">
@@ -58,16 +61,20 @@ import Bar3DChart from '../jsc/components/barChart.vue'
 import fenleiChart from '../jsc/components/fenleiChart.vue'
 import Pie3DChart from '../jsc/components/pieChart.vue'
 import echartsMap from './components/mapChart.vue'
+import WarehouseTable from './components/WarehouseTable.vue'
+
 import {
   fenleiCharts,
-  homeCharts
+  homeCharts,
+
 } from '@/api/charts.js'
 export default {
   components: {
     Bar3DChart,
     Pie3DChart,
     echartsMap,
-    fenleiChart
+    fenleiChart,
+    WarehouseTable
   },
   data() {
     return {
@@ -169,7 +176,7 @@ export default {
         '移动泵车':require('@/assets/bengche.jpg'),
         '桩类':require('@/assets/zhuanglei.jpg'),
         '砂石类':require('@/assets/shashi.jpg'),
-      }
+      },
     }
   },
   computed: {
@@ -190,7 +197,6 @@ export default {
 
     this.calculateScreenSize()
     window.addEventListener('resize', this.calculateScreenSize)
-    this.startAutoSwitch()
   },
   beforeRouteLeave(to, from, next) {
     this.$store.dispatch('app/toggleSideBar')
@@ -219,17 +225,6 @@ export default {
         this.yData.push(home.rate[item.id])
       })
       console.log(this.xData, this.yData)
-      //
-      // this.apiData = res.fenleiLevel1
-      // this.chartDataMap = this.convertFenleiToChartDataMap(this.apiData)
-      // let arr = []
-      // res.upList.map(item=>{
-      //   arr.push({
-      //     name:item.name,
-      //     value:item.total,
-      //     unit:item.unit
-      //   })
-      // })
       res.upList.map(item=>{
         item.img = this.imgList[item.name]
       })
@@ -278,79 +273,7 @@ export default {
 
       return Array.from(resultMap.values());
     },
-    // 处理分类数据
-    convertFenleiToChartDataMap(fenleiLevel1) {
-      const chartDataMap = {}
-      this.typeList = []
-      fenleiLevel1.forEach(level1 => {
-        const level1Name = level1.value
-        // 一级
-        this.typeList.push(level1Name)
-        const level1Arr = [{
-          value: level1.details.reduce((sum, d) => sum + (d.total_count || 0), 0), // 或自定义总数
-          name: level1Name
-        }]
-
-        // 二级
-        const level2Arr = []
-        // 三级
-        const level3Arr = [];
-
-        (level1.details || []).forEach(level2 => {
-          // 二级 value 为其所有 inventorys 的 total_count 之和
-          let level2Value = 0;
-          (level2.inventorys || []).forEach(inv => {
-            level2Value += Number(inv.total_count) || 0
-          })
-          // 如果没有三级，直接用 total_count 字段
-          if (level2Value === 0) level2Value = level2.total_count || 0
-
-          level2Arr.push({
-            value: level2Value,
-            name: level2.value
-          });
-
-          // 三级
-          (level2.inventorys || []).forEach(inv => {
-            level3Arr.push({
-              value: inv.total_count,
-              name: inv.jiliangdanwei,
-              parent: level2.value
-            })
-          })
-        })
-
-        chartDataMap[level1Name] = {
-          level1: level1Arr,
-          level2: level2Arr,
-          level3: level3Arr
-        }
-      })
 
-      return chartDataMap
-    },
-    // 启动自动切换
-    startAutoSwitch() {
-      clearInterval(this.autoTimer)
-      let idx = this.typeList.indexOf(this.activeType)
-      this.autoTimer = setInterval(() => {
-        idx = (idx + 1) % this.typeList.length
-        this.activeType = this.typeList[idx]
-      }, 5000) // 10秒
-    },
-    // 停止自动切换，并在20秒后恢复
-    stopAutoSwitchAndResumeLater() {
-      clearInterval(this.autoTimer)
-      clearTimeout(this.resumeTimer)
-      this.resumeTimer = setTimeout(() => {
-        this.startAutoSwitch()
-      }, 10000) // 20秒
-    },
-    // 按钮点击事件
-    handleTypeClick(type) {
-      this.activeType = type
-      this.stopAutoSwitchAndResumeLater()
-    },
     setRem() {
       // 默认使用100px作为基准大小
       const baseSize = 100
@@ -444,7 +367,7 @@ export default {
 
         // flex-wrap: wrap;
         &-left {
-          height: 400px;
+          // height: 400px;
           &-title {
             color: #6dcde6;
             text-align: center;