初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/home/index.vue

@@ -1,39 +1,110 @@
<!-- eslint-disable vue/attributes-order -->
<template>
  <div class="dashboard-container">
      <div class="home-annular-list">
        <div class="annular-item" v-for="item in 4" :key="item">
        </div>
    <el-empty
      description="暂无数据"
      v-if="chartData.PieData&&chartData.DailyTotal&&
        chartData.WeekNumData&&chartData.ExceedThirtyDay.length!=0
      "
    />
    <template v-else>
      <div class="home-annular-list" v-show="chartData.PieData">
        <div v-for="item in 4" :key="item" class="annular-item " :class="'pie'+item" />
      </div>
      <div class="home-line-bar">
        <div class="left">
          <div class="top">1</div>
          <div class="bottom">1</div></div>
        <div class="right">
         1
          <div class="top" />
          <div class="bottom">
            临近30天库存
            <div>
              <el-table
                :data="exceedThirtyDay"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="product_name"
                  label="产品名称"
                />
                <el-table-column
                  prop="RemainingDays"
                  label="产品库存"
                />
                <el-table-column
                  prop="product_code"
                  label="产品编码"
                />
                <el-table-column
                  prop="product_model"
                  label="产品规格"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                />
              </el-table>
        </div>
          </div>
        </div>
        <div class="right">
          <div />
      </div>
  </div>
</template>

  </div>
</template>

<script>
import { getList } from '@/api/home'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: 'Home',
  data() {
    return {
      exceedThirtyDay: [],
      show: true,
      chartData: {}
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    console.log(echarts)
    // console.log(echarts)
    this.echartsInit()

    // 刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
    // 当当前路由是首页时，添加首页到store，并设置激活状态
    if (this.$route.path !== '/' && this.$route.path !== '/home') {
      console.log('1')
      this.$store.commit('ADD_TAB', { route: '/home', name: '主页' })
      this.$store.commit('ADD_TAB', { route: this.$route.path, name: this.$route.name })
      this.$store.commit('SET_ACTIVE_INDEX', this.$route.path)
    }
    // else {
    //   console.log('2');
    //   this.$store.commit('ADD_TAB', {route: '/home', name: 'home'});
    //   this.$store.commit('SET_ACTIVE_INDEX', '/home');
    //   this.$router.push('/');
    // }

    console.log(this.$store.state)
  },
  created() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      let boxArr = document.querySelectorAll(".annular-item")
      boxArr.forEach((item) => {
        echarts.init(item).setOption({
    getData() {
    },
    getPie(PieData, className) {
      console.log(className)
      const box = document.querySelector(className)
      echarts.init(box).setOption({
          legend: {
            type: 'scroll',
            align: 'left',
@@ -52,7 +123,7 @@
          },
  series: [
    {
      name: 'Access From',
            name: PieData.datetime,
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['25%', '50%'],
@@ -70,18 +141,54 @@
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
              { value: PieData.addNum, name: '入库数目' },
              { value: PieData.outNum, name: '出库数目' },
              { value: PieData.beginningMonth, name: '月初库存' },
              { value: PieData.endOfMonth, name: '月末库存' }
      ]
    }
  ]
})
      })
    },
    getLine(DailyTotal) {
      const right = document.querySelector('.right')
      echarts.init(right).setOption({
        legend: {
    
      let letTop = document.querySelector(".top")
          x: 'center',
          slected: true
        },
        title: {
          text: '仓库统计',
          textStyle: {
            color: '#235894'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: DailyTotal?.xList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: DailyTotal?.yList,
            type: 'line',
            smooth: true,
            name: '每日总计',
            areaStyle: {}
          }

        ]
      })
    },
    getBar(WeekNumData) {
      const letTop = document.querySelector('.top')
      echarts.init(letTop).setOption({
        grid: {
          left: '3%',
@@ -104,61 +211,38 @@
          },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: WeekNumData.xList
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
            data: WeekNumData.yOutList,
      name: '出库数量',
      type: 'bar'
    },
    {
      data: [220, 210, 80, 110, 30, 80, 130],
            data: WeekNumData.yEnterList,
      name: '入库数量',
      type: 'bar'
    }
  ]
})
    

      let right = document.querySelector(".right")
      echarts.init(right).setOption({
        legend: {
           
            x: 'center',
            slected: true
          },
          title: {
            text: '仓库统计',
            textStyle: {
              color: '#235894'
            }
          },
          tooltip: {
            trigger: 'item'
          },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      name: '数据1',
      areaStyle: {}
    }
    
  ]
    async echartsInit() {
      const res = await getList()
      const { data } = res
      this.chartData = { ...data }
      console.log(this.chartData)
      data.PieData?.forEach((item, index) => {
        console.log(item)
        this.getPie(item, '.pie' + (index + 1))
})

      this.getBar(data.WeekNumData)
      this.getLine(data.DailyTotal)
      this.exceedThirtyDay = data.ExceedThirtyDay
    }
  }
}
@@ -178,15 +262,14 @@
  }
}
.home-annular-list{
  
  margin: 12px;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  .annular-item{
    width:   350px;
    height: 240px;
    width:  300px;
    height: 200px;
    border-radius: 10px;
    padding: 25px;
    padding: 20px;
    background: #fff;
    // margin: 0 12px;
  }
@@ -223,6 +306,8 @@
      background: #fff;
      padding: 25px;
      border-radius: 10px;
      // max-width: 500px;
      max-height: 328px;
    }
  }
}