1

src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue

 <template>
-    <div>
+    <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>
+						<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>
 </template>
 
 <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 {
     data(){
         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:{
+        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)
+            })
+
+        },
+        //获取车辆信息
+		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>
@@ -29,5 +643,216 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer21.vue

@@ -28,7 +28,113 @@ export default {
     },
     methods:{
         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(){

src/views/MLargeScreen/components/smallComponents/DPcomputer22.vue

 <template>
-    <div>
-
+    <div class="DPcomputer22Box">
+        <!-- 各采区日产量排名 -->
+        <div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
+        <div class="dataAnalysisScrView_leftView_content">
+            <div class="outputRankView" id="outputRankView"></div>
+        </div>
     </div>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer22BoxTimer:null,
+            //时间
+            currentTime:{
+                day:'',
+            },
+            //各采区日产量排名
+            outputRankData:{
+                caiquName:[],
+                caiquSeriesData:[],
+            },
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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)
+
+        },
+        //各采区日产量排名
+        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>
@@ -29,5 +163,34 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer23.vue

 <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>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer23BoxTimer:null,
+            //时间
+            currentTime:{
+                month:'',
+            },
+            //各采区当月完成率
+            echarts2Data:{
+                caiquName:[],
+                wanchengNum:[],
+                jihuaNum:[],
+                wanchengRate:[],
+            },
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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(){
-
+        if(this.DPcomputer23BoxTimer) {
+			clearInterval(this.DPcomputer23BoxTimer);
+            this.DPcomputer23BoxTimer = null;
+		}
     }
 }
 </script>
@@ -29,5 +240,36 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer24.vue

 <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>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer24BoxTimer:null,
+            //时间
+            currentTime:{
+                month:'',
+            },
+            //月生产完成效率
+            echarts3Data:{
+                caiquName:[],
+                wanchengNum:[],
+                jihuaNum:[],
+            },
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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(){
-
+        if(this.DPcomputer24BoxTimer) {
+			clearInterval(this.DPcomputer24BoxTimer);
+            this.DPcomputer24BoxTimer = null;
+		}
     }
 }
 </script>
@@ -29,5 +178,36 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer25.vue

 <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>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer25BoxTimer:null,
+            //时间
+            currentTime:{
+                day:'',
+                month:'',
+                year:'',
+            },
+            //装卸点平均时长
+            loadAndUnloadListData:{
+                selectTimeText:'day',
+                selectTimeDate:'',
+                caiquName:[],
+                timeData:[],
+            },
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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(){
-
+        if(this.DPcomputer25BoxTimer) {
+			clearInterval(this.DPcomputer25BoxTimer);
+            this.DPcomputer25BoxTimer = null;
+		}
     }
 }
 </script>
@@ -29,5 +303,69 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer26.vue

 <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>
 </template>
 
 <script>
 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 {
     data(){
         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(){},
+    mounted(){
+        this.loadData();
+    },
     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)
+            
+        },
+        //矿石产量比切换
+        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>
@@ -29,5 +388,69 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer27.vue

 <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>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer27BoxTimer:null,
+            //报警路障申报统计
+            echarts6Data:[],
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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(){
-
+        if(this.DPcomputer27BoxTimer) {
+			clearInterval(this.DPcomputer27BoxTimer);
+            this.DPcomputer27BoxTimer = null;
+		}
     }
 }
 </script>
@@ -29,5 +189,36 @@ export default {
   margin: 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>
\ No newline at end of file

src/views/MLargeScreen/components/smallComponents/DPcomputer28.vue

 <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>
 </template>
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+import * as echarts from 'echarts';
 
 
 export default {
     data(){
         return {
-
+            DPcomputer28BoxTimer:null,
+            //时间
+            currentTime:{
+                month:'',
+            },
+            //卸货点卸货量统计
+            echarts7Data:{
+                xiedianName:[],
+                outputNum:[],
+            },
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     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)
+        },
+        //卸货点卸货量统计
+        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>
@@ -29,5 +162,37 @@ export default {
   margin: 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>
\ No newline at end of file