Skip to content

卡
卡车调度系统
Commit 45e18ffb authored by xxx's avatar xxx
Browse files
Options

1

parent cc54138a
Show whitespace changes
Inline Side-by-side
Showing with 2680 additions and 47 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue
View file @ 45e18ffb
<template> <template>
<div class="DPcomputer16Box">
<!-- 人工调度 -->
<div class="DPcomputer16Box_1">
<div class="intelligentSchScrView_leftView_title">人工调度</div>
<div class="intelligentSchScrView_leftView_content">
<div class="voiceAppContent_1">
<div>选择车队：</div>
<el-select v-model="selectCarFleet" placeholder="请选择车队" style="width:14vw;" @change="toSearchFn()">
<el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:18px;"></el-option>
</el-select>
</div>
<div class="voiceAppContent_2">
<div class="voiceAppContent_2_title">选择车辆</div>
<div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray">
<el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:7px;">
<div style="width:12vw;margin-left:1.7vw;text-align: center;">
{{item.number}}({{item.odo == 0 ? '离线' :item.odo == 1 ? '智能调度' : item.odo == 2 ? '人工调度' : item.odo == 3 ? '在线' : '其他作业'}})
</div>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="voiceAppContent_3">
<div class="voiceAppContent_2_title">已选中车辆</div>
<div class="voiceAppContent_3_content">
<div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_3_content_selectCar">
<div>{{item.number}}</div>
<div style="width:20px;height:20px;background-color: rgb(4,112,171);text-align: center;font-size:30px;line-height:20px;cursor: pointer;" @click="cancelSelect(index)">
<span>×</span>
</div>
</div>
</div>
</div>
<div class="voiceAppContent_4">
<button class="voiceAppContent_4_btns" @click="toNoticeFn('广播')">广播</button>
<button class="voiceAppContent_4_btns" @click="toNoticeFn('紧急通知')">紧急通知</button>
<button class="voiceAppContent_4_btns" @click="toNoticeFn('通话')">通话</button>
<button class="voiceAppContent_4_btns" @click="todispatchChange()">{{dispatchBtnTitle}}</button>
</div>
</div>
</div>
<!-- 语音所需内容，隐藏无需展示 -->
<div class="main" style="display:none;">
<slot name="top"></slot>
<div class="mainBox">
<div class="btns">
<div> <div>
<button @click="recOpen">打开录音,请求权限</button>
<button @click="recClose">关闭录音,释放资源</button>
</div>
<button @click="recStart">录制</button>
<button @click="recStop" style="margin-right:80px">停止</button>
<span style="display: inline-block;">
<button @click="recPause">暂停</button>
<button @click="recResume">继续</button>
</span>
<span style="display: inline-block;">
<button @click="recPlayLast">播放</button>
<button @click="recUploadLast">上传</button>
</span>
</div>
</div>
<div class="mainBox">
<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block;vertical-align:bottom" class="ctrlProcessWave"></div>
<div style="height:40px;width:300px;display:inline-block;background:#999;position:relative;vertical-align:bottom">
<div class="ctrlProcessX" style="height:40px;background:#0B1;position:absolute;" :style="{width:powerLevel+'%'}"></div>
<div class="ctrlProcessT" style="padding-left:50px; line-height:40px; position: relative;">{{ duration+"/"+powerLevel }}</div>
</div>
</div>
<div class="mainBox">
<audio ref="LogAudioPlayer" style="width:100%"></audio>
<div class="mainLog">
</div>
</div>
<div v-if="recOpenDialogShow" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">
</div>
<slot name="bottom"></slot>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
//加载必须要的core，demo简化起见采用的直接加载类库，实际使用时应当采用异步按需加载
import Recorder from 'recorder-core'
// //需要使用到的音频格式编码引擎的js文件统统加载进来，这些引擎文件会比较大
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
// //可选的扩展
import 'recorder-core/src/extensions/waveview'
export default { export default {
data(){ data(){
return { return {
DPcomputer16BoxTimer:null,
heartbeatTimer:null,
websocket: null,
selectCarFleet:'', //搜索对应车队
carFleetData:[], //车队信息
carsInforData:[], //车辆信息
selectCarRadioArray:[], //多选选中车辆
dispatchBtnTitle:'人工调度',
dispatchBtnTitle1:'人工调度',
dialogTitle:'广播车辆',
dialogTitle1:'',
dialogVisible:false,
resultBlob:null,
tanchuCarListArray:[], //弹出列表选中车辆
//录音相关数据
type:"mp3",
bitRate:16,
sampleRate:16000,
rec:0,
duration:0,
powerLevel:0,
recOpenDialogShow:0,
logs:[],
//人工调度配置
desform:{},
caiquData1:[],
xiequData1:[],
zaDestination:[],
xzDestination:'',
destinationDataAll:[],//人工调度调度目的地列表
peopleScheAssemblyShow:false,
rules: {
// odd: [
// {required: true, message: '请输入调度单号', trigger: 'blur' }
// ],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.selectCarFleet = '';
this.dialogVisible = false;
this.selectCarRadioArray = [];
this.tanchuCarListArray = [];
this.peopleScheAssemblyShow = false;
this.desform = {};
this.zaDestination = [];
this.xzDestination = '';
this.$nextTick(()=>{
//车队信息
HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
if(res.code == 200){
this.carFleetData = res.data.content;
};
})
//车辆信息
this.loadData2();
//获取区域信息
this.loadData4();
//定时器
// this.DPcomputer16BoxTimer = setInterval(() => {
// //车辆信息
// this.loadData2();
// },10000)
})
}, },
beforeDestroy(){ //获取车辆信息
loadData2() {
let query = {};
query.size = 9999;
query.road = this.selectCarFleet;
HttpReq.truckDispatching.carInformationQuery(query).then((res) => {
if(res.code == 200){
this.carsInforData = res.data.content;
};
})
},
//页面刚进入时开启长连接
loadData3(){
this.initWebSocket();
this.heartbeatTimer = setInterval(() => {
this.reconnect();
}, 20000)
},
//获取区域信息
loadData4() {
HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
if(res.code == 200){
let caiqu1 = [];
let xiequ1 = [];
res.data.content.forEach((item,index)=>{
if(item.areaclass == '采区'){
caiqu1.push(item);
}else if(item.areaclass == '卸区'){
xiequ1.push(item);
}
});
this.$nextTick(()=>{
let caiquCenArr1 = [];
caiqu1.forEach((item1,index1)=>{
let caiquCenObj1 = {};
caiquCenObj1.value = item1.name;
caiquCenObj1.label = item1.name;
HttpReq.truckDispatching.RegionalCaiDianQuery({size:9999,areaName:item1.name}).then((res1) => {
if(res1.code == 200 && res1.data.totalElements != 0){
let caiquCenArr2 = [];
res1.data.content.forEach((item2,index2)=>{
let caiquCenObj2 = {};
caiquCenObj2.value = item2.name;
caiquCenObj2.label = item2.name;
caiquCenArr2.push(caiquCenObj2);
})
caiquCenObj1.children = caiquCenArr2;
};
})
caiquCenArr1.push(caiquCenObj1);
});
this.caiquData1 = caiquCenArr1;
this.xiequData1 = xiequ1;
})
};
})
},
//关闭心跳以及关闭长连接
xintiaoCloseFn(){
//页面销毁时关闭长连接
this.websocketclose();
//关闭心跳
if(this.heartbeatTimer) {
clearInterval(this.heartbeatTimer);
}
},
//搜索车辆
toSearchFn(){
this.loadData2();
},
//车辆多选取消
cancelSelect(index){
let handleArray = [...this.selectCarRadioArray];
handleArray.splice(index,1);
this.selectCarRadioArray = handleArray;
},
//发起通知
toNoticeFn(text){
if(text == '广播'){
this.dialogTitle = '广播车辆';
}else if(text == '紧急通知'){
this.dialogTitle = '接到通知的车辆';
}else if(text == '通话'){
this.dialogTitle = '连麦的车辆';
}
this.dialogTitle1 = text;
if(JSON.stringify(this.selectCarRadioArray) == '[]'){
this.tanchuCarListArray = this.carsInforData;
}else{
this.tanchuCarListArray = this.selectCarRadioArray;
}
this.dialogVisible = true;
//关闭人工调度组件
this.peopleScheAssemblyShow = false;
this.desform = {};
this.zaDestination = [];
this.xzDestination = '';
},
//人工调度和智能调度切换
todispatchChange(){
if(this.dispatchBtnTitle == '人工调度'){
this.peopleScheAssemblyShow = true;
}
//关闭发起通知组件
this.dialogVisible = false;
this.tanchuCarListArray = [];
},
//初始化weosocket
initWebSocket(){
//const wsuri = "ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数
const wsuri = process.env.VUE_APP_WS_API + "/" + 'pcBigScreen';
this.websocket = new WebSocket(wsuri);
this.websocket.onopen = this.websocketonopen;
this.websocket.onerror = this.websocketonerror;
this.websocket.onmessage = this.websocketonmessage;
this.websocket.onclose = this.websocketclose;
this.websocketonmessage();
},
//WebSocket连接成功
websocketonopen() {
console.log("WebSocket连接成功");
},
//WebSocket连接错误
websocketonerror(e) {
console.log("WebSocket连接发生错误");
},
//WebSocket数据接收
websocketonmessage(e){
console.log("e",e);
if(e == undefined){
return
}else{
let obj1 = JSON.parse(e.data);
HttpReq.truckDispatching.recentNoticeAdd({noticeClass:obj1.fromUserId,flag:1,videoContent:obj1.contentText}).then((res) => {}).catch(function(error) { });
}
},
//WebSocket数据发送
websocketsend(agentData){
this.websocket.send(agentData);
},
//WebSocket关闭
websocketclose(e){
console.log("connection closed (" + e.code + ")");
},
//WebSocket重连
reconnect(){
var This=this;
if (this.websocket.readyState === 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
This.websocketonmessage();
} else if (this.websocket.readyState === 0) { // 表示正在连接，设置300ms后发送信息
setTimeout(function () {
This.websocketonmessage();
}, 300);
} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
This.initWebSocket();
setTimeout(function () {
This.websocketonmessage();
}, 500);
}
},
recOpen:function(){
var This=this;
var rec=this.rec=Recorder({
type:This.type
,bitRate:This.bitRate
,sampleRate:This.sampleRate
,onProcess:function(buffers,powerLevel,duration,sampleRate){
This.duration=duration;
This.powerLevel=powerLevel;
This.wave.input(buffers[buffers.length-1],powerLevel,sampleRate);
}
});
This.dialogInt=setTimeout(function(){//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况
This.showDialog();
},8000);
rec.open(function(){
This.dialogCancel();
This.reclog("已打开:"+This.type+" "+This.sampleRate+"hz "+This.bitRate+"kbps",2);
This.wave=Recorder.WaveView({elem:".ctrlProcessWave"});
},function(msg,isUserNotAllow){
This.dialogCancel();
This.reclog((isUserNotAllow?"UserNotAllow，":"")+"打开失败："+msg,1);
});
This.waitDialogClickFn=function(){
This.dialogCancel();
This.reclog("打开失败：权限请求被忽略，用户主动点击的弹窗",1);
};
},
recClose:function(){
var rec=this.rec;
this.rec=null;
if(rec){
rec.close();
this.reclog("已关闭");
}else{
this.reclog("未打开录音",1);
};
},
recStart:function(){
if(!this.rec||!Recorder.IsOpen()){
//this.reclog("未打开录音",1);
this.recOpen()
//return;
}
this.rec.start();
var set=this.rec.set;
this.reclog("录制中："+set.type+" "+set.sampleRate+"hz "+set.bitRate+"kbps");
this.$notify({
title: '录制中！',
type: 'success',
duration: 5000
});
},
recPause:function(){
if(this.rec&&Recorder.IsOpen()){
this.rec.pause();
}else{
this.reclog("未打开录音",1);
};
},
recResume:function(){
if(this.rec&&Recorder.IsOpen()){
this.rec.resume();
}else{
this.reclog("未打开录音",1);
};
},
recStop:function(){
if(!(this.rec&&Recorder.IsOpen())){
This.reclog("未打开录音",1);
This.$notify({
title: '未打开录音！',
type: 'warning',
duration: 2500
});
return;
}
var This=this;
var rec=This.rec;
rec.stop(function(blob,duration){
This.reclog("已录制:","",{
blob:blob,
duration:duration,
rec:rec
});
This.$notify({
title: '已录制！',
type: 'success',
duration: 2500
});
},function(s){
This.$notify({
title: '录音失败,'+s,
type: 'warning',
duration: 2500
});
This.reclog("录音失败："+s,1);
});
this.recOpen();
},
recPlayLast:function(){
if(!this.recLogLast){
this.reclog("请先录音，然后停止后再播放",1);
return;
};
this.recplay(this.recLogLast.idx);
},
recUploadLast:function(){
let carNumberString = '';
this.tanchuCarListArray.forEach((item,index)=>{
carNumberString = carNumberString + item.number + ';';
})
carNumberString = carNumberString + 'pcBigScreen';
this.carAllNumberString = carNumberString;
var This=this;
if(!this.recLogLast){
this.reclog("请先录音，然后停止后再上传",1);
This.$notify({
title: '请先录音，然后停止后再上传！',
type: 'warning',
duration: 2500
});
return;
};
var blob=this.recLogLast.res.blob;
this.blobToDataURI(blob);
/***方式一：将blob文件转成base64纯文本编码 ***/
var reader=new FileReader();
reader.onloadend=function(){
var postData="";
// postData+="mime="+encodeURIComponent(blob.type);//告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
// postData+="&upfile_b64="+encodeURIComponent((/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1]) //录音文件内容，后端进行base64解码成二进制
//postData = btoa(reader.result); //录音文件内容
postData = This.resultBlob; //录音文件内容
//发送语音数据
if (This.websocket.readyState == 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
This.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
});
} else if (This.websocket.readyState == 0) { // 表示正在连接，设置300ms后发送信息
setTimeout(function () {
This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
This.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
});
}, 300);
} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
This.initWebSocket();
setTimeout(function () {
This.websocketsend(`{"toUserId":"${This.carAllNumberString}","contentText":"${postData}","fromUserId":"${This.dialogTitle1}"}`);
This.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
});
}, 500);
}
};
reader.readAsDataURL(blob);
},
reclog:function(msg,color,res){
var obj={
idx:this.logs.length
,msg:msg
,color:color
,res:res
,playMsg:""
,down:0
,down64Val:""
};
if(res&&res.blob){
this.recLogLast=obj;
};
this.logs.splice(0,0,obj);
},
recplay:function(idx){
var This=this;
var o=this.logs[this.logs.length-idx-1];
o.play=(o.play||0)+1;
var logmsg=function(msg){
o.playMsg='<span style="color:green">'+o.play+'</span> '+This.getTime()+" "+msg;
};
logmsg("");
var audio=this.$refs.LogAudioPlayer;
audio.controls=true;
if(!(audio.ended || audio.paused)){
audio.pause();
};
audio.onerror=function(e){
logmsg('<span style="color:red">播放失败['+audio.error.code+']'+audio.error.message+'</span>');
};
audio.src=(window.URL||webkitURL).createObjectURL(o.res.blob);
audio.play();
},
recdown:function(idx){
var This=this;
var o=this.logs[this.logs.length-idx-1];
o.down=(o.down||0)+1;
o=o.res;
var name="rec-"+o.duration+"ms-"+(o.rec.set.bitRate||"-")+"kbps-"+(o.rec.set.sampleRate||"-")+"hz."+(o.rec.set.type||(/\w+$/.exec(o.blob.type)||[])[0]||"unknown");
var downA=document.createElement("A");
downA.href=(window.URL||webkitURL).createObjectURL(o.blob);
downA.download=name;
downA.click();
},
recdown64:function(idx){
var This=this;
var o=this.logs[this.logs.length-idx-1];
var reader = new FileReader();
reader.onloadend = function() {
o.down64Val=reader.result;
};
reader.readAsDataURL(o.res.blob);
},
getTime:function(){
var now=new Date();
var t=("0"+now.getHours()).substr(-2)
+":"+("0"+now.getMinutes()).substr(-2)
+":"+("0"+now.getSeconds()).substr(-2);
return t;
},
intp:function(s,len){
s=s==null?"-":s+"";
if(s.length>=len)return s;
return ("_______"+s).substr(-len);
},
showDialog:function(){
//我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
if(!/mobile/i.test(navigator.userAgent)){
return;//只在移动端开启没有权限请求的检测
};
this.recOpenDialogShow=1;
},
dialogCancel:function(){
clearTimeout(this.dialogInt);
this.recOpenDialogShow=0;
},
waitDialogClick:function(){
this.dialogCancel();
this.waitDialogClickFn();
},
//blob流转base64编码
blobToDataURI(blob) {
let that = this;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
that.resultBlob = reader.result;
}
},
},
beforeDestroy(){
if(this.DPcomputer16BoxTimer) {
clearInterval(this.DPcomputer16BoxTimer);
this.DPcomputer16BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +643,216 @@ export default { ...@@ -29,5 +643,216 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer16Box{
width: 100%;
height: 64vh;
overflow: hidden;
position: relative;
}
.DPcomputer16Box{
width: 20vw;
height: 64vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer16Box .intelligentSchScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer16Box .intelligentSchScrView_leftView_content{
width: 100%;
}
.DPcomputer16Box .voiceAppContent_1{
display: flex;
justify-content: space-around;
}
.DPcomputer16Box .voiceAppContent_1>div{
height: 40px;
line-height: 40px;
color: rgb(24,228,240);
font-size: 16px;
font-weight: 600;
}
.DPcomputer16Box .voiceAppContent_2{
width: 100%;
height: 27vh;
border: 2px solid rgb(24,228,240);
border-radius: 10px;
}
.DPcomputer16Box .voiceAppContent_2_title{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #274088;
height: 3vh;
line-height: 3vh;
color: rgb(24,228,240);
display: flex;
justify-content: space-around;
font-size: 16px;
}
.DPcomputer16Box .voiceAppContent_2_content{
height: 23vh;
width: 100%;
overflow-y:auto;
padding: 0px 10px;
box-sizing: border-box;
background-color: #020C39;
}
.DPcomputer16Box .voiceAppContent_2_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.DPcomputer16Box .voiceAppContent_2_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.DPcomputer16Box .voiceAppContent_2_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.DPcomputer16Box .voiceAppContent_3{
margin-top: 1vh;
width: 100%;
height: 18vh;
border: 2px solid rgb(24,228,240);
border-radius: 10px;
}
.DPcomputer16Box .voiceAppContent_3_content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content:flex-start;
height: 14vh;
width: 100%;
overflow-y:auto;
padding: 0px 10px;
box-sizing: border-box;
background-color: #020C39;
}
.DPcomputer16Box .voiceAppContent_3_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.DPcomputer16Box .voiceAppContent_3_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.DPcomputer16Box .voiceAppContent_3_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.DPcomputer16Box .voiceAppContent_3_content_selectCar{
width: 45%;
margin-top: 5px;
color: #A6F6F9;
font-size: 16px;
display: flex;
justify-content: space-between;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.DPcomputer16Box .voiceAppContent_3_content_selectCar>div{
height: 20px;
line-height: 20px;
font-size: 18px;
}
.DPcomputer16Box .el-checkbox__label{
vertical-align: -3px;
}
.DPcomputer16Box .el-checkbox__label>div{
display: inline-block;
color: #A6F6F9;
font-size: 16px;
font-family: 'SourceHanSansCN-Regular';
}
.DPcomputer16Box .el-checkbox{
display: block;
}
.DPcomputer16Box .el-checkbox__inner{
width: 30px !important;
height: 30px !important;
}
.DPcomputer16Box .el-checkbox__input .el-checkbox__inner::after {
border: 2px solid #fff;
box-sizing: content-box;
content: "";
border-left: 0;
border-top: 0;
height: 12px;
width: 5px;
position: absolute;
top: 1px;
left: 8px;
transform: rotate(45deg) scaleY(1);
}
.DPcomputer16Box .voiceAppContent_4{
margin-top: 1vh;
width: 100%;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}
.DPcomputer16Box .voiceAppContent_4_btns{
background-color: #112251;
border: 1px solid #00FCF9;
color: #00FFFF;
border-radius: 5px;
height: 3.5vh;
font-size: 17px;
margin: 0px 2vw 10px;
width: 25%;
font-size: 15px;
cursor: pointer;
}
.DPcomputer16Box .voiceAppContent_4_btns:active{
background:linear-gradient( to top,#007EFF,#30CFBE);
border: 0px solid #00FCF9;
color: white;
border-radius: 5px;
height: 3.5vh;
font-size: 17px;
margin: 0px 2vw 10px;
width: 25%;
font-size: 15px;
cursor: pointer;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer21.vue
View file @ 45e18ffb
...@@ -28,8 +28,114 @@ export default { ...@@ -28,8 +28,114 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
//采取产量统计图表
HttpReq.truckDispatching.getApiHl1().then((res) => {
if(res.code == 200){
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.echarts1Data = centerArray;
}
this.echarts1_1Fn();
})
this.DPcomputer21BoxTimer = setInterval(() => {
//采取产量统计图表
HttpReq.truckDispatching.getApiHl1().then((res) => {
if(res.code == 200){
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.echarts1Data = centerArray;
}
this.echarts1_1Fn();
})
},20000)
}, },
//采取产量统计
echarts1_1Fn(){
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('echarts1View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts1View"));
for (let i = 0; i < this.echarts1Data.length; i++) {
delete this.echarts1Data[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.echarts1Data, 2);
let option = {
tooltip: {
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 0px">${params.seriesName}：${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
legend: {
data: this.echarts1Data,
top:'center',
orient: 'vertical',
right: '7%',
textStyle: {
color: "#fff",
fontSize: 14,
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 15, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 40, //角度
distance: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer21BoxTimer) { if(this.DPcomputer21BoxTimer) {
......
src/views/MLargeScreen/components/smallComponents/DPcomputer22.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer22Box">
<!-- 各采区日产量排名 -->
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView" id="outputRankView"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer22BoxTimer:null,
//时间
currentTime:{
day:'',
},
//各采区日产量排名
outputRankData:{
caiquName:[],
caiquSeriesData:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.dayCurrentTimeFn();
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1;
this.outputRankData.caiquSeriesData = eh2_arr2;
this.echarts2_1Fn();
})
this.DPcomputer22BoxTimer = setInterval(() => {
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1;
this.outputRankData.caiquSeriesData = eh2_arr2;
this.echarts2_1Fn();
})
},20000)
}, },
beforeDestroy(){ //各采区日产量排名
echarts2_1Fn(){
echarts.init(document.getElementById('outputRankView')).dispose();
var myChart = echarts.init(document.getElementById('outputRankView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'5%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
name:'吨',
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
yAxis: {
type: 'category',
data: this.outputRankData.caiquName,
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 0
}
}
},
series: [
{
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#23FFE2' },
{ offset: 1, color: '#0F86EB' }
])
},
data: this.outputRankData.caiquSeriesData,
}
]
};
option && myChart.setOption(option);
},
//获取当前时间
dayCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
let currentFormatDate = year + "-" + month + "-" + day;
this.currentTime.day = currentFormatDate;
},
},
beforeDestroy(){
if(this.DPcomputer22BoxTimer) {
clearInterval(this.DPcomputer22BoxTimer);
this.DPcomputer22BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +163,34 @@ export default { ...@@ -29,5 +163,34 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer22Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer22Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer22Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer22Box .outputRankView{
width: 100%;
height: 18.5vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer23.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer23Box">
<!-- 各采区当月完成率-->
<div class="dataAnalysisScrView_leftView_title">各采区当月完成率</div>
<div class="dataAnalysisScrView_leftView_content" style="position: relative;">
<div id="echarts2View"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer23BoxTimer:null,
//时间
currentTime:{
month:'',
},
//各采区当月完成率
echarts2Data:{
caiquName:[],
wanchengNum:[],
jihuaNum:[],
wanchengRate:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts2Fn();
})
this.DPcomputer23BoxTimer = setInterval(() => {
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts2Fn();
})
},20000)
}, },
//各采区当月完成率
echarts2Fn(){
echarts.init(document.getElementById('echarts2View')).dispose();
var myChart = echarts.init(document.getElementById('echarts2View'));
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['完成量', '计划量', '完成率'],
textStyle:{
color:'white',
fontSize:15,
}
},
grid: {
left: '1%',
right: '2%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.echarts2Data.caiquName,
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
name: '产量(T)',
min: 0,
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value}',
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
},
{
type: 'value',
name: '完成率(%)',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}',
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
name: '完成量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + 'T';
}
},
data: this.echarts2Data.wanchengNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#09EDFB'
}
}
},
{
name: '计划量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + 'T';
}
},
data: this.echarts2Data.jihuaNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#00ACE9'
}
}
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
data: this.echarts2Data.wanchengRate,
itemStyle: {
normal: {
lineStyle: { color: '#FFC200' } //设置线条颜色
}
}
}
]
};
option && myChart.setOption(option);
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
},
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer23BoxTimer) {
clearInterval(this.DPcomputer23BoxTimer);
this.DPcomputer23BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +240,36 @@ export default { ...@@ -29,5 +240,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer23Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer23Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer23Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer23Box #echarts2View{
position: absolute;
left: 0vh;
width: 100%;
height: 23vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer24.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer24Box">
<!-- 月生产完成效率-->
<div class="dataAnalysisScrView_leftView_title">月生产完成效率</div>
<div class="dataAnalysisScrView_leftView_content" style="position: relative;">
<div id="echarts3View"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer24BoxTimer:null,
//时间
currentTime:{
month:'',
},
//月生产完成效率
echarts3Data:{
caiquName:[],
wanchengNum:[],
jihuaNum:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts3Fn();
})
this.DPcomputer24BoxTimer = setInterval(() => {
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts3Fn();
})
},20000)
},
//月生产完成效率
echarts3Fn(){
echarts.init(document.getElementById('echarts3View')).dispose();
var myChart = echarts.init(document.getElementById('echarts3View'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['目标完成', '计划完成'],
textStyle:{
color:'white',
fontSize:15,
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.echarts3Data.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: '目标完成',
type: 'line',
data: this.echarts3Data.wanchengNum,
itemStyle: {
normal: {
lineStyle: { color: '#FFC200' } //设置线条颜色
}
}
},
{
name: '计划完成',
type: 'line',
data: this.echarts3Data.jihuaNum,
itemStyle: {
normal: {
lineStyle: { color: '#21DDF3' } //设置线条颜色
}
}
}
]
};
option && myChart.setOption(option);
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer24BoxTimer) {
clearInterval(this.DPcomputer24BoxTimer);
this.DPcomputer24BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +178,36 @@ export default { ...@@ -29,5 +178,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer24Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer24Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer24Box .dataAnalysisScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer24Box #echarts3View{
position: absolute;
left: 0vh;
width: 100%;
height: 19vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer25.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer25Box">
<!-- 装卸点平均时长 -->
<div class="dataAnalysisScrView_leftView_title truck_titleStyle">
<div>装卸点平均时长</div>
<div class="loadAndUnloadTitleDateStyle">
<div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div>
<div :class="loadAndUnloadListData.selectTimeText == 'week' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('week')">周</div>
<div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts4View"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer25BoxTimer:null,
//时间
currentTime:{
day:'',
month:'',
year:'',
},
//装卸点平均时长
loadAndUnloadListData:{
selectTimeText:'day',
selectTimeDate:'',
caiquName:[],
timeData:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
//装卸点平均时长
if(this.loadAndUnloadListData.selectTimeText == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
this.DPcomputer25BoxTimer = setInterval(() => {
//装卸点平均时长
if(this.loadAndUnloadListData.selectTimeText == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
},20000)
},
//装卸点平均时长切换
loadAndUnloadChangeTime(text){
this.loadAndUnloadListData.selectTimeText = text;
if(text == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(text == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(text == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
},
echarts4Fn(){
echarts.init(document.getElementById('echarts4View')).dispose();
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);
},
//获取当前时间
dayCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
let currentFormatDate = year + "-" + month + "-" + day;
this.currentTime.day = currentFormatDate;
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
yearCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
let currentFormatDate = year;
this.currentTime.year = currentFormatDate;
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer25BoxTimer) {
clearInterval(this.DPcomputer25BoxTimer);
this.DPcomputer25BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +303,69 @@ export default { ...@@ -29,5 +303,69 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer25Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer25Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer25Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer25Box .loadAndUnloadTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
z-index: 100;
}
.DPcomputer25Box .loadAndUnloadDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer25Box .loadAndUnloadDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer25Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer25Box #echarts4View{
position: absolute;
top: -2.5vh;
width: 100%;
height: 22vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer26.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer26Box">
<!-- 矿石产量比-->
<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 == 'week' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('week')">周</div>
<div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts5View" ref="chartPanel" style="width:100%;height: 18vh;margin-top: 4vh;"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default { export default {
data(){ data(){
return { return {
DPcomputer26BoxTimer:null,
//矿石产量比
oreProportionListData:{
selectTimeText:'day',
selectTimeDate:'',
proportionData:[],
optionData:[
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
} }
]
},
}
},
mounted(){
this.loadData();
}, },
mounted(){},
methods:{ methods:{
loadData(){
//矿石产量比
if(this.oreProportionListData.selectTimeText == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
this.DPcomputer26BoxTimer = setInterval(() => {
//矿石产量比
if(this.oreProportionListData.selectTimeText == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
},20000)
}, },
beforeDestroy(){ //矿石产量比切换
oreProportionChangeTime(text){
this.oreProportionListData.selectTimeText = text;
if(text == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(text == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(text == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
},
echarts5Fn(){
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('echarts5View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts5View"));
for (let i = 0; i < this.oreProportionListData.proportionData.length; i++) {
delete this.oreProportionListData.proportionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.oreProportionListData.proportionData, 0);
let option = {
tooltip: {
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 0px">${params.seriesName}：${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 25, //角度
distance: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
name: "pie2d",
type: "pie",
label: {
color: "#00D7E9",
fontSize: 16,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
return item.data.name + ":" + item.data.value + "%" + "";
},
},
labelLine: {
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
},
startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
center: ["50%", "50%"],
data: this.oreProportionListData.proportionData,
itemStyle: {
opacity: 0,
},
top: "10%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
},
},
beforeDestroy(){
if(this.DPcomputer26BoxTimer) {
clearInterval(this.DPcomputer26BoxTimer);
this.DPcomputer26BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +388,69 @@ export default { ...@@ -29,5 +388,69 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer26Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer26Box .dataAnalysisScrView_leftView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer26Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer26Box .oreProportionTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
z-index: 100;
}
.DPcomputer26Box .oreProportionDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer26Box .oreProportionDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer26Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer26Box #echarts5View{
position: absolute;
top: -4vh;
width: 100%;
height: 28vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer27.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer27Box">
<!-- 报警路障申报统计 -->
<div class="dataAnalysisScrView_rightView_title">报警路障申报统计</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts6View"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer27BoxTimer:null,
//报警路障申报统计
echarts6Data:[],
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).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;
this.$nextTick(()=>{
that.echarts6Fn();
})
}
})
}
})
this.DPcomputer27BoxTimer = setInterval(() => {
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).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;
this.$nextTick(()=>{
that.echarts6Fn();
})
}
})
}
})
},20000)
},
//报警路障申报统计
echarts6Fn(){
echarts.init(document.getElementById('echarts6View')).dispose();
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);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer27BoxTimer) {
clearInterval(this.DPcomputer27BoxTimer);
this.DPcomputer27BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +189,36 @@ export default { ...@@ -29,5 +189,36 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer27Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer27Box .dataAnalysisScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer27Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer27Box #echarts6View{
position: absolute;
left: -6vw;
width: 125%;
height: 20vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer28.vue
View file @ 45e18ffb
<template> <template>
<div> <div class="DPcomputer28Box">
<!-- 卸货点卸货量统计 -->
<div class="dataAnalysisScrView_rightView_title">卸货点卸货量统计</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts7View"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer28BoxTimer:null,
//时间
currentTime:{
month:'',
},
//卸货点卸货量统计
echarts7Data:{
xiedianName:[],
outputNum:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
this.monthCurrentTimeFn();
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
this.DPcomputer28BoxTimer = setInterval(() => {
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
},20000)
}, },
beforeDestroy(){ //卸货点卸货量统计
echarts7Fn(){
echarts.init(document.getElementById('echarts7View')).dispose();
var myChart = echarts.init(document.getElementById('echarts7View'));
var option = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '8%',
bottom: '20%',
containLabel: true
},
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: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00B7FF' },
{ offset: 1, color: '#2244AC' }
])
},
}
]
};
option && myChart.setOption(option);
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
},
beforeDestroy(){
if(this.DPcomputer28BoxTimer) {
clearInterval(this.DPcomputer28BoxTimer);
this.DPcomputer28BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +162,37 @@ export default { ...@@ -29,5 +162,37 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer28Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer28Box .dataAnalysisScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer28Box .dataAnalysisScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer28Box #echarts7View{
position: absolute;
left: 0vw;
top: -2.5vh;
width: 105%;
height: 25.5vh;
}
</style> </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