任务管理数据预览修改

public/static/config/config.js

@@ -23,21 +23,21 @@ let systemConfig = {
   modelIds: [1667, 1690, 1677, 1673],
   columnIds: [1657, 1659, 1666, 1676, 1665, 1651, 1662],
 
-  iframeUrl: "http://10.235.245.174:2024/",
+  iframeUrl: "http://10.235.245.174:2024/?token=1",
 
   // baseServicerPath: "/oneMap",
   baseServicerPath: "http://121.43.55.7:13901/qpyzt",
   // oauth和DMS环境
-  backServerPath: "http://121.43.55.7",
+  backServerPath: "http://121.43.55.7",   // 运行管理中使用
   // oauth地址
-  oauthServiceUrlOrigin: "http://121.43.55.7:10086/",
+  oauthServiceUrlOrigin: "http://121.43.55.7:10086/",  // App里使用
   // oauth地址
   // oauthServiceUrl: "/proxy_oauth",
   oauthServiceUrl: "http://121.43.55.7:10086/oauth/",
   // oauth前端地址
-  oauthWebUrlPort: "2100",
+  oauthWebUrlPort: "2100",  // 运行管理中使用
   // dms前端地址
-  dmsWebUrlPort: "2101",
+  dmsWebUrlPort: "2101",  // 运行管理中使用
   // dms地址
   // dmsDataProxy: "/proxy_dms",
   dmsDataProxy: "http://121.43.55.7:10081/dms/",

src/components/filePreview/viewPreview.vue

@@ -36,6 +36,7 @@
 import { ElMessage } from "element-plus";
 import VueOfficeExcel from "@vue-office/excel";
 import "@vue-office/excel/lib/index.css";
+import { ElLoading } from "element-plus";
 import { toRaw } from "vue";
 export default {
   name: "",
@@ -52,9 +53,10 @@ export default {
       nowPoint: null,
       nowPointInfo: null,
       excelUrl: "",
-      loading: false,
+      loading: null,
       error: "",
       isShow: 1,
+      drawnEntities: [],
     };
   },
   created() {},
@@ -65,6 +67,11 @@ export default {
     if (url) {
       let arr = url.split(".");
       let type = arr[arr.length - 1];
+      this.loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
       if (type == "json" || type == "geojson") {
         let param = { url: url };
         this.isShow = 1;
@@ -93,19 +100,19 @@ export default {
     loadExcel() {
       if (!this.excelUrl) {
         // this.error = '请输入Excel文件在线地址'
+        this.loading.close();
         return;
       }
-      this.loading = true;
       this.error = "";
       // 加载Excel文件，实际加载由VueOfficeExcel组件处理
       setTimeout(() => {
-        this.loading = false;
+        this.loading.close();
       }, 1000);
     },
     onError(err) {
       ElMessage.error("Excel文件加载失败:", err);
       // this.error = 'Excel文件加载失败，请检查文件地址是否正确'
-      this.loading = false;
+      this.loading.close();
     },
     creatMap() {
       window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
@@ -169,85 +176,384 @@ export default {
     },
     dwanMap() {
       let that = this;
-      if (that.geometryArr.length > 0) {
-        that.geometryArr.map(function (info) {
-          viewer.entities.remove(info);
+      // if (that.geometryArr.length > 0) {
+      //   that.geometryArr.map(function (info) {
+      //     viewer.entities.remove(info);
+      //   });
+      // }
+      // that.geometryArr = that.dataJson.features.map(function (info) {
+      //   console.log("dataJson======"+JSON.stringify(info));
+      //   if (info.geometry.type == "Point") {
+      //     return that.addPoint(info);
+      //   } else if (info.geometry.type == "LineString") {
+      //     return that.addLine(info);
+      //   } else {
+      //     return that.addPolygon(info);
+      //   }
+      // });
+      that.addToMap(that.dataJson);
+      this.flyToGeojson(that.dataJson);
+      that.pointTCHandle();
+    },
+
+    // 飞行定位到geojson范围
+    flyToGeojson(geojson) {
+      if (!viewer || !geojson) {
+        return;
+      }
+      const points = this.collectGeojsonCoordinates(geojson);
+      if (!points.length) {
+        return;
+      }
+      if (points.length === 1) {
+        viewer.camera.flyTo({
+          destination: SkyScenery.Cartesian3.fromDegrees(points[0][0], points[0][1], 1200),
+          duration: 1.1,
+          orientation: {
+            heading: viewer.camera.heading,
+            pitch: SkyScenery.Math.toRadians(-65),
+            roll: 0,
+          },
         });
+        viewer.scene.requestRender();
+        return;
       }
-      that.geometryArr = that.dataJson.features.map(function (info) {
-        if (info.geometry.type == "Point") {
-          return that.addPoint(info);
-        } else if (info.geometry.type == "LineString") {
-          return that.addLine(info);
-        } else {
-          return that.addPolygon(info);
-        }
+      let minLon = Infinity;
+      let maxLon = -Infinity;
+      let minLat = Infinity;
+      let maxLat = -Infinity;
+      points.forEach((point) => {
+        minLon = Math.min(minLon, point[0]);
+        maxLon = Math.max(maxLon, point[0]);
+        minLat = Math.min(minLat, point[1]);
+        maxLat = Math.max(maxLat, point[1]);
       });
-      that.pointTCHandle();
+      const lonPad = Math.max((maxLon - minLon) * 0.25, 0.0008);
+      const latPad = Math.max((maxLat - minLat) * 0.25, 0.0008);
+      viewer.camera.flyTo({
+        destination: SkyScenery.Rectangle.fromDegrees(
+          minLon - lonPad,
+          minLat - latPad,
+          maxLon + lonPad,
+          maxLat + latPad
+        ),
+        duration: 1.1,
+      });
+      viewer.scene.requestRender();
+    },
+    collectGeojsonCoordinates(geojson) {
+      let that = this;
+      if (!geojson) {
+        return [];
+      }
+      if (geojson.features && Array.isArray(geojson.features)) {
+        return geojson.features.flatMap((feature) =>
+          that.collectGeometryCoordinates(feature.geometry)
+        );
+      }
+      if (geojson.geometry) {
+        return that.collectGeometryCoordinates(geojson.geometry);
+      }
+      return [];
     },
-    addPolygon(param) {
-      let arr = [];
-      param.geometry.coordinates.forEach((element) => {
-        element.forEach((e) => {
-          arr.push(e[0]);
-          arr.push(e[1]);
+    collectGeometryCoordinates(geometry) {
+      if (!geometry || !geometry.coordinates) {
+        return [];
+      }
+      const { type, coordinates } = geometry;
+      const points = [];
+      if (type === "Point") {
+        points.push([coordinates[0], coordinates[1]]);
+      } else if (type === "LineString") {
+        coordinates.forEach((coord) => points.push([coord[0], coord[1]]));
+      } else if (type === "Polygon") {
+        coordinates.forEach((ring) => {
+          ring.forEach((coord) => points.push([coord[0], coord[1]]));
+        });
+      } else if (type === "MultiPolygon") {
+        coordinates.forEach((polygon) => {
+          polygon.forEach((ring) => {
+            ring.forEach((coord) => points.push([coord[0], coord[1]]));
+          });
         });
+      }
+      return points;
+    },
+    // 将geojson添加到地图中
+    addToMap(geojson) {
+      this.drawnEntities.forEach((entity) => {
+        viewer.entities.remove(entity);
       });
-      return viewer.entities.add(
-        new SkyScenery.Entity({
-          name: " polygon",
-          polygon: {
-            hierarchy: {
-              positions: SkyScenery.Cartesian3.fromDegreesArray(arr),
-            },
-            heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
-            material: SkyScenery.Color.CYAN.withAlpha(0.5),
-          },
-          info: {
-            coor: [arr[0], arr[1]],
-            properties: param.properties,
-          },
-        })
-      );
+      const source = "sourceId";
+      if (geojson.features) {
+        const features = geojson.features;
+        // 2. 遍历features，根据type添加到地图中
+        // console.log("features", features);
+        features.forEach((feature, featureIndex) => {
+          const { type, coordinates } = feature.geometry;
+          const featureProperties = feature.properties || {};
+          const featureRefInfo = {
+            source,
+            featureIndex,
+          };
+          switch (type) {
+            case "Point":
+              // 点
+              this.addPoint(coordinates, featureProperties, featureRefInfo);
+              break;
+            case "LineString":
+              // 线
+              this.addLine(coordinates, featureProperties, featureRefInfo);
+              break;
+            case "Polygon":
+            case "MultiPolygon":
+              // 面
+              this.addPolygon(coordinates, featureProperties, featureRefInfo);
+              break;
+            default:
+              break;
+          }
+        });
+      }
+      setTimeout(() => {
+        viewer.scene.requestRender();
+        this.loading.close();
+      });
+    },
+    // 添加点到地图中
+    addPoint(coordinates, featureProperties = null, featureRefInfo = null) {
+      // 1. 解析点的坐标
+      console.log("addPoint coordinates", coordinates);
+      // 2. 创建点实体
+      const pointEntity = viewer.entities.add({
+        name: "point",
+        position:
+          coordinates.length > 2
+            ? SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+            : SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
+        point: {
+          show: true,
+          color: SkyScenery.Color.RED,
+          pixelSize: 10,
+          outlineColor: SkyScenery.Color.WHITE,
+          outlineWidth: 2,
+        }
+      });
+      pointEntity.__featureProperties = featureProperties;
+      pointEntity.__featureRef = featureRefInfo;
+      // 3. 将点实体添加到drawnEntities中
+      this.drawnEntities.push(pointEntity);
     },
-    addLine(param) {
-      return viewer.entities.add({
+    // 添加线到地图中
+    addLine(coordinates, featureProperties = null, featureRefInfo = null) {
+      // 1. 解析线的坐标
+      console.log("addLine coordinates", coordinates);
+      // 2. 处理坐标格式：如果是二维数组则取第一个元素，否则直接使用
+      const lineCoordinates =
+        Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
+          ? coordinates[0]
+          : coordinates;
+
+      // 3. 检测坐标是否包含Z值
+      const hasZValues = lineCoordinates.some(
+        (coord) => coord.length > 2 && typeof coord[2] === "number"
+      );
+
+      // 4. 根据是否有Z值选择合适的坐标转换方法
+      let positions;
+      if (hasZValues) {
+        // 包含Z值，使用带高度的坐标转换方法
+        const flatCoordinatesWithHeights = [];
+        lineCoordinates.forEach((coord) => {
+          flatCoordinatesWithHeights.push(coord[0], coord[1], coord[2] || 0);
+        });
+        positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(flatCoordinatesWithHeights);
+      } else {
+        // 不包含Z值，使用普通坐标转换方法
+        const flatCoordinates = [];
+        lineCoordinates.forEach((coord) => {
+          flatCoordinates.push(coord[0], coord[1]);
+        });
+        positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
+      }
+
+      // 5. 创建线实体
+      const lineEntity = viewer.entities.add({
         name: "line",
         polyline: {
-          //经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
-          positions: SkyScenery.Cartesian3.fromDegreesArray(param.geometry.coordinates),
-          width: 2,
-          material: SkyScenery.Color.CYAN,
+          show: true,
+          positions: positions,
+          material: SkyScenery.Color.BLUE.withAlpha(0.8),
+          width: 3,
           info: {
-            properties: param.properties,
+            properties: featureProperties,
           },
         },
+
       });
+      lineEntity.__featureProperties = featureProperties;
+      lineEntity.__featureRef = featureRefInfo;
+
+      // 6. 将线实体添加到drawnEntities中
+      this.drawnEntities.push(lineEntity);
     },
-    addPoint(param) {
-      let that = this;
-      return viewer.entities.add(
-        new SkyScenery.Entity({
-          name: "point",
-          position: SkyScenery.Cartesian3.fromDegrees(
-            param.geometry.coordinates[0],
-            param.geometry.coordinates[1]
-          ),
-          type: "point",
-          info: {
-            coor: [param.geometry.coordinates[0], param.geometry.coordinates[1]],
-            properties: param.properties,
-          },
-          billboard: {
-            image: that.pointImg,
-            disableDepthTestDistance: Number.POSITIVE_INFINITY,
-            scale: 0.3,
-            horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
-            verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
-          },
-        })
+    // 添加面到地图中
+    addPolygon(coordinates, featureProperties = null, featureRefInfo = null) {
+      // 检测是否为MultiPolygon类型（MultiPolygon的坐标是三维数组）
+      if (
+        Array.isArray(coordinates[0]) &&
+        Array.isArray(coordinates[0][0]) &&
+        Array.isArray(coordinates[0][0][0])
+      ) {
+        console.log("MultiPolygon coordinates", coordinates);
+        // 是MultiPolygon类型，遍历每个Polygon
+        coordinates.forEach((polygonCoordinates) => {
+          this.renderSinglePolygon(polygonCoordinates, featureProperties, featureRefInfo);
+        });
+      } else {
+        // 是单个Polygon类型
+        this.renderSinglePolygon(coordinates, featureProperties, featureRefInfo);
+      }
+    },
+    // 渲染单个Polygon
+    renderSinglePolygon(coordinates, featureProperties = null, featureRefInfo = null) {
+      // 1. 处理坐标格式：确保获取外部环坐标
+      const outerRingCoordinates =
+        Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
+          ? coordinates[0]
+          : coordinates;
+
+      // 2. 检测坐标是否包含Z值
+      const hasZValues = outerRingCoordinates.some(
+        (coord) => coord.length > 2 && typeof coord[2] === "number"
       );
+
+      // 3. 根据是否有Z值选择合适的坐标转换方法
+      let positions;
+      let baseHeight = 0;
+      let extrudedHeight = 0; // 默认挤压高度
+
+      if (hasZValues) {
+        // 包含Z值，使用带高度的坐标转换方法
+        const flatCoordinatesWithHeights = [];
+        let minZ = Infinity;
+        let maxZ = -Infinity;
+
+        // 计算Z值的范围
+        outerRingCoordinates.forEach((coord) => {
+          const z = coord[2] || 0;
+          minZ = Math.min(minZ, z);
+          maxZ = Math.max(maxZ, z);
+          flatCoordinatesWithHeights.push(coord[0], coord[1], minZ); // 使用最小Z值作为基础高度
+        });
+
+        positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(flatCoordinatesWithHeights);
+        baseHeight = minZ;
+        extrudedHeight = maxZ;
+      } else {
+        // 不包含Z值，使用普通坐标转换方法
+        const flatCoordinates = [];
+        outerRingCoordinates.forEach((coord) => {
+          flatCoordinates.push(coord[0], coord[1]);
+        });
+        positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
+      }
+
+      // 4. 创建面实体
+      const polygonEntity = viewer.entities.add({
+        name: "polygon",
+        polygon: {
+          hierarchy: {
+            positions: positions,
+          },
+          height: baseHeight, // 多边形底部高度
+          extrudedHeight: extrudedHeight, // 多边形顶部高度，实现3D挤压效果
+          heightReference: hasZValues
+            ? SkyScenery.HeightReference.NONE
+            : SkyScenery.HeightReference.CLAMP_TO_GROUND,
+          material: SkyScenery.Color.GREEN.withAlpha(0.5),
+          outline: true,
+          outlineColor: SkyScenery.Color.WHITE,
+          outlineWidth: 2,
+          // 设置侧面材质
+          extrudedMaterial: SkyScenery.Color.GREEN.withAlpha(0.8),
+        },
+        info: {
+          properties: featureProperties,
+        },
+      });
+      polygonEntity.__featureProperties = featureProperties;
+      polygonEntity.__featureRef = featureRefInfo;
+
+      // 5. 将面实体添加到drawnEntities中
+      this.drawnEntities.push(polygonEntity);
     },
+
+
+
+    // addPolygon(param) {
+    //   let arr = [];
+    //   param.geometry.coordinates.forEach((element) => {
+    //     element.forEach((e) => {
+    //       arr.push(e[0]);
+    //       arr.push(e[1]);
+    //     });
+    //   });
+    //   return viewer.entities.add(
+    //     new SkyScenery.Entity({
+    //       name: " polygon",
+    //       polygon: {
+    //         hierarchy: {
+    //           positions: SkyScenery.Cartesian3.fromDegreesArray(arr),
+    //         },
+    //         heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
+    //         material: SkyScenery.Color.CYAN.withAlpha(0.5),
+    //       },
+    //       info: {
+    //         coor: [arr[0], arr[1]],
+    //         properties: param.properties,
+    //       },
+    //     })
+    //   );
+    // },
+    // addLine(param) {
+    //   return viewer.entities.add({
+    //     name: "line",
+    //     polyline: {
+    //       //经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
+    //       positions: SkyScenery.Cartesian3.fromDegreesArray(param.geometry.coordinates),
+    //       width: 2,
+    //       material: SkyScenery.Color.CYAN,
+    //       info: {
+    //         properties: param.properties,
+    //       },
+    //     },
+    //   });
+    // },
+    // addPoint(param) {
+    //   let that = this;
+    //   return viewer.entities.add(
+    //     new SkyScenery.Entity({
+    //       name: "point",
+    //       position: SkyScenery.Cartesian3.fromDegrees(
+    //         param.geometry.coordinates[0],
+    //         param.geometry.coordinates[1]
+    //       ),
+    //       type: "point",
+    //       info: {
+    //         coor: [param.geometry.coordinates[0], param.geometry.coordinates[1]],
+    //         properties: param.properties,
+    //       },
+    //       billboard: {
+    //         image: that.pointImg,
+    //         disableDepthTestDistance: Number.POSITIVE_INFINITY,
+    //         scale: 0.3,
+    //         horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
+    //         verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
+    //       },
+    //     })
+    //   );
+    // },
     // 点击事件绑定
     pointTCHandle() {
       let that = this;
@@ -270,13 +576,21 @@ export default {
           if (SkyScenery.defined(pickedObject) && SkyScenery.defined(pickedObject.id)) {
             const entity = pickedObject.id;
             that.infoDialogShow = true;
-            that.nowPoint = entity.info;
+            // that.nowPoint = entity.info;
+            // that.nowPointInfo = Object.keys(that.nowPoint.properties).map((key) => ({
+            //   key,
+            //   value: that.nowPoint.properties[key],
+            // }));
+            // that.nowPoint["type"] = "info";
+            // let xy = that.lonlatConvertToScreenXY(entity.info.coor)
+            let info = {properties: entity.__featureProperties};
+            that.nowPoint = info;
             that.nowPointInfo = Object.keys(that.nowPoint.properties).map((key) => ({
               key,
               value: that.nowPoint.properties[key],
             }));
             that.nowPoint["type"] = "info";
-            // let xy = that.lonlatConvertToScreenXY(entity.info.coor)
+
             let xy = that.lonlatConvertToScreenXY(center);
             document.querySelector(".infoDialog").style.top = xy.y - 230 + "px";
             document.querySelector(".infoDialog").style.left = xy.x - 100 + "px";
@@ -349,6 +663,10 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+#skysceneryContainer{
+  width: 100%;
+  height: 100%;
+}
 .container {
   width: 100%;
   height: 100%;
@@ -373,7 +691,7 @@ export default {
   top: 0px;
   left: 0px;
   max-width: 500px;
-  height: 200px;
+  max-height: 500px;
   // background: #01346f99;
   background: #ffffff;
   border-radius: 10px;
@@ -392,7 +710,7 @@ export default {
   }
 
   .content {
-    height: 160px;
+    max-height: 500px;
     // color: #ffffff;
     color: #000000;
     margin: 30px 0px 10px 20px;

src/views/skmh/index.vue

@@ -124,7 +124,7 @@
                 end-placeholder="结束日期"
                 format="YYYY-MM-DD"
                  @change="changeTime"
-                
+
               />
             </div>
             <div class="button-row">
@@ -180,7 +180,7 @@
     </div> -->
 
     <!-- 功能演示 -->
-    <!-- <div class="demo-section">
+    <div class="demo-section">
       <div class="overview-header">
         <h2>功能演示</h2>
       </div>
@@ -195,7 +195,7 @@
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
 
     <div>
       <el-dialog
@@ -305,7 +305,7 @@ export default {
     initData() {
       // this.getTimeRange();
       // this.getCountUserDataByAutoTime();
-      // this.getDmsDataList();
+      this.getDmsDataList();
       this.getDmsAppDataList();
     },
     getTimeRange() {