Demo

config/index.js

@@ -6,7 +6,7 @@ module.exports = {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'databoard',
+    assetsSubDirectory: 'demo',
     assetsPublicPath: '/assets/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as

src/module/databoard/assets/index.css

@@ -26,7 +26,7 @@
   width: 100%;
   background-repeat: no-repeat;
   background-position: center;
-  background-image: url(./img/top_img_2x.png);
+  background-image: url(./img/demo_top.png);
   background-size: cover;
 }
 
@@ -39,6 +39,14 @@
   letter-spacing: 2px;
 }
 
+#top_title {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(./img/top_title_2x.png);
+  height: 100%;
+  background-size: 16% 48%;
+}
+
 .text_left {
   height: 50%;
   width: 25%;

src/module/databoard/components/chart/ar-company-bar.vue

@@ -120,21 +120,16 @@ export default {
   },
   mounted() {
     // 获取图表数据
-    arCompanyBar().then(res => {
-      let data = res.data
-      let xAxisData = []
-      let seriesData = []
-      for (let item of data) {
-        xAxisData.push(item.settle_company)
-        seriesData.push(item.unregister_amount)
-      }
-      this.barChart.xAxis.data = xAxisData
-      this.barChart.series.data = seriesData
-      this.drawArCompanyBar()
-    }).catch(err => {
-        console.log(err);
-      }
-    );
+    let data = [{"unregister_amount":2538.22,"settle_company":"上海******有限公司"},{"unregister_amount":270.32,"settle_company":"上海******有限公司"},{"unregister_amount":203.7,"settle_company":"南京******有限公司"},{"unregister_amount":100.37,"settle_company":"上海******有限公司"},{"unregister_amount":100.21,"settle_company":"北京******有限公司"},{"unregister_amount":92.46,"settle_company":"上海******有限公司"},{"unregister_amount":83.66,"settle_company":"上海******有限公司"},{"unregister_amount":69.86,"settle_company":"上海******有限公司"},{"unregister_amount":56.76,"settle_company":"上海******有限公司"},{"unregister_amount":55.45,"settle_company":"上海******有限公司"},{"unregister_amount":39.9,"settle_company":"郑州******有限公司"},{"unregister_amount":38.22,"settle_company":"上海******有限公司"},{"unregister_amount":37.34,"settle_company":"南京******有限公司"},{"unregister_amount":35.97,"settle_company":"浙江******有限公司"},{"unregister_amount":32.97,"settle_company":"上海******有限公司"},{"unregister_amount":24.29,"settle_company":"天津******有限公司"},{"unregister_amount":19.09,"settle_company":"南京******有限公司"},{"unregister_amount":17.01,"settle_company":"上海******有限公司"},{"unregister_amount":16.45,"settle_company":"长春******有限公司"},{"unregister_amount":14.98,"settle_company":"厦门******有限公司"}];
+    let xAxisData = []
+    let seriesData = []
+    for (let item of data) {
+      xAxisData.push(item.settle_company)
+      seriesData.push(item.unregister_amount)
+    }
+    this.barChart.xAxis.data = xAxisData
+    this.barChart.series.data = seriesData
+    this.drawArCompanyBar()
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/components/chart/ar-company-monthly-bar.vue

@@ -131,24 +131,19 @@ export default {
     }
     this.barChart.title.text = company + " 已开票未收款（开票月份）"
     // 获取图表数据
-
-    arCompanyMonthlyBar(company).then(res => {
-      let data = res.data
-      let xAxisData = []
-      let seriesData0 = []
-      let seriesData1 = []
-      for (let item of data) {
-        xAxisData.push(item.settle_month)
-        seriesData0.push(item.unregister_amount)
-        seriesData1.push(item.percentage)
-      }
-      this.barChart.xAxis.data = xAxisData
-      this.barChart.series[0].data = seriesData0
-      this.barChart.series[1].data = seriesData1
-      this.drawArCompanyMonthlyBar()
-    }).catch(err => {
-      console.log(err);
-    });
+    let data = [{"unregister_amount":3.35,"percentage":43.52,"settle_month":"2023-01","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":2.07,"percentage":21.19,"settle_month":"2023-02","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":1.16,"percentage":0.83,"settle_month":"2023-03","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":2.84,"percentage":28.19,"settle_month":"2023-04","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":8.3,"percentage":14.56,"settle_month":"2023-05","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":22.67,"percentage":17.56,"settle_month":"2023-06","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":2.65,"percentage":2.87,"settle_month":"2023-07","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":92,"percentage":28.22,"settle_month":"2023-08","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":220.91,"percentage":48.24,"settle_month":"2023-09","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":1293.17,"percentage":73.54,"settle_month":"2023-10","settle_company":"上海欧冶物流股份有限公司"},{"unregister_amount":885.99,"percentage":91.29,"settle_month":"2023-11","settle_company":"上海欧冶物流股份有限公司"}];
+    let xAxisData = []
+    let seriesData0 = []
+    let seriesData1 = []
+    for (let item of data) {
+      xAxisData.push(item.settle_month)
+      seriesData0.push(item.unregister_amount)
+      seriesData1.push(item.percentage)
+    }
+    this.barChart.xAxis.data = xAxisData
+    this.barChart.series[0].data = seriesData0
+    this.barChart.series[1].data = seriesData1
+    this.drawArCompanyMonthlyBar()
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/components/chart/ar-monthly-bar.vue

@@ -115,20 +115,16 @@ export default {
   },
   mounted() {
     // 获取图表数据
-    arMonthlyBar().then(res => {
-      let data = res.data
-      let xAxisData = []
-      let seriesData = []
-      for (let item of data) {
-        xAxisData.push(item.settle_month)
-        seriesData.push(item.unregister_amount)
-      }
-      this.barChart.xAxis.data = xAxisData
-      this.barChart.series.data = seriesData
-      this.drawArMonthlyBar()
-    }).catch(err => {
-      console.log(err);
-    });
+    let data = [{"unregister_amount":7.69,"settle_month":"2023-01"},{"unregister_amount":9.77,"settle_month":"2023-02"},{"unregister_amount":140.14,"settle_month":"2023-03"},{"unregister_amount":10.06,"settle_month":"2023-04"},{"unregister_amount":57.04,"settle_month":"2023-05"},{"unregister_amount":129.07,"settle_month":"2023-06"},{"unregister_amount":92.39,"settle_month":"2023-07"},{"unregister_amount":325.96,"settle_month":"2023-08"},{"unregister_amount":457.98,"settle_month":"2023-09"},{"unregister_amount":1758.57,"settle_month":"2023-10"},{"unregister_amount":970.54,"settle_month":"2023-11"}];
+    let xAxisData = []
+    let seriesData = []
+    for (let item of data) {
+      xAxisData.push(item.settle_month)
+      seriesData.push(item.unregister_amount)
+    }
+    this.barChart.xAxis.data = xAxisData
+    this.barChart.series.data = seriesData
+    this.drawArMonthlyBar()
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/components/chart/ar-monthly-company-bar.vue

@@ -112,20 +112,16 @@ export default {
     }
     this.barChart.title.text = month + " 已开票未收款（结算单位）"
     // 获取图表数据
-    arMonthlyCompanyBar(month).then(res => {
-      let data = res.data
-      let xAxisData = []
-      let seriesData = []
-      for (let item of data) {
-        xAxisData.push(item.settle_company)
-        seriesData.push(item.unregister_amount)
-      }
-      this.barChart.xAxis.data = xAxisData
-      this.barChart.series.data = seriesData
-      this.drawArMonthlyCompanyBar()
-    }).catch(err => {
-      console.log(err);
-    });
+    let data = [{"unregister_amount":1293.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":87.72,"settle_month":"2023-10","settle_company":"北京******有限公司"},{"unregister_amount":60.23,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":47.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":35.76,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.83,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":22.38,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":17.01,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":16.02,"settle_month":"2023-10","settle_company":"浙江******有限公司"},{"unregister_amount":14.56,"settle_month":"2023-10","settle_company":"厦门******有限公司"},{"unregister_amount":13.8,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":12.44,"settle_month":"2023-10","settle_company":"郑州******有限公司"},{"unregister_amount":10.66,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.62,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.3,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":7.08,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":7.07,"settle_month":"2023-10","settle_company":"济南******有限公司"},{"unregister_amount":6.41,"settle_month":"2023-10","settle_company":"江苏******有限公司"}];
+    let xAxisData = []
+    let seriesData = []
+    for (let item of data) {
+      xAxisData.push(item.settle_company)
+      seriesData.push(item.unregister_amount)
+    }
+    this.barChart.xAxis.data = xAxisData
+    this.barChart.series.data = seriesData
+    this.drawArMonthlyCompanyBar()
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);

src/module/databoard/databoard/js/indexPieData.js

@@ -8,22 +8,19 @@ export const getTransportTypeOrderFinishPie = async (callback,date) => {
     '50': '码头/仓库',
   }
   let resList = new Array();
-  await transportTypeOrderFinishPie(date).then(function (res) {
-    for (let key in choiceMap) {
-      resList.push({name: choiceMap[key], value: res.data[key].cur_unit_weight});
-    }
-  });
+  let data = {"10":{"pre_buy_settle_amount":168825.74767,"cur_gross_profit_amount":97617.06634,"cur_sell_settle_amount":161709.98145,"pre_unit_weight":20541.888,"pre_sell_settle_amount":947153.95138,"cur_transport_type":"10","cur_buy_settle_amount":64092.91511,"pre_gross_profit_amount":778328.20371,"cur_unit_weight":8306.726},"20":{"pre_buy_settle_amount":0,"cur_gross_profit_amount":0,"cur_sell_settle_amount":0,"pre_unit_weight":0,"pre_sell_settle_amount":0,"cur_transport_type":"20","cur_buy_settle_amount":0,"pre_gross_profit_amount":0,"cur_unit_weight":0},"30":{"pre_buy_settle_amount":45627.6114,"cur_gross_profit_amount":-25654.24,"cur_sell_settle_amount":48353.725,"pre_unit_weight":3743.459,"pre_sell_settle_amount":165140.1423,"cur_transport_type":"30","cur_buy_settle_amount":74007.965,"pre_gross_profit_amount":119512.5309,"cur_unit_weight":2583.125},"50":{"pre_buy_settle_amount":0,"cur_gross_profit_amount":0,"cur_sell_settle_amount":0,"pre_unit_weight":0,"pre_sell_settle_amount":0,"cur_transport_type":"50","cur_buy_settle_amount":0,"pre_gross_profit_amount":0,"cur_unit_weight":0}}
+  for (let key in choiceMap) {
+    resList.push({name: choiceMap[key], value: data[key].cur_unit_weight});
+  }
   callback(resList);
   return resList
 }
 export const getCustomerOrderFinishPie = async (callback,date) => {
-
   let resList = new Array();
-  await customerOrderFinishPie(date).then(function (res) {
-    for (let key in res.data) {
-      resList.push({name: key, value: res.data[key].cur_unit_weight});
-    }
-  });
+  let data = {"上海******有限公司1":{"cur_gross_profit_amount":1381.535,"cur_sell_settle_amount":48353.725,"entrust_agency_name":"上海******有限公司1","cur_buy_settle_amount":46972.19,"cur_unit_weight":1381.535},"上海******有限公司2":{"cur_gross_profit_amount":735.775,"cur_sell_settle_amount":0,"entrust_agency_name":"上海******有限公司2","cur_buy_settle_amount":735.775,"cur_unit_weight":1201.59},"浙江******有限公司":{"cur_gross_profit_amount":1237.95,"cur_sell_settle_amount":1237.95,"entrust_agency_name":"浙江******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":160.506},"上海******有限公司3":{"cur_gross_profit_amount":460.7568,"cur_sell_settle_amount":1330.8498,"entrust_agency_name":"上海******有限公司3","cur_buy_settle_amount":870.093,"cur_unit_weight":135.801},"天津******有限公司":{"cur_gross_profit_amount":938.212,"cur_sell_settle_amount":0,"entrust_agency_name":"天津******有限公司","cur_buy_settle_amount":938.212,"cur_unit_weight":520.244},"南京******有限公司":{"cur_gross_profit_amount":359.415,"cur_sell_settle_amount":1096.245,"entrust_agency_name":"南京******有限公司","cur_buy_settle_amount":736.83,"cur_unit_weight":730.083},"北京******有限公司":{"cur_gross_profit_amount":2318.555,"cur_sell_settle_amount":2318.555,"entrust_agency_name":"北京******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":440.45},"广州******有限公司":{"cur_gross_profit_amount":4211.0898,"cur_sell_settle_amount":4211.0898,"entrust_agency_name":"广州******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":460.486},"青岛******有限公司":{"cur_gross_profit_amount":2502.201,"cur_sell_settle_amount":2502.201,"entrust_agency_name":"青岛******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":300.147}};
+  for (let key in data) {
+    resList.push({name: key, value: data[key].cur_unit_weight});
+  }
   callback(resList);
   return resList
 }

src/module/databoard/databoard/js/orderProportionHeadData.js

@@ -7,14 +7,8 @@ let choice = {
     year: "去年",
 }
 
-export const getHeadData = async (aux,callback) => {
-  let resList = new Array();
-  await getOrderFinishDataByCondition(aux).then(function (res) {
-    resList = dataFormatter(aux,res.data);
-    console.log(resList)
-  });
-  callback(resList);
-  return resList
+export const getHeadData = (aux,data) => {
+  return dataFormatter(aux,data);
 }
 
 

src/module/databoard/databoard/order-proportion.vue

@@ -46,6 +46,7 @@
 </template>
 <script>
 
+import mockData from "./mockData/order_proportion_demo.json";
 import TitleContentMark from "../components/layout/title-content-mark.vue";
 import TableColumn from "../components/table/table-column.vue";
 import ContrastCard from "../components/card/contrast-card.vue";
@@ -93,24 +94,14 @@ export default {
       this.getHeadData(type);
     },
     getHeadData(type){
-      getHeadData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
-        (res) => {
-          this.currentHeadData = res;
-          // if (type && type !== "date"){
-            this.currentCard = res[0]?res[0].key:null;
-            this.chartTitle = res[0]?(res[0].title + '委托单位占比'):null;
-          // }
-          this.calcCardWidth();
-          this.getDetailData();
-        }
-      );
+      this.currentHeadData = getHeadData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide}, mockData[this.currentBtn.date].header);
+      this.currentCard = this.currentHeadData[0] ? this.currentHeadData[0].key : null;
+      this.chartTitle = this.currentHeadData[0] ? (this.currentHeadData[0].title + '委托单位占比'):null;
+      this.calcCardWidth();
+      this.getDetailData();
     },
     getDetailData(){
-      getDetailData({cur_day: this.today,date:this.currentBtn.date,type:this.currentBtn.subdivide,key:this.currentCard},
-        (res) => {
-          this.currentDetailData = res;
-        }
-      );
+      this.currentDetailData = mockData[this.currentBtn.date].detail
     },
     clickBtn(type,dimension){
       this.currentBtn[type] = dimension;

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

@@ -97,11 +97,7 @@ export default {
       this.getData();
     },
     getData() {
-      getData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
-        (res) => {
-          this.data = res;
-        }
-      );
+      this.data = [{"sell_settle_amount":34098.414,"group_name":"上海事业部-汽运-自运","gross_profit_amount":8477.95686,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":3431.334,"key":"上海事业部"},{"sell_settle_amount":153258.27125,"group_name":"上海事业部-汽运-外发","gross_profit_amount":120633.72985,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":5022.536,"key":"上海事业部"},{"sell_settle_amount":187356.68525,"group_name":"上海事业部-小计","gross_profit_amount":129111.68671,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":8453.87,"key":"上海事业部"},{"sell_settle_amount":7132.817,"group_name":"广东事业部-汽运-外发","gross_profit_amount":7132.817,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":294.09,"key":"广东事业部"},{"sell_settle_amount":48353.725,"group_name":"广东事业部-水运-外发","gross_profit_amount":1381.535,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":1381.535,"key":"广东事业部"},{"sell_settle_amount":55486.542,"group_name":"广东事业部-小计","gross_profit_amount":8514.352,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":1675.625,"key":"广东事业部"},{"sell_settle_amount":0,"group_name":"江苏事业部-汽运-外发","gross_profit_amount":-9038.212,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":86.496,"key":"江苏事业部"},{"sell_settle_amount":0,"group_name":"江苏事业部-水运-外发","gross_profit_amount":-27035.775,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":1201.59,"key":"江苏事业部"},{"sell_settle_amount":0,"group_name":"江苏事业部-小计","gross_profit_amount":-36073.987,"target_gross_profit_amount":0,"sort_num":0,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":1288.086,"key":"江苏事业部"},{"sell_settle_amount":242843.22725,"group_name":"总计","gross_profit_amount":101552.05171,"target_gross_profit_amount":0,"sort_num":1,"target_unit_weight":0,"target_sell_settle_amount":0,"unit_weight":11417.581,"key":"总计"}];
     },
     bodyStyleJs(param){
       var {row, rowIndex,column} = param;

src/module/index/index.vue

@@ -10,6 +10,7 @@
       <div class="text_right">
         <span>刷新时间：{{ countDown }}s</span>
       </div>
+      <div id="top_title"></div>
     </div>
     <router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
   </div>