大屏当日订单量跳转

src/module/api/apiList.js

@@ -134,5 +134,13 @@ export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/quer
     cur_day: cur_day
   }
 }, 'POST');
+//30天内事务部运单完成量
+export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', {
+  aux: {
+    cur_day: cur_day
+    ,department_code: department_code
+  }
+}, 'POST');
+
 
 

src/module/databoard/databoard/department-shipment.vue

+<template>
+  <div class="target-achievement">
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L022'}" value="上海事业部"
+             @click="changeDimension('L022')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L026'}" value="广东事业部"
+             @click="changeDimension('L026')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L024'}" value="江苏事业部"
+             @click="changeDimension('L024')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L025'}" value="天津事业部"
+             @click="changeDimension('L025')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L004'}" value="成都事业部"
+             @click="changeDimension('L004')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L025'}" value="山东事业部"
+             @click="changeDimension('L005')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L007'}" value="河南事业部"
+             @click="changeDimension('L007')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L008'}" value="华西事业部"
+             @click="changeDimension('L008')">
+      <input type="button" :class="{'selectedBtn': currentBtn === 'L009'}" value="湛江事业部"
+             @click="changeDimension('L009')">
+    </div>
+    <div class="chart">
+      <div ref="chart" style="width: 100%;height: 100%;"/>
+    </div>
+    <div class="bar">
+      <div ref="bar" style="width: 100%;height: 100%;"/>
+    </div>
+  </div>
+</template>
+<script>
+
+import * as echarts from "echarts";
+import {getShipmentWeight} from "./turnoverDetail"
+
+export default {
+  name: "DepartmentShipment",
+  data() {
+    return {
+      today: "2023-06-30",
+      // today: moment().format("yyyy-MM-DD"),
+      discountOption: {
+        tooltip: {
+          trigger: 'axis',
+          valueFormatter: this.valueFormatter
+        },
+        grid: {
+          top:'30%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%'
+        },
+        legend: {
+          align:'right',//文字在前图标在后
+          left:'3%',
+          top:'15%',
+          textStyle:{
+            fontSize: 18,//字体大小
+            color: '#ffffff'//字体颜色
+          },
+          data: ['完成量', '未完成量']
+        },
+        yAxis: {
+          type: 'value',
+        },
+        xAxis: [],
+        series: []
+      }
+    }
+  },
+  methods: {
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    //dimension 事业部code
+    async changeDimension(dimension) {
+      this.currentBtn = dimension;
+      this.chart.dispose();
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+
+      this.currentData = await getShipmentWeight(dimension, this.today)
+
+      //折线图加载
+      this.discountOption.xAxis = this.currentData.xAxis;
+      this.discountOption.series = this.currentData.series;
+      this.chart.setOption(this.discountOption);
+      //柱状图加载
+      this.discountOption.series = this.currentData.seriesBar;
+      this.bar.setOption(this.discountOption);
+    },
+  },
+
+
+
+  mounted() {
+    setTimeout(() => {
+      let chartDom = this.$refs.chart;
+      this.chart = echarts.init(chartDom);
+      this.chart.setOption({
+        title:{
+          left:'3%',
+          top:'5%',
+          text:"运单完成量趋势图",//标题文本，支持使用 \n 换行。
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          align:'right',//文字在前图标在后
+          left:'3%',
+          top:'15%',
+          textStyle:{
+            fontSize: 18,//字体大小
+            color: '#ffffff'//字体颜色
+          },
+          data: ['完成量', '未完成量']
+        },
+        grid: {
+          top:'30%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {} //保存为图片
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap:true,
+          axisTick:{
+            alignWithLabel:true //保证刻度线和标签对齐
+          },
+          data: ["周一","周二","周三","周四","周五","周六","周日"] //x坐标的名称
+
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: true,
+          splitNumber:4, //纵坐标数
+          interval:250 //强制设置坐标轴分割间隔
+        },
+
+        series: [
+          {
+            name: '完成量',
+            type: 'line',
+            stack: '总量',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '未完成量',
+            type: 'line',
+            stack: '总量',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          }
+          ]
+      });
+
+      let barDom = this.$refs.bar;
+      this.bar = echarts.init(barDom);
+      this.bar.setOption({
+          xAxis: {
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'bar',
+              data: [23, 24, 18, 25, 27, 28, 25]
+            }
+          ]
+      });
+      window.addEventListener('resize', this.resizeChart);
+    }, 500);
+  }
+
+}
+</script>
+
+<style scoped>
+.turnover-detail {
+  width: 100%;
+  height: 100%;
+}
+
+.card-board {
+  width: 100%;
+  height: 25%;
+  display: flex;
+  justify-content: space-between;
+  padding: 2rem;
+}
+
+.menu {
+  width: 100%;
+  height: 5%;
+  display: flex;
+  align-items: center;
+  padding-left: 5%;
+}
+
+.chart {
+  width: 100%;
+  height: 45%;
+}
+.bar {
+  width: 100%;
+  height: 45%;
+}
+
+input[type="button"] {
+  height: 80%;
+  margin: 0.5%;
+  border: none;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 25px;
+  padding: 0 10px;
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+
+input[type="button"]:hover {
+  color: #1234a1 !important;
+  background-color: #00c8d6 !important;
+}
+
+.selectedBtn {
+  color: #1234a1 !important;
+  background-color: #00c8d6 !important;
+}
+
+.unSelectedBtn {
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+
+.selectCard {
+  background-color: var(--card-background-select-color) !important;
+}
+</style>

src/module/databoard/databoard/turnoverDetail.js

@@ -8,7 +8,7 @@ import {
   getBusinessConditionDatasByYear,
   getAllTypeBusinessConditionDatasByYear,
   getAllTypeBusinessConditionDetailByYear,
-  getBusinessConditionDatasByYoy
+  getBusinessConditionDatasByYoy, getDepartmentShipmentWeight
 } from "../../api/apiList";
 import {calc_hb_str, calc_tb_str, conver_amont} from "../../utils/numUtil";
 import moment from 'moment'
@@ -344,10 +344,10 @@ export const adapterYoyYearData = function (year,pre_year, type, data) {
   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));
+  xAxis.push(adapterXAxisData("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));
+  xAxis.push(adapterXAxisData("#00bbe5", cur_year_sum_data.month));
   series.push(adapterSeriesData(null,year, cur_year_sum_data.lineData))
   pageDate.xAxis = xAxis;
   pageDate.series = series;
@@ -388,7 +388,7 @@ export const adapterYoySumData = function (type, data) {
    * @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) {
+  export const adapterXAxisData = function (color, data) {
     return {
       type: 'category',
       axisTick: {
@@ -419,7 +419,7 @@ export const adapterYoySumData = function (type, data) {
    * @param data
    * @returns {{data: number[], xAxisIndex: number, name: string, emphasis: {focus: string}, type: string, smooth: boolean}}
    */
-  export const adapterSeriesData = function (xAxisIndex,name, data) {
+  export const adapterSeriesData = function (xAxisIndex, name, data) {
     return {
       name: name,
       type: 'line',
@@ -431,6 +431,18 @@ export const adapterYoySumData = function (type, data) {
       data: data
     };
   }
+export const adapterSeriesDataBar = function (xAxisIndex, name, data) {
+  return {
+    name: name,
+    type: 'bar',
+    xAxisIndex: xAxisIndex,
+    smooth: true,
+    emphasis: {
+      focus: 'series'
+    },
+    data: data
+  };
+}
 
 
 /**
@@ -491,3 +503,30 @@ export const initDetail = function () {
   return detail;
 }
 
+export const getShipmentWeight = async function (department_code, cur_day) {
+  let pageData = new Object();
+  let response = await getDepartmentShipmentWeight(department_code, cur_day);
+  var xAxisData = new Array();
+  var line1 = new Array();
+  var line2 = new Array();
+  response.data.forEach(function (row) {
+    xAxisData.push(row.cur_day);
+    line1.push(row.s__finished_weight_sum);
+    line2.push(row.s__unfinished_weight_sum);
+  });
+  var series = new Array();
+  series.push(adapterSeriesData(null, "完成量", line1));
+  series.push(adapterSeriesData(null, "未完成量", line2));
+  var xAxis = new Array();
+  xAxis.push(adapterXAxisData("#00bbe5", xAxisData));
+
+  var seriesBar = new Array();
+  seriesBar.push(adapterSeriesDataBar(null, "完成量", line1));
+  seriesBar.push(adapterSeriesDataBar(null, "未完成量", line2));
+
+  pageData.xAxis = xAxis;
+  pageData.series = series;
+  pageData.seriesBar = seriesBar;
+  console.log("--------------------", pageData);
+  return pageData;
+}

src/module/databoard/index.vue

@@ -85,8 +85,8 @@
             </div>
           </display-board>
         </div>
-        <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
-          <showcase style="width: 18%;" title="当日订单量">
+        <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
+          <showcase style="width: 18%;" title="当日订单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
             <title-content-mark
               style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
               content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="drddl.weight"

src/module/index/router/index_router.js

@@ -10,6 +10,7 @@ import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
 import OrderProportion from "../../databoard/databoard/order-proportion.vue";
 import LostAddCustomer from "../../databoard/databoard/lost-add-customer.vue";
 import TargetAchievement from "../../databoard/databoard/target-achievement.vue";
+import DepartmentShipment from "../../databoard/databoard/department-shipment.vue";
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
@@ -79,5 +80,10 @@ export default new Router({
       name: 'TargetAchievement',
       component: TargetAchievement
     },
+    {
+      path: '/department-shipment',
+      name: 'DepartmentShipment',
+      component: DepartmentShipment
+    }
   ]
 })