Skip to content

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

安全质量大屏

parent a16908a7
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 44 deletions
src/module/api/apiList.js
View file @ 73aa951c
......@@ -113,7 +113,11 @@ export const getAllTypeBusinessConditionDetailByYear = (cur_day) => fetch('/api/
cur_day: cur_day
}
}, 'POST');
// 安全质量近30天记录查询
export const getSafetyQuality = () => fetch('/api/query/*/action/get_safety_quality_30day', {
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 @ 73aa951c
......@@ -6,20 +6,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: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
<winners-list style="height: 60%;overflow: auto;" :mouseHand="true" id="safe_list" :rows="arSafeList"/>
</div>
</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: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
<winners-list style="height: 60%;overflow: auto;" :mouseHand="true" id="quality_list" :rows="arQualityList"/>
</div>
</display-board>
</div>
<div style="height: 26%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div style="height: 100%;width: 100%;padding-top: 1rem;">
<div style="height: 100%;width: 100%;padding-top: 2rem;">
<div style="height: 100%;width: 100%" ref="people"></div>
</div>
</display-board>
......@@ -27,6 +27,7 @@
</div>
<!--中-->
<div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
<display-board style="height: 76%">
<div style="display: flex;justify-content: space-evenly;">
<simple-card @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
......@@ -147,6 +148,8 @@ 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 mapPointMark from "../components/map/map-point-mark.vue"
import {
getTruckShipConditionData
......@@ -165,8 +168,8 @@ export default {
},
data() {
return {
arSafeList:[{title:"火灾事故-111111"},{title:"急救事故-222222"},{title:"交通事故-333333"},{title:"其他事故-888888"},{title:"急救事故-22222"}],
arQualityList:[{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"}],
arSafeList:[],
arQualityList:[],
arCarSum:[
{title:'当班车数',value:'1350'},
{title:'异常车数',value:'0'}
......@@ -237,28 +240,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' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,0,0] ,
},
barWidth: '30%',
barGap: '20%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
series: []
},
car_options: {
tooltip: {
......@@ -302,7 +284,7 @@ export default {
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
borderRadius:[3,3,3,3] ,
},
label:{
show:true,
......@@ -360,7 +342,7 @@ export default {
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
borderRadius:[3,3,3,3] ,
},
label:{
show:true,
......@@ -418,7 +400,7 @@ export default {
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
borderRadius:[3,3,3,3] ,
},
label:{
show:true,
......@@ -445,21 +427,99 @@ export default {
methods: {
refreshData() {
this.getPeopleInfos();
this.renderLeftView();
this.countCarAndShipAndTrain();
this.getTruckShipCondition();
},
getPeopleInfos(){
// var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
// seriesBar.push(adapterSeriesDataBar(null, "出勤", [15]));
// seriesBar.push(adapterSeriesDataBar(null, "请假", [8]));
//
// this.peopleInfoOption.series = seriesBar;
// let barDom = this.$refs.bar;
// let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption);
// 渲染左侧
renderLeftView(){
getSafetyQuality().then(res => {
// 安全
let safetyArray=res.data.safetyArray;
let safetyArr=[];
if(safetyArray.length>0){
safetyArray.forEach(function (row) {
var item={};
item.title=row;
safetyArr.push(item);
});
this.arSafeList=safetyArr;
}
// 质量
let qualityArray=res.data.qualityArray;
let qualityArr=[];
if(qualityArray.length>0){
qualityArray.forEach(function (row) {
var item={};
item.title=row;
qualityArr.push(item);
});
this.arQualityList=qualityArr;
}
// 统计人员信息
let peopleCount=res.data.peopleCount;
let sery=this.getPeopleBarCss();
if(peopleCount&&peopleCount.people_number_sum){
sery.data.push(peopleCount.people_number_sum);
}else {
sery.data.push(0);
}
if(peopleCount&&peopleCount.attendees_number_sum){
sery.data.push(peopleCount.attendees_number_sum);
}else {
sery.data.push(0);
}
if(peopleCount&&peopleCount.absences_number_sum){
sery.data.push(peopleCount.absences_number_sum);
}else {
sery.data.push(0);
}
var maxData = Math.max.apply(null, sery.data);
var maxY=maxData*1.2;
this.people_options.yAxis.max=maxY;
this.people_options.series=[];
this.people_options.series.push(sery);
this.people.setOption(this.people_options);
});
},
getPeopleBarCss(){
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' } // 柱图底部颜色
]
),
shadowBlur: 10,
shadowOffsetY: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderRadius:[3,3,0,0] ,
},
label:{
show:true,
position:'top',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '20%',
emphasis: {
focus: 'series'
},
data: []
}
},
// 统计车、船、火车单量完成情况
countCarAndShipAndTrain(){
this.car.setOption(this.car_options);
this.ship.setOption(this.ship_options);
this.train.setOption(this.train_options);
},
getTruckShipCondition() {
getTruckShipConditionData().then(res => {
......@@ -498,7 +558,6 @@ export default {
},
},
mounted() {
this.refreshData();
setTimeout(() => {
let peopleDom = this.$refs.people;
this.people = echarts.init(peopleDom);
......
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