修改

src/components/electricity/index.vue

+<template>
+    <div>
+      <canvas ref="mycanvas" :width="cWidth" :height="cHeight"></canvas>
+    </div>
+</template>
+ 
+<script>
+export default {
+  name: 'ElectricQuantity',
+  mycanvas: null,
+  ctx: null,
+  myInterval: null,
+  props: {
+    proQuantity: {
+      type: Number,
+      default: 50
+    },
+    proIsCharge: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      cWidth: 66,
+      cHeight: 28,
+      jd: 0
+    }
+  },
+  created () {
+  },
+  watch: {
+    // 监听是否变化电量 ，如果是 做一个充电动画
+    proIsCharge (newVal, oldVal) {
+      console.log('======proIsCharge============', newVal)
+      let _this = this
+      clearInterval(_this.myInterval)
+      this.jd = 0
+      if (_this.proIsCharge) {
+        _this.myInterval = setInterval(function () {
+          _this.drawCharge()
+        }, 300)
+      }
+    },
+    proQuantity (newVal, oldVal) {
+      this.drawPath(this.proQuantity)
+    }
+  },
+  mounted () {
+    this.mycanvas = this.$refs.mycanvas
+    this.ctx = this.mycanvas.getContext('2d')
+    this.drawBg()
+    this.drawPath(this.proQuantity)
+  },
+  methods: {
+    // 画一个背景
+    drawBg () {
+      this.ctx.strokeStyle = 'rgba(255,255,255,1)'
+      this.ctx.lineWidth = 2
+      this.ctx.strokeRect(0, 0, 60, 28)
+      this.ctx.fillStyle = 'rgba(0,0,0,0.2)'
+      this.ctx.fillRect(0, 0, 60, 28)
+      this.ctx.fillStyle = 'rgba(255,255,255,1)'
+      this.ctx.fillRect(61, 7, 6, 14)
+    },
+    // 根据电量画出一个块
+    drawPath (quantity) {
+      if (this.proIsCharge) {
+        this.ctx.fillStyle = 'rgba(0,255,0,1)'
+      } else if (quantity < 20) {
+        this.ctx.fillStyle = 'red'
+      } else {
+        this.ctx.fillStyle = 'rgba(0,255,0,1)'
+      }
+      this.ctx.fillRect(1, 1, (60 - 2) * quantity / 100, 26)
+    },
+    drawCharge () {
+      this.ctx.clearRect(0, 0, this.cWidth, this.cHeight)
+      this.drawBg()
+      this.jd = this.jd + 10
+      if (this.jd > 100) {
+        this.jd = 0
+      }
+      this.drawPath(this.jd)
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>
\ No newline at end of file

src/views/MLargeScreen/components/voiceApplication/index.vue

@@ -190,6 +190,7 @@ export default {
             });
 			if(tishi){
 				this.carsInforData = [{number:'pcBigScreen'}];
+				this.selectCarRadioArray = [{number:'pcBigScreen'}];
 			}else{
 				this.loadData2();
 			}

src/views/MLargeScreen/index.vue

@@ -4,6 +4,8 @@
 			<div class="topTitle">矿山卡车调度系统</div>
 			<div class="topcontent">
 				<div style="margin-right: 20px;">{{currentTime}}</div>
+				<ElectricQuantity style=" width: 75px;height: 30px;" :proIsCharge="IsCharge" :proQuantity="batteryEnegy"></ElectricQuantity>
+				<span>{{batteryEnegy}}%</span>
 				<!-- <div style="margin-right: 20px;cursor: pointer;">
 					<img src="../../assets/images/truckTuPian/moon1.png" width="15">
 					<span>切换夜晚模式</span>
@@ -57,9 +59,9 @@
 		<personalCenter ref="personalCenterMethod" v-show="selectFunction == 6"/>
 		<smallWindow ref="smallWindowMethod" v-show="selectFunction == 7"/>
 		<!-- 地图区域 -->
-		<!-- <div id="centerDiv" class="mapcontainer">
+		<div id="centerDiv" class="mapcontainer">
 			<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"/>
-		</div> -->
+		</div>
 		<!-- 铲车待装车辆列表 -->
 		<div class="waitingtrucksView" v-if="carclass == '铲车'">
 			<div class="waitingtrucksView_title">待装卡车列表</div>
@@ -95,6 +97,7 @@ import carInformation from './components/carInformation/index.vue' //车辆信
 import personalCenter from './components/personalCenter/index.vue' //个人中心
 import smallWindow from './components/smallWindow/index.vue' //小窗口车辆信息
 import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
+import ElectricQuantity from '../../components/electricity/index.vue' //地图
 
 export default {
 	components: { 
@@ -106,6 +109,7 @@ export default {
 		personalCenter,
 		smallWindow,
 		mars3dViewerMap,
+		ElectricQuantity,
 	},
 	data(){
 		const basePathUrl = window.basePathUrl || ''
@@ -125,6 +129,9 @@ export default {
 			carclass:'',
 			daizhangCar:[],
 			leftBtnDisable:true,//左侧选项按钮是否可用
+			//电量显示
+			IsCharge:true,
+			batteryEnegy:0,
 		}
 	},
 	mounted(){
@@ -144,6 +151,13 @@ export default {
 					if(res.data.totalElements == 0){
 						return
 					}else{
+						//判断该车是否在行驶状态
+						if(res.data.content[0].workStatus == 0){
+							this.leftBtnDisable = true;
+						}else{
+							this.leftBtnDisable = false;
+						}
+						//获取该车报警记录接口
 						httpGet(getalarmRealQuery,{name:res.data.content[0].equipmentName}).then((res1) => {
 							if(res1.code == 200){
 								res1.data.forEach((item,index) => {
@@ -162,7 +176,7 @@ export default {
 				}
             });
         }, 20000)
-	
+
 	},
 	methods:{
 		loadData(){
@@ -206,8 +220,10 @@ export default {
 				}
 			});
 		},
-        //获取当前时间
-		setNowTimes () {
+        //获取当前时间以及电量
+		setNowTimes(){
+			let that = this;
+			//时间
             let myDate = new Date();
             let wk = myDate.getDay();
             let yy = String(myDate.getFullYear());
@@ -219,6 +235,10 @@ export default {
             let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
             let week = weeks[wk];
             this.currentTime = yy + '-' + mm + '-' + dd + ' ' + hou + ':' + min + ' ' + week;
+			//电量
+			navigator.getBattery().then(function(battery) {
+				that.batteryEnegy = battery.level * 100;
+			});
         },
 		//接受派单
 		IntelligentDisFn(){