unis_sip/oms_web/oms_vue/src/views/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>商机管理</span>
          </div>
          <div ref="lineChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>合同信息</span>
          </div>
          <div ref="barChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getProjectData, getOrderData } from '@/api/homepage'

export default {
  name: 'Index',
  data() {
    return {
      lineChart: null,
      barChart: null,
      lineOption: {
        title: {
          text: '入库量'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['商机入库量', '订单入库量']
        },
        grid: {
          x: 40,
          x2: 40,
          y2: 24
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '商机入库量',
            type: 'line',
            data: [],
            smooth: true,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            name: '订单入库量',
            type: 'line',
            data: [],
            smooth: true,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      },
      barOption: {
        title: {
          text: '合同签订数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['签订数量']
        },
        grid: {
          x: 30,
          x2: 40,
          y2: 24
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '签订数量',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initLineChart()
    this.initBarChart()
    this.loadLineChartData()
    this.loadBarChartData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.lineChart) {
      this.lineChart.dispose()
    }
    if (this.barChart) {
      this.barChart.dispose()
    }
  },
  methods: {
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart)
      this.lineChart.setOption(this.lineOption)
    },
    initBarChart() {
      this.barChart = echarts.init(this.$refs.barChart)
      this.barChart.setOption(this.barOption)
    },
    loadLineChartData() {
      getProjectData(7).then(res => {
        this.lineOption.xAxis[0].data = res.data.lineData
        this.lineOption.series[0].data = res.data.projectInfoList
        this.lineOption.series[1].data = res.data.projectOrderInfoList
        this.lineChart.setOption(this.lineOption, true)
      })
    },
    loadBarChartData() {
      getOrderData(12).then(res => {
        this.barOption.xAxis[0].data = res.data.lineData
        this.barOption.series[0].data = res.data.orderInfoList
        this.barChart.setOption(this.barOption, true)
      })
    },
    handleResize() {
      if (this.lineChart) {
        this.lineChart.resize()
      }
      if (this.barChart) {
        this.barChart.resize()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 70vh;
}
.app-container {
  padding: 20px;
}
</style>