Skip to content

卡
卡车调度系统
Commit 54676c52 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent 9078c3d1
Show whitespace changes
Inline Side-by-side
Showing with 446 additions and 24 deletions
src/assets/js/common.js
View file @ 54676c52
......@@ -1799,7 +1799,28 @@ var HttpReq = function(){
data:data,
})
},
//大屏——数据分析——矿石产量比
screenOreProportionDayQuery: function(param){
return request({
url: '/api/Mineral',
method: 'get',
params:param,
})
},
screenOreProportionMonthQuery: function(param){
return request({
url: '/api/MineralMonth',
method: 'get',
params:param,
})
},
screenOreProportionYearQuery: function(param){
return request({
url: '/api/MineralYear',
method: 'get',
params:param,
})
},
......
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ 54676c52
......@@ -46,29 +46,36 @@
<div :class="loadAndUnloadListData.selectTimeText == 'year' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('year')">年</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content">
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts4View"></div>
</div>
</div>
<!-- 矿石产量比-->
<div>
<div class="dataAnalysisScrView_rightView_title">矿石产量比</div>
<div class="dataAnalysisScrView_rightView_content">
<div class="dataAnalysisScrView_leftView_title truck_titleStyle">
<div>矿石产量比</div>
<div class="oreProportionTitleDateStyle">
<div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div>
<div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
<div :class="oreProportionListData.selectTimeText == 'year' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('year')">年</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts5View"></div>
</div>
</div>
<!-- 报警路障申报统计 -->
<div>
<div class="dataAnalysisScrView_rightView_title">报警路障申报统计</div>
<div class="dataAnalysisScrView_rightView_content">
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts6View"></div>
</div>
</div>
<!-- 卸货点卸货量统计 -->
<div>
<div class="dataAnalysisScrView_rightView_title">卸货点卸货量统计</div>
<div class="dataAnalysisScrView_rightView_content">
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts7View"></div>
</div>
</div>
</div>
......@@ -114,13 +121,24 @@ export default {
},
//装卸点平均时长
loadAndUnloadListData:{
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
caiquName:[],
timeData:[],
},
//矿石产量比
oreProportionListData:{
selectTimeText:'day',
selectTimeDate:'',
proportionData:[],
},
//报警路障申报统计
echarts6Data:[],
//卸货点卸货量统计
echarts7Data:{
xiedianName:[],
outputNum:[],
},
}
},
......@@ -132,6 +150,7 @@ export default {
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
this.$nextTick(()=>{
//采取产量统计图表
this.echarts1Fn();
......@@ -163,7 +182,90 @@ export default {
})
//月生产完成效率
this.echarts3Fn();
//装卸点平均时长 卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
let outputNum7 = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
outputNum7.push(item.output);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
//卸货点卸货量统计
this.echarts7Data.xiedianName = caiquName;
this.echarts7Data.outputNum = outputNum7;
this.echarts7Fn();
}
})
//矿石产量比
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn();
}
})
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
let alarmBreakArray = [];
let breakObj1 = {};
breakObj1.name = '车辆故障';
breakObj1.value = res.data.totalElements;
alarmBreakArray.push(breakObj1);
//获取报警信息
HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
if(res.code == 200){
let alarmObj1 = {};
let alarmArray1 = [];
let alarmObj2 = {};
let alarmArray2 = [];
let alarmObj3 = {};
let alarmArray3 = [];
let alarmObj4 = {};
let alarmArray4 = [];
res.data.content.forEach((item,index)=>{
if(item.alarmclass == '超速'){
alarmArray1.push(item);
}else if(item.alarmclass == '无故停车'){
alarmArray2.push(item);
}else if(item.alarmclass == '驾离电子围栏'){
alarmArray3.push(item);
}else if(item.alarmclass == '驶入电子围栏'){
alarmArray4.push(item);
}
})
alarmObj1.name = '超速';
alarmObj1.value = alarmArray1.length;
alarmObj2.name = '无故停车';
alarmObj2.value = alarmArray2.length;
alarmObj3.name = '驾离电子围栏';
alarmObj3.value = alarmArray3.length;
alarmObj4.name = '驶入电子围栏';
alarmObj4.value = alarmArray4.length;
alarmBreakArray.push(alarmObj1);
alarmBreakArray.push(alarmObj2);
alarmBreakArray.push(alarmObj3);
alarmBreakArray.push(alarmObj4);
that.echarts6Data = alarmBreakArray;
}
})
}
})
})
......@@ -381,7 +483,7 @@ export default {
max: 100,
type: 'value',
name: '完成率(%)',
nameTextStyle: { fontSize: 16 },
nameTextStyle: { fontSize: 14 },
axisLabel: {
show: true,
textStyle: {
......@@ -425,19 +527,292 @@ export default {
this.loadAndUnloadListData.selectTimeText = text;
if(text == 'day'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(text == 'year'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
},
echarts4Fn(){
var myChart = echarts.init(document.getElementById('echarts4View'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.loadAndUnloadListData.caiquName,
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
yAxis: {
type: 'value',
name: '平均时长',
nameTextStyle: { fontSize: 14 },
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
series: [
{
name: '时长(h)',
type: 'line',
data: this.loadAndUnloadListData.timeData,
itemStyle: {
normal: {
lineStyle: { color: '#FFC200' } //设置线条颜色
}
}
},
]
};
option && myChart.setOption(option);
},
//矿石产量比
oreProportionChangeTime(text){
this.oreProportionListData.selectTimeText = text;
if(text == 'day'){
this.oreProportionListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn();
}
})
}
if(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn();
}
})
}
if(text == 'year'){
this.oreProportionListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
this.echarts5Fn();
}
})
}
},
echarts5Fn(){
var myChart = echarts.init(document.getElementById('echarts5View'));
var option = {
tooltip: {
trigger: 'item'
},
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
series: [
{
name:'产量(吨)',
type: 'pie',
radius: '50%',
label: {
show: true,
formatter: '{b}({d}%)',
color:'white',
fontSize:'14',
},
labelLine: {
show: true
},
data: this.oreProportionListData.proportionData,
}
]
};
option && myChart.setOption(option);
},
//报警路障申报统计
echarts6Fn(){
var myChart = echarts.init(document.getElementById('echarts6View'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: 'center',
right: 'right',
textStyle:{
color:'white',
fontSize:14,
}
},
color:['#1DF9FC', '#1E67F2','#6E69F9','#00B7EE','#CAC9C9'],
series: [
{
name: '次数',
type: 'pie',
radius: ['40%', '85%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'inner',
formatter: '({d}%)'
},
labelLine: {
show: false
},
data: this.echarts6Data,
}
]
};
option && myChart.setOption(option);
},
//卸货点卸货量统计
echarts7Fn(){
var myChart = echarts.init(document.getElementById('echarts7View'));
var option = {
tooltip: {
trigger: 'axis',
},
xAxis: [
{
type: 'category',
data: this.echarts7Data.xiedianName,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
name: '产量(T)',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
type: 'bar',
data: this.echarts7Data.outputNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#09EDFB'
}
}
}
]
};
option && myChart.setOption(option);
},
//获取当前时间
dayCurrentTimeFn(){
......@@ -567,15 +942,16 @@ dd>div{
justify-content: space-between;
padding-right: 4vw;
}
.loadAndUnloadTitleDateStyle{
.loadAndUnloadTitleDateStyle,.oreProportionTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
z-index: 100;
}
.loadAndUnloadDateStyle_son1{
.loadAndUnloadDateStyle_son1,.oreProportionDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
......@@ -585,7 +961,7 @@ dd>div{
border-radius: 5px;
cursor: pointer;
}
.loadAndUnloadDateStyle_son2{
.loadAndUnloadDateStyle_son2,.oreProportionDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
......@@ -638,4 +1014,29 @@ dd>div{
width: 100%;
height: 19vh;
}
#echarts4View{
position: absolute;
top: -2.5vh;
width: 100%;
height: 22vh;
}
#echarts5View{
position: absolute;
top: -4vh;
width: 100%;
height: 28vh;
}
#echarts6View{
position: absolute;
left: -6vw;
width: 125%;
height: 20vh;
}
#echarts7View{
position: absolute;
left: 0vw;
top: -2.5vh;
width: 105%;
height: 25.5vh;
}
</style>
\ No newline at end of file
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