定位app首次提交

王飞

2025-03-07 c5e49c10499435802a6551b98772f95660c6f85a

 pages/index/ditu.vue

@@ -10,8 +10,9 @@
      <u-button @click="zoom" icon="../../static/zoom.png"
         style=" border-color: #5b5b5b;background-color: rgba(115, 115, 115, 0.5); width: 31px;height: 31px; position:absolute;top: 70%; left:15px;z-index: 999999999999999;"></u-button>

      <u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="开始" :cancelText="cancelText" :show="guijishow" @cancel="stopguiji"
         @confirm="startguiji" ref="uModal" :showCancelButton="true" :closeOnClickOverlay="true">
      <u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="开始"
         :cancelText="cancelText" :show="guijishow" @cancel="stopguiji" @confirm="startguiji" ref="uModal"
         :showCancelButton="true" :closeOnClickOverlay="true">
         <u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon>
         <u--form style="" labelPosition="left" :model="model" :rules="rules2" ref="uForm">
            <u-form-item required label="设备名称:" prop="name" borderBottom ref="item1" labelWidth="80px">
@@ -38,16 +39,72 @@
            </u-form-item>
         </u--form>
      </u-modal>
      <div id="mars3dContainer" class="mars3d-container" :amapPoints='amapPoints' :change:amapPoints="mars3d.getData"
         :threeortwo='threeortwo' :change:threeortwo="mars3d.get3wei" :amapBasePoints='amapBasePoints'
      <!-- <tn-popup v-model="lockguiji" :mask="false" mode="bottom" closeBtn :maskCloseable="false"> -->


      <view v-show="lockguiji"
         style="z-index: 99999999999999; position: absolute;bottom: 0; padding: 30rpx;width: 100%; background-color: #5b5b5b;">
         <u-icon name="close" color="#ffffff"
            style=" position: absolute;z-index: 999999999999999;right: 10px;top:10px" @click="closesudu"></u-icon>
         <view style="display: flex;">

            <span style="margin-right: 10px;">当前：{{dqnum}}</span>
            <span style="margin-right: 10px;">{{plackTime}}</span>
         </view>
         <view style="display: flex;">
            <span>速度：</span>
            <!-- <uni-data-select style="width: 40%;" placeholder="选择速度" v-model="model.sudu" :localdata="range"
                  @change="change"></uni-data-select> -->

            <u-button :style="{'background-color':color1,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu1" text="1x"></u-button>
            <u-button :style="{'background-color':color2,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu2" text="2x"></u-button>
            <u-button :style="{'background-color':color5,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu5" text="5x"></u-button>
            <u-button :style="{'background-color':color10,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu10" text="10x"></u-button>
            <u-button :style="{'background-color':color20,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu20" text="20x"></u-button>
            <u-button :style="{'background-color':color50,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu50" text="50x"></u-button>
            <u-button :style="{'background-color':color100,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu100" text="100x"></u-button>
         </view>
         <!--    <tn-form>
               <tn-form-item label="IP地址:" labelWidth='100rpx'>
                  <tn-input v-model="form.url" inputAlign="right" placeholder="请输入IP地址"></tn-input>
               </tn-form-item>
               <tn-form-item label="端口:" labelWidth='100rpx'>
                  <tn-input v-model="form.port" inputAlign="right" placeholder="请输入端口"></tn-input>
               </tn-form-item>
            </tn-form> -->
         <!-- <button style="margin-top: 20px;" type="primary" @click="submitForm">提交</button> -->
      </view>
      <!-- </tn-popup> -->
      <!-- <view v-show="lockguiji"
         style=" position: absolute;z-index: 99999999999999;background-color: #cad1fd;bottom: 80px;width: 80%;left: 15%;">
         <view style="display: flex;">

            <span style="margin-right: 10px;">当前：{{dqnum}}</span>
            <span style="margin-right: 10px;">{{plackTime}}</span>
         </view>
         <view style="display: flex;">
            <span>速度：</span>
            <uni-data-select style="width: 40%;" placeholder="选择速度" v-model="model.sudu" :localdata="range"
               @change="change"></uni-data-select>
         </view>
      </view> -->
      <div id="mars3dContainer" class="mars3d-container" :marsset='marsset' :change:marsset="mars3d.getmarsData"
         :amapPoints='amapPoints' :change:amapPoints="mars3d.getData" :threeortwo='threeortwo'
         :change:threeortwo="mars3d.get3wei" :amapBasePoints='amapBasePoints'
         :change:amapBasePoints="mars3d.getBaseData" :amapFencePoints='amapFencePoints'
         :change:amapFencePoints="mars3d.getFenceData" :amapPersonPoints='amapPersonPoints'
         :change:amapPersonPoints="mars3d.getPersonData" :amapendGuijiPoints='amapendGuijiPoints'
         :change:amapendGuijiPoints="mars3d.getendGuijiData" :amapsuduPoints='amapsuduPoints'
         :change:amapsuduPoints="mars3d.getSuduData" :amapGuijiPoints='amapGuijiPoints'
         :change:amapGuijiPoints="mars3d.getGuijiData" :amapGPSPoints='amapGPSPoints'
         :change:amapGPSPoints="mars3d.getgpsData" :marsset='marsset' :change:marsset="mars3d.getmarsData"
         :point='point' :change:point="mars3d.getmarsPoint"></div>
         :change:amapGPSPoints="mars3d.getgpsData" :point='point' :change:point="mars3d.getmarsPoint"></div>
      <!-- #endif -->
      <!-- #ifndef APP-PLUS || H5 -->
      <web-view :src="url"></web-view>
@@ -75,6 +132,17 @@
      },
      data() {
         return {
            color1: '#e2e2e2',
            color2: '#8b8b8b',
            color5: '#8b8b8b',
            color10: '#8b8b8b',
            color20: '#8b8b8b',
            color50: '#8b8b8b',
            color100: '#8b8b8b',
            sudu: 'x1',
            plackTime: '',
            dqnum: '',
            lockguiji: false,
            shownotify: true,
            cancelText: '暂停',
            isRunning: true,
@@ -183,23 +251,33 @@
         }
      },
      mounted() {

         this.initMap();
         this.threeortwo.push(this.is3wei)
         this.amapPoints = []
         this.amapBasePoints = []
         this.amapFencePoints = []
         // this.amapPoints = []
         // this.amapBasePoints = []
         // this.amapFencePoints = []

         // this.amapGuijiPoints = []
         // this.amapPersonPoints = []
         this.amapendGuijiPoints = ''
         // this.amapendGuijiPoints = ''
         this.topheight = this.vuex_custom_bar_height + 15
         this.initMap();
         this.fetchPersonsList();
         this.fetchBasesList();
         this.fetchFenceList();




      },
      methods: {
         initlock() {
            this.fetchPersonsList();
            this.fetchBasesList();
            this.fetchFenceList();
         },
         closemodal(){
            this.guijishow=false
         },
         closesudu() {
            this.lockguiji = false
         },
         stopguiji() {
            this.guijishow = false
@@ -241,7 +319,7 @@
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
         },
         startguiji() {
            this.amapPersonPoints = []
            this.amapGuijiPoints = []
            this.$refs.uForm.validate().then(res => {
               // uni.$u.toast('校验通过')
               // let tagid = $("#tagid").val();
@@ -326,6 +404,8 @@
                  });
                  return false;
               }

               if (this.vuex_is_login) {
               this.$refs.refSuccess.showBox({
                  type: 'success',
                  txt: '轨迹正在查询中.....'
@@ -364,8 +444,10 @@
                           // company: this.company,
                        }
                        findtagIdPerson(params1).then((res) => {

                           if (res.code == 0) {
                              this.amapPersonPoints = res.data.pimage.split(',')
                                 this.lockguiji = true
                           }

                        })
@@ -377,7 +459,7 @@
                     });
                  }
               })

               }
               // }, 500)

            }).catch(errors => {
@@ -385,7 +467,79 @@
            })

         },

         change(e) {
            this.amapsuduPoints = e
         },
         sudu1() {
            this.amapsuduPoints = 1000
            this.color1 = '#e2e2e2'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu2() {
            this.amapsuduPoints = 500
            this.color1 = '#8b8b8b'
            this.color2 = '#e2e2e2'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu5() {
            this.amapsuduPoints = 200
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#e2e2e2'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu10() {
            this.amapsuduPoints = 100
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#e2e2e2'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu20() {
            this.amapsuduPoints = 50
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#e2e2e2'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu50() {
            this.amapsuduPoints = 10
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#e2e2e2'
            this.color100 = '#8b8b8b'
         },
         sudu100() {
            this.amapsuduPoints = 1
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#e2e2e2'
         },
         radioChange(n) {
            const currentDate = new Date();
            var halfAnHourAgo = new Date(); // 当前时间减去 30 分钟
@@ -414,6 +568,7 @@
               name: this.keyword,
               company: this.company,
            }
            if (this.vuex_is_login) {
            findPerson(params).then((res) => {
               if (res.code == 0) {
                  var targetPoint = {}
@@ -427,24 +582,32 @@
                  });
               }
            })

            }
         },
         handleMapClick(e) {
            console.log('handleMapClick逻辑层接收到触发', e)
            this.$emit('mars3dc', e)
         },

         guijiClick(e) {
            this.dqnum = e.dqnum
            this.plackTime = e.plackTime
         },
         initMap() {
            // if (this.vuex_is_login) { 
            MarsHome().then((res) => {
               console.log(res);
               this.marsset = res.data[0]
            })
            // }
         },
         fetchFenceList() {
            const params = {
               company: this.company,
            }

            if (this.vuex_is_login) {
            if (uni.getStorageSync('isfence') == true) {
               findAllFence(params).then((res) => {
                     console.log(res);
                  if (res.data != null) {
                     this.amapFencePoints = res.data
                  }
@@ -452,16 +615,18 @@
            } else {
               this.amapFencePoints = []
            }
            setTimeout(() => {
               //5秒播放一次
               this.fetchFenceList();
            }, 1000);
            }
            // setTimeout(() => {
            //    //5秒播放一次
            //    this.fetchFenceList();
            // }, 1000);
         },

         fetchBasesList() {
            const params = {
               company: this.company,
            }
            if (this.vuex_is_login) {
            if (uni.getStorageSync('isbase') == true) {
               getBaseGPSCesium(params).then((res) => {
                  if (res.data != null) {
@@ -471,40 +636,47 @@
            } else {
               this.amapBasePoints = []
            }
            setTimeout(() => {
               //5秒播放一次
               this.fetchBasesList();
            }, 1000);
            }
            // setTimeout(() => {
            //    //5秒播放一次
            //    this.fetchBasesList();
            // }, 5000);
         },

         fetchPersonsList() {
            this.amapPoints = []
            const params = {
               company: this.company,
            }
            if (this.vuex_is_login) {
            getGPSCesium(params).then((res) => {
               if (res.data != null) {
                  this.amapPoints = res.data
               }
            })
            }

            setTimeout(() => {
               //5秒播放一次
               this.fetchPersonsList();
            }, 1000);
            }, 5000);
         },

         updateTrajectories() {
            const params = {
               company: this.company,
            }
            if (this.vuex_is_login) {
            getGPS(params).then((res) => {
               if (res.data != null) {
                  this.amapGPSPoints = res.data
               }
            })
            }
            setTimeout(() => {
               //5秒播放一次
               this.updateTrajectories();
            }, 500);
            }, 1000);
         },
      }
   }
@@ -527,6 +699,7 @@
   var isPlack = true;
   var car;
   var num = 0;

   import {
      mapOptions
   } from './config.js'
@@ -644,13 +817,21 @@
         },
         getmarsData(newValue) {
            this.list = newValue

            console.log(this.list);
         },
         get3wei(newValue) {
            this.is2d = newValue[0]
				
         },
         //创建地图
         createMap() {
            if (Object.keys(this.list).length == 0) { //切换页面有时会因为getmarsData（）在createMap()之后执行，导致此方法没有原始定位数据报错
               setTimeout(() => {
                  console.log(111);
                  //5秒播放一次
                  this.createMap()
               }, 100);
            } else {
            let mapPositionlat;
            let mapPositionlng;
            let mapPositionalt;
@@ -864,7 +1045,6 @@
            //         text: "搜索",
            //         icon: "fa fa-search", // 使用 Font Awesome 图标
            //         action: () => {
            //          console.log(22222222);
            //           // this.$refs.searchBox.show(); // 调用搜索框的显示方法
            //         }
            //       }
@@ -877,8 +1057,6 @@
            } else {
               map.scene.morphTo2D(0);
            }

            console.log("map构造完成", map)
            // 创建矢量数据图层
            graphicLayer = new mars3d.layer.GraphicLayer({
               allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
@@ -904,11 +1082,13 @@

               json.ponline = car.attr.ponline
               json.baoliu2 = car.attr.baoliu2
                  json.baoliu3 = car.attr.baoliu3
               json.ptagid = car.attr.ptagid
               json.pname = car.attr.pname
               json.ppower = car.attr.ppower
               json.baoliu4 = car.attr.baoliu4
               json.pdepartment = car.attr.pdepartment
                  json.baoliu13 = car.attr.baoliu13
               this.perlist = json
               this.$ownerInstance.callMethod('handleMapClick', this.perlist);

@@ -933,37 +1113,17 @@

            // this.getGPSCesium();
            this.$ownerInstance.callMethod('receiveRenderData', this.dot)
            }
            this.$ownerInstance.callMethod('initlock');
         },
         getmarsPoint(newValue) {
            console.log("搜索===========》》》》》》》");
            // Object.keys(perlist).length
            if (Object.keys(newValue).length != 0) {
               map.camera.flyTo({
                  destination: Cesium.Cartesian3.fromDegrees(newValue.lon, newValue.lat, 500), // 目标点经纬度和视角高度
                  duration: 3 // 动画持续时间（秒）
               });
            }
            // this.list=newValue

         },
         // 获取GPS Cesium数据
         // getGPSCesium() {
         //     fetch('http://39.106.210.13:8081/api/wx/earlyWarning', {
         //       method: 'POST', 
         //       headers: {
         //         // 'Authorization': access_token 
         //       }
         //     })
         //     // .then(response => response.json())
         //     .then(data => {
         //       console.log(data);
         // console.log(data.data);
         //       // 处理获取到的GPS Cesium数据
         //     })
         //     .catch(error => {
         //       console.error('Error:', error);
         //     }); 
         //   },
         showQxShequDemo() {
            var tiles3dLayer = null
            tiles3dLayer = new mars3d.layer.TilesetLayer({
@@ -997,19 +1157,13 @@


            tiles3dLayer.readyPromise.then(function(layer) {
               console.log("load完成", layer)
               console.log("URL:", tiles3dLayer);
               // tiles3dLayer.tileset 是 Cesium3DTileset，支持绑定所有Cesium原生事件
               // 参考API http://mars3d.cn/api/cesium/Cesium3DTileset.html
               tiles3dLayer.tileset.loadProgress.addEventListener(function(numberOfPendingRequests,
                  numberOfTilesProcessing) {
                  if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) {
                     console.log("Loading: 停止加载")
                     return
                  }
                  console.log(
                     `Loading: 待处理请求数: ${numberOfPendingRequests}, 处理数: ${numberOfTilesProcessing}`
                  )
               })


@@ -1019,6 +1173,7 @@
            this.sudus = newValue
         },
         getGuijiData(newValue) {
            countNum = 0;
            LocusData = []
            if (!isPlack) {
               // plackControl.shutDown()
@@ -1031,6 +1186,11 @@
            
            map.addLayer(graphicLayer)
            LocusData = newValue //轨迹数据
            for (let key in LocusData) {
               for (let i = 0; i < LocusData[key].length; i++) {
                  countNum++;
               }
            }
            map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(LocusData[0][0].addtime))
         },
         getendGuijiData(newValue) {
@@ -1051,6 +1211,7 @@
            }];
            map.setCameraViewList(viewPoints);
            params = newValue
            console.log(params);
            var dqNum = 0;
            var DqLocusData = [];
            for (let key in LocusData) {
@@ -1149,8 +1310,11 @@
            });
            // 将 car 添加到 graphicLayer
            graphicLayer.addGraphic(car);

            this.iterate(); // 开始第一次迭代
            setTimeout(() => {
               //5秒播放一次
               this.iterate();
            }, this.sudus); // 继续迭代
            // this.iterate(); // 开始第一次迭代
            return {
               start: function() {
                  if (!isRunning) {
@@ -1198,9 +1362,6 @@
                     pitch: 0,
                     roll: 0,
                  };

                  console.log(LocuData[num + 1]);
                  // if (LocuData[num+1]!=undefined) {
                  car = new mars3d.graphic.Route({
                     id: LocuData[num - 1].tagid + num,
                     name: LocuData[num - 1].name + num,
@@ -1230,7 +1391,6 @@
                     },
                     attr: LocuData[num - 1],
                  });
                  // console.log(12345678);
                  // 将 car 添加到 graphicLayer
                  graphicLayer.addGraphic(car);
                  // }
@@ -1238,11 +1398,23 @@

               } else {
                  let currentData = LocuData[num];
                  let currentDataTime = {
                     addtime: currentData.addtime // 示例时间
                  };
                  let dateString = currentDataTime.addtime.replace(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}):/, "$1.");
                  let date = new Date(dateString);
                  let currentTime = Cesium.JulianDate.fromDate(date);
                  let adjustedTime = Cesium.JulianDate.addSeconds(currentTime, -1, new Cesium.JulianDate());
                  map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(adjustedTime))
                  var point = new mars3d.LngLatPoint(currentData.gspJingdu, currentData.gpsWeidu, 0);
                  car.addDynamicPosition(point, currentData.addtime);
                  var json = {}
                  json.dqnum = num + "/" + countNum
                  json.plackTime = currentData.addtime
                  // this.perlist = json
                  this.$ownerInstance.callMethod('guijiClick', json);
                  num + "/" + countNum
               }


               num++;
               setTimeout(() => {
                  //5秒播放一次
@@ -1253,16 +1425,14 @@
         },

         getFenceData(newValue) {
            // const fenceData = []
            console.log(newValue);
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {

                  // console.log('打印数据=================');
                  // let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
                  // console.log(e);
                  // let parts = e.image.split(',');
                  if (e.baoliu7 === '1') {
                     if (!addedFenceIds.has(e.id)) {
                        // setTimeout(() => {
                        //5秒播放一次
                        // }, 1000);
                        let parts = e.baoliu8.split(';');
                        var part = []
                        var fence = []
@@ -1270,20 +1440,153 @@
                           part = parts[i].split(',');
                           // fence.push(part[0])
                           // fence.push(part[1])
                           part.push('0')
                           // part.push('0')
                           fence.push(part)
                        }
                        // 创建围栏图形
                        const fenceGraphic = new mars3d.graphic.PolygonEntity({
                           positions: fence,
                           style: {
                              color: Cesium.Color.RED.withAlpha(0.3), // 围栏颜色，半透明
                              outline: true, // 是否显示边框
                              outlineColor: "#5BFF1A" // 边框颜色
                        let colorFence = ""
                        let JuXingcolorFence = ""
                        if (e.color == "红色") {
                           colorFence = "#C70708"
                           JuXingcolorFence = "rgba(227,60,47,0.5)"
                           }
                        if (e.color == "蓝色") {
                           colorFence = "#0D3DC1"
                           JuXingcolorFence = "rgba(13,130,125,0.5)"

                        }
                        if (e.color == "绿色") {
                           colorFence = "#20D85C"
                           JuXingcolorFence = "rgba(54,150,80,0.5)"
                        }
                        if (e.color == "黑色") {
                           colorFence = "#1E1E1E"
                           JuXingcolorFence = "rgba(0,0,0,0.5)"
                        }
                        if (e.color == "白色") {
                           colorFence = "#FFFFFF"
                           JuXingcolorFence = "rgba(255,255,255,0.5)"
                        }
                        if (e.shape == '圆形') {
                           const fenceGraphic = new mars3d.graphic.CirclePrimitive({
                              position: fence[0],
                              style: {
                                 radius: fence[1][0], // 半径
                                 color: JuXingcolorFence,
                                 diffHeight: parseInt(e.baoliu1) / 100,
                                 label: {
                                    text: e.name,
                                    font_size: 18,
                                    color: "#FFFFFF",
                                    distanceDisplayCondition: true,
                                    distanceDisplayCondition_far: 500000,
                                    distanceDisplayCondition_near: 0
                                 }
                              },
                        });
                        graphicLayer.addGraphic(fenceGraphic);
                        addedFenceIds.add(e.id);
                        } else if (e.shape == '多边形') {
                           console.log(fence);
                           const fenceGraphic = new mars3d.graphic.WallPrimitive({
                              positions: fence,
                              style: {
                                 closure: true,
                                 diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                                    .baoliu1) / 100,
                                 materialType: mars3d.MaterialType.LineFlow,
                                 materialOptions: {
                                    // 动画线材质
                                    image: "static/img/textures/fence.png",
                                    axisY: true,
                                    color: colorFence,
                                    speed: 10 // 速度，建议取值范围1-100
                                 },
                                 label: {
                                    text: e.name,
                                    font_size: 18,
                                    outline: true,
                                    outlineColor: colorFence,
                                    color: "#ffffff",
                                    distanceDisplayCondition: true,
                                    distanceDisplayCondition_far: 500000,
                                    distanceDisplayCondition_near: 0
                                 }
                              },

                           })
                           // var fenceGraphic = new mars3d.graphic.RectanglePrimitive({
                           //    positions: [
                           //       fence[0],
                           //       fence[1]
                           //    ],
                           //    style: {
                           //       color: JuXingcolorFence,
                           //       diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                           //          .baoliu1) / 100,
                           //       label: {
                           //          text: e.name,
                           //          font_size: 18,
                           //          color: "#FFFFFF",
                           //          distanceDisplayCondition: true,
                           //          distanceDisplayCondition_far: 500000,
                           //          distanceDisplayCondition_near: 0
                           //       }
                           //    },

                           // })
                           graphicLayer.addGraphic(fenceGraphic);
                           addedFenceIds.add(e.id);
                        // }else if (e.shape == '矩形') {
                        //    console.log(fence);
                        //    // const fenceGraphic = new mars3d.graphic.WallPrimitive({
                        //    //    positions: fence,
                        //    //    style: {
                        //    //       closure: true,
                        //    //       diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                        //    //          .baoliu1) / 100,
                        //    //       materialType: mars3d.MaterialType.LineFlow,
                        //    //       materialOptions: {
                        //    //          // 动画线材质
                        //    //          image: "static/img/textures/fence.png",
                        //    //          axisY: true,
                        //    //          color: colorFence,
                        //    //          speed: 10 // 速度，建议取值范围1-100
                        //    //       },
                        //    //       label: {
                        //    //          text: e.name,
                        //    //          font_size: 18,
                        //    //          outline: true,
                        //    //          outlineColor: colorFence,
                        //    //          color: "#ffffff",
                        //    //          distanceDisplayCondition: true,
                        //    //          distanceDisplayCondition_far: 500000,
                        //    //          distanceDisplayCondition_near: 0
                        //    //       }
                        //    //    },

                        //    // })
                        //    var fenceGraphic = new mars3d.graphic.RectanglePrimitive({
                        //       positions: [
                        //          fence[0],
                        //          fence[1]
                        //       ],
                        //       style: {
                        //          color: JuXingcolorFence,
                        //          diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                        //             .baoliu1) / 100,
                        //          label: {
                        //             text: e.name,
                        //             font_size: 18,
                        //             color: "#FFFFFF",
                        //             distanceDisplayCondition: true,
                        //             distanceDisplayCondition_far: 500000,
                        //             distanceDisplayCondition_near: 0
                        //          }
                        //       },

                        //    })
                        //    graphicLayer.addGraphic(fenceGraphic);
                        //    addedFenceIds.add(e.id);
                     }
                  } else {
                     if (addedFenceIds.has(e.id)) {
@@ -1327,25 +1630,17 @@
                        // };
                     }
                  }
                  }
               }) // 将传递过来的值赋值给points，这样就可以在视图层中使用
            } else {
               addedFenceIds = new Set();
            }


         },
         getBaseData(newValue) {
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {

                  // console.log('打印数据=================');
                  // let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
                  // console.log(e);
                  // let parts = e.image.split(',');
                  if (e.anchormode === '1') {
                     if (!addedBaseIds.has(e.anchorid)) {
                        // console.log(e.anchorid);
                        // console.log('打印base数据===================》》》》》》》》》》》》》》');
                        //测试本地图片
                        const graphic = new mars3d.graphic.BillboardEntity({
                           position: [e.baoliu6, e.baoliu7, 0],
@@ -1383,7 +1678,8 @@
                              outlineWidth: 2, // 描边宽度
                              style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
                              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
                              pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
                              pixelOffset: new Cesium.Cartesian2(0, -
                                 30) // 文字偏移量，向下偏移10像素
                           }
                        });
                        if (this.graphicLabels[e.anchorid]) {
@@ -1450,14 +1746,24 @@
            }
         },
         getData(newValue) {
            let modelParam = {
               scale: 2,
               url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
               pitch: 0,
               roll: 0,
            };
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {
                  if (e.online === '1') {
                     if (!addedCarIds.has(e.id)) {
                        //测试本地图片
                        const graphic = new mars3d.graphic.BillboardEntity({

                           position: [e.baoliu2, e.baoliu3, 0],
                           id: e.id,
                           // model: {
                           //    ...modelParam,
                           // },
                           style: {
                              image: "static/img/person5.png",
                              // scale:0.2,
@@ -1470,6 +1776,7 @@
                              baoliu3: e.baoliu3,
                              ppower: e.ppower,
                              baoliu4: e.baoliu4,
                              baoliu13: e.baoliu13,
                              pdepartment: e.pdepartment,
                              pname: e.name,
                              ptagid: e.id,
@@ -1485,7 +1792,8 @@
                              outlineWidth: 2, // 描边宽度
                              style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
                              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
                              pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
                              pixelOffset: new Cesium.Cartesian2(0, -
                                 30) // 文字偏移量，向下偏移10像素
                           }
                        });
                        if (this.graphicLabels[e.id]) {
@@ -1524,6 +1832,7 @@
                                 baoliu3: e.baoliu3,
                                 ppower: e.ppower,
                                 baoliu4: e.baoliu4,
                                 baoliu13: e.baoliu13,
                                 pdepartment: e.pdepartment,
                                 pname: e.name,
                                 ptagid: e.ptagid,
@@ -1535,6 +1844,10 @@
                           this.graphicLabels[e.id] = {
                              graphic: graphic1,
                           };
                        } else {
                           graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
                           graphicLayer.removeGraphic(this.graphicLabels[e.id].label);
                           delete this.graphicLabels[e.id];
                        }
                        addedCarIds.delete(e.id);
                     }
@@ -1543,6 +1856,12 @@
            }
         },
         getgpsData(newValue) {
            let modelParam = {
               scale: 2,
               url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
               pitch: 0,
               roll: 0,
            };
            if (Object.keys(newValue).length != 0) {
               var listALL = newValue;
               if (graphicLayer != null) {
@@ -1589,6 +1908,9 @@
                           graphicLayer.removeGraphic(car);
                           graphicLayer.removeGraphic(label);
                        }
                        // model: {
                        //    ...modelParam,
                        // },
                        if (item.ponline === '1') {
                           // 创建新的图标实体
                           const newGraphic = new mars3d.graphic.BillboardEntity({
@@ -1597,7 +1919,8 @@
                              style: {
                                 image: iconSrc,
                                 scale: scaleSrc,
                                 horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                 horizontalOrigin: Cesium.HorizontalOrigin
                                    .CENTER,

                                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                 // pixelOffset: new Cesium.Cartesian2(0, 10), // 向下偏移50像素
@@ -1608,6 +1931,7 @@
                                 baoliu3: item.baoliu3,
                                 ppower: item.ppower,
                                 baoliu4: item.baoliu4,
                                 baoliu13: item.baoliu13,
                                 pdepartment: item.pdepartment,
                                 pname: item.pname,
                                 ptagid: item.ptagid,
@@ -1730,6 +2054,7 @@
      z-index: 99999999;
   }


   .content {
      display: flex;
      flex-direction: column;