安全质量大屏

src/module/databoard/databoard/safe-quality.vue

@@ -100,13 +100,15 @@
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="汽运">
             <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
               <simple-card style="width:100%;height: 100%">
-                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
+                <title-content-mark style="color: #5eeef4;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value" is-center is-bold/>
+                <!--
                 <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
+                -->
               </simple-card>
             </div>
             <div style="height: 70%;width: 100%;padding-right: 2rem">
               <div >
-                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
+                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlanRate+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
               </div>
                 <div style="height: 100%;width: 100%" ref="car"></div>
             </div>
@@ -116,13 +118,15 @@
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="水运">
             <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
               <simple-card style="width:100%;height: 100%">
-                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
+                <title-content-mark style="color: #5eeef4;font-size: 14px;"   :title="arShipSum[0].title+'：'+arShipSum[0].value" is-center is-bold/>
+                <!--
                 <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
+                -->
               </simple-card>
             </div>
             <div style="height: 70%;width: 100%;padding-right: 2rem">
               <div >
-                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
+                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+shipPlanRate+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
               </div>
               <div style="height: 100%;width: 100%" ref="ship"></div>
             </div>
@@ -132,13 +136,15 @@
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="铁运">
             <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
               <simple-card style="width:100%;height: 100%">
-                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
+                <title-content-mark style="color: #5eeef4;font-size: 14px;"   :title="arTrainSum[0].title+'：'+arTrainSum[0].value" isCenter is-bold/>
+                <!--
                 <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
+              -->
               </simple-card>
             </div>
             <div style="height: 70%;width: 100%;padding-right: 2rem">
               <div >
-                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
+                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+trainPlanRate+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
               </div>
               <div style="height: 100%;width: 100%" ref="train"></div>
             </div>
@@ -155,8 +161,13 @@ import * as echarts from "echarts";
 import SimpleCard from "../components/card/simple-card.vue";
 import TitleContentMark from "../components/layout/title-content-mark.vue";
 import Showcase from "../components/container/showcase.vue";
-import {getSafetyQuality,getTruckShipConditionData,getCarShipTrainComplete} from "../../api/apiList";
-
+import {
+  getSafetyQuality,
+  getTruckShipConditionData,
+  getCarShipTrainComplete,
+  getOrderBusinessConditionData, getOrderLoseAddCustomer
+} from "../../api/apiList";
+import {conver_amont, conver_num_retain} from "../../utils/numUtil";
 import mapPointMark from "../components/map/map-point-mark.vue";
 
 
@@ -175,19 +186,21 @@ export default {
         arSafeList:[],
         arQualityList:[],
         arCarSum:[
-          {title:'当班车数',value:'1350'},
+          {title:'当班车数',value:0},
           {title:'异常车数',value:'0'}
         ],
         arShipSum:[
-          {title:'当班船数',value:'1350'},
+          {title:'当班船数',value:0},
           {title:'异常船数',value:'0'}
         ],
         arTrainSum:[
-          {title:'当班数',value:'1350'},
+          {title:'当班数',value:0},
           {title:'异常数',value:'0'}
         ],
         barTitle:'今日计划完成',
-        carPlan:'89',
+        carPlanRate:0,
+        shipPlanRate:0,
+        trainPlanRate:0,
         lskh: {
           weight: "2,000",
           amount: "20,000",
@@ -353,6 +366,8 @@ export default {
         this.renderLeftView();
         this.countCarAndShipAndTrain();
         this.getTruckShipCondition();
+        this.getLoseAndAdd();
+        this.getOrderBusinessCondition();
         this.renderRightView();
     },
 
@@ -407,48 +422,93 @@ export default {
         this.people.setOption(this.people_options);
       });
     },
-    renderRightView(){
+    // 中间底部
+    getOrderBusinessCondition() {
+      getOrderBusinessConditionData(this.today).then(res => {
+        let data = res.data
+        this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
+        this.drddl.weight = conver_amont(data.cur_unit_weight);
+
+        this.drydl.count = data.drydl_count;
+        this.drydl.weight = conver_amont(data.drydl_weight);
+
+        this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
+        this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
+        this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
+        this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
+      })
+    },
+    getLoseAndAdd() {
+      getOrderLoseAddCustomer(this.today).then(res => {
+        let data = res.data
+        this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
+        this.lskh.weight = conver_amont(data.lost_weight_sum);
+        this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
+        this.xzkh.weight = conver_amont(data.add_weight_sum);
+      })
+    },
+    // youb右边
+      renderRightView(){
       getCarShipTrainComplete().then(res => {
         var resData=res.data;
         var plan=resData.plan;
         var complete=resData.complete;
         var remaining=resData.remaining;
+        var countToday=resData.countToday;
+
         var car=[];
-        car.push(plan.car);
-        car.push(complete.car);
-        car.push(remaining.car);
+        let carPlan=this.formatNumber(plan.car);
+        car.push(carPlan);
+        let carCompletion=this.formatNumber(complete.car);
+        car.push(carCompletion);
+        car.push(this.formatNumber(remaining.car));
+        this.carPlanRate=carPlan==0?100:Math.floor((100*carCompletion)/carPlan);
         var ship=[];
-        ship.push(plan.ship);
-        ship.push(complete.ship);
-        ship.push(remaining.ship);
+        let shipPlan=this.formatNumber(plan.ship);
+        ship.push(shipPlan);
+        let shipCompletion=this.formatNumber(complete.ship);
+        ship.push(shipCompletion);
+        ship.push(this.formatNumber(remaining.ship));
+        this.shipPlanRate=shipPlan==0?100:Math.floor((shipCompletion*100)/shipPlan);
         var train=[];
-        train.push(plan.train);
-        train.push(complete.train);
-        train.push(remaining.train);
+        let trainPlan=this.formatNumber(plan.train);
+        train.push(trainPlan);
+        let trainCompletion=this.formatNumber(complete.train);
+        train.push(trainCompletion);
+        train.push(this.formatNumber(remaining.train));
+        this.trainPlanRate=trainPlan==0?100:Math.floor((100*trainCompletion)/trainPlan);
         // 渲染
         var seryCar=this.getcarShipTrainCss();
-        seryCar.data=car;
+        seryCar.data.push(car[0]);
+        seryCar.data.push(car[1]);
+        seryCar.data.push(car[2]);
         this.car_options.series=[];
         this.car_options.series.push(seryCar);
         this.car.setOption(this.car_options);
-
         var seryShip=this.getcarShipTrainCss();
         seryShip.data=ship;
         this.ship_options.series=[];
         this.ship_options.series.push(seryShip);
         this.ship.setOption(this.ship_options);
-
         var seryTrain=this.getcarShipTrainCss();
         seryTrain.data=train;
         this.train_options.series=[];
         this.train_options.series.push(seryTrain);
-        this.car.setOption(this.train_options);
+        this.train.setOption(this.train_options);
+        // 当班车数
+        this.arCarSum[0].value=countToday.car;
+        this.arShipSum[0].value=countToday.ship;
+        this.arTrainSum[0].value=countToday.train;
       })
     },
+    formatNumber(number){
+      // 格式化保留两位小时，返回数字
+      return Number(conver_num_retain(number).replace(',',''));
+    },
     getcarShipTrainCss(){
       return {
         type: 'bar',
-          xAxisIndex: null,
+        xAxisIndex: null,
         smooth: true,
         itemStyle:{
         color: new echarts.graphic.LinearGradient(
@@ -506,9 +566,7 @@ export default {
     },
     // 统计车、船、火车单量完成情况
     countCarAndShipAndTrain(){
-      this.car.setOption(this.car_options);
-      this.ship.setOption(this.ship_options);
-      this.train.setOption(this.train_options);
+
     },
     getTruckShipCondition() {
       getTruckShipConditionData().then(res => {