Skip to content

S
shld-databoard-ui
Commit 2e28047b authored by 谢章伟's avatar 谢章伟
Browse files
Options

安全质量大屏

parent 6c9c20b1
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 30 deletions
src/module/databoard/databoard/safe-quality.vue
View file @ 2e28047b
......@@ -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 => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment