9、10月份修改内容

package.json

@@ -5,13 +5,14 @@
   "author": "yubaolee <yubaolee@163.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "dev": "vue-cli-service serve --mode dev",
+    "dev": "vue-cli-service serve --mode dev && webpack-dev-server --open",
     "build": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@easydarwin/easyplayer": "^5.1.1",
     "@geoman-io/leaflet-geoman-free": "^2.11.2",
+    "@mapbox/mapbox-gl-draw": "^1.4.1",
     "@packy-tang/vue-tinymce": "^2.0.0-beta.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@tinymce/tinymce-vue": "^3.0.1",
@@ -34,6 +35,7 @@
     "leaflet.chinatmsproviders": "^3.0.4",
     "leaflet.markercluster": "^1.5.0",
     "mapbox-gl": "^2.15.0",
+    "mapbox-gl-draw-snap-mode": "^0.2.0",
     "mars3d": "^3.0.13",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
@@ -68,7 +70,8 @@
     "sass-loader": "^7.3.1",
     "strip-pragma-loader": "^1.0.0",
     "svg-sprite-loader": "^5.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "webpack-dev-server": "^5.1.0"
   },
   "eslintConfig": {
     "root": true,

public/config/app.json

@@ -35,7 +35,7 @@
             "center":[],
             "zoom":null
         },
-        "waterUrl":"http://223.99.16.253:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1686208018&maxFeatures=50000&outputFormat=application%2Fjson",
+        "waterUrl":"http://223.99.16.253:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ahebingshuiyuandibeibushan&maxFeatures=50000&outputFormat=application%2Fjson",
         "goodsUrl":"",
         "tools":{
             "routebox":true,

src/components/CreatedFlow/modules/FlowAttr.vue

@@ -229,7 +229,6 @@ export default {
 	},
 	mounted() {
 		this.currentSelect = Object.assign({}, this.currentSelectData)
-		debugger;
 		this.Compares = this.currentSelect.Compares
 	},
   methods: {

src/components/mars3d/Map.vue

@@ -83,35 +83,103 @@ export default {
               item.children.forEach((it, idx) => {
 
                 let attribute = JSON.parse(it.attribute);
-                if(attribute.name == '森林火灾危险等级'){
-                  attribute.type = "geojson";
-                  attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Aweixianxingdengji&maxFeatures=50&outputFormat=application%2Fjson"
-                  // attribute.symbol.styleOptions = {}
-                  delete attribute.layers;
+
+                // 处理根据字段分类渲染样式的图层
+                if(attribute && attribute.symbol && attribute.symbol.styleField && attribute.symbol.styleFieldOptions && Object.keys(attribute.symbol.styleFieldOptions).length>0){
+                  // console.log(attribute.layers,attribute)
+                  attribute.type = 'geojson';
+                  if(attribute.layers){
+                    attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
+                  }
+                  
+                  // delete attribute.layers;
                   delete attribute.parameters;
                   delete attribute.highlight;
-                  attribute.symbol.styleOptions =  {
-                        "opacity": 0.8,
-                        "color": "",
-                        "width": 2,
-                        "clampToGround": true
-                      }
+                  console.log("图层属性信息:",attribute.url,attribute);
+                
+
+                 if(!attribute.symbol.styleOptions){
+                    attribute.symbol.styleOptions =  {
+                      "opacity": 0.8,
+                      "color": "",
+                      "width": 2,
+                      "clampToGround": true
+                    }
+                 }
                   attribute.zIndex = 10000000000;
                 }
-                if(attribute.name == '引水上山水管网'){
-                  attribute.type = "geojson";
-                  attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ayinshuishangshanshuiguanwang&maxFeatures=100000&outputFormat=application%2Fjson";
-                  delete attribute.layers;
-                  delete attribute.parameters;
-                  delete attribute.highlight;
-                  attribute.symbol.styleOptions =  {
-                        "opacity": 0.8,
-                        "color": "",
-                        "width": 2,
-                        "clampToGround": true
+                
+                // configLayers.unshift({
+                //     "pid": 3030,
+                //     "type": "geojson",
+                //     "name": "动态道路线",
+                //     "url": "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Abeibudaolufenlei&maxFeatures=1000000&outputFormat=application%2Fjson",
+                //     symbol: {
+                //       type: "polyline",
+                //       styleOptions: {
+                //         clampToGround:true,
+                //         width: 5,
+                //         materialType: mars3d.MaterialType.LineFlow,
+                //         materialOptions: {
+                //           color: Cesium.Color.CHARTREUSE,
+                //           image: "img/textures/line-color-yellow.png",
+                //           speed: 8
+                //         }
+                //       }
+                //     },
+                //     "show": false,
+                //     "flyTo": false
+                // })
+                if(attribute.dynamic){
+                    attribute.type = 'geojson';
+                    if(attribute.layers){
+                      attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
+                      attribute.symbol = {
+                        type: "polyline",
+                        styleOptions: {
+                          clampToGround:true,
+                          width: 5,
+                          materialType: mars3d.MaterialType.LineFlow,
+                          materialOptions: {
+                            color: Cesium.Color.CHARTREUSE,
+                            image: "img/textures/line-color-yellow.png",
+                            speed: 8
+                          }
+                        }
                       }
-                  attribute.zIndex = 10000000000;
-                } 
+                    }
+                }
+                // if(attribute.name == '森林火灾危险等级'){
+                //   attribute.type = "geojson";
+                //   attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Aweixianxingdengji&maxFeatures=50&outputFormat=application%2Fjson"
+                //   // attribute.symbol.styleOptions = {}
+                //   delete attribute.layers;
+                //   delete attribute.parameters;
+                //   delete attribute.highlight;
+                //   attribute.symbol.styleOptions =  {
+                //         "opacity": 0.8,
+                //         "color": "",
+                //         "width": 2,
+                //         "clampToGround": true
+                //       }
+                //   attribute.zIndex = 10000000000;
+                // }
+                // if(attribute.name == '引水上山水管网'){
+                //   attribute.type = "geojson";
+                //   attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ayinshuishangshanshuiguanwang&maxFeatures=100000&outputFormat=application%2Fjson";
+                //   delete attribute.layers;
+                //   delete attribute.parameters;
+                //   delete attribute.highlight;
+                //   attribute.symbol.styleOptions =  {
+                //         "opacity": 0.8,
+                //         "color": "",
+                //         "width": 2,
+                //         "clampToGround": true
+                //       }
+                //   attribute.zIndex = 10000000000;
+                // } 
+                
+                // 设置标签文字偏移量
                 if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
                   attribute.symbol.styleOptions.label.pixelOffsetY = -40
                   let oldText = attribute.symbol.styleOptions.label.text;
@@ -134,7 +202,42 @@ export default {
 
                 // 去掉所有图层点击选中样式
                 delete attribute.highlight;
+
+                // 如果不为空
                 if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label && attribute.symbol.styleOptions.label.text){
+                  /**
+                   * 图标标题显示情况：
+                    key：字段中文名称，value：字段英文名称
+                    * 1. key:value
+                    * 2. key:value@key:value
+                    * 3. key:value@,@key:value
+                    * 4. @value
+                    * 5. @value1@value2
+                    * 6. @value1@,@value2
+                    * 7. key:value1@value2
+                   * */ 
+                  let text = "";
+                  if(attribute.symbol.styleOptions.label.text.match("@")){
+                    let arr = attribute.symbol.styleOptions.label.text.split("@");
+                    if(arr.length>0){
+                      arr.forEach((item,index)=>{
+                        if(item.match(":")){
+                          let garr = item.split(":")
+                          text = text+garr[0]+":{"+garr[1]+"}"
+                        }else if(item.length==1){
+                          text = text+item
+                        }else if(item.length>1){
+                          text = text+"{"+item+"}"
+                        }
+                      })
+                    }
+                  }else if(attribute.symbol.styleOptions.label.text.length>1 && attribute.symbol.styleOptions.label.text.match(":") ){
+                    let garr = attribute.symbol.styleOptions.label.text.split(":")
+                    text = text+garr[0]+":{"+garr[1]+"}"
+                  }else if(attribute.symbol.styleOptions.label.text.length>1 && !attribute.symbol.styleOptions.label.text.match(":")){
+                    text = "{"+attribute.symbol.styleOptions.label.text+"}";
+                  }
+                  attribute.symbol.styleOptions.label.text = text;
                 }
                 let ipinfo = this.matchHttpIpPort(attribute.url);
                 if(ipinfo){ // 如果匹配得到则替换为配置文件中的
@@ -151,7 +254,7 @@ export default {
               });
             }
           });
-
+          
           data.map3d.layers = configLayers
           this.initMars3d(data.map3d);
         });

src/store/modules/permission.js

@@ -164,7 +164,7 @@ const permission = {
           moveDeepLevelToSec(router)
         })
 
-        // todo:可以用最流氓的方法，全部转为一维数组😂
+        // todo:可以用最流氓的方法，全部转为一维数组😂 ← 牛13 666
         // var arr=[];
         // const getAllItemsPerChildren = item => {
         //   arr.push(item);

src/views/home/index.vue

@@ -117,6 +117,9 @@
     </div>
     <!-- 图例 -->
     <div class="legendBox" v-if="findsourceShow" v-drag>
+      <div class="fanghuoziyuan-box" v-if="!aroundBoxVisible" @click="aroundBoxVisible = !aroundBoxVisible">
+        <i class="el-icon el-icon-news"></i>
+      </div>
       <div class="legend-title">图  例</div>
       <div class="legend-container flex">
         <div class="flex-1 flex column fc-w fz-14 jc-c">
@@ -142,11 +145,17 @@
     <!-- 路网 -->
     <roadCheckBox v-show="findsourceShow" :visible="findsourceShow" :gridMap1="aroundArr[3].status" :gridMap2="aroundArr[4].status" :gridMap3="aroundArr[5].status"></roadCheckBox>
  
-    <div class="water-container" v-if="findsourceShow" v-drag>
+    <div class="water-container" v-if="findsourceShow" :style="{'display':aroundBoxVisible ?'block':'none'}" v-drag >
       <div class="box-name">防灭火资源</div>
+
       <div class="close-button" @click="aroundClose">
         <i class="el-icon el-icon-close"></i>
       </div>
+
+      <div class="small-button" @click="aroundVisible">
+        <i class="el-icon el-icon-minus"></i>
+      </div>
+
       <div class="around-box flex">
         <div class="around-label">地图显示：</div>
         <div v-for="(item,index) in aroundArr" :key="index" class="box-name-li" @click="aroundCheckClick(index)">
@@ -235,6 +244,7 @@
       <!-- 视频巡航 -->
       <div class="rightbox1" v-if="finishLoadMap">
         <div class="allMonitorButton" @click="allMonitorShow = true">视频监控</div>
+        <div class="allUavButton" @click="uavListShow = true">无人机列表</div>
         <uavbox></uavbox>
       </div>
     </div>
@@ -247,6 +257,10 @@
     <!-- 展开收起两边弹窗按钮 -->
     <div class="diatoggleBtn" id="diatoggleBtn" @click="diaToggle"></div>
 
+    <!-- 路线导航 -->
+    <div id="routeNavigation" @click="findwayVisible = !findwayVisible;">
+      路线导航
+    </div>
     <!-- 火情上报 -->
     <!-- <div class="report" v-if="appTools['reportbox']">
           <reportbox @getAllReportList="getAllReportList"></reportbox>
@@ -307,6 +321,30 @@
       <Onlineuserbox ></Onlineuserbox>
     </div>
 
+    <!-- 路线导航弹窗 -->
+    <div class="find-way-outer-container" v-drag  v-show="findwayVisible">
+      <div class="close-button" style="margin-right: 5px; z-index: 9999" @click="findwayVisible = false;" >
+        <i class="el-icon el-icon-close"></i>
+      </div>
+      <FindWay :close="findwayVisible"></FindWay>
+    </div>
+
+    <!-- 无人机实时视频 -->
+    <div class="real-time-video-container" v-drag v-if="uavListShow">
+      <div class="close-button" style="margin-right: 5px; z-index: 9999" @click="uavListShow = false;" >
+        <i class="el-icon el-icon-close"></i>
+      </div>
+      <RealTimeVideo v-if="uavListShow" ></RealTimeVideo>
+    </div>
+
+    <!-- 铁塔视频监控 -->
+    <div class="tieta-monitor-container" v-drag v-if="tietaMonitorShow">
+      <div class="close-button" style="margin-right: 5px; z-index: 9999" @click="tietaMonitorShow = false;" >
+        <i class="el-icon el-icon-close"></i>
+      </div>
+      <TieTaMonitor v-if="tietaMonitorShow" :playUrl="tietaPlayUrl" :channel="tietaPlayChannel"></TieTaMonitor>
+    </div>
+
     <!-- 查找周边条件筛选弹窗 -->
     <!-- <div class="find-source" v-drag v-if="findsourceShow">
       <div class="close-button" @click="findsourceShow=false;" style="width:30px;height:30px;line-height:28px;position:absolute;top:-30px;right:-20px;border-radius: 50%;font-weight:bold;border:2px solid #23DBEC;background: none; z-index: 9999;color:#23DBEC;" >
@@ -361,6 +399,7 @@
       <mulHKmonitor :deviceId="hkMulDeviceIds"></mulHKmonitor>
     </div>
   </div>
+
 </template>
 
 <script>
@@ -379,6 +418,7 @@ import Uavbox from "./widget/uavbox.vue";
 import toolbox from "./widget/toolbox.vue";
 import monitorbox from "./widget/monitorbox.vue";
 import mulHKmonitor from "./widget/mulHKmonitor.vue";
+import FindWay from './widget/findway.vue'
 
 import waterbox from "./widget/waterbox.vue";
 // import reportbox from './widget/reportbox.vue'
@@ -402,7 +442,6 @@ import jQuery from "jquery";
 import mergebox from "./widget/mergebox.vue";
 import rightclicksetting from "./widget/rightclick.vue";
 
-
 import callCenter from "./widget/callcenter.vue";
 // import fireClues from './widget/fireclues.vue';
 import rightEchartsData from "./widget/rightechartsdata.vue";
@@ -422,6 +461,15 @@ import findsourceitem from './widget/findsourceitem.vue'
 
 import { isJson } from "../../utils/index";
 
+// 天气
+import {getWeather,getWindDegree} from './lib/getWeather'
+
+// 无人机实时监控
+import RealTimeVideo from './widget/realTimeVideo.vue'
+
+// 铁塔视频监控
+import TieTaMonitor from './widget/tietamonitor.vue'
+
 let BASE_URL = process.env.VUE_APP_BASE_API;
 const areaName = localStorage.getItem("areaName");
 export default {
@@ -460,7 +508,10 @@ export default {
     earlyWarningBox,
     monitorEarlyWarningBox,
     // findsource,
-    findsourceitem
+    findsourceitem,
+    FindWay,
+    RealTimeVideo,
+    TieTaMonitor
   },
 
   data() {
@@ -496,6 +547,11 @@ export default {
       LCmonitorboxShow: false,
       HKmonitorboxShow: false,
       onlineUserBoxShow: false,
+      findwayVisible:false,
+      tietaMonitorShow:false,
+      uavListShow:false,
+      tietaPlayUrl:"",
+      tietaPlayChannel:"",
       deviceId: null,
       channelId: null,
       checkList: [],
@@ -541,8 +597,8 @@ export default {
       hkMulDeviceIds:null,
       aroundArr:[
         { name: '水源' , status: true },
-        { name: '物资' , status: false },
-        { name: '营房' , status: false },
+        { name: '物资' , status: true },
+        { name: '营房' , status: true },
         { name: '防火通道' , status: true },
         { name: '三轮通道' , status: false },
         { name: '步行道' , status: false }
@@ -566,6 +622,8 @@ export default {
       importantServeArr:[],
       importantservecheckList:[],
       firePointLngLat:null,
+      weatherGraphicLayer:null,
+      aroundBoxVisible:false,
     };
   },
 
@@ -723,7 +781,7 @@ export default {
       this.waterVisible = true
       this.goodsVisible = true
       this.barrackVisible = true
-      
+      this.aroundBoxVisible = true;
       setTimeout(()=>{
         this.aroundIndex = index
       },500)
@@ -735,11 +793,15 @@ export default {
         }
       })
     },
+    aroundVisible(){
+      this.aroundBoxVisible = false;
+    },
     aroundClose(){
       this.waterVisible = false
       this.goodsVisible = false
       this.barrackVisible = false
       
+      
       setTimeout(()=>{
         this.findsourceShow = false
       },100)
@@ -997,6 +1059,7 @@ export default {
       if (this.callCenterVisible) {
         // 右侧隐藏
         document.getElementById("diatoggleBtn").style.right = "25px";
+        document.getElementById("routeNavigation").style.right = "25px";
         document.getElementById("footer").style.right = "25px";
         document.getElementById("search-box").style.left = "105px";
         document.getElementById("toolBarRightTogg").style.right = "25px";
@@ -1005,6 +1068,7 @@ export default {
       } else {
         // 右侧显示
         document.getElementById("diatoggleBtn").style.right = "462px";
+        document.getElementById("routeNavigation").style.right = "500px";
         document.getElementById("footer").style.right = "460px";
         document.getElementById("search-box").style.left = "575px";
         document.getElementById("toolBarRightTogg").style.right = "500px";
@@ -1323,6 +1387,7 @@ export default {
             this.callCenterVisible = true;
             this.rightDiaVisible = true
             this.toolsShow = true
+            this.aroundBoxVisible = true;
             this.diaToggle()
           },
           // children: [
@@ -1432,6 +1497,25 @@ export default {
             //   }
             // }
           ],
+        },{
+          text: "气象信息",
+          show: function (e) {
+            return Cesium.defined(e.cartesian);
+          },
+          callback: (e) => {
+            const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
+            let position = {
+              lng: mpt._lng,
+              lat: mpt._lat,
+            };
+            console.log("气象信息",position);
+            getWeather().then((res)=>{
+              if(res){
+                res.position = [mpt._lng,mpt._lat];
+                _self.handlerAddWeatherGraphic(res);
+              }
+            })
+          }
         },
       ];
       map.bindContextMenu(mapContextmenuItems);
@@ -1440,6 +1524,7 @@ export default {
       _self.getFirePointList();
 
     },
+  
 
     //监听点击图层事件
     handlerlistenPopup(map) {
@@ -1575,6 +1660,21 @@ export default {
         );
         return;
       }
+
+      if(layerName == '铁塔监控'){
+        console.log("event.graphic.options.attr", event.graphic.options.attr.number2);
+        if(event.graphic.options.attr.url_1 && event.graphic.options.attr.channel){
+          this.tietaPlayUrl = event.graphic.options.attr.url_1;
+          this.tietaPlayChannel = event.graphic.options.attr.channel;
+          this.tietaMonitorShow = true;
+        }else{
+          this.$message({
+            type:"error",
+            message:"信息待完善"
+          })
+        }
+        return;
+      }
       
       
       // 其他图层
@@ -1611,7 +1711,7 @@ export default {
       // 图层信息编辑相关
       if(clickType== 'graphicClick'){
         let url = event.layer.options.url;
-        this.editData = event.graphic.options.attr;
+        this.editData = event.graphic?.options?.attr;
         this.currentGraphic = event.graphic;
         this.tableName =url ? url.match(/shp_[0-9]+/)[0] : null;
         this.showFields = event.layer.options.popup;
@@ -1703,6 +1803,104 @@ export default {
         this.HKmonitorboxShow = true;
       }
     },
+    // 添加气象信息图斑
+    handlerAddWeatherGraphic(info){
+      if(this.weatherGraphicLayer==null){
+        this.weatherGraphicLayer = new mars3d.layer.GraphicLayer()
+        window.globalmap.addLayer(this.weatherGraphicLayer)
+        // 绑定点击事件，用于删除图标
+        let _this = this;
+        this.weatherGraphicLayer.bindContextMenu([
+            {
+                text: "删除",
+                icon: "fa fa-trash-o",
+                show: (event) => {
+                    const graphic = event.graphic
+                    if (!graphic || graphic.isDestroy) {
+                      return false
+                    } else {
+                      return true
+                    }
+                },
+                callback: (e) => {
+                    const graphic = e.graphic
+                    if (!graphic) {
+                      return
+                    }
+                    const parent = graphic.parent // 右击是编辑点时
+
+                    let graphic_wind_info = _this.weatherGraphicLayer.getGraphicById(graphic.id+"_info");
+                      console.log("graphic_wind_info",graphic_wind_info);
+                      _this.weatherGraphicLayer.removeGraphic(graphic_wind_info);
+                 
+
+                    _this.weatherGraphicLayer.removeGraphic(graphic)
+                    if (parent) {
+                        _this.weatherGraphicLayer.removeGraphic(parent)
+                    }
+                }
+            }
+        ])
+      }
+
+      let uuid = (Math.random()*10000000).toFixed(0);
+
+      let  graphic_wind = new mars3d.graphic.RectanglePrimitive({
+        id:"graphic_wind_"+uuid,
+        positions: [
+          info.position,
+          [info.position[0]-0.001, info.position[1]-0.001],
+        ],
+        offsetHeight:100,
+        style: {
+          materialType: mars3d.MaterialType.Image,
+          materialOptions: {
+            image:"/img/weather_icon/wind_three.png",
+            font_size: 70,
+            color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
+            stroke: true,
+            strokeWidth: 10,
+            strokeColor: new Cesium.Color(1.0, 1.0, 1.0, 0.8)
+          },
+          rotationDegree:getWindDegree(info.win),
+          clampToGround: true
+        },
+        attr: { remark: "示例4" }
+      })
+      
+      // let graphic_wind = new mars3d.graphic.BillboardPrimitive({
+      //   position: info.position, // 图标位置
+      //   style: {
+      //     image: "/img/weather_icon/wind_one.png", // 图标路径
+      //     scale: 1.0, // 缩放比例
+      //     rotation:getWindDegree(info.win),
+      //     alignedAxis: Cesium.Cartesian3.ZERO, // 锁定图标不随视角旋转
+      //     disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被遮挡
+      //     clampToGround:true,  // 贴地
+      //   },
+      // });
+
+      let graphic = new mars3d.graphic.DivGraphic({
+        id:"graphic_wind_"+uuid+"_info",
+        position: info.position,
+        style: {
+          html: `<h1 style="color:#eee;font-size:14px;">
+            <img src="/img/weather_icon/${info.wea_img}.png" style="width:24px;height:24px;" />
+            ${info.win},${info.win_speed},${info.win_meter}</h1>`,
+          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
+          disableDepthTestDistance:Number.POSITIVE_INFINITY,
+          clampToGround: true,
+          eyeOffset:new Cesium.Cartesian3(0, 0, -5000),
+        },
+        attr: { remark: "示例9" },
+        pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+      })
+      this.weatherGraphicLayer.addGraphic(graphic);
+      this.weatherGraphicLayer.addGraphic(graphic_wind);
+    }
   },
   destroyed() {
     // 隐藏图层按钮
@@ -1871,11 +2069,12 @@ export default {
 }
 
 .task {
-  width: 480px;
-  height: calc(100vh - 750px);
+  width: 540px;
+  height:480px;
   position: absolute;
   right: 450px;
   top: 300px;
+  z-index:100;
 }
 
 .tools-box {
@@ -2007,6 +2206,19 @@ export default {
   font-weight: bold;
   width: 20px;
   height: 20px;
+  background: #0abfb573;
+  line-height: 20px;
+  text-align: center;
+}
+.small-button{
+  position: absolute;
+  right: 52px;
+  top: 14px;
+  cursor: pointer;
+  color: #fff;
+  font-weight: bold;
+  width: 20px;
+  height: 20px;
   background: #0abfb5cc;
   line-height: 20px;
   text-align: center;
@@ -2165,6 +2377,19 @@ export default {
   cursor: pointer;
   z-index:99999;
 }
+.allUavButton{
+  width:100px;
+  height:60px;
+  float:right;
+  line-height:50px;
+  position:absolute;
+  top:0px;
+  right:120px;
+  font-size:18px;
+  color:#fff;
+  cursor: pointer;
+  z-index:99999;
+}
 
 .rightbox2 {
   height: 33%;
@@ -2208,6 +2433,23 @@ export default {
   z-index: 9;
   cursor: pointer;
 }
+#routeNavigation{
+  width: 172px;
+  height: 58px;
+  background-image: url(/img/tool-button-bg.png);
+  background-size: 100% 100%;
+  position: absolute;
+  right: 500px;
+  top: 304px;
+  z-index: 9;
+  cursor: pointer;
+  text-align: center;
+  color: #e9e9e9;
+  line-height: 58px;
+}
+#routeNavigation:hover{
+  text-decoration: underline;
+}
 
 .one-button-container {
   width: 1000px;
@@ -2229,6 +2471,35 @@ export default {
   z-index: 100;
 }
 
+.find-way-outer-container{
+  width: 450px;
+  height: 360px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+
+.real-time-video-container{
+  width:800px;
+  height: 500px;
+  position:absolute;
+  z-index: 100;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
+
+.tieta-monitor-container{
+  width:500px;
+  height: 360px;
+  position:absolute;
+  z-index: 100;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
 .trajectory-box{
   width: 420px;
   height: 400px;
@@ -2442,6 +2713,17 @@ export default {
   top: 630px;
   left: 20px;
 }
+.fanghuoziyuan-box{
+  position: absolute;
+  left:12px;
+  padding:4px 8px;
+  top:8px;
+  background: #127777;
+  color:#fff;
+  text-align: center;
+  border-radius: 4px;
+}
+
 .legend-title{
   font-size: 22px;
   font-family: PingFangSC, PingFang SC;

src/views/home/lib/getWeather.js

@@ -0,0 +1,54 @@
+import axios from 'axios'
+
+export const getWeather = ()=>{
+    return new Promise((resolve,reject)=>{
+        try{
+            // 易客云天气API http://yiketianqi.com/
+            axios({
+                method: 'get',
+                // url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
+                url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
+            }).then((res) => {
+                resolve(res.data);
+            }).catch(e=>{
+                reject(null);
+            });
+        }catch(e){
+            reject(null);
+        }
+    })
+}
+
+export const getWindDegree = (type)=>{
+    let degree = 0;
+    switch(type){
+        case "东风":
+            degree = 90;
+            break;
+        case "南风":
+            degree = 0;
+            break;
+        case "西风":
+            degree = 270;
+            break;
+        case "北风":
+            degree = 180;
+            break;
+        case "东北风":
+            degree = 135;
+            break;
+        case "东南风":
+            degree = 45;
+            break;
+        case "西北风":
+            degree = 225;
+            break;
+        case "西南风":
+            degree = 315;
+            break;
+        default:
+            degree = null;
+            break;
+    }
+    return degree;
+}

src/views/home/lib/routePath.js

@@ -17,6 +17,8 @@ let pathRoadGraphicLayers = null
 let pathRoadGraphicLayers1 = null
 let pathRoadGraphicLayers2 = null
 
+
+
 //导航寻路
 export const getRouterFunc = (params, method = 'postgis') => {
     /**
@@ -183,17 +185,17 @@ export const getRouterByPostGis = (params) => {
                 if (LineString == null || LineString == "null") {
                     //没有找到路线，返回空
                     console.log('PostGIS未找到合适了路线')
-                    // resolve(parse(null))
+                    resolve(parse(null))
                 } else {
                     resolve(parse(LineString))
                 }
             } else {
                 console.log('PostGIS未找到合适了路线')
-                // resolve(parse(null))
+                resolve(parse(null))
             }
         }).catch(err => {
             console.log('PostGIS寻路算法服务端错误')
-            // resolve(parse(null))
+            resolve(parse(null))
         })
     })
 }
@@ -667,4 +669,63 @@ const getMultPointCoordinatesFromGeoJson = (geojson) => {
     return geojson.features.map(feature => {
         return feature.geometry.coordinates
     })
+}
+
+
+
+// 全局漫游
+let carGraphicEntity = null;
+let carGraphicLayer = null;
+
+export const handlerStartRoaming = (coordinates,roaming=true)=>{
+    if(carGraphicLayer == null){
+        carGraphicLayer = new mars3d.layer.GraphicLayer();
+        window.globalmap.addLayer(carGraphicLayer);
+    }else{
+        carGraphicLayer.clear();
+    }
+
+    carGraphicEntity = new mars3d.graphic.FixedRoute({
+        name: "步行路线",
+        frameRate: 1,
+        speed: 500,
+        autoStop: false, // 到达终点自动停止
+        clockLoop: true, // 循环播放
+        positions: coordinates,
+        pauseTime: 0,
+        camera: {
+            type: "gs",
+            radius: 2500
+        },
+        model: {
+            // url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf",
+            url:"/cartoon_fire_truck/xiaofangche.gltf",
+            scale: 5,
+            minimumPixelSize: 50,
+            clampToGround: true
+        },
+        circle: {
+            radius: 10,
+            materialType: mars3d.MaterialType.CircleWave,
+            materialOptions: {
+                color: "#ffff00",
+                opacity: 0.3,
+                speed: 10,
+                count: 3,
+                gradient: 0.1
+            },
+            clampToGround: true
+        }
+    })
+    carGraphicLayer.addGraphic(carGraphicEntity)
+    // 开始漫游
+    carGraphicEntity.enabled = roaming;
+    carGraphicEntity.start()
+}
+
+export const handlerStopRoaming = ()=>{
+    if(carGraphicEntity){
+        carGraphicLayer.removeGraphic(carGraphicEntity);
+        carGraphicEntity = null;
+    }
 }

src/views/home/widget/barrackbox.vue

@@ -29,6 +29,9 @@
                 <el-button type="primary" style="height:30px;" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
                   定位
                 </el-button>
+                <el-button v-show="index==0" type="primary" style="height:30px;" size="mini" icon="el-icon-truck" @click="handleRoam">
+                  漫游
+                </el-button>
               </div>
               <div class="line" style="margin: 10px 0"></div>
               <div>装备情况：{{ item.zbqk }}</div>
@@ -45,7 +48,7 @@
   import axios from "axios";
   import * as turf from "@turf/turf";
   import { getMethodCommon } from "../../../api/common";
-  import { getRouterFunc, drawRouterFunc, clearRouterFunc, } from '../lib/routePath'
+  import { getRouterFunc, drawRouterFunc, clearRouterFunc,handlerStartRoaming,handlerStopRoaming } from '../lib/routePath'
   const areaName = localStorage.getItem("areaName");
   export default {
     name: "monitorbox",
@@ -65,7 +68,11 @@
         goodsGraphicLayerArr: [],
         distanceradio: 4,
         allData: [],
-        gridIsShow: true
+        gridIsShow: true,
+        tripFlyArray:[],
+        fixedRoute:null,
+        carGraphicLayer:null,
+        isRoam:false,
       };
     },
     watch: {
@@ -93,6 +100,7 @@
           
           if (newVal == false) {
             this.close();
+            this.stopRoam();
           }
         },
       },
@@ -148,6 +156,10 @@
           return a.distance - b.distance;
         });
 
+        // 获取第一个并导航
+        this.startLngLat = this.goodsListData[0].lngLat;
+        this.getRoutePath();
+        console.log(this.startLngLat);
         if(this.gridMap){
           this.addGoodsLayer()
         }
@@ -182,6 +194,7 @@
               item.coordinates = [ coord[1] , coord[2] ]
           })
           this.goodsListData = reldata;
+
           this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
               (wz) => {
                 this.nestWuziPoints = wz;
@@ -249,9 +262,10 @@
           areaname: localStorage.getItem("areaName"),
         };
         getRouterFunc(params).then(res => {
-          // drawRouterFunc(res)
+          drawRouterFunc(res)
+          this.tripFlyArray = res.allCoordinates;
         }).catch(err => {
-          clearRouterFunc()
+          // clearRouterFunc()
         })
       },
       addGoodsLayer() {
@@ -279,7 +293,7 @@
             scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
             clampToGround: true,
             label: {
-                text: item.name+"("+item.distance+")km",
+                text: item.dwmc+"("+item.distance+")km",
                 font_size: 12,
                 color: "#ffffff",
                 pixelOffsetY: -78,
@@ -332,6 +346,23 @@
         });
         window.globalmap.addLayer(this.goodsGraphicLayer);
       },
+          // 漫游
+      handleRoam(){
+        if(this.isRoam){
+          handlerStopRoaming();
+        }else{
+          handlerStartRoaming(this.tripFlyArray);
+        }
+        this.isRoam = !this.isRoam;
+            
+      },
+          // 停止漫游
+      stopRoam(){
+          if(this.fixedRoute){
+              this.pathPointGraphicLayer.removeGraphic(this.fixedRoute); 
+              this.fixedRoute = null;
+          }
+      }
     },
   };
   </script>

src/views/home/widget/findway.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class="find-way-container">
+        <div class="title">
+            路线导航
+        </div>
+        <div class="start-point-list">
+            <div class="start-point-item" v-for="(item,index) in startPointList" :key="index">
+                <div class="item-label">起点：</div>
+                <div class="item-input">
+                    <el-input size="mini" type="text" v-model="item.lng" placeholder="经度"></el-input>
+                </div>
+                <div class="item-input">
+                    <el-input size="mini" type="text" v-model="item.lat" placeholder="纬度"></el-input>
+                </div>
+                <div class="item-opreate">
+                    <!-- <div class="operate-item" @click="deletePoint(index)">
+                        <i class="el-icon el-icon-delete"></i>
+                    </div> -->
+                    <div class="operate-item" @click="clickPoint('start',index)">
+                        <i class="el-icon el-icon-location-outline"></i>
+                    </div>
+                    <div class="operate-item" @click="getRoutePath(index)">
+                        <i class="el-icon el-icon-s-promotion"></i>
+                    </div>
+                    <div class="operate-item" @click="handleRoam(index)">
+                        <i class="el-icon el-icon-truck" ></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="start-point-item" style="border-top:1px solid #178a8c87;padding-top:5px;margin-bottom:20px;margin-top:5px;">
+            <div class="item-label">终点：</div>
+            <div class="item-input">
+                <el-input size="mini" type="text" v-model="endPoint.lng" placeholder="经度"></el-input>
+            </div>
+            <div class="item-input">
+                <el-input size="mini" type="text" v-model="endPoint.lat" placeholder="纬度"></el-input>
+            </div>
+            <div class="item-opreate">
+                <div class="operate-item" @click="clickPoint('end')">
+                    <i class="el-icon el-icon-location-outline"></i>
+                </div>
+            </div>
+        </div>
+        <div class="find-way-operate">
+            <el-button type="warning" size="mini" icon="el-icon-delete" @click="cleaerAll">清除全部</el-button>
+            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addPoint">添加起点</el-button>
+            <el-button type="primary" size="mini" icon="el-icon-position" @click="designAllRouter">规划路线</el-button>
+            <el-button type="primary" size="mini" icon="el-icon-truck" @click="stopRoam">停止漫游</el-button>
+        </div> 
+    </div>    
+</template>
+
+<script>    
+import { getRouterFunc, drawRouterFunc, clearRouterFunc,handlerStartRoaming,handlerStopRoaming } from '../lib/routePath'
+export default {
+    props:["close"],
+    data(){
+        return {
+            startPointList:[ // 起点
+                {
+                    name:null,
+                    lng:null,
+                    lat:null
+                }
+            ],  
+            endPoint:{      // 终点
+                name:'end',
+                lng:null,
+                lat:null
+            },
+            pathPointGraphicLayer:null,  // 起点终点图层
+            carGraphicLayer:null,
+            fixedRoute:null,  // 漫游图层
+            tripFlyArray:[],
+            startGraphicEntity:[],
+            endGraphicEntity:null,
+        }
+    },
+    watch:{
+        close:function(e){
+            if(e==false){
+                this.cleaerAll();
+            }
+        }
+    },
+    methods:{
+        // 删除单个起点
+        deletePoint(index){
+            this.startPointList.splice(index,1);
+            this.pathPointGraphicLayer.removeGraphic(this.startGraphicEntity[index]);
+            this.startGraphicEntity.splice(index,1);
+        },
+        // 清空所有数据
+        cleaerAll(){
+            this.startPointList = [
+                {
+                    name:null,
+                    lng:null,
+                    lat:null
+                }
+            ];
+
+            this.endPoint = {
+                name:null,
+                lng:null,
+                lat:null
+            }
+
+            // 删除图标
+            this.pathPointGraphicLayer.clear();
+
+            // 删除路线
+            clearRouterFunc();
+
+            // 删除漫游
+            handlerStopRoaming();
+        },
+        // 添加一条点数据
+        addPoint(){
+            let point = {
+                name:null,
+                lng:null,
+                lat:null
+            }
+            this.startPointList.push(point);
+        },
+        // 绘制点数据
+        clickPoint(type,index=null){
+            if(type=='start' && this.startPointList[index].lng && this.startPointList[index].lat){
+                return;
+            }
+            if(this.pathPointGraphicLayer == null){
+                this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
+                window.globalmap.addLayer(this.pathPointGraphicLayer);
+            }
+            let _this = this;
+            window.globalmap.setCursor(true);
+            window.globalmap.once(mars3d.EventType.click, function (event) {
+                window.globalmap.setCursor(false)
+                const cartesian = event.cartesian
+                const point = mars3d.LngLatPoint.fromCartesian(cartesian)
+                point.format() 
+                if(type == 'start'){
+                    _this.startPointList[index].lng = point.lng;
+                    _this.startPointList[index].lat = point.lat;
+                }else if(type == 'end'){
+                    _this.endPoint.lng = point.lng;
+                    _this.endPoint.lat = point.lat;
+                }
+                _this.drawPoint(type, point.lng, point.lat, point.z);
+            })
+        },
+        drawPoint(type, lng, lat, z) { // 绘制起点、终点
+            let image = null;
+           
+            if(type == 'start'){
+                image = "/img/route-start.png"
+                var graphic = new mars3d.graphic.BillboardEntity({
+                    position: [lng, lat, z],
+                    style: {
+                        image: image,
+                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                        clampToGround: true
+                    },
+                    attr: { remark: type == 'start'?'起点':'终点' }
+                })
+                this.startGraphicEntity.push(graphic);
+                this.pathPointGraphicLayer.addGraphic(graphic);
+
+            }else if(type == 'end'){
+                image = "/img/route-end.png"
+                if(this.endGraphicEntity){
+                    this.pathPointGraphicLayer.removeGraphic(this.endGraphicEntity);
+                    this.endGraphicEntity = null;
+                }
+                this.endGraphicEntity = new mars3d.graphic.BillboardEntity({
+                    position: [lng, lat, z],
+                    style: {
+                        image: image,
+                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                        clampToGround: true
+                    },
+                    attr: { remark: type == 'start'?'起点':'终点' }
+                })
+                this.pathPointGraphicLayer.addGraphic(this.endGraphicEntity);
+            }
+        },
+        // 规划路线
+        getRoutePath(index) {
+            // 获取路线数据
+            let startCoor = [this.startPointList[index].lng,this.startPointList[index].lat] // 起点
+            let endCoor = [this.endPoint.lng,this.endPoint.lat]  // 终点
+
+            let params = {
+                startlng: parseFloat(startCoor[0]),
+                startlat: parseFloat(startCoor[1]),
+                endlng: parseFloat(endCoor[0]),
+                endlat: parseFloat(endCoor[1]),
+                areaname: localStorage.getItem("areaName"),
+            };
+
+            getRouterFunc(params,'all').then(res => {
+                if(res){
+                    this.tripFlyArray[index] = res.allCoordinates;
+                    drawRouterFunc(res)
+                }else{
+                    this.$message({
+                        type:"error",
+                        message:"PostGIS未找到合适了路线"
+                    })
+                }
+            }).catch(err => {
+                clearRouterFunc()
+            })
+        },
+        // 一键全部导航
+        designAllRouter(){
+            clearRouterFunc();
+            this.startPointList.forEach((item,index)=>{
+                this.getRoutePath(index);
+            })
+        },
+        // 漫游
+        handleRoam(index){
+            handlerStartRoaming(this.tripFlyArray[index],false);
+        },
+        // 停止漫游
+        stopRoam(){
+            handlerStopRoaming();
+        }
+    }
+}
+</script>
+<style scoped>
+.find-way-container{
+    width:100%;
+    height:100%;
+    background-image: url(/img/biaohui.png);
+    background-size:100% 100%;
+    padding:5px 15px;
+}
+.title{
+    font-size:18px;
+    color:#fff;
+    text-indent:20px;
+}
+.add-start-point-item-button{
+    padding:2px 8px;
+    background:rgb(22, 93, 90);
+    float:right;
+    text-align: 0px;
+    font-size:14px;
+    text-indent:0px;
+    border-radius: 4px;
+    cursor:pointer;
+    margin-top:3px;
+}
+.start-point-list{
+    margin-top:30px;
+    max-height:180px;
+    overflow-y:auto;
+}
+.start-point-item{
+    width:100%;
+    display:flex;
+    gap:8px;
+    line-height:38px;
+
+}
+.item-label{
+    width:auto;
+    color:#fff;
+}
+.item-input{
+    flex:auto;
+    max-width:120px;
+}
+.item-opreate{
+    flex:1;
+    display: flex;
+    flex-direction: row;
+}
+.operate-item{
+    flex:1;
+    color:#fff;
+    text-align: center;
+}
+
+.operate-item:hover{
+    color:#408eff;
+    cursor:pointer;
+}
+
+::v-deep .el-input__inner{
+    background:none;
+    border: 1px solid #16e6ea;
+    color:#fff;
+}
+
+
+
+::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+    background: transparent;
+    border-radius: 5px;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    padding-top: 100px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
+      inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+    background-color: #797979;
+    min-height: 28px;
+    border-radius: 4px;
+    background-clip: padding-box;
+  }
+  
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-thumb {
+    border: 0;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  
+  ::-webkit-scrollbar-thumb:active {
+    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+</style>

src/views/home/widget/goodsbox.vue

@@ -38,9 +38,13 @@
                 <span class="mr-2">{{ item.distance }}km</span>
                 <span style="color: #cee800">预计到达时间：{{ item.time }}分钟</span>
               </div>
-              <el-button type="primary" style="height:30px;" size="mini" icon="el-icon-position" @click="flyToPosition(item)">
+              <el-button type="primary" style="height:30px;" size="mini" icon="el-icon-location-outline" @click="flyToPosition(item)">
                 定位
               </el-button>
+             
+              <el-button v-show="index==0" type="primary" style="height:30px;" size="mini" icon="el-icon-truck" @click="handleRoam">
+                漫游
+              </el-button>
             </div>
             <div class="line" style="margin: 10px 0"></div>
             <div>物资明细：{{ item.info }}</div>
@@ -54,7 +58,7 @@
 <script>
 import * as turf from "@turf/turf";
 import { getMethodCommon } from "../../../api/common";
-import { getRouterFunc, drawRouterFunc, clearRouterFunc} from '../lib/routePath'
+import { getRouterFunc, drawRouterFunc, clearRouterFunc,handlerStartRoaming,handlerStopRoaming} from '../lib/routePath'
 const areaName = localStorage.getItem("areaName");
 export default {
   name: "monitorbox",
@@ -73,11 +77,16 @@ export default {
       goodsGraphicLayer: null,
       goodsGraphicLayerArr: [],
       distanceradio: 4,
-      allData: []
+      allData: [],
+      tripFlyArray:[],
+      fixedRoute:null,
+      carGraphicLayer:null,
+      isRoam:false,
     };
   },
   watch: {
     endLngLat: function (e) {
+      clearRouterFunc();
       this.getWuziList();
     },
     gridMap: {
@@ -109,6 +118,7 @@ export default {
       handler(newVal, oldVal) {
         if (newVal == false) {
           this.close();
+          this.stopRoam();
         }
       },
     },
@@ -122,6 +132,7 @@ export default {
       this.goodsGraphicLayerArr.forEach((item) => {
         this.goodsGraphicLayer.removeGraphic(item);
       });
+      clearRouterFunc();
     },
     radioChange(e) {
       let arr = this.nestWuziPoints;
@@ -164,11 +175,16 @@ export default {
       this.goodsListData.sort((a, b) => {
         return a.distance - b.distance;
       });
-      
+
+      // 获取第一个并导航
+      this.startLngLat = this.goodsListData[0].lngLat;
+      this.getRoutePath();
+
       if(this.gridMap){
         this.addGoodsLayer()
       }
     },
+  
     getWuziList() {
       getMethodCommon("/FirePrevention/Loadwuzichubei", this.listQuery).then((res) => {
         if (!res.data.length) {
@@ -252,10 +268,10 @@ export default {
         areaname: localStorage.getItem("areaName"),
       };
       getRouterFunc(params).then(res => {
-        drawRouterFunc(res)
+        drawRouterFunc(res);
+        this.tripFlyArray = res.allCoordinates;
       }).catch(err => {
-     
-        clearRouterFunc()
+        // clearRouterFunc()
       })
     },
     
@@ -274,7 +290,7 @@ export default {
           position: [item.lngLat[0], item.lngLat[1]],
           style: {
             image: "img/wuzichubei.png",
-            scale: 0.7,
+            scale: 0.5,
             horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
@@ -354,6 +370,15 @@ export default {
       window.globalmap.addLayer(this.goodsGraphicLayer);
       
     },
+    // 漫游
+    handleRoam(){
+      if(this.isRoam){
+        handlerStopRoaming();
+      }else{
+        handlerStartRoaming(this.tripFlyArray);
+      }
+      this.isRoam = !this.isRoam;
+    },
   },
 };
 </script>

src/views/home/widget/onebuttoncall.vue

@@ -23,11 +23,22 @@
                 :value="'网格员'">
                 </el-option>
             </el-select>
+
+
+            <el-select v-model="listQuery.unitname" clearable style="width:180px;margin-left:15px;" placeholder="请选择单位" size="mini" @change="selectChange">
+                <el-option
+                v-for="item in unitOptions"
+                :key="item.id"
+                :label="item.unitName"
+                :value="item.unitName">
+                </el-option>
+            </el-select>
+
             <el-input clearable size="mini" v-model="listQuery.name" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'人员姓名'"
             >
             </el-input>
     
-            <el-button type="default" size="mini" @click="listQuery.name=null;getListData();">重置</el-button>
+            <!-- <el-button type="default" size="mini" @click="listQuery.name=null;getListData();">重置</el-button> -->
             <el-button type="primary" size="mini" @click="getListData">搜索</el-button>
 
       </div>
@@ -99,16 +110,28 @@ import axios from 'axios'
             phones:null,
             loading:false,
             listDataInfo:null,
+            unitOptions:[],
         }
     },
     created(){
         this.getListData();
         this.getOnLineInfo();
+        this.handleGetUnitList();
     },
     mounted(){
         
     },
     methods:{
+        selectChange(){
+            this.getListData();
+        },
+        handleGetUnitList(){
+            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
+                if(res.code == 200){
+                    this.unitOptions = res.data;
+                }
+            })
+        },
         getOnLineInfo() {
             getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
                 this.listDataInfo = res.data;

src/views/home/widget/onlineuserbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="onebuttoncall-container">
-      <div class="title">在线人员 
+      <div class="title">在线人员
         <span style="font-size:14px;color:#aaa;">（{{ list.length }}人）</span>
 
            <span style="font-size:14px;float:right;margin-right:30px;">
@@ -35,6 +35,16 @@
                 :value="item.value">
                 </el-option>
             </el-select>
+
+            <el-select v-model="listQuery.unitname" clearable style="width:180px;margin-left:15px;" placeholder="请选择单位" size="mini" @change="selectChange">
+                <el-option
+                v-for="item in unitOptions"
+                :key="item.id"
+                :label="item.unitName"
+                :value="item.unitName">
+                </el-option>
+            </el-select>
+
             <!--  -->
             <el-input type="text" size="mini" v-model="onlineusername" style="width:250px;margin-left:15px;margin-right:15px;" placeholder="请输入人员姓名" ></el-input>
             <el-button type="primary" size="mini" icon="el-icon-search" @click="filterList">搜索</el-button>
@@ -57,7 +67,6 @@
                         {{item.name}}
                         <!-- <el-button type="success" round icon="el-icon-plus" size="mini" style="padding:2px;"></el-button> -->
                     </div>
-
                         <div>
                             <p style="margin-bottom:4px;">类型：{{item.type}}</p>
                             <p>{{item.phone}}</p>
@@ -77,6 +86,7 @@
 
 <script>
 import { getMethodCommon, postMethodCommon } from '../../../api/common';
+let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
 import {compareArray} from '../lib/compareArray.js'
   export default {
     name: 'onebuttoncall',
@@ -120,19 +130,23 @@ import {compareArray} from '../lib/compareArray.js'
                     label:"网格员",
                     value:4
                 }
-            ]
+            ],
+            unitOptions:[],
+            icons:[],
         }
     },
     created(){
-        // 获取队伍图标信息
-        // this.getTeamIcon();
 
-        this.topList =  localStorage.getItem("topList") ? JSON.parse(localStorage.getItem("topList")) : [];
+
         
         if(window.globalmap){
-            this.getListData();
+            
         }
+        // 获取队伍图标信息
+        this.getIcons();
+
         window.videoCall = this.videoCall;
+        this.handleGetUnitList();
     },
     mounted(){
         let _this = this;
@@ -155,9 +169,36 @@ import {compareArray} from '../lib/compareArray.js'
       }
     },
     methods:{
+        getIcons(){
+            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
+                if(res.code == 200){
+                    res.data.forEach((item,index)=>{
+                        this.icons[item.unitName] = item.imaUrl
+                    })
+                    let _this = this;
+                    this.topList =  localStorage.getItem("topList") ? JSON.parse(localStorage.getItem("topList")) : [];
+                    this.getListData();
+                    // window.addEventListener("onmessageWS", this.getSocketData);
+                    // setInterval(function(){
+                    //     _this.pointData = []
+                    //     _this.getPointer("人员信息")
+                    // },5000)
+                }
+            })
+        },  
+        handleGetUnitList(){
+            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
+                if(res.code == 200){
+                    this.unitOptions = res.data;
+                }
+            })
+        },
         getUserList(e){
             this.getListData();
         },
+        selectChange(){
+            this.getListData();
+        },
         getTeamIcon(){
             getMethodCommon("/FireCodePC/GetUserUnit").then(res=>{
                 if(res.code == 200){
@@ -328,13 +369,18 @@ import {compareArray} from '../lib/compareArray.js'
                     window.globalmap.addLayer(this.markGraphicLayer);
                 }
                 compareResult.add.forEach((item, index) => {
-                    let showVideo = (item.type == '护林员' || item.type == '其他') ? 'block':'none';
-                    let img = (item.type == '护林员' || item.type == '其他')  ? 'jiuyuanrenyuan' : 'duijiangji'
+                    let showVideo = item.type == '对讲机' ? 'none':'block';
+                    // 处理图标
+                    let imageUrl = this.icons[item.unitName] ? BASE_IMAGE_URL +"/"+this.icons[item.unitName] : '/img/jiuyuanrenyuan.png'
+                    console.log("ImageUrl",imageUrl);
+                    imageUrl = item.type == '对讲机'  ? '/img/duijiangji.png' : imageUrl
+
+
                     let graphic = new mars3d.graphic.BillboardEntity({
                         id:item.createId,
                         position: [item.lng, item.lat],
                         style: {
-                            image: "/img/"+img+".png",
+                            image:imageUrl,
                             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                             clampToGround: true,
@@ -416,7 +462,7 @@ import {compareArray} from '../lib/compareArray.js'
         },
         videoCall(phone){
             let userId = localStorage.getItem("userName");
-            let wind = window.open("https://ssl.hopetrytech.com:9237?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
+            let wind = window.open("https://175.hopetrytech.com:6020?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
             wind.onload = function(){
                 wind.document.title = "视频通话";
             }

src/views/home/widget/personnel.vue

@@ -128,7 +128,7 @@ export default {
     videoCall(phone) {
             let userId = localStorage.getItem("userName");
 
-            let wind = window.open("https://ssl.hopetrytech.com:9237?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
+            let wind = window.open("https://175.hopetrytech.com:6020?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
             wind.onload = function(){
                 wind.document.title = "视频通话";
             }

src/views/home/widget/realTimeVideo.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="video-container">
+        <div class="header">无人机实时画面</div>
+        <!-- 无人机选择 -->
+        <div class="uav-select-contaner">
+            <div class="uav-item-box" v-for="(item,index) in uavList" :key="index" :style="{'border-top-color':item.checked ?'#75FF95':'#0A565B'}">
+                <div class="uav-icon">
+                    <img src="/img/uav-video-icon.png" alt="">
+                </div>
+                <div class="uav-name">防火无人机{{ index+1 }}号</div>
+                <div class="uav-checked" @click="checkUav(item,index)" :style="{'background':item.checked ?'#75FF95':'none'}">
+                    <i class="el-icon el-icon-check" v-show="item.checked"></i>
+                </div>
+            </div>
+
+        </div>
+        <div class="uav-operate">
+            <el-button type="warning" @click="clearAll">清空</el-button>
+            <el-button type="primary" @click="previewAll">预览</el-button>
+        </div>
+
+        <div class="video-item-list" v-if="showVideos">
+            <div class="video-item" v-for="(item,index) in playList" :key="index">
+                <div class="video-name">防火无人机{{item.number}}号</div>
+                <div class="video-box">
+                    <video
+                        :key="Math.random()"
+                        :id="item.playerId"
+                        width="380px"
+                        height="200px"
+                        autoplay
+                        preload="auto"
+                        playsinline
+                        webkit-playsinline
+                    ></video>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            showVideos:false,
+            uavList:[
+                {
+                    name:"防火无人机1号",
+                    number:1,
+                    checked:false
+                },{
+                    name:"防火无人机1号",
+                    number:2,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:3,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:4,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:5,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:6,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:7,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:8,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:9,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:10,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:11,
+                    checked:false
+                },{
+                    name:"无人机1号",
+                    number:12,
+                    checked:false
+                },
+            ],
+            videoList:[],
+            playList:[],
+            player:null,
+        }
+    },
+    beforeDestroy (){
+        this.playList.forEach((item,index)=>{
+            this.playList[index].player.dispose();
+        })
+    },
+    methods:{
+        checkUav(item,index){
+            this.uavList[index].checked = !this.uavList[index].checked;
+        },
+        clearAll(){
+            this.uavList.forEach((itme,index)=>{
+                this.uavList[index].checked = false;
+            })
+        }, 
+        previewAll(){
+            this.uavList.forEach((item,index)=>{
+                if(item.checked){
+                    let obj = {...item};
+                    obj.playerId = "player-container-"+parseInt(100000000*Math.random()).toString();
+                    this.playList.push(obj);
+                }
+            })
+            this.showVideos = true;
+            this.handlerPlayerVideo();
+        },
+        handlerPlayerVideo(){
+            let _this = this;
+            setTimeout(function(){
+                _this.playList.forEach((item,index)=>{
+                    let player = TCPlayer(item.playerId, {});
+                    _this.playList[index].player = player;
+                    // player.src("http://123.132.248.154:9261/flv/hls/stream_1.flv");
+                    player.src("http://60.213.14.14:8080/live/"+item.number+".flv");
+                })
+            },2000)
+
+            // if (this.player) {
+            //     this.player.src("http://123.132.248.154:9261/flv/hls/stream_1.flv");
+            // } else {
+            //     this.player = TCPlayer("player-container-id", {});
+            //     this.player.src("http://123.132.248.154:9261/flv/hls/stream_1.flv");
+            // }
+        },
+    }
+}
+</script>
+
+<style scoped>
+.video-container{
+    width:100%;
+    height:100%;
+    background: #0c3a3d;
+    background-image: url(/img/earlywarning.png);
+    background-size:100% 100%;
+    position: relative;
+}
+.video-container .header{
+    height:40px;
+    background-size:100% 100%;
+    line-height: 60px;
+    color:#fff;
+    text-indent: 50px;
+    font-weight: bold;
+    font-size:22px;
+    margin-bottom:36px;
+}
+
+.video-item-list{
+    width:100%;
+    min-height: calc( 100% - 60px);
+    padding:10px;
+    overflow-y:auto;
+    background: #0A565B;
+    position:absolute;
+    top:60px;
+    left:0px;
+    display:flex;
+    flex-wrap: wrap;
+    gap:12px;
+}
+.video-item{
+    width:380px;
+    height:200px;
+    background:rgba(0,0,0,0.8);
+    position:relative;
+}
+.video-name{
+    position:absolute;
+    width:200px;
+    height:40px;
+    font-size:14px;
+    color:#fff;
+    line-height:40px;
+    text-indent: 20px;
+    background-image: linear-gradient(to right,rgba(0,0,0,0.6),rgba(0,0,0,0.2),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    z-index:99999;
+}
+
+.uav-select-contaner{
+    width:100%;
+    padding:20px;
+    display:flex;
+    flex-wrap: wrap;
+    gap:12px;
+}
+.uav-select-contaner .uav-item-box{
+    flex:0 0 32.2%;
+    height:72px;
+    padding:0px 15px;
+    display:flex;
+    background:#0A565B;
+    align-items: center;     /* 垂直居中 */
+    border-top:2px solid #0A565B;
+    border-bottom:2px solid #0A565B;
+}
+.uav-select-contaner .uav-item-box .uav-icon{
+    width:50px;
+    height:50px;
+    border:1px solid #9cffb096;
+    text-align: center;
+}
+
+.uav-icon img{
+    width:24px;
+    height:24px;
+    margin-top:13px;
+}
+
+.uav-select-contaner .uav-item-box .uav-name{
+    flex:auto;
+    text-indent:15px;
+    color:#fff;
+}
+.uav-select-contaner .uav-item-box .uav-checked{
+    width:14px;
+    height:14px;
+    border-radius:50%;
+    border:1px solid #75FF95;
+    cursor:pointer;
+    line-height:18px;
+    font-size:10px;
+    color:#fff;
+    text-align: center;
+    font-weight: bold;
+}
+
+.uav-operate {
+    flex:none;
+    text-align: right;
+    padding:0px 26px;
+}
+::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+    background: transparent;
+    border-radius: 5px;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    padding-top: 100px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
+      inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+    background-color: #797979;
+    min-height: 28px;
+    border-radius: 4px;
+    background-clip: padding-box;
+  }
+  
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-thumb {
+    border: 0;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  
+  ::-webkit-scrollbar-thumb:active {
+    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  ::v-deep .el-button{
+    border-radius: 0px;
+  }
+</style>

src/views/home/widget/roadcheck.vue

@@ -9,6 +9,7 @@ let pathOneGraphicLayers
 let pathOneGraphicLayers1 
 let pathOneGraphicLayers2 
 let BASE_URL = process.env.VUE_APP_BASE_API;
+
 export default {
     name: "monitorbox",
     props: ["visible","gridMap1","gridMap2","gridMap3"],
@@ -16,23 +17,24 @@ export default {
       return {
         tileLayer1:null,
         tileLayer2:[],
-        tileLayer3:[]
+        tileLayer3:[],
+        heighLightPolylineEntityLayer:null,
       };
     },
     watch: {
         gridMap1: {
             handler(newVal, oldVal) {
-                console.log('newVal111',newVal)
                 if(newVal){
                     this.getListDatas();
+                   
                 }else{
                     this.close()
+                   
                 }
             },
         },
         gridMap2: {
             handler(newVal, oldVal) {
-                console.log('newVal222',newVal)
                 if(newVal){
                     this.getListDatas1();
                 }else{
@@ -52,6 +54,9 @@ export default {
         visible: {
             handler(newVal, oldVal) {
                  if(newVal){
+                    if(this.heighLightPolylineEntityLayer){
+                        this.heighLightPolylineEntityLayer.show = true;
+                    }
                     if(this.gridMap1){
                         this.getListDatas()
                     }
@@ -62,6 +67,9 @@ export default {
                         this.getListDatas2()
                     }
                  }else{
+                    if(this.heighLightPolylineEntityLayer){
+                        this.heighLightPolylineEntityLayer.show = false;
+                    }
                     this.close();
                     this.close1();
                     this.close2();
@@ -83,6 +91,10 @@ export default {
         if(this.gridMap3){
             this.getListDatas2()
         }
+        
+    },
+    mounted(){
+        this.createHeightLightPolylineEntityLayer();
     },
     methods: {
         close() {
@@ -94,22 +106,88 @@ export default {
         close2() {
             window.globalmap.removeLayer(this.tileLayer3)
         },
+        createHeightLightPolylineEntityLayer(){
+            
+            this.heighLightPolylineEntityLayer = new mars3d.layer.GraphicLayer();
+            // 绑定右键删除
+            let _this = this;
+            this.heighLightPolylineEntityLayer.bindContextMenu([
+                {
+                    text: "删除对象",
+                    icon: "fa fa-trash-o",
+                    show: (event) => {
+                        const graphic = event.graphic
+                        if (!graphic || graphic.isDestroy) {
+                        return false
+                        } else {
+                        return true
+                        }
+                    },
+                    callback: (e) => {
+                        const graphic = e.graphic
+                        if (!graphic) {
+                        return
+                        }
+                        const parent = graphic.parent // 右击是编辑点时
+                        _this.heighLightPolylineEntityLayer.removeGraphic(graphic)
+                        if (parent) {
+                            _this.heighLightPolylineEntityLayer.removeGraphic(parent)
+                        }
+                    }
+                }
+            ])
+            setTimeout(function(){
+                window.globalmap.addLayer(_this.heighLightPolylineEntityLayer);
+            },5000)
+
+        },
+        // 防火通道（行车路）
         getListDatas(){
             this.tileLayer1 = new mars3d.layer.WmsLayer({
-                url: "http://221.2.83.254:9007/geoserver/ksp/wms",
-                parameters: {
+	            "url": "http://221.2.83.254:9007/geoserver/ksp/wms",
+	            "layers": "ksp:beibudaolufenlei",
+	            "crs": "EPSG:4326",
+	            "noCenter": true,
+                "parameters": {
                     SERVICE: 'WMS',
                     STYLES: '',
                     VERSION: '1.1.1',
                     REQUEST: 'GetMap',
                     FORMAT: 'image/png',
-                    TRANSPARENT: true,
-                    LAYERS: 'ksp:beibudaolufenlei',
+                    TRANSPARENT: "true",
+                    LAYERS: 'ksp:beibushanqudaolufenlei0923',
                     exceptions: 'application/vnd.ogc.se_inimage',
                     CQL_FILTER: "qufen='行车路'",
                     SRS: 'EPSG:4326',
                 },
+	            "popupOptions": "",
+	            "showClickFeature": false,
+                "flyTo": false,
+                "zIndex": 0,
+                "symbol": {
+                    "styleField": "",
+                    "styleFieldOptions": {}
+                }
             })
+            // 获取点击的图斑
+            let _this = this;
+            this.tileLayer1.on(mars3d.EventType.click, function (event) {
+                let clickCoordinates = event.features[0].data.geometry.coordinates[0];
+               
+                let graphic = new mars3d.graphic.CurveEntity({
+                    positions: clickCoordinates,
+                    style: {
+                        width: 5,
+                        color: Cesium.Color.CYAN,
+                        clampToGround: true,
+                        highlight: {
+                            color: "#ff0000"
+                        }
+                    }
+                })
+                _this.heighLightPolylineEntityLayer.addGraphic(graphic);
+            })
+
             window.globalmap.addLayer(this.tileLayer1);
         },
         getListDatas1(){
@@ -122,12 +200,33 @@ export default {
                     REQUEST: 'GetMap',
                     FORMAT: 'image/png',
                     TRANSPARENT: true,
-                    LAYERS: 'ksp:beibudaolufenlei',
+                    LAYERS: 'ksp:beibushanqudaolufenlei0923',
                     exceptions: 'application/vnd.ogc.se_inimage',
                     CQL_FILTER: "qufen='三轮车路'",
                     SRS: 'EPSG:4326',
                 },
+                popup:"all"
             })
+
+            // 获取点击的图斑
+            let _this = this;
+            this.tileLayer2.on(mars3d.EventType.click, function (event) {
+                let clickCoordinates = event.features[0].data.geometry.coordinates[0];
+               
+                let graphic = new mars3d.graphic.CurveEntity({
+                    positions: clickCoordinates,
+                    style: {
+                        width: 5,
+                        color: Cesium.Color.CYAN,
+                        clampToGround: true,
+                        highlight: {
+                            color: "#ff0000"
+                        }
+                    }
+                })
+                _this.heighLightPolylineEntityLayer.addGraphic(graphic);
+            })
+
             window.globalmap.addLayer(this.tileLayer2)
         },
         getListDatas2(){
@@ -140,12 +239,32 @@ export default {
                     REQUEST: 'GetMap',
                     FORMAT: 'image/png',
                     TRANSPARENT: true,
-                    LAYERS: 'ksp:beibudaolufenlei',
+                    LAYERS: 'ksp:beibushanqudaolufenlei0923',
                     exceptions: 'application/vnd.ogc.se_inimage',
                     CQL_FILTER: "qufen='步行路'",
                     SRS: 'EPSG:4326',
                 },
             })
+
+            // 获取点击的图斑
+            let _this = this;
+            this.tileLayer3.on(mars3d.EventType.click, function (event) {
+                let clickCoordinates = event.features[0].data.geometry.coordinates[0];
+               
+                let graphic = new mars3d.graphic.CurveEntity({
+                    positions: clickCoordinates,
+                    style: {
+                        width: 5,
+                        color: Cesium.Color.CYAN,
+                        clampToGround: true,
+                        highlight: {
+                            color: "#ff0000"
+                        }
+                    }
+                })
+                _this.heighLightPolylineEntityLayer.addGraphic(graphic);
+            })
+
             window.globalmap.addLayer(this.tileLayer3)
         },
     },

src/views/home/widget/socketdiabox.vue

@@ -69,7 +69,7 @@ export default {
     videoCall(phone) {
       let userId = localStorage.getItem("userName");
 
-            let wind = window.open("https://ssl.hopetrytech.com:9237?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
+            let wind = window.open("https://175.hopetrytech.com:6020?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
             wind.onload = function(){
                 wind.document.title = "视频通话";
             }

src/views/home/widget/taskDelivery.vue

@@ -3,26 +3,67 @@
         <div class="box-title">下发任务</div>
         <div class="box-container" style="padding-top: 20px;">
             <div class="inputer">
-                <span>位置：</span>
-                <el-input size="mini" style="width:300px;" v-model="location"></el-input>
+                <span>任务位置：</span>
+                <el-input size="mini" style="width:420px;" v-model="location"></el-input>
             </div>
             <div class="inputer">
                 <span>任务详情：</span>
-                <el-input type="textarea" :rows="2" style="width:300px;" placeholder="请输入内容" v-model="content">
+                <el-input type="textarea" :rows="2" style="width:420px;" placeholder="请输入内容" v-model="content">
                 </el-input>
             </div>
             <div class="inputer">
                 <span style="float:left;margin-left:12px;">接收人员：</span>
+                <div class="" style="float:left;width:420px;">
+                    <el-select v-model="listQuery.unitname" clearable style="width:120px;" placeholder="请选择单位" size="mini" @change="selectChange">
+                        <el-option
+                        v-for="item in unitOptions"
+                        :key="item.id"
+                        :label="item.unitName"
+                        :value="item.unitName">
+                        </el-option>
+                    </el-select>
 
-                <div class="" style="float:left;width:300px;">
-                    <el-table ref="multipleTable" :data="list" tooltip-effect="dark" height="200px"
-                        style="width: 100%;margin-top:12px;" @selection-change="handleSelectionChange">
-                        <el-table-column type="selection" width="55">
-                        </el-table-column>
-                        <el-table-column prop="name" label="姓名">
-                        </el-table-column>
+                    <el-input size="mini" v-model="listQuery.username" placeholder="人员姓名" style="width:195px;margin-left:15px;"></el-input>
 
+                    <el-button icon="el-icon-search" type="primary" size="mini" style="margin-left:15px;" @click="getUserList">查询</el-button>
+                    
+                    <el-table
+                        ref="multipleTable"
+                        size="mini"
+                        height="160px"
+                        :data="list"
+                        tooltip-effect="dark"
+                        :reserve-selection="true"
+                        style="width: 100%;margin-top:12px;border-radius: 5px;background:none;border:1px solid #00fff0"
+                        @selection-change="handleSelectionChange">
+                        <el-table-column
+                            type="selection"
+                            width="55">
+                        </el-table-column>
+                        <el-table-column
+                        prop="name"
+                        label="姓名"
+                    >
+                        <template slot-scope="scope">
+                            <span style="color:#ffffff;">{{scope.row.name}}</span> &nbsp;
+                            <el-tag size="mini" v-show="scope.row.unitName">{{ scope.row.unitName }}</el-tag>
+                        </template>
+                    </el-table-column>
                     </el-table>
+
+                    <!-- <el-table
+                        
+                        
+                        row-key="id"
+                        @selection-change="handleSelectionChange">
+                        <el-table-column
+                        type="selection"
+                        width="55">
+                        </el-table-column>
+                       
+                        
+                       
+                    </el-table> -->
                 </div>
             </div>
         </div>
@@ -46,12 +87,13 @@ export default {
             content: '',
             pathPointGraphicLayer: null,
             list: [],
-            multipleSelection: [],
+            multipleSelection:[],
             listQuery:{
-                pageIndex:1,
-                pageSize:12,
-                name:null,
+                unitname:null,
+                username:null,
             },
+            unitOptions:[],
+            checkedUsers:[],
             loading:false,
         }
     },
@@ -59,16 +101,39 @@ export default {
 
     },
     created() {
+        this.handleGetUnitList();
         this.getUserList();
     },
     mounted() {
         if (this.lat) {
             this.location = this.lng + "," + this.lat;
-        } ``
+        } 
     },
     methods: {
+        selectChange(e){
+            this.listQuery.unitname = e;
+            this.getUserList();
+        },
+        handleGetUnitList(){
+            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
+                if(res.code == 200){
+                    this.unitOptions = res.data;
+                }
+            })
+        },
+        buttonLoading(){
+            this.loading = true;
+            let _this = this;
+            setTimeout(function(){
+                _this.loading = false;
+            },10000)
+        },  
         handleSelectionChange(val) {
             this.multipleSelection = val;
+            this.checkedUsers = [];
+            this.multipleSelection.forEach((item,index)=>{
+                this.checkedUsers.push(item.name);
+            })
         },
         getUserList() {
             getMethodCommon("/FireManagement/LoadFireClueUser",this.listQuery).then(res=>{
@@ -84,13 +149,6 @@ export default {
             // }
             this.$emit('closeTask')
         },
-        buttonLoading(){
-            this.loading = true;
-            let _this = this;
-            setTimeout(function(){
-                _this.loading = false;
-            },10000)
-        },
         onSubmit() {
             var querys = {
                 content: this.content,
@@ -130,6 +188,7 @@ export default {
 <style scoped>
 .box {
     width: 100%;
+    height: calc( 100% - 40px);
     /* height: 100%; */
     background-image: url(/img/huoqing-bg.png);
     background-size: 100% 100%;
@@ -137,8 +196,8 @@ export default {
 
 .box-container {
     width: calc(100% - 0px);
-    padding: 0px 12px;
-    height: calc(100% - 170px)!important;
+    padding: 10px 12px;
+    height: calc(100% - 100px);
 }
 
 .box-title {
@@ -146,8 +205,8 @@ export default {
     height: 45px;
     line-height: 45px;
     color: #fff;
-    text-indent: 30px;
-    text-align: left;
+    text-align: center;
+    font-size: 18px;
 }
 
 .tab-container {
@@ -159,13 +218,10 @@ export default {
 }
 
 .inputer {
-    width: 84%;
+    width: 100%;
     margin: 0px auto;
     line-height: 40px;
     color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
 }
 
 ::v-deep .el-input__inner {
@@ -262,39 +318,69 @@ export default {
     margin: 16px 0px;
 }
 
-::v-deep .el-table th.el-table__cell {
-    background: #193632;
-    color: #fff;
-    border: 1px solid #00fff0;
+
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
+background-color: rgba(0, 0, 0, .1)
 }
 
-::v-deep .el-table tr {
-    background: #193632;
-    color: #fff;
-
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
+-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .1);
+background-color: rgba(0, 0, 0, .1)
 }
 
-
-::v-deep .el-table .el-table__body tr:hover>td {
-    background-color: rgba(255, 255, 255, .1) !important;
+::v-deep .el-table th{
+padding:0px!important;
+}
+::v-deep table thead th{
+text-align: left!important;
+text-indent:1px;
 }
 
-::v-deep .el-table .el-table__body tr.current-row>td {
-    background-color: rgba(255, 255, 255, .1) !important;
+::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
+border-bottom:0px!important;
+border:0px !important;
 }
 
+/*最外层透明*/
 ::v-deep .el-table,
-.el-table__expanded-cell {
-    background: none;
+::v-deep .el-table__expanded-cell {
+background-color: transparent !important;
 }
-
-::v-deep .el-table td,
-.el-table th.is-leaf {
-    border: 0px;
-}
-
+/* 表格内背景颜色 */
 ::v-deep .el-table th,
-.el-table tr {
-    background: none;
+::v-deep .el-table tr,
+::v-deep .el-table td {
+background-color: transparent !important;
 }
+
+::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
+border:0px!important;
+}
+::v-deep .el-table__body-wrapper{
+width:100%;
+border:0px!important;
+}
+
+
+/* 滑道样式 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar{
+width:10px;
+background:#304156;
+border-radius: 6px;
+}
+/* 定义滑块的样式 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
+border-radius: 10px;
+-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
+background-color:rgba(0,0,0,0.3);
+}
+/* 定义滑块鼠标移入时的样式 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
+border-radius: 10px;
+-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
+background-color:rgba(0,0,0,0.4);
+}
+
+  
 </style>

src/views/home/widget/tietamonitor.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="monitor-container">
+        <div class="title">
+            视频监控
+            <div class="video-controler">
+                <div class="controler-button" @click="handlerControlMonitor('left')">
+                    <i class="el-icon el-icon-back"></i>
+                </div>
+                <div class="controler-button" @click="handlerControlMonitor('right')">
+                    <i class="el-icon el-icon-right"></i>
+                </div>
+                <div class="controler-button" @click="handlerControlMonitor('down')">
+                    <i class="el-icon el-icon-bottom"></i>
+                </div>
+                <div class="controler-button" @click="handlerControlMonitor('up')">
+                    <i class="el-icon el-icon-top"></i>
+                </div>
+                <div class="controler-button" @click="handlerControlMonitor('stop')">
+                    <i class="el-icon el-icon-caret-right"></i>
+                </div>
+
+            </div>
+        </div>
+        <div class="video-container">
+            <video
+                :id="playerContainerId"
+                width="460px"
+                height="260px"
+                autoplay
+                preload="auto"
+                playsinline
+                webkit-playsinline
+            ></video>
+        </div>
+    </div>    
+</template>
+<script>
+import axios  from 'axios';
+export default {
+    props:["playUrl","channel"],
+    data(){
+        return {
+            player:null,
+            playerContainerId:"",
+        }
+    },
+    created(){
+        this.playerContainerId = "player-container-"+parseInt(1000000*Math.random()).toString();
+    },  
+    mounted(){
+        let _this = this;
+        setTimeout(function(){
+            _this.handlerPlayerMonitor();
+        },1000)
+    },
+    methods:{
+        handlerPlayerMonitor(){
+            if (this.player) {
+                this.player.src(this.playUrl);
+            } else {
+                this.player = TCPlayer(this.playerContainerId, {});
+                this.player.src(this.playUrl);
+            }
+        },
+        // 监控控制
+        handlerControlMonitor(direction){
+            axios.get('http://123.132.248.154:9261/api/v1/ptzcontrol', {
+                params: {
+                    channel: this.channel,
+                    command: direction,
+                    speed:1,
+                }
+            }).then(function (response) {
+                    console.log(response.data);
+            }).catch(function (error) {
+                    console.error('Error fetching data:', error);
+            });
+        }
+    },
+    beforeDestroy (){
+       this.player.dispose();
+       this.player = null
+    }
+}
+</script>
+<style scoped>
+
+.monitor-container {
+    width:100%;
+    height:100%;
+    background-image: url(/img/earlywarning.png);
+    background-size:100% 100%;
+    position: relative;
+}
+
+.monitor-container .title{
+    height:40px;
+    background-size:100% 100%;
+    line-height: 50px;
+    color:#fff;
+    text-indent: 12px;
+    font-weight: bold;
+    font-size:22px;
+    margin-bottom:20px;
+    position:relative;
+}
+.video-controler{
+    width:160px;
+    height:30px;
+    position: absolute;
+    right:60px;
+    top:14px;
+}
+.video-controler .controler-button{
+    width:20px;
+    height:20px;
+    font-size:16px;
+    color:#fff;
+    line-height:20px;
+    text-align: center;
+    float:left;
+    margin:0px 6px;
+    cursor:pointer;
+    text-indent: 0px;
+    background:#0abfb573;
+}
+
+.video-container{
+    width:100%;
+    height:300px;
+    padding:20px;
+}
+</style>

src/views/home/widget/uavList.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="uav-list-container">
+        <div class="title">无人机实时视频</div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+
+        }
+    },
+    methods:{
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+.uav-list-container{
+    width:100%;
+    height:100%;
+    background:red;
+}
+</style>

src/views/home/widget/waterbox.vue

@@ -20,14 +20,22 @@
       </div>
       <div class="table-body">
         <div class="item" v-for="(item, index) in nestWaterPoints" :key="index">
-          <div>{{ "水源地" + (index + 1) }}</div>
-          <div>路程 {{ item.distance }} km</div>
-          <div>{{ "预计" + item.time }}</div>
+          <div style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap; ">{{ item.name }}</div>
+          <div class="title" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap; ">{{item.xsl > 0?item.xsl+'m³':'- -'}}</div>
+          <div class="title" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap; ">{{item.xsl > 0?(item.xsl/24).toFixed(2)+'小时':'- -'}}</div>
+          <div style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap; ">路程 {{ item.distance }} km</div>
+          <div style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap; ">{{ "预计" + item.time }}</div>
           <div class="float:right;text-align:right;">
             <i
-              class="el-icon el-icon-position"
+              class="el-icon el-icon-location"
               @click="flyToPosition(item,index,'one')"
             ></i>
+            &nbsp;&nbsp;
+            <i
+              class="el-icon el-icon-truck"
+              v-show="index<10"
+              @click="handleRoam(index)"
+            ></i>
           </div>
         </div>
       </div>
@@ -39,7 +47,7 @@
 import appConfig from "../../../../public/config/app.json";
 import * as turf from "@turf/turf";
 import axios from "axios";
-import { getRouterFunc, drawOneRouterFunc,drawRoutersFunc,clearRouterFunc } from '../lib/routePath'
+import { getRouterFunc, handlerStartRoaming,handlerStopRoaming,drawRouterFunc,clearRouterFunc } from '../lib/routePath'
 
 let BASE_URL = process.env.VUE_APP_BASE_API;
 export default {
@@ -60,6 +68,7 @@ export default {
       gridIsShow: true,
       waterGraphicLayerFly: null,
       waterGraphicLayerArrFly: [],
+      tripFlyArray:[],
     };
   },
   watch: {
@@ -81,6 +90,7 @@ export default {
     },
     waterCenter: {
       handler(newVal, oldVal) {
+        this.close();
         this.getWaterList();
       },
       immediate: true,
@@ -108,9 +118,9 @@ export default {
         this.waterGraphicLayer.removeGraphic(item);
       });
 
-      this.waterGraphicLayerArrFly.forEach((item) => {
-        this.waterGraphicLayerFly.removeGraphic(item);
-      });
+      this.waterGraphicLayer.clear();
+
+      this.stopRoam();
        
     },
     radioChange(e) {
@@ -156,7 +166,7 @@ export default {
       });
 
       if(this.gridMap){
-        this.addGoodsLayer()
+
       }
     },  
     addGoodsLayer(){
@@ -173,25 +183,48 @@ export default {
       this.waterGraphicLayerArr = [];
        
       this.nestWaterPoints.forEach((item, index) => {
+        if(index==0){
+          let graphicPoint = new mars3d.graphic.DivLightPoint({
+            position: [item.lngLat[0], item.lngLat[1]],
+            style: {
+              color: "#0000ff",
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+            },
+          })
+
+          let endGraphicPoint = new mars3d.graphic.DivLightPoint({
+            position:this.waterCenter,
+            style: {
+              color: "#ff0000",
+              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+            },
+          })
+
+          this.waterGraphicLayer.addGraphic(graphicPoint);
+          this.waterGraphicLayer.addGraphic(endGraphicPoint)
+        }
+
         let graphic = new mars3d.graphic.BillboardEntity({
           id:index,
           position: [item.lngLat[0], item.lngLat[1]],
           style: {
-            image: "img/water.png",
+            image: index==0?"img/water-a.png":"img/water-b.png",
             horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
               0,
               200000
             ), // 按视距距离显示
-            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
+            scaleByDistance: new Cesium.NearFarScalar(1000, 0.6, 200000, 0.2),
             clampToGround: true,
             highlight: {
               type:'click',
-              image: "img/wateractive.png",
+              image: "img/water-a.png",
             },
             label: {
-                text:"水源地"+(index+1)+"("+item.distance+")km",
+                text:item.name+"：("+item.distance+")km",
                 font_size: 12,
                 color: "#ffffff",
                 pixelOffsetY: -78,
@@ -211,15 +244,25 @@ export default {
                           <div class="b-l"></div>
                           <div class="arrow-rb"></div>
                           <div class="label-wrap">
-                              <div class="title">水源地${index+1}</div>
+                              <div class="title">${item.name}</div>
                               <div class="label-content">
                                   <div class="data-li">
                                       <div class="data-label" >距离：</div>
                                       <div class="data-value">${item.distance}km</div>
                                   </div>
+                                  <div class="data-li">
+                                      <div class="data-label" >蓄水量：</div>
+                                      <div class="data-value">${item.xsl > 0 ? item.xsl+'m³': '- -'}</div>
+                                  </div>
+                                  <div class="data-li">
+                                      <div class="data-label" >单泵抽水用时：</div>
+                                      <div class="data-value">${item.xsl > 0 ? (item.xsl/24).toFixed(2)+'小时': '- -'}</div>
+                                  </div>
                                   <div class="data-li">
                                       <div class="data-label" >预计用时：</div>
-                                      <div class="data-value">${item.time}</div>
+                                      <div class="data-value">
+                                        <input value="${item.time}" placeholder="请输入预计用时" style="background:none;border:1px solid #999;border-radius:3px;" />
+                                      </div>
                                   </div>
                               </div>
                           </div>
@@ -230,7 +273,7 @@ export default {
                   <div class="arrow" ></div>
               </div>`,
           popupOptions: {
-              offsetY: -60,
+              offsetY: -50,
               offsetX:20,
               template: "{content}",
               horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
@@ -278,6 +321,8 @@ export default {
           lngLat: item.geometry.coordinates,
           distance: distance.toFixed(2),
           time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
+          name:item.properties.mc,
+          xsl:item.properties.xsl
         };
         this.nestWaterPoints.push(obj);
       });
@@ -286,12 +331,123 @@ export default {
       });
       this.allData = this.nestWaterPoints;
 
+      // 获取前10个最近点，获取实际路线
+      for(let i=0;i<10;i++){
+        this.startLngLat = this.nestWaterPoints[i].lngLat;
+        this.getRoutePath(i);
+      }
+
+      // 绘制流动线特效
+      // let options = this.getEchartsOption(lng,lat,this.nestWaterPoints)
+      // if(this.echartsLayer){
+      //   this.echartsLayer.remove(true);
+      // }
+      // this.echartsLayer = new mars3d.layer.EchartsLayer(options)
+      // window.globalmap.addLayer(this.echartsLayer)
+      // this.echartsLayer.flyTo();
        
     },
+    // 绘制流动线条特效图层
+    getEchartsOption(lng,lat,nestWaterPoints) {
+      const beijinCoord = [lng, lat]
+      const symbolPoint = "image://img/symbol1.png"
+      const linePoint = "image://img/linePoint1.png"
+
+      const pointArr = []
+      const pathArr = [];
+      for(let i=0;i<10;i++){
+        pointArr.push({
+          name: nestWaterPoints[i].distance+"km",
+          value: nestWaterPoints[i].lngLat,
+          symbol: symbolPoint
+        })
+        pathArr.push({
+          name: i,
+          toname: "当前位置",
+          coords: [nestWaterPoints[i].lngLat, beijinCoord]
+        })
+      }
+
+      const option = {
+        animation: false,
+        clampToGround:true,
+        series: [
+          {
+            name: "",
+            type: "lines",
+            coordinateSystem: "mars3dMap",
+            zlevel: 1,
+            data: pathArr,
+            // 线上面的动态特效
+            effect: {
+              show: true,
+              smooth: false,
+              trailLength: 0,
+              symbol: linePoint,
+              symbolSize: [10, 30],
+              period: 4
+            },
+            lineStyle: {
+              normal: {
+                width: 3,
+                color: "#1c67d6",
+                curveness: 0.2
+              }
+            }
+          },
+          {
+            type: "effectScatter",
+            coordinateSystem: "mars3dMap",
+            zlevel: 3,
+            data: [
+              {
+                name: "当前位置",
+                value: beijinCoord.concat(200)
+              }
+            ],
+            rippleEffect: {
+              period: 10,
+              scale: 5,
+              brushType: "fill"
+            }
+          },
+          {
+            type: "effectScatter",
+            coordinateSystem: "mars3dMap",
+            symbolSize: [20, 20],
+            symbolOffset: [0, -10],
+            zlevel: 3,
+            circular: {
+              rotateLabel: true
+            },
+            label: {
+              normal: {
+                show: true,
+                position: "bottom",
+                formatter: "{b}",
+                fontSize: 14,
+                color: "#fff",
+                textBorderColor: "#2aa4e8",
+                offset: [0, 10]
+              }
+            },
+            itemStyle: {
+              normal: {
+                shadowColor: "none"
+              }
+            },
+            data: pointArr
+          }
+        ]
+      }
+      return option
+    },
     flyToPosition(item,index,type) {
       this.startLngLat = item.lngLat
       window.globalmap.flyToPoint([item.lngLat[0],item.lngLat[1]], { radius: 800, pitch: -90 });
-      this.flyAddPoint(item,index)
+      this.stopRoam();
+      // this.flyAddPoint(item,index);
+      // this.getRoutePath("all");
     },
     flyAddPoint(it,idx){
       let grap=this.waterGraphicLayer.getGraphicByAttr(idx,"id")
@@ -313,7 +469,7 @@ export default {
               image: "img/wateractive.png",
             },
             label: {
-                text:"水源地"+(index+1)+"("+item.distance+")km",
+                text:item.name+"：("+item.distance+")km",
                 font_size: 12,
                 color: "#ffffff",
                 pixelOffsetY: -78,
@@ -341,7 +497,7 @@ export default {
               image: "img/wateractive.png",
             },
             label: {
-                text:"水源地"+(idx+1)+"("+it.distance+")km",
+                text:item.name+"("+it.distance+")km",
                 font_size: 12,
                 color: "#ffffff",
                 pixelOffsetY: -78,
@@ -431,10 +587,10 @@ export default {
         this.waterGraphicLayerArrFly.push(graphic);
         this.waterGraphicLayerFly.addGraphic(graphic);
     },
-    getRoutePath(type) {
+    getRoutePath(index) {
       // 获取路线数据
       let startCoor = this.startLngLat;
-      let endCoor = this.waterCenter;
+      let endCoor = this.waterCenter; 
       let params = {
         startlng: parseFloat(startCoor[0]),
         startlat: parseFloat(startCoor[1]),
@@ -442,16 +598,46 @@ export default {
         endlat: parseFloat(endCoor[1]),
         areaname: localStorage.getItem("areaName"),
       };
-      getRouterFunc(params,).then(res => {
-        if(type == 'all'){
-          drawRoutersFunc(res)
-        }else if( type == 'one'){
-          drawOneRouterFunc(res)
-        }
+      getRouterFunc(params,"all").then(res => {
+        // drawRoutersFunc(res);
+        console.log("getRoutePath123",res);
+        const line = turf.lineString(res.allCoordinates);
+        this.nestWaterPoints[index].distance = turf.length(line).toFixed(2);
+        drawRouterFunc(res);
+        this.tripFlyArray[index] = res.allCoordinates;
+
+        
+        this.nestWaterPoints.sort((a, b) => {
+          return a.distance - b.distance;
+        });
+
+        let firstTenSorted = this.nestWaterPoints.slice(0, 10).sort((a, b) => {a.distance - b.distance}); // 升序排序
+        let remaining = this.nestWaterPoints.slice(10); // 获取剩下的元素
+        this.nestWaterPoints = [...firstTenSorted,...remaining];
+
+        this.addGoodsLayer()
+
+
+        // if(type == 'all'){
+        // }else if( type == 'one'){
+        //   drawOneRouterFunc(res)
+        // }
       }).catch(err => {
         clearRouterFunc()
       })
     },
+    // 漫游
+    handleRoam(index){
+        handlerStartRoaming(this.tripFlyArray[index],false);
+    },
+    // 停止漫游
+    stopRoam(){
+        handlerStopRoaming();
+    },
+    // 绘制点击点
+    handlerDrawClickPoint(){
+
+    }
   },
 };
 </script>
@@ -517,7 +703,7 @@ export default {
 
 .table-body .item div {
   float: left;
-  width: 25%;
+  width: 16.66%;
   color: #eee;
 }
 

src/views/login/index.vue

@@ -144,6 +144,7 @@ import md5 from 'js-md5'
           this.pwdType = 'password'
         }
       },
+
       handleLogin() {
         this.$refs.loginForm.validate(valid => {
           if (valid) {

src/views/timeslotmanager/widget/EditForm.vue

@@ -138,8 +138,6 @@
         }
       },
       submitForm() {
-
-        alert(111)
         var _this = this
         this.$refs['form'].validate((valid) => {
           if (valid) {

src/views/usermanager/index.vue

@@ -152,7 +152,7 @@
   import Pagination from '@/components/Pagination'
   import elDragDialog from '@/directive/el-dragDialog'
   import extend from "@/extensions/delRows.js"
-
+  import md5 from 'js-md5'
   export default {
     name: 'user',
     components: {
@@ -416,6 +416,7 @@
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             const tempData = Object.assign({}, this.temp)
+            tempData.password = md5(tempData.password).toUpperCase();;
             users.update(tempData).then(() => {
               for (const v of this.list) {
                 if (v.id === this.temp.id) {

vue.config.js

@@ -9,6 +9,9 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV !== 'production',
   devServer: {
     port: 1803,     // 端口
+    open: true,
+    hot: true,//自动保存  
+    disableHostCheck: true,
     overlay: {
       warnings: true,
       errors: false