同期对比

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.1",
     "element-ui": "^2.15.14",
     "jquery": "^3.2.1",
     "js-base64": "^3.7.5",

src/module/api/apiList.js

@@ -42,6 +42,13 @@ export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/
   }
 }, 'POST');
 
+//明细页营业额汇年 -同期对比
+export const getBusinessConditionDatasByYoy = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_yoy', {
+    aux: {
+        cur_day: cur_day
+    }
+}, 'POST');
+
 
 // 应收账款汇总
 export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST")

src/module/databoard/components/chart/line-axis-chart.vue

+<template>
+  <div ref="chart" @click=""/>
+</template>
+<script>
+
+export default {
+  name: "LineAxisChart",
+  data() {
+    return {
+      option: {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: {show: true},
+            dataView: {show: true, readOnly: false},
+            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
+            restore: {show: true},
+            saveAsImage: {show: true}
+          }
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: '视频广告',
+            type: 'line',
+            stack: '总量',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '直接访问',
+            type: 'line',
+            stack: '总量',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: '搜索引擎',
+            type: 'line',
+            stack: '总量',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+</style>

src/module/databoard/databoard/turnover-detail.vue

@@ -22,6 +22,8 @@
              @click="changeDimension('month')">
       <input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计"
              @click="changeDimension('year')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'yoy'}" value="同期对比"
+             @click="changeDimension('yoy')">
     </div>
     <div class="chart">
       <div ref="chart" style="width: 100%;height: 100%;" @click=""/>
@@ -42,7 +44,8 @@ export default {
   components: {ContrastCard, TableColumn, TitleContentMark},
   data() {
     return {
-      today: moment().format("yyyy-MM-DD"),
+      today: "2023-05-18",
+      // today: moment().format("yyyy-MM-DD"),
       curPageCode: this.$route.query.code ? this.$route.query.code : "yye",
       currentData: {},
       mockDataDay: {
@@ -199,13 +202,101 @@ export default {
               ]
             },
           },
+        ]
+      },
+      discountOption : {
+        tooltip: {
+          trigger: 'none',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          top: 70,
+          bottom: 50
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              onZero: false,
+            },
+            axisPointer: {
+              label: {
+                formatter: function (params) {
+                  return (
+                    'Precipitation  ' +
+                    params.value +
+                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+                  );
+                }
+              }
+            },
+            // prettier-ignore
+            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
+          },
+          {
+            type: 'category',
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: '#5470C6'
+              }
+            },
+            axisPointer: {
+              label: {
+                formatter: function (params) {
+                  return (
+                    'Precipitation  ' +
+                    params.value +
+                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+                  );
+                }
+              }
+            },
+            // prettier-ignore
+            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
+          }
+        ],
+        yAxis: [
           {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'Precipitation(2015)',
+            type: 'line',
+            xAxisIndex: 1,
+            smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: [
+              1000, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ]
+          },
+          {
+            name: 'Precipitation(2016)',
             type: 'line',
-            color: 'red',
-            lineStyle:{
-              width: 3,
+            smooth: true,
+            emphasis: {
+              focus: 'series'
             },
-            data: []
+            data: [
+              2, 5.9, 11.1, 18.7, 48.3, 69.2, 21.6, 46.6, 55.4, 18.4, 10.3, 2000
+            ]
           }
         ]
       }
@@ -245,6 +336,10 @@ export default {
           await this.getYearDate();
           this.refreshChart();
           break;
+        case 'yoy':
+          await this.getYearYoyDate();
+          this.refreshDiscountChart();
+          break;
         default:
           return;
       }
@@ -252,11 +347,38 @@ export default {
     refreshChart() {
       this.chartOption.dataset.source = this.currentData.detail
       if (this.chart) {
+        this.chart.dispose();
+        let chartDom = this.$refs.chart;
+        this.chart = echarts.init(chartDom);
         this.chart.setOption(this.chartOption);
       }
     },
+
+    refreshDiscountChart(tspt) {
+      this.chart.dispose();
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+      this.discountOption.xAxis = this.currentData.detail.sumData.xAxis
+      this.discountOption.series = this.currentData.detail.sumData.series
+      if(tspt==10){
+        this.discountOption.xAxis = this.currentData.detail.tspt10.xAxis
+        this.discountOption.series = this.currentData.detail.tspt10.series
+      }
+      if(tspt==20){
+        this.discountOption.xAxis = this.currentData.detail.tspt20.xAxis
+        this.discountOption.series = this.currentData.detail.tspt20.series
+      }
+      if(tspt==30){
+        this.discountOption.xAxis = this.currentData.detail.tspt30.xAxis
+        this.discountOption.series = this.currentData.detail.tspt30.series
+      }
+      this.chart.setOption(this.discountOption);
+    },
+
+
     selectLegend(title) {
       let name;
+      let tspt;
       this.chart.dispatchAction({
         type: 'legendAllSelect'
       });
@@ -265,52 +387,64 @@ export default {
           break;
         case '汽运营业额':
           name = "汽运(万元)";
+          tspt = 10;
           break;
         case '水运营业额':
           name = "水运(万元)";
+          tspt = 30;
           break;
         case '铁运营业额':
           name = "铁运(万元)";
+          tspt = 20;
           break;
         case '汽运成本':
           name = "汽运(万元)";
+          tspt = 10;
           break;
         case '水运成本':
           name = "水运(万元)";
+          tspt = 30;
           break;
         case '铁运成本':
           name = "铁运(万元)";
+          tspt = 20;
           break;
 
         case '汽运毛利':
           name = "汽运(万元)";
+          tspt = 10;
           break;
         case '水运毛利':
           name = "水运(万元)";
+          tspt = 30;
           break;
         case '铁运毛利':
           name = "铁运(万元)";
+          tspt = 20;
           break;
         default:
           break;
       }
-      if (name) {
-        this.chart.dispatchAction({
-          type: 'legendInverseSelect'
-        });
-        this.chart.dispatchAction({
-          type: 'legendSelect',
-          name: name
-        })
-        this.chartOption.series[3].encode = {x: 'date', y: name};
-        this.chartOption.series[3].data = undefined;
+      if (this.currentBtn == 'yoy') {
+        this.refreshDiscountChart(tspt)
       } else {
-        this.chartOption.series[3].data = [];
+        if (name) {
+          this.chart.dispatchAction({
+            type: 'legendInverseSelect'
+          });
+          this.chart.dispatchAction({
+            type: 'legendSelect',
+            name: name
+          })
+          this.chartOption.series[3].encode = {x: 'date', y: name};
+          this.chartOption.series[3].data = undefined;
+        } else {
+          this.chartOption.series[3].data = [];
+        }
+        this.currentLegend = name;
+        this.currentCard = title;
+        this.chart.setOption(this.chartOption);
       }
-      this.currentLegend = name;
-      this.currentCard = title;
-      this.chart.setOption(this.chartOption);
-
     },
     //获取日维度数据
     async getDayDate() {
@@ -324,6 +458,10 @@ export default {
     async getYearDate() {
       this.currentData = await getTrunOver("year", this.curPageCode, this.today)
     },
+    //获取月维度数据
+    async getYearYoyDate() {
+      this.currentData = await getTrunOver("yoy", this.curPageCode, this.today)
+    },
   },
   async mounted() {
     await this.getDayDate();

src/module/databoard/databoard/turnoverDetail.js

@@ -7,7 +7,8 @@ import {
   getAllTypeBusinessConditionDetailByMonth,
   getBusinessConditionDatasByYear,
   getAllTypeBusinessConditionDatasByYear,
-  getAllTypeBusinessConditionDetailByYear
+  getAllTypeBusinessConditionDetailByYear,
+  getBusinessConditionDatasByYoy
 } from "../../api/apiList";
 import {calc_hb_str, calc_tb_str, conver_amont} from "../../utils/numUtil";
 import moment from 'moment'
@@ -59,6 +60,9 @@ export const getDetail = async function (dimension, type, cur_day) {
   if (dimension == 'year') {
     res = await getAllTypeBusinessConditionDetailByYear(cur_day)
   }
+  if (dimension == 'yoy') {
+    res = await getBusinessConditionDatasByYoy(cur_day)
+  }
   let data = res.data
   return adapterDetailData(dimension, type, data)
 };
@@ -72,7 +76,7 @@ export const reqDaySumData = async function (dimension, cur_day) {
   if (dimension == 'month') {
     res = await getBusinessConditionDataByMonth(cur_day);
   }
-  if (dimension == 'year') {
+  if (dimension == 'year' || dimension == 'yoy') {
     res = await getBusinessConditionDatasByYear(cur_day);
   }
   let data = res.data
@@ -88,7 +92,7 @@ export const reqDayTransportData = async function (dimension, cur_day) {
   if (dimension == 'month') {
     res = await getAllTypeBusinessConditionDatasByMonth(cur_day);
   }
-  if (dimension == 'year') {
+  if (dimension == 'year' || dimension == 'yoy') {
     res = await getAllTypeBusinessConditionDatasByYear(cur_day);
   }
   let data = res.data
@@ -117,7 +121,7 @@ export const adapterSumData = function (dimension, type, data) {
   if (dimension == 'month') {
     res = adapterSumDataMonth(type, data);
   }
-  if (dimension == 'year') {
+  if (dimension == 'year' || dimension == 'yoy') {
     res = adapterSumDataYear(type, data);
   }
   return res;
@@ -275,6 +279,20 @@ export const adapterSumDataYear = function (type, data) {
  * @returns {any[]}
  */
 export const adapterDetailData = function (dimension, type, data) {
+    if (dimension == 'yoy') {
+      return adapterYoyDetailData(dimension, type, data)
+    }else {
+      return adapterColumnarData(dimension, type, data)
+    }
+}
+
+/**
+ * 柱状图数据组装
+ * @param dimension
+ * @param type
+ * @param data
+ */
+export const adapterColumnarData = function (dimension, type, data) {
   let list = new Array()
   let detail = null
   for (let key in data) {
@@ -295,6 +313,126 @@ export const adapterDetailData = function (dimension, type, data) {
   return list;
 }
 
+
+export const adapterYoyDetailData = function (dimension, type, data) {
+  return adapterYoyData(type,data)
+}
+
+
+/**
+ * 折线图x
+ * @param dimension
+ * @param type
+ * @param data
+ */
+export const adapterYoyData = function (type, data) {
+  let pageDate = new Object();
+  //汇总数据
+  pageDate.sumData = adapterYoyYearData(data.cur_year+"汇总", data.pre_year+"汇总", type, data.year_data_sum)
+  //汽运数据
+  pageDate.tspt10 = adapterYoyYearData(data.cur_year+"汽运", data.pre_year+"汽运", type, data.year_data_transport.tspt_10)
+  //铁运数据
+  pageDate.tspt20 = adapterYoyYearData(data.cur_year+"铁运", data.pre_year+"铁运", type, data.year_data_transport.tspt_20)
+  //水运数据
+  pageDate.tspt30 = adapterYoyYearData(data.cur_year+"水运", data.pre_year+"水运", type, data.year_data_transport.tspt_30)
+  return pageDate;
+}
+
+export const adapterYoyYearData = function (year,pre_year, type, data) {
+  let pageDate = new Object();
+  let xAxis = new Array();
+  let series = new Array();
+  //汇总数据
+  let pre_year_sum_data = adapterYoySumData(type, data.pre_year_data) //去年同期对比
+  xAxis.push(adapterXAxisData(pre_year,"red", pre_year_sum_data.month));
+  series.push(adapterSeriesData(1,pre_year, pre_year_sum_data.lineData))
+  let cur_year_sum_data = adapterYoySumData(type, data.cur_year_data) //今年数据
+  xAxis.push(adapterXAxisData(year,"#00bbe5", cur_year_sum_data.month));
+  series.push(adapterSeriesData(null,year, cur_year_sum_data.lineData))
+  pageDate.xAxis = xAxis;
+  pageDate.series = series;
+  return pageDate;
+}
+
+export const adapterYoySumData = function (type, data) {
+  let yoyData = new Object();
+  let month = new Array()
+  let lineData = new Array()
+  if(data != null) {
+    for (var item of data) {
+      if (type == 'yye') {
+        lineData.push(item.cur_sell_settle_amount);
+      }
+      if (type == 'cb') {
+        lineData.push(item.cur_buy_settle_amount);
+      }
+      if (type == 'ml') {
+        lineData.push(item.cur_gross_profit_amount);
+      }
+      month.push(item.cur_month);
+    }
+  }
+  yoyData.month = month;
+  yoyData.lineData = lineData;
+  return yoyData;
+}
+
+
+
+
+
+  /**
+   * x轴数据
+   * @param type
+   * @param color
+   * @param data
+   * @returns {{data, axisLine: {lineStyle: {color}, onZero: boolean}, axisTick: {alignWithLabel: boolean}, axisPointer: {label: {formatter: (function(*): *)}}, type: string}}
+   */
+  export const adapterXAxisData = function (year,color, data) {
+    return {
+      type: 'category',
+      axisTick: {
+        alignWithLabel: true
+      },
+      axisLine: {
+        onZero: false,
+        lineStyle: {
+          color: color
+        }
+      },
+      axisPointer: {
+        label: {
+          formatter: function (params) {
+            return ((params.seriesData.length ? params.seriesData[0].name+ '：' +   conver_amont(params.seriesData[0].value)+"万元": '')
+            );
+          }
+        }
+      },
+      data: data
+    }
+  }
+
+  /**
+   * 业务数据加载
+   * @param type
+   * @param colors
+   * @param data
+   * @returns {{data: number[], xAxisIndex: number, name: string, emphasis: {focus: string}, type: string, smooth: boolean}}
+   */
+  export const adapterSeriesData = function (xAxisIndex,name, data) {
+    return {
+      name: name,
+      type: 'line',
+      xAxisIndex: xAxisIndex,
+      smooth: true,
+      emphasis: {
+        focus: 'series'
+      },
+      data: data
+    };
+  }
+
+
 /**
  * 详细数据转换
  * @param type

src/module/databoard/index.vue

@@ -181,7 +181,8 @@ export default {
   },
   data() {
     return {
-      today: moment().format("yyyy-MM-DD"),
+      today: "2023-05-18",
+      // today: moment().format("yyyy-MM-DD"),
       yyqk: {
         yye: {
           title: "营业额",

src/module/index/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>联达供应链数据大屏</title>
+    <title>联达供应链控制塔</title>
 
     <!-- Google MD图标 -->
     <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">