安全质量大屏

src/module/api/apiList.js

@@ -118,6 +118,11 @@ export const getSafetyQuality = () => fetch('/api/query/*/action/get_safety_qual
   aux: {
   }
 }, 'POST');
+// 汽水铁完成量
+export const getCarShipTrainComplete = () => fetch('/api/query/*/action/get_car_ship_train_complete', {
+  aux: {
+  }
+}, 'POST');
 
 export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_transport_type_day", {aux: {"cur_day": date}}, "POST")
 export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day": date}}, "POST")

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

@@ -4,20 +4,16 @@
       <!-- 左-->
       <div class="trade_left" style="width: 20%">
       <div style="height: 37%;" >
-        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="安全">
-          <div style="padding-top: 2rem;">
-          <winners-list style="height: 60%;overflow: auto;" :mouseHand="true"  id="safe_list" :rows="arSafeList"/>
-          </div>
+        <display-board  style="height: 98%;"  title="安全">
+          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="safe_list" :rows="arSafeList"/>
         </display-board>
       </div>
       <div style="height: 37%;" >
-        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="质量">
-          <div style="padding-top: 2rem;">
-          <winners-list style="height: 60%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList"/>
-          </div>
+        <display-board  style="height: 100%;"  title="质量">
+          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList"/>
         </display-board>
       </div>
-        <div style="height: 26%;" >
+        <div style="height: 26%;padding-top: 0.5rem" >
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="人员情况表">
             <div style="height: 100%;width: 100%;padding-top: 2rem;">
               <div style="height: 100%;width: 100%" ref="people"></div>
@@ -99,10 +95,21 @@
       </div>
 
       <!-- 右-->
-      <div class="trade_right">
+      <div class="trade_right" style="width: 24%;;padding-left: 0.5rem">
         <div style="height: 33%;" >
           <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="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/>
+              </div>
+                <div style="height: 100%;width: 100%" ref="car"></div>
+            </div>
           </display-board>
         </div>
         <div style="height: 33%;" >
@@ -148,12 +155,9 @@ 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} from "../../api/apiList";
+import {getSafetyQuality,getTruckShipConditionData,getCarShipTrainComplete} from "../../api/apiList";
 
-import mapPointMark from "../components/map/map-point-mark.vue"
-import {
-  getTruckShipConditionData
-} from "../../api/apiList"
+import mapPointMark from "../components/map/map-point-mark.vue";
 
 
 export default {
@@ -271,34 +275,7 @@ export default {
               show:false
             }
           },
-          series: [{
-            type: 'bar',
-            xAxisIndex: null,
-            smooth: true,
-            itemStyle:{
-              color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 渐变方向从上到下
-                [
-                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
-                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
-                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
-                ]
-              ),
-              borderRadius:[3,3,3,3] ,
-            },
-            label:{
-              show:true,
-              position:'top',
-              formatter: '{c}吨',
-              color:'#FFFFFF',
-            },
-            barWidth: '30%',
-            barGap: '10%',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [19,11,33]
-          }]
+          series: []
         },
         ship_options: {
           tooltip: {
@@ -329,34 +306,7 @@ export default {
               show:false
             }
           },
-          series: [{
-            type: 'bar',
-            xAxisIndex: null,
-            smooth: true,
-            itemStyle:{
-              color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 渐变方向从上到下
-                [
-                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
-                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
-                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
-                ]
-              ),
-              borderRadius:[3,3,3,3] ,
-            },
-            label:{
-              show:true,
-              position:'top',
-              formatter: '{c}吨',
-              color:'#FFFFFF',
-            },
-            barWidth: '30%',
-            barGap: '10%',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [19,11,33]
-          }]
+          series: []
         },
         train_options: {
           tooltip: {
@@ -387,34 +337,7 @@ export default {
               show:false
             }
           },
-          series: [{
-            type: 'bar',
-            xAxisIndex: null,
-            smooth: true,
-            itemStyle:{
-              color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 渐变方向从上到下
-                [
-                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
-                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
-                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
-                ]
-              ),
-              borderRadius:[3,3,3,3] ,
-            },
-            label:{
-              show:true,
-              position:'top',
-              formatter: '{c}吨',
-              color:'#FFFFFF',
-            },
-            barWidth: '30%',
-            barGap: '10%',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [19,11,33]
-          }]
+          series: []
         },
         truckCount: "0",
         shipCount: "0",
@@ -430,6 +353,7 @@ export default {
         this.renderLeftView();
         this.countCarAndShipAndTrain();
         this.getTruckShipCondition();
+        this.renderRightView();
     },
 
     // 渲染左侧
@@ -483,6 +407,74 @@ export default {
         this.people.setOption(this.people_options);
       });
     },
+    renderRightView(){
+      getCarShipTrainComplete().then(res => {
+        var resData=res.data;
+        var plan=resData.plan;
+        var complete=resData.complete;
+        var remaining=resData.remaining;
+        var car=[];
+        car.push(plan.car);
+        car.push(complete.car);
+        car.push(remaining.car);
+        var ship=[];
+        ship.push(plan.ship);
+        ship.push(complete.ship);
+        ship.push(remaining.ship);
+        var train=[];
+        train.push(plan.train);
+        train.push(complete.train);
+        train.push(remaining.train);
+        // 渲染
+        var seryCar=this.getcarShipTrainCss();
+        seryCar.data=car;
+        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);
+      })
+    },
+    getcarShipTrainCss(){
+      return {
+        type: 'bar',
+          xAxisIndex: null,
+        smooth: true,
+        itemStyle:{
+        color: new echarts.graphic.LinearGradient(
+          0, 0, 0, 1, // 渐变方向从上到下
+          [
+            { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
+            { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
+            { offset: 1, color: '#188df0' }    // 柱图底部颜色
+          ]
+        ),
+          borderRadius:[3,3,3,3] ,
+      },
+        label:{
+          show:true,
+            position:'top',
+            formatter: '{c}吨',
+            color:'#FFFFFF',
+        },
+        barWidth: '30%',
+          barGap: '10%',
+        emphasis: {
+        focus: 'series'
+      },
+        data: []
+      }
+    },
     getPeopleBarCss(){
       return {
         type: 'bar',
@@ -497,9 +489,6 @@ export default {
               { offset: 1, color: '#188df0' }    // 柱图底部颜色
             ]
           ),
-          shadowBlur: 10,
-          shadowOffsetY: 10,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
           borderRadius:[3,3,0,0] ,
         },
         label:{
@@ -556,6 +545,14 @@ export default {
           return;
       }
     },
+    routerTo(path, code) {
+      this.$router.push({path: path, query: {code: code}});
+    },
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
   },
   mounted() {
     setTimeout(() => {