bonus-ui/src/views/index_v1.vue

<template>
  <div class="dashboard-editor-container">
    <h3 style="font-weight: 600;">数据总览</h3>
    <panel-group :topData="topAreaOptions"/>
    <el-row>
      <el-col :span="16">
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
            <div>
              <el-radio-group v-model="type1" @change="changType1">
                <el-radio-button :label="1">近7日</el-radio-button>
                <el-radio-button :label="2">近30日</el-radio-button> 
              </el-radio-group>
            </div>
          </div>
          <div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> 
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
            <div>
              <el-radio-group v-model="type2" @change="changType2">
                <el-radio-button :label="1">近7日</el-radio-button>
                <el-radio-button :label="2">近30日</el-radio-button> 
              </el-radio-group>
            </div>
          </div>
          <div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
        </div>
      </el-col>
      <el-col :span="8">
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
          <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">本月菜品销量排名</div>
          <div id="lineChartThree" style="width: 100%;height: 410px;margin-bottom: 20px;"></div>  
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
          <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div>
          <div id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div>  
        </div>



      </el-col>
    </el-row>

    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> 
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './dashboard/mixins/resize'
import {  getDataScreeningModelApi,
          getCanteenOrdersAndSalesTrendsApi,
          getSupermarketOrderAndSalesTrendApi,
          getThisMonthSDishSalesRankingApi,
          getProportionOfOrderTypesApi 
        } from "@/api/index";



import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  mixins: [resize],
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      topAreaOptions:[
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日食堂营业额（元）",
          "lastDate": "2025-05-15"
        },{
          "num": 0,
          "rate": "0.00",
          "name": "今日食堂订单量（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日就餐人数（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日菜品数量（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "今日超市营业额（元）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "今日超市订单量（个）",
          "lastDate": "2025-05-15"
        }
      ],
      type1:1,
      type2:1,
      lineChartData: lineChartData.newVisitis
    }
  },
  mounted(){
    this.getTopData()
    this.InitEChartsOne()
    this.InitEChartsTwo()
    this.InitEChartsThree()
    this.InitEChartsFour()
  },
  methods: {
    getTopData(){ 
      getDataScreeningModelApi({}).then((response) => {
          this.topAreaOptions = response.data.data; 
      }); 
    },
    changType1(e){
      console.log(this.type1)
      this.InitEChartsOne()
    },
    InitEChartsOne() {
      let chartData=[]
      // let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
      let weekDate=[]
      let monthDate = []
      let xDate = []
      let salesData = []
      let orderData = []
      getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            weekDate.push(item.weekday)
            monthDate.push(item.orderDate)
            salesData.push(item.salesValue)
            orderData.push(item.orderValue) 
          })
          if(this.type1==1){
            xDate= weekDate
          }else{
            xDate = monthDate
          }
          var option = {
            // title: {
            //   text: "食品经营情况", 
            // },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["销售额", "订单量"],
              icon:"rect",
              bottom: "0%",
            },
            grid: {
              left: "5%",
              right: "5%",
              top: "20%",
              bottom: "10%",
              containLabel: true,
            },
            color: ["#4FA7FF", "#58F5CE"], 
            calculable: true,
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: xDate,
              },
            ],
            yAxis: {
              name: "销售额/订单量",
              type: "value",
            },
            series: [
              {
                name: "销售额",
                type: "line",
                areaStyle: {
                  normal: {
                    type: "default",
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(79, 167, 255, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(79, 167, 255, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                smooth: true,
                itemStyle: {
                  normal: { areaStyle: { type: "default" } },
                },
                data: salesData,
              },
              {
                name: "订单量",
                type: "line",
                areaStyle: {
                  normal: {
                    type: "default",
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(92, 255, 214, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(92, 255, 214, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                smooth: true,
                itemStyle: { normal: { areaStyle: { type: "default" } } },
                data: orderData,
              },
            ],
          };
          let myCharts = echarts.init(document.querySelector('#lineChartOne'));
          myCharts.setOption(option)  
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
              myCharts.resize(); 
          });
      }); 
    },
    changType2(e){
      console.log(this.type2)
      this.InitEChartsTwo()
    },
    InitEChartsTwo() {
      let chartData=[]
      // let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
      let weekDate=[]
      let monthDate = []
      let xDate = []
      let salesData = []
      let orderData = []
      getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            weekDate.push(item.weekday)
            monthDate.push(item.orderDate)
            salesData.push(item.salesValue)
            orderData.push(item.orderValue) 
          })
          if(this.type2==1){
            xDate= weekDate
          }else{
            xDate = monthDate
          }
          var option = {
            // title: {
            //   text: "食品经营情况", 
            // },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["销售额", "订单量"],
              icon:"rect",
              bottom: "0%",
            },
            grid: {
              left: "5%",
              right: "5%",
              top: "20%",
              bottom: "10%",
              containLabel: true,
            },
            color: ["#4FA7FF", "#58F5CE"], 
            calculable: true,
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: xDate,
              },
            ],
            yAxis: {
              name: "销售额/订单量",
              type: "value",
            },
            series: [
              {
                name: "销售额",
                type: "line",
                areaStyle: {
                  normal: {
                    type: "default",
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(79, 167, 255, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(79, 167, 255, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                smooth: true,
                itemStyle: {
                  normal: { areaStyle: { type: "default" } },
                },
                data: salesData,
              },
              {
                name: "订单量",
                type: "line",
                areaStyle: {
                  normal: {
                    type: "default",
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(92, 255, 214, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(92, 255, 214, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                smooth: true,
                itemStyle: { normal: { areaStyle: { type: "default" } } },
                data: orderData,
              },
            ],
          };
          let myCharts = echarts.init(document.querySelector('#lineChartTwo'));
          myCharts.setOption(option) 

          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
              myCharts.resize(); 
          });
      }); 
    },
    InitEChartsThree() { 
      var getName = [];
      var getValue = [];
      var chartData=[]
      getThisMonthSDishSalesRankingApi({type:"2"}).then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            getName.push(item.name)
            getValue.push(item.num) 
          })  
          var max = Math.max.apply(null, getValue);
          var getMax = [];
          for (var i = 0; i < getName.length; i++) {
            getMax.push(max+20);
          } 
          var option = {
            backgroundColor: "#fff",
            grid: {
              left: "4%",
              right: "2%",
              bottom: "2%",
              top: "2%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return params[0].name + " : " + params[0].value;
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                offset: 100, 
                axisLabel: {
                  show: true,
                  align: "left",
                  textStyle: {
                    color: "#66cc00",
                  },
                  formatter: function (value, index) {
                    var num = "";
                    var str = "";
                    var no = "NO.";
                    num = index + 1;
                    if (index === 0) {
                      str = " {num1|" + num + "} {title1|" + value + "}";
                    } else if (index === 1) {
                      str = " {num2|" + num + "} {title2|" + value + "}";
                    } else if (index === 2) {
                      str = " {num3|" + num + "} {title3|" + value + "}";
                    } else {
                      str = " {num|" + num + "} {title|" + value + "}";
                    }
                    return str;
                  },
                  rich: {
                    no: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no1: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no2: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no3: {
                      color: "#333",
                      fontSize: 14,
                    },
                    num: {
                      color: "#fff",
                      backgroundColor: "#5281F8",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num1: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num2: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num3: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    title: {
                      color: "#333333",
                    },
                    title1: {
                      color: "#333333",
                    },
                    title2: {
                      color: "#333333",
                    },
                    title3: {
                      color: "#333333",
                    },
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: getName,
              },
              {
                type: "category",
                inverse: true,
                offset: -50,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  interval: 0,
                  color: "#666",
                  align: "left",
                  margin: 20,
                  fontSize: 13,
                  formatter: function (value, index) {
                    return (
                      getValue[index]
                    );
                  },
                },
                data: getValue,
              },
            ],
            series: [
              {
                name: "值",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                  normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(0, 111, 104, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(0, 111, 104, 1)",
                      },
                    ]),
                  },
                },
                barWidth: 14,
                data: getValue,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 14,
                barGap: "-100%",
                data: getMax,
                itemStyle: {
                  normal: {
                    color: "rgba(224, 233, 255, 1)",
                    barBorderRadius: 30,
                  },
                },
              },
            ],
          }; 
          let myCharts = echarts.init(document.querySelector('#lineChartThree'));
          myCharts.setOption(option)  
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
              myCharts.resize();
          });
      }); 
    },
    InitEChartsFour() {
      var chartData=[]
      getProportionOfOrderTypesApi({type:"2"}).then((response) => {
          chartData = response.data;
          var m2R2Data = []
          var sumNum = 0
          chartData.forEach((item,index)=>{
            let obj = {}
            sumNum=sumNum+item.num
            if(index==0){
              obj = {
                value: item.num,
                legendname: item.name,
                name: item.name+' '+  item.num,
                itemStyle: { color: "#5085f2" },
              }
            }
            if(index==1){
              obj = {
                value: item.num,
                legendname: item.name,
                name: item.name+' '+  item.num,
                itemStyle: { color: "#f2719a" },
              }
            }
            if(index==2){
              obj = {
                value: item.num,
                legendname: item.name,
                name: item.name+' '+  item.num,
                itemStyle: { color: "#fdb301" },
              }
            }
            m2R2Data.push(obj)
          }) 

          // var m2R2Data = [
          //   {
          //     value: 310,
          //     legendname: "种类02",
          //     name: "种类02  310",
          //     itemStyle: { color: "#5085f2" },
          //   }, 
          //   {
          //     value: 335,
          //     legendname: "种类05",
          //     name: "种类05  335",
          //     itemStyle: { color: "#f2719a" },
          //   }, 
          //   {
          //     value: 335,
          //     legendname: "种类08",
          //     name: "种类08  335",
          //     itemStyle: { color: "#fdb301" },
          //   }
          // ];

          var option = {
            title: [
              {
                text: "订单总数",
                subtext: sumNum + "个",
                textStyle: {
                  fontSize: 20,
                  color: "black",
                },
                subtextStyle: {
                  fontSize: 20,
                  color: "black",
                },
                textAlign: "center",
                x: "34.5%",
                y: "44%",
              },
            ],
            tooltip: {
              trigger: "item",
              formatter: function (parms) {
                var str =
                  parms.seriesName +
                  "</br>" +
                  parms.marker +
                  "" +
                  parms.data.legendname +
                  "</br>" +
                  "数量：" +
                  parms.data.value +
                  "</br>" +
                  "占比：" +
                  parms.percent +
                  "%";
                return str;
              },
            },
            legend: {
              type: "scroll",
              orient: "vertical",
              left: "70%",
              align: "left",
              top: "middle",
              textStyle: {
                color: "#8C8C8C",
              },
              height: 250,
            },
            series: [
              {
                name: "标题",
                type: "pie",
                center: ["35%", "50%"],
                radius: ["65%", "90%"],
                clockwise: false, //饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "outter",
                    formatter: function (parms) {
                      return parms.data.legendname;
                    },
                  },
                },
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 3,
                    smooth: true,
                  },
                },
                data: m2R2Data,
              },
            ],
          }; 
          let myCharts = echarts.init(document.querySelector('#barChartFour'));
          myCharts.setOption(option)  
          // 根据页面大小自动响应图表大小
          window.addEventListener("resize", function () {
              myCharts.resize();
          });
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>