Skip to content

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

安全质量大屏

parent 260db9e6
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 103 deletions
src/module/api/apiList.js
View file @ 49353443
......@@ -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
View file @ 49353443
......@@ -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(() => {
......
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