电子围栏，边坡设备监测

public/config/config.json

@@ -345,4 +345,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file

src/components/mars3d/Map4.vue

@@ -2,21 +2,21 @@
     <div style="wight:100%;height:100%;position: relative;">
       <div :id="`mars3d-container${mapKey}`"
       :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
-  
+
       <div class="infoview">
         <div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div>
       </div>
-  
+
       <img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4">
 
     </div>
-  
+
   </template>
-  
+
   <script>
   import Vue from 'vue'
   import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
-  
+
   // 使用免费开源版本
   import 'mars3d/dist/mars3d.css'
   import * as mars3d from 'mars3d'
@@ -25,24 +25,24 @@
   import zhuangchetubiao from '../../assets/images/cutGraph/zhuangchedian1.png'
   import xiechetubiao from '../../assets/images/cutGraph/xiechedian1.png'
   import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
-  
-  
+
+
   // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
   // echarts插件
   // import 'mars3d-echarts'
-  
+
   // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
   Vue.prototype.mars3d = mars3d
   Vue.prototype.Cesium = mars3d.Cesium
-  
+
   var map;
   export default {
     name: 'mars3dViewer',
-  
+
     created(){
       // this.getCoordinate();
     },
-  
+
     data(){
       return{
         zuobianData:[],
@@ -54,44 +54,44 @@
         areaColorData:[],
       }
     },
-  
+
     props: {
       // 初始化配置参数
       url: String,
-  
+
       // 地图唯一性标识
       mapKey: {
         type: String,
         default: ''
       },
-  
+
       // 自定义参数
       options: Object,
-  
+
       // 是否分屏显示
       compare: {
         type: Boolean,
         default: false
       },
-  
+
       // 是否插入到body元素上
       appendToBody: {
         type: Boolean,
         default: false
       },
-  
+
       // 自定义css类名
       customClass: {
         type: String,
         default: ''
       }
     },
-  
+
     destroy() {
       this[`map${this.mapKey}`].destroy()
       delete this[`map${this.mapKey}`]
     },
-  
+
     methods: {
       //后台获取数据
       getCoordinate(data) {
@@ -156,13 +156,13 @@
                       })
                     }
                   })
-                  
+
                 }
               })
             })
           }
         })
-        
+
       },
       //上传关键点数据
       uploaded(text,type,way,arr1){
@@ -303,13 +303,13 @@
             })
           }
         }
-        
+
       },
       //创建地图
       initMars3d(options) {
         let that = this;
         //if (this[`map${this.mapKey}`]) return
-  
+
         const mapOptions = {
           ...options,
           ...this.options,
@@ -317,7 +317,7 @@
             defaultContextMenu: false, //右键菜单
           },
         }
-  
+
         // 创建三维地球场景
         map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
         this[`map${this.mapKey}`] = map
@@ -329,7 +329,7 @@
           initLayerManager(graphicLayer,that.weilanName[index]);
           that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]);
         })
-        
+
         //关键点显示
         that.zuobianData.forEach(function(item,index){
           var graphicLayer = new mars3d.layer.GraphicLayer();
@@ -346,7 +346,7 @@
           initLayerManager(graphicLayer);
           that.addDemoGraphic2(graphicLayer,item);
         })
-        
+
         //webgl渲染失败后，刷新页面
         map.on(mars3d.EventType.renderError,function(event){
           window.location.reload();
@@ -440,7 +440,7 @@
             },
           },
           success: function (graphic){
-            var mpt = mars3d.LatLngPoint.fromCartesian(graphic._position_draw);
+            var mpt = mars3d.LngLatPoint.fromCartesian(graphic._position_draw);
             that.toJavaCoordinates.push(mpt.toString().split(','));
           }
         });
@@ -452,11 +452,11 @@
           that.controlPointId = item.id;
         })
       },
-     
+
     }
   }
   </script>
-  
+
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style >
   .maplogo1Img4{
@@ -467,7 +467,7 @@
     height: 2.5vh;
   }
   .cesium-viewer-toolbar{
-    
+
     display: none !important;
   }
   .mars3d-compass{
@@ -484,9 +484,9 @@
     width: 100vw;
     overflow: hidden;
   }
-  
+
   /* 重写Cesium的css */
-  
+
   /**cesium按钮背景色*/
   .cesium-button {
     background-color: #3f4854;
@@ -495,35 +495,35 @@
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
     line-height: 32px;
   }
-  
+
   .cesium-viewer-geocoderContainer .cesium-geocoder-input {
     background-color: rgba(63, 72, 84, 0.7);
   }
-  
+
   .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
     background-color: rgba(63, 72, 84, 0.9);
   }
-  
+
   .cesium-viewer-geocoderContainer .search-results {
     background-color: #3f4854;
   }
-  
+
   .cesium-geocoder-searchButton {
     background-color: #3f4854;
   }
-  
+
   .cesium-infoBox-title {
     background-color: #3f4854;
   }
-  
+
   .cesium-infoBox {
     background: rgba(63, 72, 84, 0.9);
   }
-  
+
   .cesium-toolbar-button img {
     height: 100%;
   }
-  
+
   .cesium-performanceDisplay-defaultContainer {
     top: auto;
     bottom: 35px;
@@ -533,7 +533,7 @@
   .cesium-performanceDisplay-fps {
     color: #fff;
   }
-  
+
   /**cesium工具栏位置*/
   .cesium-viewer-toolbar {
     top: auto;
@@ -541,7 +541,7 @@
     right: 12px;
     bottom: 35px;
   }
-  
+
   .cesium-viewer-toolbar > .cesium-toolbar-button,
   .cesium-navigationHelpButton-wrapper,
   .cesium-viewer-geocoderContainer {
@@ -550,30 +550,30 @@
     clear: both;
     text-align: center;
   }
-  
+
   .cesium-baseLayerPicker-dropDown {
     bottom: 0;
     right: 40px;
     max-height: 700px;
     margin-bottom: 5px;
   }
-  
+
   .cesium-navigation-help {
     top: auto;
     bottom: 0;
     right: 40px;
     transform-origin: right bottom;
   }
-  
+
   .cesium-sceneModePicker-wrapper {
     width: auto;
   }
-  
+
   .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
     float: left;
     margin: 0 3px;
   }
-  
+
   .cesium-viewer-geocoderContainer .search-results {
     left: 0;
     right: 40px;
@@ -581,16 +581,16 @@
     position: absolute;
     z-index: 999;
   }
-  
+
   .cesium-infoBox-title {
     background-color: #3f4854;
   }
-  
+
   .cesium-infoBox {
     top: 50px;
     background: rgba(63, 72, 84, 0.9);
   }
-  
+
   /**左下工具栏菜单*/
   .toolbar-dropdown-menu-div {
     background: rgba(43, 44, 47, 0.8);
@@ -601,7 +601,7 @@
     bottom: 40px;
     display: none;
   }
-  
+
   .toolbar-dropdown-menu {
     min-width: 110px;
     padding: 0;
@@ -620,24 +620,24 @@
     white-space: nowrap;
     text-decoration: none;
   }
-  
+
   .toolbar-dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
     color: #fff;
     background-color: #444d59;
   }
-  
+
   .toolbar-dropdown-menu > .active > a,
   .dropdown-menu > .active > a:hover,
   .dropdown-menu > .active > a:focus {
     color: #fff;
     background-color: #444d59;
   }
-  
+
   .toolbar-dropdown-menu i {
     padding-right: 5px;
   }
-  
+
   .infoview{
     position: absolute;
     top: 10px;
@@ -646,4 +646,3 @@
     z-index: 1000;
   }
   </style>
-  
\ No newline at end of file

src/components/mars3d/Map5.vue

+<template>
+    <div style="wight:100%;height:100%;position: relative;">
+      <div :id="`mars3d-container${mapKey}`"
+      :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
+
+      <div class="infoview">
+        <div style="display: inline-block;color:red;font-weight:bolder;">点击地图设置坐标</div>
+      </div>
+
+      <img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4">
+
+    </div>
+
+  </template>
+
+  <script>
+  import Vue from 'vue'
+  import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
+
+  // 使用免费开源版本
+  import 'mars3d/dist/mars3d.css'
+  import * as mars3d from 'mars3d'
+  import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
+  import  { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
+  import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
+
+
+  // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
+  // echarts插件
+  // import 'mars3d-echarts'
+
+  // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
+  Vue.prototype.mars3d = mars3d
+  Vue.prototype.Cesium = mars3d.Cesium
+
+  var map;
+  export default {
+    name: 'mars3dViewer',
+    data(){
+      return{
+
+      }
+    },
+    props: {
+      // 初始化配置参数
+      url: String,
+
+      // 地图唯一性标识
+      mapKey: {
+        type: String,
+        default: ''
+      },
+
+      // 自定义参数
+      options: Object,
+
+      // 是否分屏显示
+      compare: {
+        type: Boolean,
+        default: false
+      },
+
+      // 是否插入到body元素上
+      appendToBody: {
+        type: Boolean,
+        default: false
+      },
+
+      // 自定义css类名
+      customClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    destroy() {
+      this[`map${this.mapKey}`].destroy()
+      delete this[`map${this.mapKey}`]
+    },
+    created(){
+      this.$nextTick(() => {
+        mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
+          this.initMars3d(data.map3d)// 构建地图
+        })
+      });
+    },
+    methods: {
+      //创建地图
+      initMars3d(options) {
+        let that = this;
+        const mapOptions = {
+          ...options,
+          ...this.options,
+          control: {
+            defaultContextMenu: false, //右键菜单
+          },
+        }
+        // 创建三维地球场景
+        map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
+        this[`map${this.mapKey}`] = map;
+        this.$emit('onload', map);
+
+      },
+
+    }
+  }
+  </script>
+
+  <!-- Add "scoped" attribute to limit CSS to this component only -->
+  <style >
+  .maplogo1Img4{
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 6vw;
+    height: 2.5vh;
+  }
+  .cesium-viewer-toolbar{
+
+    display: none !important;
+  }
+  .mars3d-compass{
+    display: none !important;
+  }
+  .mars3d-locationbar{
+    display: none !important;
+  }
+  .mars3d-distance-legend{
+    display: none !important;
+  }
+  .mars3d-container {
+    height: 100%;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  /* 重写Cesium的css */
+
+  /**cesium按钮背景色*/
+  .cesium-button {
+    background-color: #3f4854;
+    color: #e6e6e6;
+    fill: #e6e6e6;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    line-height: 32px;
+  }
+
+  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
+    background-color: rgba(63, 72, 84, 0.7);
+  }
+
+  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
+    background-color: rgba(63, 72, 84, 0.9);
+  }
+
+  .cesium-viewer-geocoderContainer .search-results {
+    background-color: #3f4854;
+  }
+
+  .cesium-geocoder-searchButton {
+    background-color: #3f4854;
+  }
+
+  .cesium-infoBox-title {
+    background-color: #3f4854;
+  }
+
+  .cesium-infoBox {
+    background: rgba(63, 72, 84, 0.9);
+  }
+
+  .cesium-toolbar-button img {
+    height: 100%;
+  }
+
+  .cesium-performanceDisplay-defaultContainer {
+    top: auto;
+    bottom: 35px;
+    right: 50px;
+  }
+  .cesium-performanceDisplay-ms,
+  .cesium-performanceDisplay-fps {
+    color: #fff;
+  }
+
+  /**cesium工具栏位置*/
+  .cesium-viewer-toolbar {
+    top: auto;
+    left: auto;
+    right: 12px;
+    bottom: 35px;
+  }
+
+  .cesium-viewer-toolbar > .cesium-toolbar-button,
+  .cesium-navigationHelpButton-wrapper,
+  .cesium-viewer-geocoderContainer {
+    margin-bottom: 5px;
+    float: right;
+    clear: both;
+    text-align: center;
+  }
+
+  .cesium-baseLayerPicker-dropDown {
+    bottom: 0;
+    right: 40px;
+    max-height: 700px;
+    margin-bottom: 5px;
+  }
+
+  .cesium-navigation-help {
+    top: auto;
+    bottom: 0;
+    right: 40px;
+    transform-origin: right bottom;
+  }
+
+  .cesium-sceneModePicker-wrapper {
+    width: auto;
+  }
+
+  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
+    float: left;
+    margin: 0 3px;
+  }
+
+  .cesium-viewer-geocoderContainer .search-results {
+    left: 0;
+    right: 40px;
+    width: auto;
+    position: absolute;
+    z-index: 999;
+  }
+
+  .cesium-infoBox-title {
+    background-color: #3f4854;
+  }
+
+  .cesium-infoBox {
+    top: 50px;
+    background: rgba(63, 72, 84, 0.9);
+  }
+
+  /**左下工具栏菜单*/
+  .toolbar-dropdown-menu-div {
+    background: rgba(43, 44, 47, 0.8);
+    border: 1px solid #2b2c2f;
+    z-index: 999;
+    position: absolute;
+    right: 60px;
+    bottom: 40px;
+    display: none;
+  }
+
+  .toolbar-dropdown-menu {
+    min-width: 110px;
+    padding: 0;
+  }
+  .toolbar-dropdown-menu > li {
+    padding: 0 3px;
+    margin: 2px 0;
+  }
+  .toolbar-dropdown-menu > li > a {
+    color: #edffff;
+    display: block;
+    padding: 4px 10px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.6;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
+  .toolbar-dropdown-menu > li > a:hover,
+  .dropdown-menu > li > a:focus {
+    color: #fff;
+    background-color: #444d59;
+  }
+
+  .toolbar-dropdown-menu > .active > a,
+  .dropdown-menu > .active > a:hover,
+  .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #444d59;
+  }
+
+  .toolbar-dropdown-menu i {
+    padding-right: 5px;
+  }
+
+  .infoview{
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 50vw;
+    z-index: 1000;
+  }
+  </style>

src/views/regionalManagement/regionalInformation/index.vue

@@ -84,13 +84,14 @@
 				</el-form-item>
 				<br/>
 				<el-form-item label="选择车辆" prop="cars" v-show="form.item.areaclass == '电子围栏'">
+          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
 					<div class="checkboxViews">
-						<el-checkbox-group v-model="checkDataList" style="width:480px;">
+						<el-checkbox-group v-model="checkDataList" style="width:480px;" @change="handleCheckedChange">>
 							<el-checkbox v-for="(obj,index) in carInformationData" :label="obj.number" :key="index">{{obj.number}}</el-checkbox>
 						</el-checkbox-group>
 					</div>
 				</el-form-item>
-				<el-form-item label="启停状态" prop="status" v-show="form.item.areaclass == '电子围栏'">
+				<el-form-item label="启用情况" prop="status" v-show="form.item.areaclass == '电子围栏'">
 					<el-select v-model="form.item.status" placeholder="请选择启停状态" style="width:160px;">
 						<el-option label="启用" value="启用"></el-option>
 						<el-option label="停用" value="停用"></el-option>
@@ -120,12 +121,13 @@ export default {
 	data() {
 		const basePathUrl = window.basePathUrl || ''
 		return {
+      isIndeterminate:false,
 			//地图图片
 			configUrl: basePathUrl + 'config/config.json',
 			imgSrcStart:process.env.VUE_APP_LOCAL_API2,
 			loading: false,
 			page: 1,
-			size: 10,
+			size: 9999,
 			total: 0,
 			query:{},
 			picFileName:'',
@@ -165,6 +167,15 @@ export default {
 		})
 	},
 	methods: {
+    handleCheckAllChange(val) {
+      this.checkDataList = val ? this.carInformationData.map((item)=>item.number) : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.carInformationData.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.carInformationData.length;
+    },
 		//获取区域信息数据
 		loadData() {
 			var sort = 'createTime,desc';
@@ -172,7 +183,7 @@ export default {
 			param.page = this.page - 1;
 			param.size = this.size;
 			param.sort = sort;
-			
+
 			this.$nextTick(()=>{
 				HttpReq.truckDispatching.RegionalInformationQuery(param).then((res) => {
 					if(res.code == 200){
@@ -203,7 +214,7 @@ export default {
 				return 'success-row';
 			}
 			return '';
-		},	
+		},
 		cancelForm(a, b, c){
 			this.form.visible = false;
 		},
@@ -275,7 +286,7 @@ export default {
 						this.form.status.cu = 0
 					}
 				});
-			};
+			}
 		},
 		//新增区域信息
 		reqAddItem(form, item){
@@ -301,6 +312,7 @@ export default {
 			}else{
 				let lastData = {...item};
 				lastData.card = this.picFileName;
+        lastData.carList = this.checkDataList;
 				//this.$refs.mars3dViewerMapMethod.uploaded(lastData.name);
 				HttpReq.truckDispatching.RegionalInformationAdd(lastData).then((res) => {
 					form.visible = false;
@@ -324,24 +336,6 @@ export default {
 				}).catch(function(error) {
 					form.status.cu = 0
 				});
-
-				this.checkDataList.forEach((carItem,index)=>{
-					let uploadCarData = {};
-					uploadCarData.car = carItem;
-					uploadCarData.areaId = item.code;
-					console.log('uploadCarData',uploadCarData);
-					HttpReq.truckDispatching.RegionalInformationCarAdd(uploadCarData).then((res) => {
-						if(res.code == 200){
-						}else{
-							this.$notify({
-								title: res.msg,
-								type: 'error',
-								duration: 2500
-							})
-						}
-					}).catch(function(error) { });
-				})
-
 			}
 
 		},
@@ -349,7 +343,7 @@ export default {
 		reqUpdateItem(form, item){
 			let lastData = {...item};
 			lastData.card = this.picFileName;
-			//lastData.cars = this.checkDataList;
+			lastData.carList = this.checkDataList;
 			HttpReq.truckDispatching.RegionalInformationUpdate(lastData).then((res) => {
 				form.visible = false;
 				if(res.code == 200){
@@ -370,26 +364,6 @@ export default {
 			}).catch(function(error) {
 				form.status.cu = 0
 			});
-			if(this.oldCheckDataList.length != 0){
-				HttpReq.truckDispatching.RegionalInformationCarDel(this.oldCheckDataList).then((res) => {})
-			}
-			this.$nextTick(()=>{
-				this.checkDataList.forEach((carItem,index)=>{
-					let uploadCarData = {};
-					uploadCarData.car = carItem;
-					uploadCarData.areaId = item.code;
-					HttpReq.truckDispatching.RegionalInformationCarAdd(uploadCarData).then((res) => {
-						if(res.code == 200){
-						}else{
-							this.$notify({
-								title: res.msg,
-								type: 'error',
-								duration: 2500
-							})
-						}
-					}).catch(function(error) { });
-				})
-			})
 		},
 		//删除区域信息
 		reqRemoveProject(item,weilanName,items){
@@ -410,7 +384,7 @@ export default {
 				this.loadData();
 			})
 			HttpReq.truckDispatching.screenMapSetUpDel(weilanName).then((res) => {})
-			
+
 			HttpReq.truckDispatching.RegionalCaiDianQuery({areaName:items.name}).then((resAll) => {
 				if(resAll.code == 200){
 					//totalElements == 0 说明为卸区，删除卸区对应点以及路径图信息
@@ -533,7 +507,7 @@ export default {
 	.el-table .success-row {
 		background: #f0f9eb;
 	}
-	
+
 	.device-manage{
 		.panel-bottom{
 			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
@@ -546,9 +520,9 @@ export default {
 				}
 				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
 			}
-			
+
 		}
-		
+
 	}
 	.mapcontainer3 {
 		height: 50vh;