feat: 1、首页接口对接 2、部门物品分发

石广澎

2023-11-29 b8dc4ccc6ee580b084aa860e64af2d90d1cb5979

 admin-web/src/views/dashboard/components/XYZC.vue

@@ -2,30 +2,14 @@
  <div style="width: 100%">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: 600; font-size: 20px">响应支持类统计</span>
        <div class="card-title-right">
          <div :style="{ color: weekFlag ? '#378cff' : '' }" @click="changeDate(1)">近7天</div>
          <div :style="{ color: monthFlag ? '#378cff' : '' }" style="margin: 0 30px 0 10px" @click="changeDate(2)">
            近30天
          </div>
          <el-date-picker
            v-model="value2"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyyMMdd"
          />
          <el-button type="primary" style="margin-left: 10px" @click="getCenterLine">搜索</el-button>
        </div>
        <span class="font-18 font-bold">资产增长/报废统计图（数量）</span>
      </div>
      <div id="main1" />
      <div id="ZCZZ" />
    </el-card>
  </div>
</template>
<script>
import {getGoodsNumByMonth} from '@/api/dashboard'
import * as echarts from 'echarts';

export default {
@@ -38,93 +22,22 @@
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      value2: '',
      myChart: null,
      weekFlag: 1, // 近七天
      monthFlag: null, // 近30天
      options: {},
    };
  },
  mounted() {
    this.getCenterLine();
    // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
    window.addEventListener('resize', () => {
      this.changeWidth();
    });
  },
  methods: {
    changeDate(type) {
      if (type == 1) {
        this.monthFlag = null;
        if (this.weekFlag) {
          this.weekFlag = null;
        } else {
          this.weekFlag = 1;
        }
        if (this.weekFlag) {
          this.monthFlag = null;
          this.value2 = [];
        }
        this.getCenterLine();
      }
      if (type == 2) {
        this.weekFlag = null;
        if (this.monthFlag) {
          this.monthFlag = null;
        } else {
          this.monthFlag = 1;
        }
        if (this.monthFlag) {
          this.weekFlag = null;
          this.value2 = [];
        }
        this.getCenterLine();
      }
    },
    getCenterLine() {
      // getCenterLine({
      //   id: this.activeId,
      //   weekFlag: this.weekFlag,
      //   monthFlag: this.monthFlag,
      //   startDay: this.value2 ? this.value2[0] : null,
      //   endDay: this.value2 ? this.value2[1] : null
      // }).then(res => {
      //   const data = res.data
      var chartDom = document.getElementById('main1');
      var chartDom = document.getElementById('ZCZZ');
      this.myChart = echarts.init(chartDom);
      window.addEventListener('resize', () => {
        this.changeWidth();
      });
      this.options = {
        color: ['#ED653B', '#1877FF'],
        color: ['#5BE1FD', '#FFD15C'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -132,39 +45,21 @@
          },
        },
        legend: {
          data: ['响应速度', '处理速度'],
          data: ['资产增长', '资产报废'],
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          show: false
        },
        grid: {
          left: '30',
          right: '30',
          bottom: '30px'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08',
              '12-09',
              '12-10',
              '12-11',
              '12-12',
            ],
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          },
        ],
        yAxis: [
@@ -172,49 +67,78 @@
            type: 'value',
          },
        ],
        dataZoom: [
          {
            orient: 'horizontal',

            show: true, //控制滚动条显示隐藏

            realtime: true, //拖动滚动条时是否动态的更新图表数据

            height: 15, //滚动条高度

            start: 0, //滚动条开始位置（共100等份）
            //
            // end: 30, //滚动条结束位置
            bottom: '4%',
            zoomLock: true, //控制面板是否进行缩放
          }
        ],

        series: [
          {
            name: '响应速度',
            name: '资产增长',
            type: 'line',
            barGap: 0,
            smooth: true,
            emphasis: {
              focus: 'series',
            },
            data: [320, 332, 301, 334, 320, 332, 301, 334, 320, 332, 301, 334],
            data: [],
            lineStyle: {
              width: 2, // 外边线宽度
              color: '#5BE1FD'// 外边线颜色
            },
            areaStyle: {// 区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(91, 225, 253, .6)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(91, 225, 253, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: '处理速度',
            name: '资产报废',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 220, 182, 191, 234, 220, 182, 191, 234],
            data: [],
            lineStyle: {
              width: 2, // 外边线宽度
              color: '#FFD15C'// 外边线颜色
            },
            areaStyle: {// 区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 209, 92, .6)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255, 209, 92, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
        ],
      };

      this.options && this.myChart.setOption(this.options);
      // });
      getGoodsNumByMonth().then(res=>{
        let xAxis0 = []
        let xAxis1 = []
        res.map(item=>{
          xAxis0.push(item.addTotalNum)
          xAxis1.push(item.reduceTotalNum)
        })
        this.options.series[0].data = xAxis0
        this.options.series[1].data = xAxis1
        this.myChart.setOption(this.options);
      })
    },
    changeWidth() {
      this.myChart.resize();
@@ -223,7 +147,7 @@
};
</script>
<style lang="scss" scoped>
#main1 {
#ZCZZ {
  width: 100%;
  height: 400px;
}