订单目标情况

config/index.js

@@ -29,7 +29,14 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://localhost:8080', // 测试
+        target: 'http://127.0.0.1:4523/m1/3446320-0-default', // 测试
+        changeOrigin: true, // 改变源（是否跨域）
+        pathRewrite: {
+          '^/api': '/'
+        }
+      },
+      '/m1/3446320-0-default/api': {
+        target: 'http://127.0.0.1:4523', // 测试
         changeOrigin: true, // 改变源（是否跨域）
         pathRewrite: {
           '^/api': '/'

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
+    "element-ui": "^2.15.14",
     "jquery": "^3.2.1",
     "js-base64": "^3.7.5",
     "js-md5": "^0.7.3",

src/module/api/apiList.js

@@ -103,6 +103,7 @@ export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_boar
 export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day": date}}, "POST")
 export const getOrderFinishDataByCondition = (aux) => fetch("/api/query/*/action/get_order_finish_data_by_condition", {aux: aux}, "POST")
 export const getOrderWeightAndProportionList = (aux) => fetch("/api/query/dash_board/action/get_order_weight_and_proportion_list", {aux: aux}, "POST")
+export const getTargetOrderDataByCondition = (aux) => fetch("/m1/3446320-0-default/api/query/*/action/get_target_order_data_by_condition", {aux: aux}, "POST")
 
 //流失客户 & 新增客户
 export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', {

src/module/databoard/databoard/js/targetAchievementData.js

+import { getTargetOrderDataByCondition} from '../../../api/apiList';
+import {calc_hb_str, calc_zb_str, conver_amont} from "../../../utils/numUtil";
+import mockData from "../mockData/target-achievement.json";
+
+
+export const getData = async (aux,callback) => {
+  let resList = new Array();
+  await getTargetOrderDataByCondition(aux).then(function (res) {
+    resList = res.data;
+  });
+  callback(resList);
+  return resList
+}
+
+export const getTargetOrderDataByConditionCount = async (aux,callback) => {
+  let resData;
+  await getTargetOrderDataByCondition(aux).then(function (res) {
+    resData = dataFormatter(res.data);
+  });
+  callback(resData);
+  return resData
+}
+
+function generateData(count, res) {
+  res.push({
+    title: "吨位(万吨)",
+    actualValue: conver_amont(count.unit_weight),
+    targetValue: conver_amont(count.target_unit_weight),
+  })
+  res.push({
+    title: "营业额(万元)",
+    actualValue: conver_amont(count.sell_settle_amount),
+    targetValue: conver_amont(count.target_sell_settle_amount),
+  })
+  res.push({
+    title: "净利润(万元)",
+    actualValue: conver_amont(count.gross_profit_amount),
+    targetValue: conver_amont(count.target_gross_profit_amount),
+  })
+}
+
+function dataFormatter(data){
+  let res = [];
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].group_name === "总计"){
+      generateData(data[i], res);
+      break;
+    }
+  }
+  //mock数据，接口没好的时候用的
+  if (res.length === 0){
+    let count = mockData.count;
+    generateData(count, res);
+  }
+  return res;
+}
+

src/module/databoard/databoard/target-achievement.vue

+<template>
+  <div class="target-achievement">
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '01'}" value="事业部细分" @click="clickBtn('subdivide','01')">
+      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '02'}" value="区域细分" @click="clickBtn('subdivide','02')">
+    </div>
+    <div class="menu">
+      <input type="button" :class="{'selectedBtn': currentBtn.date === 'day'}" value="日统计" @click="clickBtn('date','day')">
+      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'month'}" value="月统计" @click="clickBtn('date','month')">
+      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'year'}" value="年统计" @click="clickBtn('date','year')">
+    </div>
+    <div class="list">
+      <el-table :data="data" height="650" style="font-size: 18px" :header-cell-style="headStyleJs" :cell-style="bodyStyleJs">
+        <el-table-column
+          prop="group_name"
+          label="" width="300">
+        </el-table-column>
+        <el-table-column
+          label="吨位(万吨)">
+          <el-table-column
+            prop="unit_weight"
+            :formatter="cellNumFormatter"
+            label="实际值">
+          </el-table-column>
+          <el-table-column
+            prop="target_unit_weight"
+            :formatter="cellNumFormatter"
+            label="目标值">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column
+          label="营业额(万元)">
+          <el-table-column
+            prop="sell_settle_amount"
+            :formatter="cellNumFormatter"
+            label="实际值">
+          </el-table-column>
+          <el-table-column
+            prop="target_sell_settle_amount"
+            :formatter="cellNumFormatter"
+            label="目标值">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column
+          label="净利润(万元)">
+          <el-table-column
+            prop="gross_profit_amount"
+            :formatter="cellNumFormatter"
+            label="实际值">
+          </el-table-column>
+          <el-table-column
+            prop="target_gross_profit_amount"
+            :formatter="cellNumFormatter"
+            label="目标值">
+          </el-table-column>
+        </el-table-column>
+
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+
+import mockData from "./mockData/target-achievement.json";
+import {getData} from "./js/targetAchievementData";
+import {conver_amont} from "../../utils/numUtil";
+
+export default {
+  name:"TargetAchievement",
+  data() {
+    return {
+      borderLabel:[
+        '吨位(万吨)',
+        '营业额(万元)',
+        '营业额(万元)',
+      ],
+      borderField:[
+        'target_unit_weight',
+        'target_sell_settle_amount',
+      ],
+      currentBtn:{
+        date: this.$route.query.code ? this.$route.query.code : "day",
+        subdivide: "01",
+      },
+      dateTimeChoice:{
+        day: '昨日',
+        month: "上月",
+        year: "去年",
+      },
+      rowHeight: "50px",
+      data: mockData["01"][this.$route.query.code ? this.$route.query.code : "day"]
+    };
+  },
+  methods: {
+    clickBtn(type,dimension){
+      this.currentBtn[type] = dimension;
+      this.getData();
+    },
+    getData() {
+      getData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
+        (res) => {
+          this.data = res;
+        }
+      );
+    },
+    bodyStyleJs(param){
+      var {row, rowIndex,column} = param;
+      let style = {
+        height: this.rowHeight,
+        "text-align": "center"
+      };
+      if (row.group_name && (row.group_name.indexOf("总计") !== -1 || row.group_name.indexOf("小计") !== -1)){
+        style["font-weight"] = "bolder";
+        style["font-size"] = "x-large";
+      }
+      if (column && (column.property === "group_name" || this.borderField.includes(column.property))){
+        style["border-right"] = "1px solid #aaaa";
+      }
+      style["background-color"] = (rowIndex % 2 === 1)?"#0E5FFF20":"#0E5FFF30";
+      return style;
+    },
+    headStyleJs(param){
+      let style = {
+        "background-color": "var(--global-background-color)",
+        "text-align": "center",
+        color: "white"
+      };
+      if (!param.column.label || this.borderLabel.includes(param.column.label) || this.borderField.includes(param.column.property)){
+        style["border-right"] = "1px solid #aaaa";
+      }
+      return style;
+    },
+    cellNumFormatter(row, column, cellValue, index){
+      return conver_amont(cellValue);
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  watch:{
+    countDown(n,o){
+      if (n === 1){
+        this.getData();
+      }
+    },
+  },
+  props:{
+    countDown:{
+      type: Number
+    }
+  }
+};
+</script>
+<style scoped>
+.target-achievement{
+  width: 100%;
+  height: 100%;
+}
+.menu{
+  width: 100%;
+  height: 5%;
+  display: flex;
+  align-items: center;
+  padding-left: 2%;
+}
+.list{
+  height: 80%;
+  width: 100%;
+  color: white;
+  padding: 2rem;
+}
+input[type="button"]{
+  height: 80%;
+  margin: 0.5%;
+  border: none;
+  font-size: 12px;
+  border-radius: 25px;
+  font-weight: bold;
+  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;
+}
+.el-table{
+  color: white;
+  background-color: rgba(0,0,0,0);
+  border: none;
+}
+
+.el-table::-webkit-scrollbar { width: 0 !important }
+
+.list /deep/ td.el-table__cell {
+  border: none;
+}
+.list /deep/ th.el-table__cell {
+  border: none;
+}
+.list /deep/ .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+}
+
+/* // ----------修改elementui表格的默认样式----------- */
+.list /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+// 整个滚动条
+  width: 0; // 纵向滚动条的宽度
+  background: rgba(213, 215, 220, 0.3);
+  border: none;
+}
+.list /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+  // 滚动条轨道
+  border: none;
+}
+
+.list /deep/ tr:hover>td.el-table__cell{background-color:#0000}
+
+/* // --------------------隐藏table gutter列和内容区右侧的空白 start */
+.list /deep/ th.gutter {
+  display: none;
+  width: 0;
+}
+/*
+.list /deep/ colgroup col[name="gutter"] {
+  display: none;
+  width: 0;
+}
+
+ */
+.list /deep/ tr{
+  background-color: #0000;
+}
+
+.list /deep/ .el-table--group::after{
+  display: none;
+}
+
+/* // --------------------隐藏table gutter列和内容区右侧的空白 end */
+
+.unSelectedBtn{
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+</style>

src/module/databoard/index.vue

@@ -51,36 +51,36 @@
       </display-board>
       <div class="trade_middle" style="border: none;box-shadow: none;">
         <div style="display: flex; justify-content: space-between; height: 50%;">
-          <display-board style="width: 32%;" title="每日目标情况">
+          <display-board style="width: 32%;" title="每日目标情况" @click.native="routerTo('/target-achievement','day')">
             <div
               style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
-              <table-column style="float: left;width: 35%;" :data="mockData.mrmbqk" name="title" show-head/>
+              <table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
               <table-column
                 style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
-                :data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/>
-              <table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值"
+                :data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
+              <table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
                             show-head/>
             </div>
           </display-board>
-          <display-board style="width: 32%;" title="月度目标情况">
+          <display-board style="width: 32%;" title="月度目标情况" @click.native="routerTo('/target-achievement','month')">
             <div
               style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
-              <table-column style="float: left;width: 35%;" :data="mockData.ydmbqk" name="title" show-head/>
+              <table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
               <table-column
                 style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
-                :data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/>
-              <table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值"
+                :data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
+              <table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
                             show-head/>
             </div>
           </display-board>
-          <display-board style="width: 32%;" title="年度目标情况">
+          <display-board style="width: 32%;" title="年度目标情况" @click.native="routerTo('/target-achievement','year')">
             <div
               style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
-              <table-column style="float: left;width: 35%;" :data="mockData.ndmbqk" name="title" show-head/>
+              <table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
               <table-column
                 style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
-                :data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/>
-              <table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值"
+                :data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
+              <table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
                             show-head/>
             </div>
           </display-board>
@@ -166,6 +166,7 @@ import {
 import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil";
 import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "./databoard/js/indexPieData";
 import moment from 'moment'
+import {getTargetOrderDataByConditionCount} from "./databoard/js/targetAchievementData";
 export default {
   components: {
     RingPieChart,
@@ -495,7 +496,12 @@ export default {
       transportTypeOrderFinishPie: [],
       customerOrderFinishPie: [],
       arCompanyList: [],
-      charts: {}
+      charts: {},
+      targetAchievement:{
+        day: null,
+        month: null,
+        year: null,
+      }
     }
   },
   methods: {
@@ -572,13 +578,14 @@ export default {
       });
     },
     refreshData() {
-      getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
-      getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
-      this.showBusinessConditionDatas();
-      this.getArSummaryBar();
-      this.getArCompanyList();
-      this.getLoseAndAdd();
-      this.getOrderBusinessCondition();
+        getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
+        getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
+        this.showBusinessConditionDatas();
+        this.getArSummaryBar();
+        this.getArCompanyList();
+        this.getLoseAndAdd();
+        this.getOrderBusinessCondition();
+        this.getTargetOrderDataByConditionCount();
     },
     pieDataValueFormatter(param) {
       return conver_amont(param) + "万吨";
@@ -605,6 +612,11 @@ export default {
         this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
         this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
       })
+    },
+    getTargetOrderDataByConditionCount() {
+      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
+      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
+      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
     }
   },
   mounted() {

src/module/index/router/index_router.js

@@ -9,9 +9,13 @@ import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-com
 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 ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 
 
 Vue.use(Router)
+Vue.use(ElementUI)
 
 export default new Router({
   routes: [
@@ -69,6 +73,11 @@ export default new Router({
       path: '/lost-add-customer',
       name: 'lostAddCustomer',
       component: LostAddCustomer
-    }
+    },
+    {
+      path: '/target-achievement',
+      name: 'TargetAchievement',
+      component: TargetAchievement
+    },
   ]
 })