1

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

@@ -55,6 +55,9 @@
 
 <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 {
@@ -95,6 +98,125 @@ export default {
     },
     methods:{
         loadData(){
+            //获取车辆运行状况
+            HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
+                let kache1 = [];
+                let kachezaixian = [];
+                let kachelixian = [];
+                let dianchan1 = [];
+                let dianchanzaixian = [];
+                let dianchanlixian = [];
+                let qitache1 = [];
+                let qitachezaixian = [];
+                let qitachelixian = [];
+                if(res.code == 200){
+                    res.data.content.forEach((item)=>{
+                        if(item.carclass == '卡车'){
+                            kache1.push(item);
+                        }else if(item.carclass == '铲车'){
+                            dianchan1.push(item);
+                        }else{
+                            qitache1.push(item);
+                        }
+                    })
+                    this.carWorkingStateData.optionData[0].value = kache1.length;
+                    this.carWorkingStateData.optionData[1].value = dianchan1.length;
+                    kache1.forEach((item)=>{
+                        if(item.status == 1){
+                            kachezaixian.push(item);
+                        }else{
+                            kachelixian.push(item);
+                        }
+                    })
+                    dianchan1.forEach((item)=>{
+                        if(item.status == 1){
+                            dianchanzaixian.push(item);
+                        }else{
+                            dianchanlixian.push(item);
+                        }
+                    })
+                    qitache1.forEach((item)=>{
+                        if(item.status == 1){
+                            qitachezaixian.push(item);
+                        }else{
+                            qitachelixian.push(item);
+                        }
+                    })
+                    this.carWorkingStateData.kacheonline = kachezaixian.length;
+                    this.carWorkingStateData.chancheonline = dianchanzaixian.length;
+                    this.carWorkingStateData.qitacheonline = qitachezaixian.length;
+                    this.carWorkingStateData.kacheoffline = kachelixian.length;
+                    this.carWorkingStateData.chancheoffline = dianchanlixian.length;
+                    this.carWorkingStateData.qitacheoffline = qitachelixian.length;
+                    this.draw3d();
+                    this.$nextTick(() => {
+                        let parent = document.getElementById("chart-panel"); // 获取父元素
+                        let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
+                        canvas[1].style.transform = "rotateX(30deg)";
+                    });
+                }
+            })
+            
+            this.DPcomputer10BoxTimer = setInterval(() => {
+                //获取车辆运行状况
+                HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
+                    let kache1 = [];
+                    let kachezaixian = [];
+                    let kachelixian = [];
+                    let dianchan1 = [];
+                    let dianchanzaixian = [];
+                    let dianchanlixian = [];
+                    let qitache1 = [];
+                    let qitachezaixian = [];
+                    let qitachelixian = [];
+                    if(res.code == 200){
+                        res.data.content.forEach((item)=>{
+                            if(item.carclass == '卡车'){
+                                kache1.push(item);
+                            }else if(item.carclass == '铲车'){
+                                dianchan1.push(item);
+                            }else{
+                                qitache1.push(item);
+                            }
+                        })
+                        this.carWorkingStateData.optionData[0].value = kache1.length;
+                        this.carWorkingStateData.optionData[1].value = dianchan1.length;
+                        kache1.forEach((item)=>{
+                            if(item.status == 1){
+                                kachezaixian.push(item);
+                            }else{
+                                kachelixian.push(item);
+                            }
+                        })
+                        dianchan1.forEach((item)=>{
+                            if(item.status == 1){
+                                dianchanzaixian.push(item);
+                            }else{
+                                dianchanlixian.push(item);
+                            }
+                        })
+                        qitache1.forEach((item)=>{
+                            if(item.status == 1){
+                                qitachezaixian.push(item);
+                            }else{
+                                qitachelixian.push(item);
+                            }
+                        })
+                        this.carWorkingStateData.kacheonline = kachezaixian.length;
+                        this.carWorkingStateData.chancheonline = dianchanzaixian.length;
+                        this.carWorkingStateData.qitacheonline = qitachezaixian.length;
+                        this.carWorkingStateData.kacheoffline = kachelixian.length;
+                        this.carWorkingStateData.chancheoffline = dianchanlixian.length;
+                        this.carWorkingStateData.qitacheoffline = qitachelixian.length;
+                        this.draw3d();
+                        this.$nextTick(() => {
+                            let parent = document.getElementById("chart-panel"); // 获取父元素
+                            let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
+                            canvas[1].style.transform = "rotateX(30deg)";
+                        });
+                    }
+                })
+            },10000)
             
         },
         //车辆运行状况

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

 <template>
-    <div>
-
+    <div class="DPcomputer12Box">
+        <!-- 铲车排行榜-->
+        
     </div>
 </template>
 
@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
 export default {
     data(){
         return {
+            DPcomputer12BoxTimer:null,
 
         }
     },
-    mounted(){},
+    mounted(){
+        this.loadData();
+    },
     methods:{
+        loadData(){
 
+        },
     },
     beforeDestroy(){
-
+        if(this.DPcomputer12BoxTimer) {
+			clearInterval(this.DPcomputer12BoxTimer);
+            this.DPcomputer12BoxTimer = null;
+		}
     }
 }
 </script>
@@ -29,5 +38,12 @@ export default {
   margin: 0;
   padding: 0;
 }
-
+.DPcomputer12Box{
+    width: 20vw;
+    height: 32vh;
+    background-color: rgba(32,42,67,0.95);
+    padding: 5px 7px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
 </style>
\ No newline at end of file