patrol-wzgl-web/src/views/jsc/index.vue

<template>
  <div class="jsc" :style="bgStyle">
    <div class="jscC">
      <div class="jscC-top">
        <div v-for="item in topObj">
          <div class="label">{{ item.label }}</div>
          <div class="value">
            {{ item.value }}
            <!-- <CountUp :end="item.value" :duration="6" ref="count" /> -->
          </div>
        </div>
      </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">
            <div v-for="item in upList">
              <img :src="item.img" alt="">
              <span>{{item.name}}：</span>
              <span>{{item.value}}{{item.unit?item.unit:''}}</span>
            </div>
            <!-- <Pie3DChart :data="upList"></Pie3DChart> -->
            <!-- <span
              v-for="item in Object.keys(chartDataMap)"
              :key="item"
              :class="['custom-btn', { active: activeType === item }]"
              @click="handleTypeClick(item)"
            >
              {{ item }}
            </span> -->
          </div>
          <!-- <Bar3DChart></Bar3DChart> -->
          <!-- <fenleiChart :chart-data="chartData" /> -->
        </div>
        <div class="jscC-center-center">
          <echartsMap ref="echartsMap" />

        </div>
        <div class="jscC-center-right">
          <Bar3DChart :x-data="xData" :y-data="yData" />
          <!-- <Pie3DChart></Pie3DChart> -->
        </div>
      </div>
      <div class="jscC-bottom">
        <div v-for="item in bottomObj" @click="toUrl(item.path)">
          <div class="label">{{ item.label }}</div>
        </div>
      </div>

      <!-- <img :style="contentStyle" src="../../assets/jsc/content.png"></img> -->
    </div>
  </div>
</template>

<script>
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,

} from '@/api/charts.js'
export default {
  components: {
    Bar3DChart,
    Pie3DChart,
    echartsMap,
    fenleiChart,
    WarehouseTable
  },
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
      bgStyle: {
        width: 0,
        height: 0
      },
      contentStyle: {
        width: 0,
        height: 0
      },
      upList:[],
      topObj: [{
        label: '仓库数量',
        value: 0,
        id: 'cangku_count'
      }, {
        label: '物资种类',
        value: 0,
        id: 'wuzizhonglei_count'
      },
      // {
      //   label: '本月出库',
      //   value: 0,
      //   id: 'chuku_month_count'
      // }, {
      //   label: '本月入库',
      //   value: 0,
      //   id: 'ruku_month_count'
      // },
      {
        label: '应急调度次数',
        value: 0,
        id: 'yingjidiaodu_count'
      }, {
        label: '装备总数',
        value: 0,
        id: 'shebei_count'
      }, {
        label: '盘点',
        value: 0,
        id: 'pan_count'
      }, {
        label: '维护',
        value: 0,
        id: 'weihu_count'
      }],
      bottomObj: [{
        label: '库存管理',
        path: '/views/inventorys'
      }, {
        label: '入库管理',
        path: '/stocks/index_purchase'
      }, {
        label: '出库管理',
        path: '/outbounds/index_receive'
      }, {
        label: '统计报表',
        path: '/reports/stocks'
      }, {
        label: '应急防御',
        path: '/books/index'
      }, {
        label: '盘点管理',
        path: '/inventorys/stocktaking'
      }, {
        label: '运维管理',
        path: '/maintenance/maintenance_records'
      }, {
        label: '工单管理',
        path: '/flood/plan'
      }],
      // 分类
      activeType: '防御材料',
      apiData: [],
      chartDataMap: {},
      typeList: [],
      autoTimer: null, // 自动切换定时器
      resumeTimer: null, // 恢复自动切换的倒计时
      xData: [],
      yData: [],
      todoList: [{
        id: 'gongdan',
        value: '调令'
      }, {
        id: 'pandian',
        value: '盘点'
      }, {
        id: 'weihu',
        value: '维护'
      }],
      imgList:{
        '袋类':require("@/assets/dailei.jpg"),
        '排水类':require('@/assets/beng.jpg'),
        '土工布类':require('@/assets/tugongbu.jpg'),
        '动力及照明类':require('@/assets/zhaoming.jpg'),
        '移动泵车':require('@/assets/bengche.jpg'),
        '桩类':require('@/assets/zhuanglei.jpg'),
        '砂石类':require('@/assets/shashi.jpg'),
      },
    }
  },
  computed: {
    chartData() {
      return this.chartDataMap[this.activeType]
    }
  },
  watch: {

  },

  mounted() {
    this.getChartData()
    this.$store.dispatch('app/closeSideBar', {
      withoutAnimation: false
    })
    this.setRem()

    this.calculateScreenSize()
    window.addEventListener('resize', this.calculateScreenSize)
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('app/toggleSideBar')
    next()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateScreenSize)
    clearInterval(this.autoTimer)
    clearTimeout(this.resumeTimer)
  },
  methods: {
    // 获取统计数据
    async getChartData() {
      const res = await fenleiCharts()
      const home = await homeCharts()
      // 顶部数据
      this.topObj.map(item => {
        item.value = home.top[item.id]
      })

      this.xData = []

      this.yData = []
      this.todoList.map(item => {
        this.xData.push(item.value)
        this.yData.push(home.rate[item.id])
      })
      console.log(this.xData, this.yData)
      res.upList.map(item=>{
        item.img = this.imgList[item.name]
      })
      this.upList = this.mergeAndRename(res.upList)
      console.log("this.upList",this.upList)
    },
    mergeAndRename(arr) {
      const resultMap = new Map();
      let pumpTotal = 0; // 排水类总和
      let mobilePumpTotal = 0; // 移动泵车总和
      let pumpUnit = ""; // 排水类的单位
      let pumpImg = this.imgList['排水类']
      // 第一步：遍历数组，处理常规项并统计特殊项
      arr.forEach(item => {
        const { name, total, unit, img } = item;
        const value = total;

        if (name === "排水类") {
          pumpTotal += value;
          // 记录排水类的unit（假设所有排水类unit相同）
          if (!pumpUnit) pumpUnit = unit;

        } else if (name === "移动泵车") {
          mobilePumpTotal += value;
          // 正常处理移动泵车，加入结果集
          if (resultMap.has(name)) {
            resultMap.get(name).value += value;
          } else {
            resultMap.set(name, { name, value, unit,img });
          }
        } else {
          // 常规项处理
          if (resultMap.has(name)) {
            resultMap.get(name).value += value;
          } else {
            resultMap.set(name, { name, value, unit,img });
          }
        }
      });

      // 第二步：计算泵类值并添加到结果集
      if (pumpTotal > 0) {
        const finalPumpValue = pumpTotal - mobilePumpTotal;
        resultMap.set("泵", { name: "泵", value: finalPumpValue, unit: pumpUnit,img:pumpImg });
      }

      return Array.from(resultMap.values());
    },

    setRem() {
      // 默认使用100px作为基准大小
      const baseSize = 100
      const baseVal = baseSize / 1920
      const vW = window.innerWidth // 当前窗口的宽度
      const rem = vW * baseVal // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
      window.$size = rem / 100
      document.documentElement.style.fontSize = rem + 'px'
    },
    calculateScreenSize() {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.bgStyle = {
        width: this.screenWidth - 56 + 'px',
        height: this.screenHeight + 'px',
        position: 'relative',
        left: '-20px'
        // top:'-60px'
      }
      this.contentStyle = {
        width: this.screenWidth - 70 + 'px',
        height: this.screenHeight - 20 + 'px'
      }
    },
    toUrl(path) {
      this.$router.push(path)
    }
  }

}
</script>

<style lang="scss" scoped>
  ::v-deep .app-main {
    padding: 0 !important
  }

  .jsc {
    height: 100%;
    background: url(../../assets/jsc/bg.png) no-repeat center top;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    padding-top: 0;

    .jscC {
      width: 100%;
      height: 100%;
      background: url(../../assets/jsc/contentBg.png) no-repeat center top;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding-top: .7rem;

      &-top {
        width: 17.67rem;
        height: 1.52rem;
        padding: 0 .4rem;
        // height: 100%;
        background: url(../../assets/jsc/topbg.png) no-repeat center top;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          font-size: .2rem;
          text-align: center;
          color: #fff;
        }

        .value {
          font-size: .38rem;
          text-align: center;
          color: #7ff7fe;
          font-weight: bolder;
        }
      }

      &-center {
        width: 17.67rem;
        // height: 1.52rem;
        padding: 0 .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // flex-wrap: wrap;
        &-left {
          // height: 400px;
          &-title {
            color: #6dcde6;
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 16px;
          }
          &-content{
            width: 450px;
            display:flex;
            flex-wrap: wrap;
            &>div{
              flex-basis: 50%;
              text-align: left;
              margin:10px 0;
              color:#fff;
              font-size: 16px;
                  display: flex;
                  align-items: center;
              &>img{
                width:30px;
                height:30px;
                margin-right:10px;
              }
            }
          }
          .custom-btn {
            background: #0b1b3a;
            color: #19eaff;
            border: none;
            border-radius: 12px;
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
          }

          .custom-btn.active {
            background: linear-gradient(90deg, #3ad0ff 0%, #4be3c1 100%);
            color: #fff;
            box-shadow: 0 2px 12px 0 rgba(58, 208, 255, 0.2);
          }
        }

        &-center {
          width: 10.3rem;
        }

        &-right {}
      }

      &-bottom {
        font-size: .22rem;
        color: #fff;
        width: 17.67rem;
        padding: .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &>div {
          width: 1.57rem;
          height: 1.57rem;
          background: url(../../assets/jsc/icon.png) no-repeat center top;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
</style>