1

src/components/mars3d/Map4.vue

@@ -46,6 +46,7 @@
         zuobianData:[],
         toJavaCoordinates:[],
         controlPointId:0,
+        lineData:[],
       }
     },
   
@@ -90,20 +91,52 @@
       //后台获取数据
       getCoordinate(data) {
         this.zuobianData = data;
-        if (this.appendToBody) {
-          document.body.appendChild(this.$el)
-        }
-  
-        if (this.mapKey) {
-          this.initMars3d(this.options)
-        } else {
-          mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
-            this.initMars3d(data.map3d)// 构建地图
-          })
-        }
+        HttpReq.truckDispatching.apiPathmapQuery({size:9999}).then((res) => {
+          if(res.code == 200){
+            let arr1 = [];
+            HttpReq.truckDispatching.apiCpointQuery({size:9999}).then((res1) => {
+              res.data.content.forEach((item1,index1)=>{
+                let obj1 = {};
+                obj1.text = item1.weight + '分钟';
+                obj1.start = [];
+                obj1.end = [];
+                res1.data.content.forEach((item2,index2)=>{
+                  if(item1.start == item2.name){
+                    obj1.start.push(parseFloat(item2.lon));
+                    obj1.start.push(parseFloat(item2.lat));
+                    obj1.start.push(500);
+                  }
+                })
+                res1.data.content.forEach((item2,index2)=>{
+                  if(item1.end == item2.name){
+                    obj1.end.push(parseFloat(item2.lon));
+                    obj1.end.push(parseFloat(item2.lat));
+                    obj1.end.push(500);
+                  }
+                })
+                arr1.push(obj1);
+              });
+              this.lineData = arr1;
+              this.$nextTick(()=>{
+                if (this.appendToBody) {
+                  document.body.appendChild(this.$el)
+                }
+          
+                if (this.mapKey) {
+                  this.initMars3d(this.options)
+                } else {
+                  mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
+                    this.initMars3d(data.map3d)// 构建地图
+                  })
+                }
+              })
+            })
+          }
+        })
+        
       },
       //上传关键点数据
-      uploaded(text,type,way){
+      uploaded(text,type,way,arr1){
         if(way == 'add'){
           if(JSON.stringify(this.toJavaCoordinates) == '[]'){
             this.$notify({
@@ -112,32 +145,64 @@
               duration: 2500
             })
           }else{
-            let lastData = {};
-            lastData.name = text;
-            lastData.type = type;
-            lastData.lon = this.toJavaCoordinates[0][0];
-            lastData.lat = this.toJavaCoordinates[0][1];
-            HttpReq.truckDispatching.apiCpointAdd(lastData).then((res) => {
-              this.$notify({
-                title: '关键点信息上传中，请勿操作！',
-                type: 'success',
-                duration: 2000,
-                dangerouslyUseHTMLString: true,
-              });
-              this.$nextTick(()=>{
+            if(type == '控制点'){
+              let lastData = {};
+              lastData.name = text;
+              lastData.type = type;
+              lastData.lon = this.toJavaCoordinates[0][0];
+              lastData.lat = this.toJavaCoordinates[0][1];
+              HttpReq.truckDispatching.apiCpointAdd(lastData).then((res) => {
+                this.$notify({
+                  title: '关键点信息上传中，请勿操作！',
+                  type: 'success',
+                  duration: 2000,
+                  dangerouslyUseHTMLString: true,
+                });
                 if(res.code == 200){
-                  this.$notify({
-                    title: '关键点信息上传成功，即将刷新页面！',
-                    type: 'success',
-                    duration: 2000,
-                    dangerouslyUseHTMLString: true,
-                  });
-                  setTimeout(function (){
-                    window.location.reload();
-                  },2000);
+                  arr1.forEach((item,index)=>{
+                    HttpReq.truckDispatching.apiPathmapAdd(item).then((res1) => {})
+                  })
+                  this.$nextTick(()=>{
+                    this.$notify({
+                      title: '关键点信息上传成功，即将刷新页面！',
+                      type: 'success',
+                      duration: 2000,
+                      dangerouslyUseHTMLString: true,
+                    });
+                    setTimeout(function (){
+                      window.location.reload();
+                    },2000);
+                  })
                 }
               })
-            })
+            }else{
+              let lastData = {};
+              lastData.name = text;
+              lastData.type = type;
+              lastData.lon = this.toJavaCoordinates[0][0];
+              lastData.lat = this.toJavaCoordinates[0][1];
+              HttpReq.truckDispatching.apiCpointAdd(lastData).then((res) => {
+                this.$notify({
+                  title: '关键点信息上传中，请勿操作！',
+                  type: 'success',
+                  duration: 2000,
+                  dangerouslyUseHTMLString: true,
+                });
+                this.$nextTick(()=>{
+                  if(res.code == 200){
+                    this.$notify({
+                      title: '关键点信息上传成功，即将刷新页面！',
+                      type: 'success',
+                      duration: 2000,
+                      dangerouslyUseHTMLString: true,
+                    });
+                    setTimeout(function (){
+                      window.location.reload();
+                    },2000);
+                  }
+                })
+              })
+            }
           }
         }else if(way == 'edit'){
           let lastData = {};
@@ -158,9 +223,9 @@
                   duration: 2000,
                   dangerouslyUseHTMLString: true,
                 });
-                // setTimeout(function (){
-                //   window.location.reload();
-                // },2000);
+                setTimeout(function (){
+                  window.location.reload();
+                },2000);
               }
             })
           })
@@ -184,7 +249,7 @@
         map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
         this[`map${this.mapKey}`] = map
         
-        //围栏回显
+        //关键点显示
         that.zuobianData.forEach(function(item,index){
           var graphicLayer = new mars3d.layer.GraphicLayer();
           map.addLayer(graphicLayer);
@@ -193,6 +258,14 @@
           that.addDemoGraphic1(graphicLayer,item);
         })
 
+        //画线
+        that.lineData.forEach(function(item,index){
+          var graphicLayer = new mars3d.layer.GraphicLayer();
+          map.addLayer(graphicLayer);
+          initLayerManager(graphicLayer);
+          that.addDemoGraphic2(graphicLayer,item);
+        })
+
         // 抛出事件
         this.$emit('onload', map)
       },
@@ -212,6 +285,28 @@
         })
         graphicLayer.addGraphic(graphic)
       },
+      //画线
+      addDemoGraphic2(graphicLayer,item) {
+        const graphic = new mars3d.graphic.PolylineEntity({
+          positions: [item.start,item.end],
+          style: {
+            width: 6,
+            materialType: mars3d.MaterialType.PolylineOutline,
+            color: Cesium.Color.ORANGE,
+            outlineWidth: 2,
+            outlineColor: Cesium.Color.BLACK,
+            label: {
+              text: item.text,
+              font_size: 18,
+              color: "black",
+              distanceDisplayCondition: true,
+              distanceDisplayCondition_far: 500000,
+              distanceDisplayCondition_near: 0
+            }
+          },
+        })
+        graphicLayer.addGraphic(graphic)
+      },
       //关键点设置
       btnStartDraw(){
         this.toJavaCoordinates = [];
@@ -220,7 +315,7 @@
         graphicLayer3.on(mars3d.EventType.click, function (event) {
           var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
           that.toJavaCoordinates.push(mpt.toString().split(','));
-          console.log(that.toJavaCoordinates);
+          //console.log(that.toJavaCoordinates);
         });
         map.addLayer(graphicLayer3);
         initLayerManager(graphicLayer3);

src/views/regionalManagement/regionalPathMap/index.vue

@@ -27,7 +27,7 @@
                 <img src="../../../assets/images/cutGraph/zhuangchedian1.png" height="25" style="vertical-align: -7px;">
                 <span>装车点</span>
               </span>
-              <el-cascader v-model="entruckingValue1" :options="entruckingData" placeholder="请选择装车点名称"></el-cascader>
+              <el-cascader v-model="entruckingValue1" :options="entruckingData" placeholder="请选择装车点名称" :disabled="transmitWay == 'edit'"></el-cascader>
               <div class="button-box">
                 <el-button size="mini" type="primary" @click="entruckingServeFn()">保存</el-button>
                 <el-button size="mini" type="danger" icon="el-icon-delete" @click="entruckingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
@@ -39,16 +39,23 @@
                 <span>控制点</span>
               </span>
               <label class="el-form-item-label" style="font-weight: 500">控制点名称</label>
-              <el-input v-model="controlPointValue3" clearable size="small" placeholder="请输入控制点名称" style="width: 180px"/>
+              <el-input v-model="controlPointValue3" clearable size="small" placeholder="请输入控制点名称" style="width: 180px" :disabled="transmitWay == 'edit'"/>
               <div style="margin:1vh 0px 1vh;">选择连接的控制点</div>
               <div class="connectPointView">
-                <el-checkbox-group v-model="selectConnectPointArray" @change="checkboxFn">
-                  <el-checkbox v-for="(item,index) in controlPointData" :label="item.name" :key="index" style="margin-bottom:10px;">
-                    <div style="width:5vw;text-align: center;font-size: 15px;">
-                      {{item.name}}
-                    </div>
-                  </el-checkbox>
-                </el-checkbox-group>
+                <div class="connectPointView_son1">
+                  <el-checkbox-group v-model="selectConnectPointArray">
+                    <el-checkbox v-for="(item,index) in controlPointData" :label="item.end" :key="index" style="margin-bottom:10px;">
+                      <div style="font-size: 15px;">
+                        {{item.end}}
+                      </div>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+                <div class="connectPointView_son2">
+                  <div v-for="(item,index) in controlPointData" :key="index">
+                    <input type="number" style="width:3vw;margin-bottom:4.2px;" min="0" v-model="item.weight">分钟
+                  </div>
+                </div>
               </div>
               <div>
                 <el-button size="mini" type="primary" @click="controlPointServeFn()">保存</el-button>
@@ -60,7 +67,7 @@
                 <img src="../../../assets/images/cutGraph/xiechedian1.png" height="25" style="vertical-align: -7px;">
                 <span>卸车点</span>
               </span>
-              <el-cascader v-model="detrainingValue2" :options="detrainingData" placeholder="请选择卸车点名称"></el-cascader>
+              <el-cascader v-model="detrainingValue2" :options="detrainingData" placeholder="请选择卸车点名称" :disabled="transmitWay == 'edit'"></el-cascader>
               <div class="button-box">
                 <el-button size="mini" type="primary" @click="detrainingServeFn()">保存</el-button>
                 <el-button size="mini" type="danger" icon="el-icon-delete" @click="detrainingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
@@ -179,7 +186,14 @@ export default {
       //获取各个点的数据
       HttpReq.truckDispatching.apiCpointQuery({size:9999}).then((res) => {
 				if(res.code == 200){
-					this.controlPointData = res.data.content;
+          let arr1 = [];
+          res.data.content.forEach((item,index)=>{
+            let obj1 = {};
+            obj1.end = item.name;
+            obj1.weight = 0;
+            arr1.push(obj1);
+          })
+          this.controlPointData = arr1;
           this.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content);
 				}
 			})
@@ -197,6 +211,9 @@ export default {
     addKeyPoints(){
       this.transmitWay = 'add';
       this.addKeyPointsAble = true;
+      this.entruckingValue1 = [];
+      this.detrainingValue2 = [];
+      this.controlPointValue3 = '';
       this.$refs.mars3dViewerMapMethod.btnStartDraw();
     },
     //保存装点
@@ -262,7 +279,26 @@ export default {
 					duration: 2500
 				})
       }else{
-        this.$refs.mars3dViewerMapMethod.uploaded(this.controlPointValue3,'控制点',this.transmitWay);
+        if(this.transmitWay == 'add'){
+          let arr1 = [];
+          this.selectConnectPointArray.forEach((item,index)=>{
+            this.controlPointData.forEach((item1,index1)=>{
+              if(item == item1.end){
+                let obj1 = {};
+                obj1.start = this.controlPointValue3;
+                obj1.end = item1.end;
+                obj1.weight = item1.weight;
+                arr1.push(obj1);
+                return;
+              }
+            })
+          })
+          this.$nextTick(()=>{
+            this.$refs.mars3dViewerMapMethod.uploaded(this.controlPointValue3,'控制点',this.transmitWay,arr1);
+          })
+        }else{
+
+        }
       }
     },
     //删除控制点
@@ -293,6 +329,45 @@ export default {
       }else{
         this.activeName = 'second';
         this.controlPointValue3 = item.name;
+        let arr1 = [];
+        //重置所有连接点时间为0
+        this.controlPointData.forEach((items,indexs)=>{
+          this.controlPointData[indexs].weight = 0;
+        })
+        //获取已该点为起点的数据
+        HttpReq.truckDispatching.apiPathmapQuery({size:9999,start:this.controlPointValue3}).then((res) => {
+          if(res.code == 200){
+            res.data.content.forEach((item2,index)=>{
+              let obj1 = {};
+              obj1.end = item2.end;
+              obj1.weight = item2.weight;
+              arr1.push(obj1);
+            });
+            //获取已该点为终点的数据
+            HttpReq.truckDispatching.apiPathmapQuery({size:9999,end:this.controlPointValue3}).then((res1) => {
+              if(res1.code == 200){
+                res1.data.content.forEach((item1,index1)=>{
+                  let obj2 = {};
+                  obj2.end = item1.start;
+                  obj2.weight = item1.weight;
+                  arr1.push(obj2);
+                });
+                //刷新展示连接点数据
+                let arr2 = [];
+                arr1.forEach((item3,index3)=>{
+                  arr2.push(item3.end);
+                  this.controlPointData.forEach((item4,index4)=>{
+                    if(item3.end == item4.end){
+                      this.controlPointData[index4].weight = item3.weight;
+                    }
+                  })
+                })
+                this.selectConnectPointArray = arr2;
+              }
+            })
+          }
+        })
+        
       }
     },
     handleClick1(tab, event){
@@ -300,11 +375,13 @@ export default {
         this.entruckingValue1 = [];
         this.detrainingValue2 = [];
         this.controlPointValue3 = '';
+        this.transmitWay = 'add';
+        this.selectConnectPointArray = [];
+        this.controlPointData.forEach((items,indexs)=>{
+          this.controlPointData[indexs].weight = 0;
+        })
       }
     },
-    checkboxFn(){
-      console.log(this.selectConnectPointArray);
-    },
     // 地图构造完成回调
 		onMapload(map) {
 			// 以下为演示代码
@@ -378,7 +455,6 @@ export default {
       }
     }
     .ctin-box {
-      width: 1700px;
       height: 300px;
       //background: red;
       display: flex;
@@ -415,6 +491,8 @@ export default {
   margin-bottom: 10px;
 }
 .connectPointView{
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 1vh;
   border-radius: 5px;
   border: 1px solid gainsboro;
@@ -424,6 +502,12 @@ export default {
   box-sizing: border-box;
   overflow-y: scroll;
 }
+.connectPointView_son1{
+  width: 49%;
+}
+.connectPointView_son2{
+  width: 49%;
+}
 .checkboxViews {
   padding-left: 10px;
   box-sizing: border-box;