fix: 修改地图交互

src/api/reservoir/index.js

@@ -42,3 +42,19 @@ export const getReservoirRsppDetailData = (id) =>{
     method: 'get'
   })
 }
+
+// 水库实时监测--监测站树数据
+export const getReservoirMonitorTreeData = (id) =>{
+  return request({
+    url: `/sk/??`,
+    method: 'get'
+  })
+}
+
+// 水库实时监测--降雨量等详情
+export const getReservoirRainDetailData = (id) =>{
+  return request({
+    url: `/sk/??`,
+    method: 'get'
+  })
+}

src/utils/index.js

@@ -466,3 +466,10 @@ export function loadScript(url) {
     document.head.appendChild(script)
   })
 }
+
+// 开发时候生效
+export function devRun(cb){
+  if(process.env.NODE_ENV === 'development'){
+    if(cb) cb()
+  }
+}

src/views/reservoir/safeOperation/components/ProjectDetail.vue

@@ -27,7 +27,7 @@ export default {
   methods: {
     initData(code) {
       this.$refs.baseInfoRef.initData(code);
-      this.$refs.realTimeMonitor.initData(code);
+      // this.$refs.realTimeMonitor.initData(code);
     },
   },
 };

src/views/reservoir/safeOperation/components/RealTimeMonitor.vue

@@ -9,6 +9,9 @@
             <el-date-picker
               v-model="paramsData.startDate"
               type="date"
+              :picker-options="{
+                disabledDate: filterStartDate,
+              }"
               placeholder="选择日期"
             >
             </el-date-picker>
@@ -18,6 +21,9 @@
             <el-date-picker
               v-model="paramsData.endDate"
               type="date"
+              :picker-options="{
+                disabledDate: filterEndDate,
+              }"
               placeholder="选择日期"
             >
             </el-date-picker>
@@ -55,9 +61,15 @@
 <script>
 import * as echarts from "echarts";
 import { initReverseLineOptions, doubleYAxisOptions } from "../js/initEcharts";
+
+import {
+  getReservoirMonitorTreeData,
+  getReservoirRainDetailData,
+} from "@/api/reservoir";
 export default {
   data() {
     return {
+      resCode: null, // 水库编码
       activeName: "1",
       filterText: "",
       myChart: null,
@@ -104,50 +116,82 @@ export default {
   methods: {
     initData(code) {
       console.log("请求数据 >>>>>> ", code);
+      this.resCode = code;
+      getReservoirMonitorTreeData(code).then((res) => {
+        this.treeData = res.data;
+      });
     },
 
+    filterStartDate(date) {
+      if (this.paramsData.endDate) {
+        return (
+          (date && date.valueOf() > this.paramsData.endDate) ||
+          date.valueOf() > Date.now()
+        );
+      }
+      return date && date.valueOf() > Date.now();
+    },
+    filterEndDate(date) {
+      if (this.paramsData.startDate) {
+        return (
+          (date && date.valueOf() < this.paramsData.startDate) ||
+          date.valueOf() > Date.now()
+        );
+      }
+      return date && date.valueOf() > Date.now();
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    handleSearch() {},
+    initChart(data, type) {
+      // 渲染echarts
+      switch (type) {
+        case "1":
+          // 渲染雨量站echarts
+          if (!this.$refs.echartsRef) {
+            return;
+          }
+          if (this.myChart) {
+            this.myChart.dispose();
+          }
+          let options = initReverseLineOptions(data);
+          this.myChart = echarts.init(this.$refs.echartsRef);
+          options && this.myChart.setOption(options);
+          break;
+        case "2":
+          // 渲染水位站echarts
+          if (!this.$refs.echartsRef) {
+            return;
+          }
+          if (this.myChart) {
+            this.myChart.dispose();
+          }
+          let options2 = doubleYAxisOptions(data);
+          this.myChart = echarts.init(this.$refs.echartsRef);
+          options2 && this.myChart.setOption(options2);
+          break;
+
+        default:
+          break;
+      }
+    },
+    // 请求数据
+    handleSearch() {
+      this.initData();
+    },
     handleReset() {
       this.paramsData.startDate = "";
       this.paramsData.endDate = "";
     },
     handleClickTreeNode(data, node) {
-      console.log("handleClickTreeNode >>>>>  ", data, node);
       if (node.isLeaf && data.type) {
-        // 渲染echarts
+        getReservoirRainDetailData({
-        switch (data.type) {
+          resCode: this.resCode,
-          case "1":
+          id: data.id,
-            // 渲染雨量站echarts
+        }).then((res) => {
-            if (!this.$refs.echartsRef) {
+          this.initChart(res.data, data.type);
-              return;
+        });
-            }
-            if (this.myChart) {
-              this.myChart.dispose();
-            }
-            let options = initReverseLineOptions();
-            this.myChart = echarts.init(this.$refs.echartsRef);
-            options && this.myChart.setOption(options);
-            break;
-          case "2":
-            // 渲染水位站echarts
-            if (!this.$refs.echartsRef) {
-              return;
-            }
-            if (this.myChart) {
-              this.myChart.dispose();
-            }
-            let options2 = doubleYAxisOptions();
-            this.myChart = echarts.init(this.$refs.echartsRef);
-            options2 && this.myChart.setOption(options2);
-            break;
-
-          default:
-            break;
-        }
       }
     },
   },

src/views/reservoir/safeOperation/index.vue

@@ -20,7 +20,9 @@
       <div class="btn mb-10 cursor-pointer" @click="showTreeBox = !showTreeBox">
         图层管理
       </div>
-      <div class="btn cursor-pointer">二维地图</div>
+      <div class="btn cursor-pointer" @click="handleChangeMode">
+        {{ mapSceneType === 3 ? "三" : "二" }}维地图
+      </div>
     </div>
 
     <!-- 树结构浮窗 -->
@@ -78,6 +80,7 @@ import {
 import { queryLayersByPos } from "./js/mapUtils";
 
 import { throttle } from "lodash-es";
+import { devRun } from "@/utils";
 
 const emitter = mitt();
 
@@ -92,7 +95,7 @@ export default {
   data() {
     return {
       showDialog: false,
-      mapType: "2D", // 3D
+      mapSceneType: 2, // 2: 2D, 3: 3D
       showTreeBox: false,
       defaultProps: {
         children: "layers",
@@ -115,13 +118,26 @@ export default {
       }).then((res) => {
         let id = res.records?.[0]?.id;
         getLayerData(id).then((res) => {
-          console.log("res >>>>>  ", res);
           this.treeData = res.data.children;
         });
       });
     },
+    handleChangeMode() {
+      this.mapSceneType = this.mapSceneType === 3 ? 2 : 3;
+      viewer?.changeSceneMode(this.mapSceneType);
+      let position = new sycim.Position(113.27, 23.13, 600000, 0, -90, 0);
+      viewer?.flyToPosition(
+        position,
+        () => {
+          console.log("移动结束 >>>>> ");
+        },
+        1
+      );
+    },
     initMap() {
-      viewer = new sycim.Viewer("reservoir-map-container");
+      viewer = new sycim.Viewer("reservoir-map-container", {
+        sceneMode: this.mapSceneType, // 2: 2D, 3: 3D
+      });
       window.viewer = viewer;
       let baseLayer = sycim.ImageryLayerFactory.createImageryLayer(
         sycim.ImageryType.ARCGIS,
@@ -206,6 +222,9 @@ export default {
       window.viewer.on(
         sycim.MouseEventType.MOUSE_MOVE,
         throttle((e) => {
+          if (!e.wgs84SurfacePosition) {
+            return;
+          }
           queryLayersByPos(e.wgs84SurfacePosition, this.layerList, (res) => {
             if (res) {
               this.handleAddHtmlLayer(e.wgs84SurfacePosition, res);
@@ -220,10 +239,13 @@ export default {
 
     openDialog(e) {
       console.log("openDialog >>>>>  ", e);
+      let code = e;
       this.showDialog = true;
       this.$nextTick(() => {
-        // this.$refs.detailRef.initData(e);
+        devRun(() => {
-        this.$refs.detailRef.initData("440111000034");
+          code = "440111000034";
+        });
+        this.$refs.detailRef.initData(code);
       });
     },
     // 添加layer

vue.config.js

@@ -23,7 +23,7 @@ module.exports = {
   outputDir: 'dist',
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
   assetsDir: 'static',
-  // 是否开启eslint保存检测，有效值：ture | false | 'error'
+  // 是否开启eslint保存检测，有效值：true | false | 'error'
   lintOnSave: process.env.NODE_ENV === 'development',
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,