Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/api/ghss/jctb.js

@@ -29,22 +29,29 @@ export function JctbList(params) {
 }
 export function getJctbInfo(id) {
     return request({
-        url: '/apply/gdbh/jctb/'+`${id}`,
+        url: '/apply/gdbh/jctb/' + `${id}`,
         method: 'get',
-        id:id
+        id: id
     })
 }
 export function getJctbhcInfo(jcbh) {
     return request({
-        url: '/apply/gdbh/jctbhc/jcbh/' +`${jcbh}`,
+        url: '/apply/gdbh/jctbhc/jcbh/' + `${jcbh}`,
         method: 'get',
-        jcbh:jcbh
+        jcbh: jcbh
     })
 }
 export function getFilePath(filePath) {
     return request({
-        url: '/analyse/fzss/DownloadReport?filePath=' +`${filePath}`,
+        url: '/analyse/fzss/DownloadReport?filePath=' + `${filePath}`,
         method: 'get',
-        filePath:filePath
+        filePath: filePath
+    })
+}
+export function getTiffPath(filePath) {
+    return request({
+        url: "/file/read/tif/to/png" + `${filePath}`,
+        method: 'get',
+        filePath: filePath
     })
 }

src/components/mapView/descriptionsInfo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="detailsInfo">
+    <el-descriptions :column="column" :border="border" :title="title" size="mini">
+      <el-descriptions-item v-for="(row, index) in config" :key="index" :label="row.label">
+        <slot v-if="row.isslot" :name="row.value"></slot>
+        <span v-else class="information">
+          {{ model[row.value] }}
+          <span v-if="model[row.value]">{{ row.unit }}</span>
+        </span>
+      </el-descriptions-item>
+    </el-descriptions>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    model: Object,
+    config: Array,
+    column: {
+      type: Number,
+      default: 1
+    },
+    title: String,
+    border: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+  mounted() {
+    console.log(this.config);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-descriptions__header {
+  margin-bottom: 10px;
+  color: #fff;
+}
+
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/.el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell{
+  padding: 6px 10px;
+}
+
+.detailsInfo {}
+</style>

src/router/index.js

@@ -107,6 +107,18 @@ export const constantRoutes = [{
             import('@/views/farmlandProtection/indexNew.vue'),
         hidden: true
     },
+    {
+        path: '/geologyDisaster',
+        component: () =>
+            import('@/views/geologyDisaster/index.vue'),
+        hidden: true
+    },
+    {
+        path: '/echarts',
+        component: () =>
+            import('@/views/farmlandProtection/echarts.vue'),
+        hidden: true
+    },
     {
         path: '/myApplication',
         component: () =>

src/utils/MapHelper/map.js

@@ -42,28 +42,29 @@ export function setImageryRollerMode() {
     // else hideImageryRoller(imageryLayer);
 }
 
-export function setImageryRoller(imageryLayer) {
-    console.log("---", Cesium.SplitDirection.RIGHT)
-    switch (rollerShutterConfig.splitDirection) {
-        case Cesium.SplitDirection.LEFT:
+export function setImageryRoller(imageryLayer, layersplit) {
+    // console.log("-splitDirection--", rollerShutterConfig.splitDirection)
+    let direction = layersplit ? layersplit : rollerShutterConfig.splitDirection
+    switch (direction) {
+        case Cesium.SplitDirection.LEFT://1
             imageryLayer.splitDirection = new Cesium.Cartesian2(
                 Cesium.ImagerySplitDirection.RIGHT,
                 Cesium.ImagerySplitDirection.NONE
             );
             break;
-        case Cesium.SplitDirection.RIGHT:
+        case Cesium.SplitDirection.RIGHT://2
             imageryLayer.splitDirection = new Cesium.Cartesian2(
                 Cesium.ImagerySplitDirection.LEFT,
                 Cesium.ImagerySplitDirection.NONE
             );
             break;
-        case Cesium.SplitDirection.TOP:
+        case Cesium.SplitDirection.TOP://-1
             imageryLayer.splitDirection = new Cesium.Cartesian2(
                 Cesium.ImagerySplitDirection.NONE,
                 Cesium.ImagerySplitDirection.BOTTOM
             );
             break;
-        case Cesium.SplitDirection.BOTTOM:
+        case Cesium.SplitDirection.BOTTOM://-2
             imageryLayer.splitDirection = new Cesium.Cartesian2(
                 Cesium.ImagerySplitDirection.NONE,
                 Cesium.ImagerySplitDirection.TOP

src/views/LandConsolidation/components/contrast.vue

@@ -22,7 +22,7 @@
       :list="dbdata.fp"
       :tname="ptaye == 'gdbh' ? 'year' : 'dlbmmc'"
       @toolChick="$set(layers, i, !layers[i])"
-      @checkChange="(name, c, data) => clickcheck(i, name, c)"
+      @checkChange="(name, c, data) => clickcheck(i, name, c, data)"
       :checkdata="ptaye == 'gdbh' ? gdjlcheck[i] : checkdata[0]"
       :toolTitle="
         ptaye == 'gdbh'
@@ -166,21 +166,27 @@ export default {
     checkedChange(value) {
       console.log(value);
     },
-    clickcheck(i, name, checked) {
+    clickcheck(i, name, checked, data) {
       if (this.$props.ptaye == "gdbh") {
+        this.$set(this.gdjlcheck, i, data);
+        let dobj = this.dbdata.fp.find((d) => d.year == name);
         if (this.active == 0) {
-          if (i == 0) {
-            let dobj = this.dbdata.fp.fined((d) => d.year == name);
-            this.setImager(dobj, checked, (layer) => {
-              setImageryRoller(layer);
-            });
-          }
+          let a = {
+            ...dobj,
+            year: dobj.year + (i ? "right" : ""),
+            isfly: checked,
+          };
+          this.setImager(a, checked, (layer) => {
+            if (checked) setImageryRoller(layer, i ? 1 : 2);
+            else hideImageryRoller(layer);
+          });
         } else if (this.active == 1) {
-          let lay = this.imagelayers[name];
-          viewer.flyTo(lay);
-          lay.setVisibleInViewport(i, checked);
+          this.setImager({ ...dobj, isfly: checked }, true, (layer) => {
+            layer.setVisibleInViewport(i, checked);
+          });
         }
       } else {
+        this.checkdata[0] = data;
         let geodata = geoSources[`${name}${i ? "h" : "q"}`];
         if (geodata) {
           if (checked)
@@ -205,6 +211,7 @@ export default {
     },
 
     async onGdbhClick(i) {
+      this.gdjlcheck = [[], []];
       if (i == 3) {
         this.reset();
         return;
@@ -216,14 +223,20 @@ export default {
         });
       }
       if (i == 0) {
-        
         this.layers = [false, false];
         this.gdjlcheck[0].push(this.dbdata.fp[0].year);
         this.gdjlcheck[1].push(this.dbdata.fp[1].year);
-        this.setImager({ ...this.dbdata.fp[0], top: true }, true);
-        this.setImager({ ...this.dbdata.fp[1], top: false }, true, (layer) => {
+        this.setImager({ ...this.dbdata.fp[0], top: true }, true, (layer) => {
           useRoller(true, "lrRoller", "leftRoller", "", false);
-          setImageryRoller(layer);
+          setImageryRoller(layer, 2);
+        });
+        let data = {
+          ...this.dbdata.fp[1],
+          year: this.dbdata.fp[1].year + "right",
+          top: false,
+        };
+        this.setImager(data, true, (layer) => {
+          setImageryRoller(layer, 1);
         });
       } else {
         Object.keys(this.imagelayers).forEach((key) => {
@@ -236,6 +249,8 @@ export default {
 
       if (i == 1) {
         this.layers = [false, false];
+        this.gdjlcheck[0].push(this.dbdata.fp[0].year);
+        this.gdjlcheck[1].push(this.dbdata.fp[1].year);
         this.setImager({ ...this.dbdata.fp[0] }, true, (layer) => {
           layer.setVisibleInViewport(1, false);
         });
@@ -270,13 +285,19 @@ export default {
         store.setaddNode([
           { id: "ttzz", url: this.dbdata.zzq, label: "土地整治对比" },
         ]);
-        this.setImager({ url: this.dbdata.zzq, year: "qian", top: true }, true);
         this.setImager(
-          { url: this.dbdata.zzh, year: "hou", top: true },
+          { url: this.dbdata.zzq, year: "qian", top: true },
           true,
           (layer) => {
             useRoller(true, "lrRoller", "leftRoller", "", false);
-            setImageryRoller(layer);
+            setImageryRoller(layer, 2);
+          }
+        );
+        this.setImager(
+          { url: this.dbdata.zzh, year: "hou", top: true },
+          true,
+          (layer) => {
+            setImageryRoller(layer, 1);
           }
         );
       } else {
@@ -311,12 +332,12 @@ export default {
           }
         });
       else if (this.active == 2) {
-        this.$refs.aside.activeVal == 1;
-        this.$refs.aside.clearTimer();
         this.layersData.forEach((img) => {
           this.setImager(img, false);
         });
       }
+      this.$refs.aside.activeVal == 1;
+      this.$refs.aside.clearTimer();
     },
     async Getlayers() {
       let res = await QueryList({
@@ -328,7 +349,7 @@ export default {
     playChange(acti) {
       if (acti) {
         this.nolayer = this.layersData[acti - 1].year;
-        this.setImager(this.layersData[acti - 1], true);
+        this.setImager({ ...this.layersData[acti - 1], isfly: true }, true);
       }
     },
     setImager(obj, isshow = true, fun) {
@@ -341,7 +362,7 @@ export default {
       }
       if (obj.top) viewer.imageryLayers.raiseToTop(this.imagelayers[obj.year]);
       fun && fun(this.imagelayers[obj.year]);
-      // viewer.flyTo(this.imagelayers[obj.year]);
+      if (obj.isfly) viewer.flyTo(this.imagelayers[obj.year]);
     },
     roller() {
       rollerShutterConfig.splitDirection = new Cesium.Cartesian2(
@@ -374,11 +395,6 @@ export default {
           });
       });
     },
-
-    setImageryRollers(imageryLayer) {
-      if (this.active == 1) setImageryRoller(imageryLayer);
-      else hideImageryRoller(imageryLayer);
-    },
   },
   watch: {
     nolayer(newVal, oldVal) {

src/views/farmlandProtection/components/hcxx.vue

@@ -6,31 +6,22 @@
           label="图斑编号"
           label-class-name="my-label"
           content-class-name="my-content"
-          >{{ hcObj.jcbh }}</el-descriptions-item
+          >{{ hcObj.jcbh || '无'}}</el-descriptions-item
         >
         <el-descriptions-item
           label="外业核实情况"
           content-class-name="my-content"
           :span="3"
-          >{{ hcObj.wyhsqk }}</el-descriptions-item
+          >{{ hcObj.wyhsqk || '无' }}</el-descriptions-item
         >
         <el-descriptions-item label="实际地类代码">{{
-          hcObj.sjdldm
+          hcObj.sjdldm || '无'
         }}</el-descriptions-item>
         <el-descriptions-item label="调查人员">{{
-          hcObj.dcry
+          hcObj.dcry || '无'
         }}</el-descriptions-item>
         <el-descriptions-item label="调查时间">{{
-          hcObj.dcsj
-        }}</el-descriptions-item>
-        <el-descriptions-item label="扩展信息1">{{
-          "无"
-        }}</el-descriptions-item>
-        <el-descriptions-item label="扩展信息2">{{
-          "无"
-        }}</el-descriptions-item>
-        <el-descriptions-item label="扩展信息3">{{
-          "无"
+          hcObj.dcsj || '无'
         }}</el-descriptions-item>
       </el-descriptions>
     </div>
@@ -59,7 +50,7 @@
 </template>
 
 <script>
-import { getJctbhcInfo } from "@/api/ghss/jctb.js";
+import { getJctbhcInfo,getTiffPath } from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
@@ -73,54 +64,53 @@ export default {
   data() {
     return {
       imgUrl: "",
-      monitorList:[],
-      monitorImg: [
-        {
-          imgUrl:
-            "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
-        },
-        {
-          imgUrl:
-            "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
-        },
-        {
-          imgUrl:
-            "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
-        },
-        {
-          imgUrl:
-            "http://img2.baidu.com/it/u=516755055,1384417278&fm=253&app=138&f=JPEG?w=800&h=1067",
-        },
-        {
-          imgUrl:
-            "http://img0.baidu.com/it/u=1366170349,307387023&fm=253&app=138&f=JPEG?w=800&h=1067",
-        },
-      ],
+      monitorList: [],
       primitive: null,
       selectId: null,
       primitivesArray: [],
       hcObj: null,
       // jtArr:[],//箭头id数组
       // dwArr:[],//
-      idArr:[],//id数组
+      idArr: [], //id数组
+      handler: {},
     };
   },
   computed: {},
   mounted() {
-    this.$nextTick(() => {
-      // this.aaa();
-      // this.ddd();
-      // this.imgUrl =
-      //   "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280";
-    });
-    this.imgUrl = window.axiosURI + "/analyse/fzss/DownloadReport?filePath=";
+    // this.inputAction();
   },
   methods: {
+    inputAction() {
+      // 为viewer添加鼠标移动的监听事件
+      // viewer.screenSpaceEventHandler.setInputAction(function (movement) {
+      //   // movement.endPosition是一个Cesium.Cartesian2对象，表示鼠标在屏幕上的位置
+
+      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      // this.handler.setInputAction(function (movement) {
+      //   let pickedFeature = scene.pick(movement.position);
+      //   console.log(movement,pickedFeature,'////');
+      //   // that[queryName](movement);
+      // },  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 鼠标移动事件
+      this.handler.setInputAction(function (movement) {
+        console.log(movement,'movement');
+        // 通过pick方法获取鼠标下的实体
+        // var pickedObject = viewer.scene.pick(movement.endPosition);
+        // if (
+        //   Cesium.defined(pickedObject) &&
+        //   scene.pickPositionSupported &&
+        //   pickedObject != null
+        // ) {
+        //   console.log(pickedObject,'pickedObject'); // 打印实体的ID
+        // }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
     handleMouseEnter(a, b) {
-      this.ceshi(a.id,'yr');
+      this.ceshi(a.id, "yr");
     },
     handleMouseLeave(a, b) {
-      this.ceshi(a.id,'yc');
+      this.ceshi(a.id, "yc");
     },
     changeData(name, updata) {
       this[name] = updata;
@@ -225,9 +215,9 @@ export default {
       // 聚焦视角到箭头位置
       viewer.zoomTo(arrowEntity);
     },
-    ceshi(id,evtName) {
+    ceshi(id, evtName) {
       let aaa = viewer.entities.getById("jt" + id);
-      if (evtName == 'yr') {
+      if (evtName == "yr") {
         aaa.billboard.image = "/static/images/路径@3x.png";
       } else {
         aaa.billboard.image = "/static/images/路径@3x-2.png";
@@ -320,9 +310,9 @@ export default {
     delatePoi(type) {
       if (this.idArr.length != 0) {
         this.idArr.forEach((item) => {
-      viewer.entities.removeById(type + item);
-      });
-      // this.idArr = [];
+          viewer.entities.removeById(type + item);
+        });
+        // this.idArr = [];
       }
     },
   },
@@ -330,15 +320,15 @@ export default {
     jcbh: {
       handler(newVal, oldVal) {
         getJctbhcInfo(newVal).then((res) => {
-          this.idArr= []
+          this.idArr = [];
           if (res.code == 200) {
             this.monitorList = res.data.images;
             this.hcObj = res.data;
             this.monitorList.forEach((item, i) => {
               item.name = res.data.dcry;
-              item.imagerPath = this.monitorImg[i].imgUrl
+              item.imagerPath = window.axiosURI + "/file/upload/attachment" + item.imagerPath;
               this.ddd(item);
-              this.idArr.push(item.id)
+              this.idArr.push(item.id);
             });
           }
         });

src/views/farmlandProtection/components/jbxx.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div class="detailList">
-      <div class="dbBtn" @click="clickOpen">查看前后影像对比</div>
       <el-descriptions :column="1" border>
         <el-descriptions-item
           label="图斑编号"
@@ -51,7 +50,6 @@
 </template>
 
 <script>
-import {getFilePath} from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
@@ -68,22 +66,8 @@ export default {
     changeData(name, updata) {
       this[name] = updata;
     },
-    clickOpen() {
-      this.$emit("updateParent", "splitScreen", true);
-      // this.$refs.tbDetails.onClick(val);
-      var imageryProvider = new Cesium.UrlTemplateImageryProvider({
-        url: "http://192.168.60.2:8080/analyse/fzss/DownloadReport?filePath=/全域土地整治/jctb/1/0output/HN4602022023022004080080.tif",
-        format: "image/tiff",
-        tilingScheme: new Cesium.GeographicTilingScheme(),
-        maximumLevel: 18,
-      });
-      console.log(imageryProvider, "imageryProviderimageryProvider");
-      viewer.imageryLayers.addImageryProvider(imageryProvider);
-      viewer.flyTo(imageryProvider);
-    },
   },
   watch: {},
-  watch: {},
   beforeDestroy() {},
 };
 </script>

src/views/farmlandProtection/components/tbDetails.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="ghzc">
-    <div class="sm-panel sm-function-module-query" v-drag>
+    <div class="btn" v-if="splitScreen">
+      <span class="sx jcbh">前后影像对比:{{ detailObj.jcbh }}</span>
+      <span class="sx tc" @click="outSce">退出</span>
+      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
+      <span class="sx qsx">前时相:{{ detailObj.qsx }}</span>
+      <span class="sx hsx">后时相:{{ detailObj.hsx }}</span>
+    </div>
+    <div class="sm-panel sm-function-module-query" v-drag v-if="!splitScreen">
       <div class="sm-panel-header">
         <span>图斑详情</span>
         <i class="el-icon-close" @click="closeBox"></i>
@@ -8,10 +15,21 @@
       <div class="ServiceCon">
         <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
           <el-tab-pane label="基本信息" name="jbxx">
-            <Jbxx :detailObj="detailObj" @updateParent="changeData" ref="jbxx"></Jbxx>
+            <div class="dbBtn" @click="clickOpen">查看前后影像对比</div>
+
+            <Jbxx
+              :detailObj="detailObj"
+              @updateParent="changeData"
+              ref="jbxx"
+              v-if="activeTabs == 'jbxx'"
+            ></Jbxx>
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx">
-            <Hcxx @updateParent="changeData" :jcbh="detailObj.jcbh" v-if="activeTabs == 'hcxx'"></Hcxx>
+            <Hcxx
+              @updateParent="changeData"
+              :jcbh="detailObj.jcbh"
+              v-if="activeTabs == 'hcxx'"
+            ></Hcxx>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -28,6 +46,9 @@ import {
   initroller,
   useRoller,
 } from "@/utils/MapHelper/map.js";
+import { getTiffPath } from "@/api/ghss/jctb.js";
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+let layerSources = {};
 export default {
   props: {
     detailObj: {
@@ -41,42 +62,38 @@ export default {
   data() {
     return {
       activeTabs: "jbxx",
-      templateList: [
-        {
-          图斑编号: 6401812024070108270002,
-          行政名称: "海棠区",
-          前时相: "20230925",
-          后时相: "20240701",
-          前类型: "XX",
-          后类型: "XXX",
-        },
-      ],
       emitImgIndex: -1,
       emitImgList: [],
       imagelayers: [],
-      splitScreen:false
+      splitScreen: false,
+      idArr: [],
     };
   },
   computed: {},
-  mounted() {
-    this.$nextTick(() => {
-      initroller();
-    });
-  },
+  mounted() {},
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
     closeBox() {
       if (this.splitScreen) {
-        this.splitScreen = false
-        this.onClick(false);
+        this.splitScreen = false;
+
+        // this.onClick(false);
       }
+      viewer.entities.removeAll();
       this.$emit("updateParent", "isShowTb", false);
-
       this.$emit("updateParent", "emitImgIndex", -1);
+      this.$emit("updateParent", "allShow", true);
     },
-    onClick(show) {
+    outSce() {
+      let mul = "NONE";
+      scene.multiViewportMode = Cesium.MultiViewportMode[mul];
+      this.remove();
+      this.splitScreen = false;
+      this.$emit("updateParent", "allShow", true);
+    },
+    onClickjl(show) {
       if (show) {
         let jl = {
           zzq: "http://192.168.60.2:8090/iserver/services/map-ShiDianQuYuTuDiXianZhuang/rest/maps/zzq",
@@ -102,6 +119,20 @@ export default {
         this.setImager({ year: "hou" }, false);
       }
     },
+    onClick(show) {
+      let mul = show ? "HORIZONTAL" : "NONE";
+      scene.multiViewportMode = Cesium.MultiViewportMode[mul];
+      let jl = {
+        zzh: "http://192.168.60.2:8090/iserver/services/map-ShiDianQuYuTuDiXianZhuang/rest/maps/zzh",
+        zzq: "http://192.168.60.2:8090/iserver/services/map-ShiDianQuYuTuDiXianZhuang/rest/maps/zzq",
+      };
+      this.setImager({ url: jl.zzq, year: "qian" }, true, (layer) => {
+        layer.setVisibleInViewport(1, false);
+      });
+      this.setImager({ url: jl.zzq, year: "qian" }, true, (layer) => {
+        layer.setVisibleInViewport(0, false);
+      });
+    },
     setImager(obj, isshow = true, fun) {
       if (this.imagelayers[obj.year]) this.imagelayers[obj.year].show = isshow;
       else if (isshow)
@@ -115,17 +146,88 @@ export default {
       fun && fun(this.imagelayers[obj.year]);
       // viewer.flyTo(this.imagelayers[obj.year]);
     },
+    clickOpen() {
+      getTiffPath(this.detailObj.qsxtif).then((res) => {
+        // this.remove();
+        if (res.data.pngenvelope) {
+          this.getEntities(
+            this.detailObj.jcbh,
+            res.data.pngpath,
+            res.data.pngenvelope,
+            0
+          );
+        }
+      });
+      getTiffPath(this.detailObj.hsxtif).then((res) => {
+        if (res.data.pngenvelope) {
+          this.getEntities(
+            this.detailObj.jcbh,
+            res.data.pngpath,
+            res.data.pngenvelope,
+            1
+          );
+        }
+      });
+
+      this.$emit("updateParent", "allShow", false);
+      this.splitScreen = true;
+    },
+
+    getEntities(id, url, position, type) {
+      let mul = "HORIZONTAL";
+      scene.multiViewportMode = Cesium.MultiViewportMode[mul];
+      let imageUrl = "";
+      let posArr = position;
+      imageUrl = window.axiosURI + "/file/upload/attachment" + url;
+      // 创建Cesium的ImageMaterialProperty
+      const imageMaterial = new Cesium.ImageMaterialProperty({
+        image: imageUrl,
+        repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复，这里设置为不重复
+        transparent: true, // 如果图像有透明通道，设置为true
+      });
+      loadGeoJSON(this.detailObj.geom, "#ff0000", { isfly: true }, (data) => {
+        data.entities.add({
+          name: "Image Overlay",
+          id: id + type,
+          rectangle: {
+            coordinates: Cesium.Rectangle.fromDegrees(
+              posArr[0],
+              posArr[1],
+              posArr[2],
+              posArr[3]
+            ), // 设置矩形的经纬度范围
+            material: imageMaterial,
+          },
+        });
+        layerSources[id + type] = data;
+        if (type == 0) {
+          data.setVisibleInViewport(1, false);
+        } else {
+          data.setVisibleInViewport(0, false);
+        }
+      });
+      this.idArr.push(id + type);
+    },
+    remove() {
+      if (this.idArr.length != 0) {
+        this.idArr.forEach((item) => {
+          viewer.dataSources.remove(layerSources[item]);
+        });
+      }
+    },
   },
   watch: {
     emitImgIndex(val) {
       this.$emit("updateParent", "imgIndex", val);
       this.$emit("updateParent", "imgList", this.emitImgList);
     },
-    splitScreen(val){
-      this.onClick(val);
-    },
+    // splitScreen(val) {
+    //   this.onClick(val);
+    // },
+  },
+  beforeDestroy() {
+    this.remove();
   },
-  beforeDestroy() {},
 };
 </script>
 
@@ -171,4 +273,34 @@ export default {
   padding: 1rem 0.5rem 0px 0.5rem;
   height: 100% !important;
 }
+.btn {
+  .sx {
+    background: #64daff9c;
+    padding: 5px 10px;
+    border: 1px solid #4949492b;
+    border-radius: 5px;
+    position: absolute;
+    top: 4vh;
+    left: calc(50% - 170px);
+    z-index: 40;
+  }
+  .hsx {
+    left: 52vw;
+  }
+  .jcbh {
+    left: 3vw;
+  }
+  .tc {
+    left: 21.5vw;
+  }
+}
+.dbBtn {
+  width: 136px;
+  height: 33px;
+  background-color: #0f7ac8;
+  line-height: 33px;
+  text-align: center;
+  margin: 10px 0;
+  cursor: pointer;
+}
 </style>

src/views/farmlandProtection/components/tbqd.vue

@@ -200,7 +200,10 @@ export default {
           "#ff0000",
           { isfly: true, sw: 5 },
           (data) => {
+            let mul = "HORIZONTAL";
+            scene.multiViewportMode = Cesium.MultiViewportMode[mul];
             layerSources["h_" + item.index] = data;
+            data.setVisibleInViewport(1, false);
             data.entities.values.forEach((entity) => {
               entity.properties = item;
             });
@@ -247,7 +250,6 @@ export default {
         ...params,
       };
       let data = await QueryList(obj);
-      console.log(data);
       data.data.map((res) => {
         if (res.geom) {
           res.geom = wellknown.parse(res.geom.split(";")[1]);

src/views/farmlandProtection/echarts.vue

@@ -0,0 +1,752 @@
+<template>
+  <div>
+    <div class="echars">
+      <div ref="first_pie" id="first_pie"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+let data = [
+  {
+    name: "李富贵",
+    id: "lfg",
+    tooltip: {
+      formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
+    },
+    itemStyle: {
+      normal: {
+        color: "#FCBB5B",
+        borderColor: "#FCBB5B",
+        shadowColor: "#FCBB5B",
+      },
+    },
+  },
+  {
+    tooltip: {
+      formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+    },
+    name: "王桂花",
+  },
+  {
+    tooltip: {
+      formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+    },
+    name: "李思思",
+  },
+  {
+    name: "自住房屋",
+  },
+  {
+    name: "车子",
+  },
+  {
+    name: "租房",
+  },
+  {
+    name: "黄涛",
+  },
+  {
+    name: "于海",
+  },
+  {
+    name: "张柏",
+  },
+  {
+    name: "付梦杰",
+  },
+];
+
+let links = [
+  {
+    source: 0,
+    target: 1,
+    value: "夫妻",
+  },
+  {
+    source: 0,
+    target: 2,
+    value: "父亲",
+  },
+  {
+    source: 2,
+    target: 0,
+    value: "女儿",
+  },
+  {
+    source: 0,
+    target: 3,
+    value: "自住",
+  },
+  {
+    source: 0,
+    target: 4,
+    value: "车主",
+  },
+  {
+    source: 0,
+    target: 5,
+    value: "租户",
+  },
+  {
+    source: 5,
+    target: 6,
+    value: "租赁",
+  },
+  {
+    source: 5,
+    target: 7,
+    value: "租赁",
+  },
+  {
+    source: 5,
+    target: 8,
+    value: "租赁",
+  },
+  {
+    source: 5,
+    target: 9,
+    value: "租赁",
+  },
+];
+
+let data2 = [
+  {
+    name: "租房",
+    tooltip: {
+      formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
+    },
+    itemStyle: {
+      normal: {
+        color: "#FCBB5B",
+        borderColor: "#FCBB5B",
+        shadowColor: "#FCBB5B",
+      },
+    },
+  },
+  {
+    name: "黄涛",
+  },
+  {
+    name: "于海",
+  },
+  {
+    name: "张柏",
+  },
+  {
+    name: "付梦杰",
+  },
+  {
+    name: "李富贵",
+  },
+];
+
+let links2 = [
+  {
+    source: 0,
+    target: 1,
+    value: "租赁",
+  },
+  {
+    source: 0,
+    target: 2,
+    value: "租赁",
+  },
+  {
+    source: 0,
+    target: 3,
+    value: "租赁",
+  },
+  {
+    source: 0,
+    target: 4,
+    value: "租赁",
+  },
+  {
+    source: 0,
+    target: 5,
+    value: "房主",
+  },
+  {
+    source: 5,
+    target: 0,
+    value: "租户",
+  },
+];
+export default {
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  computed: {},
+  mounted() {
+    // this.initEcharts()
+    // this.initNew();
+    this.initTwo(data, links);
+  },
+  methods: {
+    initEcharts() {
+      this.myChart = echarts.init(this.$refs.first_pie);
+      let option = {
+        backgroundColor: "#1a4377",
+        tooltip: {},
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        series: [
+          {
+            type: "graph",
+            layout: "force",
+            force: {
+              repulsion: 1500,
+              edgeLength: 120,
+              layoutAnimation: true,
+            },
+            symbolSize: 70,
+            nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
+            roam: true, //缩放
+            draggable: true, //节点是否可以拖拽
+            edgeSymbol: ["none", "arrow"], //线2头标记
+            label: {
+              normal: {
+                show: true,
+                position: "inside",
+                color: "#FFF",
+              },
+            },
+            edgeLabel: {
+              normal: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,
+                  color: "#FFF",
+                },
+                formatter: "{c}",
+              },
+            },
+            symbolKeepAspect: false,
+            focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
+            itemStyle: {
+              normal: {
+                borderColor: "#29ACFC",
+                borderWidth: 2,
+                shadowColor: "#29ACFC",
+                color: "#29ACFC",
+                curveness: 0.08,
+              },
+            },
+
+            lineStyle: {
+              normal: {
+                opacity: 0.9,
+                width: 2,
+                curveness: 0.15,
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#FFF", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#FFF", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false,
+                },
+              },
+            },
+
+            data: [
+              {
+                name: "李富贵",
+                tooltip: {
+                  formatter:
+                    "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#FCBB5B",
+                    borderColor: "#FCBB5B",
+                    shadowColor: "#FCBB5B",
+                  },
+                },
+              },
+              {
+                tooltip: {
+                  formatter:
+                    "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+                },
+                name: "王桂花",
+              },
+              {
+                tooltip: {
+                  formatter:
+                    "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+                },
+                name: "李思思",
+              },
+              {
+                name: "自住房屋",
+              },
+              {
+                name: "车子",
+              },
+              {
+                name: "租房",
+              },
+              {
+                name: "黄涛",
+              },
+              {
+                name: "于海",
+              },
+              {
+                name: "张柏",
+              },
+              {
+                name: "付梦杰",
+              },
+            ],
+            links: [
+              {
+                source: 0,
+                target: 1,
+                value: "夫妻",
+              },
+              {
+                source: 0,
+                target: 2,
+                value: "父亲",
+              },
+              {
+                source: 2,
+                target: 0,
+                value: "女儿",
+              },
+              {
+                source: 0,
+                target: 3,
+                value: "自住",
+              },
+              {
+                source: 0,
+                target: 4,
+                value: "车主",
+              },
+              {
+                source: 0,
+                target: 5,
+                value: "租户",
+              },
+              {
+                source: 5,
+                target: 6,
+                value: "租赁",
+              },
+              {
+                source: 5,
+                target: 7,
+                value: "租赁",
+              },
+              {
+                source: 5,
+                target: 8,
+                value: "租赁",
+              },
+              {
+                source: 5,
+                target: 9,
+                value: "租赁",
+              },
+            ],
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+    initNew() {
+      let data = [
+        {
+          name: "李富贵",
+          tooltip: {
+            formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
+          },
+          itemStyle: {
+            normal: {
+              color: "#FCBB5B",
+              borderColor: "#FCBB5B",
+              shadowColor: "#FCBB5B",
+            },
+          },
+        },
+        {
+          tooltip: {
+            formatter:
+              "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+          },
+          name: "王桂花",
+        },
+        {
+          tooltip: {
+            formatter:
+              "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
+          },
+          name: "李思思",
+        },
+        {
+          name: "自住房屋",
+        },
+        {
+          name: "车子",
+        },
+        {
+          name: "租房",
+        },
+        {
+          name: "黄涛",
+        },
+        {
+          name: "于海",
+        },
+        {
+          name: "张柏",
+        },
+        {
+          name: "付梦杰",
+        },
+      ];
+
+      let links = [
+        {
+          source: 0,
+          target: 1,
+          value: "夫妻",
+        },
+        {
+          source: 0,
+          target: 2,
+          value: "父亲",
+        },
+        {
+          source: 2,
+          target: 0,
+          value: "女儿",
+        },
+        {
+          source: 0,
+          target: 3,
+          value: "自住",
+        },
+        {
+          source: 0,
+          target: 4,
+          value: "车主",
+        },
+        {
+          source: 0,
+          target: 5,
+          value: "租户",
+        },
+        {
+          source: 5,
+          target: 6,
+          value: "租赁",
+        },
+        {
+          source: 5,
+          target: 7,
+          value: "租赁",
+        },
+        {
+          source: 5,
+          target: 8,
+          value: "租赁",
+        },
+        {
+          source: 5,
+          target: 9,
+          value: "租赁",
+        },
+      ];
+      let categories = [];
+      let categoryStatus = {};
+
+      data.forEach((item) => {
+        let aaa = item.name + "_childrens";
+        categories.push(aaa);
+        Object.assign(categoryStatus, { aaa: true });
+      });
+      this.myChart = echarts.init(this.$refs.first_pie);
+      let option = {
+        title: {
+          text: "关系图点击节点展开次级节点效果尝试",
+        },
+        tooltip: {},
+        legend: {
+          show: false,
+          y: "8%",
+          data: categories,
+        },
+        animationDuration: 1500,
+        animationEasingUpdate: "quinticInOut",
+        series: [
+          {
+            name: "ECharts学习",
+            type: "graph",
+            layout: "none",
+            data: data,
+            links: links,
+            categories: categories.map(function (a) {
+              return {
+                name: a,
+              };
+            }),
+            roam: true,
+            focusNodeAdjacency: true,
+            itemStyle: {
+              normal: {
+                borderColor: "#fff",
+                borderWidth: 1,
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.3)",
+              },
+            },
+            label: {
+              position: "right",
+              formatter: "{b}",
+            },
+            lineStyle: {
+              color: "source",
+              curveness: 0.3,
+            },
+            emphasis: {
+              lineStyle: {
+                width: 10,
+              },
+            },
+          },
+        ],
+      };
+
+      this.myChart.setOption(option);
+      this.myChart.on("click", function (params) {
+        let categoryName = params.name + "_childrens";
+
+        // 如果 category 状态为显示，则通过一定规则隐藏所有 childres
+        if (categoryStatus[categoryName]) {
+          // 这里为了省事，直接通过字符串匹配判断了
+          for (let i in categories) {
+            if (
+              categories[i].includes(params.name) &&
+              categories[i] != "node0"
+            ) {
+              this.myChart.dispatchAction({
+                type: "legendUnSelect",
+                // 图例名称
+                name: categories[i],
+              });
+            }
+          }
+
+          categoryStatus[categoryName] = false;
+
+          // 如 category 状态为隐藏，则显示
+        } else {
+          for (let i in categories) {
+            if (
+              (categories[i].includes(params.name) &&
+                categoryStatus[categories[i]]) ||
+              categories[i] === categoryName
+            ) {
+              this.myChart.dispatchAction({
+                type: "legendSelect",
+                // 图例名称
+                name: categories[i],
+              });
+            }
+          }
+          categoryStatus[categoryName] = true;
+        }
+      });
+    },
+    initTwo(data, links) {
+      this.myChart = echarts.init(this.$refs.first_pie);
+      let option = {
+        backgroundColor: "#1a4377",
+        tooltip: {},
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        series: [
+          {
+            type: "graph",
+            layout: "force",
+            force: {
+              repulsion: 1500,
+              edgeLength: 120,
+              layoutAnimation: true,
+            },
+            symbolSize: 70,
+            nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
+            roam: true, //缩放
+            draggable: true, //节点是否可以拖拽
+            edgeSymbol: ["none", "arrow"], //线2头标记
+            label: {
+              normal: {
+                show: true,
+                position: "inside",
+                color: "#FFF",
+              },
+            },
+            edgeLabel: {
+              normal: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,
+                  color: "#FFF",
+                },
+                formatter: "{c}",
+              },
+            },
+            symbolKeepAspect: false,
+            focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
+            itemStyle: {
+              normal: {
+                borderColor: "#29ACFC",
+                borderWidth: 2,
+                shadowColor: "#29ACFC",
+                color: "#29ACFC",
+                curveness: 0.08,
+              },
+            },
+
+            lineStyle: {
+              normal: {
+                opacity: 0.9,
+                width: 2,
+                curveness: 0.15,
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#FFF", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#FFF", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false,
+                },
+              },
+            },
+
+            data: data,
+            links: links,
+          },
+        ],
+      };
+      //   this.myChart.on("click", function (params) {
+      //     console.log(params,'paramsparams');
+      //   })
+      let _this = this;
+      this.myChart.setOption(option);
+      this.myChart.on("click", function (params) {
+        console.log(params, "paramsparams");
+        if (params.name == "租房") {
+          var option1 = _this.myChart.getOption();
+
+          option1.series[0].data = data2;
+          option1.series[0].links = links2;
+
+          _this.myChart.setOption(option1);
+        } else if (params.name == "李富贵") {
+          var option1 = _this.myChart.getOption();
+
+          option1.series[0].data = data;
+          option1.series[0].links = links;
+
+          _this.myChart.setOption(option1);
+        }
+      });
+      // 图表点击事件监听
+      //   this.myChart.on("click", function (params) {
+      //     // 刷新数据的逻辑，例如从服务器获取新数据
+      //     fetchNewData()
+      //       .then(function (newData) {
+      //         let that = this
+      //         // 更新图表的数据
+      //         that.myChart.setOption({
+      //           series: [
+      //             {
+      //               // 假设您要更新的是 series 下的某个数据系列
+      //               data: newData[0], // 使用新数据更新 series.data
+      //               links: newData[1],
+      //             },
+      //           ],
+      //         });
+      //       })
+      //       .catch(function (error) {
+      //         console.error("Error fetching new data:", error);
+      //       });
+
+      //     // 这里可以添加其他需要在点击后执行的代码
+      //   });
+      // 模拟的数据获取函数，实际应用中应该从服务器获取
+      function fetchNewData() {
+        // 返回一个新数据的 Promise
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            // 模拟获取到的新数据
+            const newData = [
+              /* 新数据数组 */
+              data2,
+              links2,
+            ];
+            resolve(newData);
+          }, 1000); // 延迟 1 秒来模拟异步数据加载
+        });
+      }
+    },
+    test() {
+      this.initTwo(data2, links2);
+    },
+  },
+  watch: {},
+
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+.echars {
+  width: 75vw;
+  height: 80vh;
+  background: rgba(255, 217, 0, 0.349);
+  position: relative;
+  top: 5vh;
+  z-index: 999;
+}
+#first_pie {
+  width: 75vw;
+  height: 80vh;
+  background-color: pink;
+}
+</style>

src/views/farmlandProtection/gdzl/details.vue

@@ -44,6 +44,9 @@ export default {
     //关闭详情
     closeInster() {
       this.isShallow = false;
+      this.$nextTick(() => {
+        viewer.entities.removeAll();
+      });
     },
     handleView({ parts, queryData, geoms, e }, type) {
       this.type = type;

src/views/farmlandProtection/gdzl/index.vue

@@ -43,7 +43,7 @@
             v-model="region"
             :show-all-levels="false"
             :options="store.state.region_tree"
-            @change="regionChange()"
+            @change="xzqhChange()"
             placeholder="行政区"
             size="mini"
             :props="{
@@ -286,24 +286,36 @@ export default {
       this.regionChange();
     },
     dlbmChange() {
-      let nowtype = this.typeList.find((x) => x.id == this.dlbm);
-      this.gtype = nowtype.label;
+      // let nowtype = this.typeList.find((x) => x.id == this.dlbm);
+      this.gtype = this.typeList.find((x) => x.id == this.dlbm).label;
+      this.xzqhChange();
+      // this.regionChange();
+      // if (this.dlbm == "01") {
+      //   this.nowlayer = this.nowyear;
+      // } else {
+      //   if (nowtype.layerID) {
+      //     this.nowlayer = this.nowyear + nowtype.layerID;
+      //   } else if (this.layers.length) {
+      //     let yobj = this.yearList.find((y) => y.year == this.nowyear);
+      //     if (yobj) this.goLayer(yobj, nowtype);
+      //   }
+      // }
+    },
+    xzqhChange() {
       this.regionChange();
-      if (this.dlbm == "01") {
-        this.nowlayer = this.nowyear;
-      } else {
-        if (nowtype.layerID) {
-          this.nowlayer = this.nowyear + nowtype.layerID;
-        } else if (this.layers.length) {
-          let yobj = this.yearList.find((y) => y.year == this.nowyear);
-          if (yobj) this.goLayer(yobj, nowtype);
-        }
+      if (this.layers.length) {
+        let yobj = this.yearList.find((y) => y.year == this.nowyear);
+        if (yobj) this.goLayer(yobj);
       }
     },
     goLayer(lobj, nowtype) {
       let lname = this.layers[0].name; // `dlbm like '${this.dlbm}%'`,
-      SetParameters(lname, `dlbm = '${this.dlbm}'`, this.provider, (lid) => {
-        this.typeList[nowtype.index].layerID = lid;
+      let sql = `dlbm LIKE '${this.dlbm}%' and ${
+        this.pageType ? "xzqdm" : "qsdwdm"
+      } LIKE '%${this.region}%'`;
+      SetParameters(lname, sql, this.provider, (lid) => {
+        // this.typeList[nowtype.index].layerID = lid;
+        console.log(lid);
         this.nowlayer = this.nowyear + lid;
         this.setImager({ ...lobj, lid });
       });
@@ -484,13 +496,14 @@ export default {
       this.setImager({ year: this.nowlayer }, show);
     },
     reset() {
+      store.setaddNode([]);
       this.$nextTick(() => {
         // this.sourcesshow(false);
         Object.keys(this.imagelayers).forEach((key) => {
           viewer.imageryLayers.remove(this.imagelayers[key]);
         });
         this.imagelayers = {};
-        this.typeList = [...JSON.parse(JSON.stringify(legends))];
+        this.typeList = [...JSON.parse(JSON.stringify(legends))];    
       });
     },
     setEchart(data, id) {

src/views/farmlandProtection/indexNew.vue

@@ -2,19 +2,17 @@
 <template>
   <div class="ghzc LandConsolidation">
     <div v-show="!iscontrast">
-      <div>
-        <div class="headerCheck">
-          <ul>
-            <li
-              :class="{ liActive: i == activeIndex }"
-              v-for="(item, i) in checkList"
-              :key="i"
-              @click="onClick(i)"
-            >
-              {{ item.title }}
-            </li>
-          </ul>
-        </div>
+      <div class="headerCheck" v-show="isHeader">
+        <ul>
+          <li
+            :class="{ liActive: i == activeIndex }"
+            v-for="(item, i) in checkList"
+            :key="i"
+            @click="onClick(i)"
+          >
+            {{ item.title }}
+          </li>
+        </ul>
       </div>
       <Gdzl
         v-show="activeIndex == 0 || activeIndex == 1"
@@ -23,7 +21,7 @@
         @contrast="goContrast"
         @handleView="handleView"
       ></Gdzl>
-      <Jctb v-if="activeIndex == 2" ref="jctb"></Jctb>
+      <Jctb v-if="activeIndex == 2" ref="jctb" @updateParent="changeData"></Jctb>
       <Fzyp v-show="activeIndex == 3"></Fzyp>
     </div>
 
@@ -80,6 +78,7 @@ export default {
   },
   data() {
     return {
+      isHeader:true,
       loading: false,
       drawer: false,
       xzqh: "",
@@ -136,7 +135,10 @@ export default {
     },
     onClick(val) {
       this.activeIndex = val;
-      if (val != 0 || val != 1) this.$refs.gdzl.reset();
+      if (val != 0 || val != 1) {
+        this.$refs.gdzl.reset();
+        this.$refs.detailModal.closeInster();
+      }
       if (val == 0 || val == 1) {
         this.$nextTick(() => {
           this.$refs.gdzl.regionChange(true);

src/views/farmlandProtection/jctb/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="ghzc MonitoringPattern">
-    <div class="innerContainer leftPane" v-drag @click.native.stop>
+    <div
+      class="innerContainer leftPane"
+      v-drag
+      @click.native.stop
+      v-show="allShow"
+    >
       <h2 class="Pangetitle darg-div">
         <span class="pange_text">监测图斑管理</span>
         <span class="exportBtn">导入</span>
@@ -82,7 +87,7 @@
       ref="tbDetails"
       @updateParent="changeData"
       :detailObj="detailObj"
-      v-show="isShowTb"
+      v-if="isShowTb"
     ></tbDetails>
     <div class="imgRemove" v-drag v-show="imgIndex != -1">
       <div class="sm-panel-header">
@@ -117,14 +122,6 @@
         </el-carousel>
       </div>
     </div>
-    <!-- <div class="tiffBox" id="fullscreen-div">
-      <div class="sm-panel-header">
-        <span>前后影像对比</span>
-        <i class="el-icon-full-screen" @click="fullScreen"></i>
-        <i class="el-icon-aim" @click="aimScreen"></i>
-      </div>
-      <img src="../components//u385.jpg"/>
-    </div> -->
   </div>
 </template>
 
@@ -164,6 +161,7 @@ export default {
         val1: "",
         val2: "",
       },
+      allShow: true, //面板默认显示
     };
   },
   mounted() {
@@ -275,6 +273,11 @@ export default {
     imgIndex(val) {
       this.$refs.carousel.setActiveItem(val);
     },
+    allShow(val) {
+      console.log(val,'====');
+      // this.$refs.carousel.setActiveItem(val);
+      this.$emit("updateParent", "isHeader", val);
+    },
     // isShowTb(val) {
     //   this.$refs.tbDetails.onClick(val);
     // },

src/views/geologyDisaster/config.js

@@ -0,0 +1,111 @@
+
+export const zzForm = [
+  [
+    {
+      label: '',
+      prop: 'type',
+      span: 10
+    },
+    {
+      label: '',
+      prop: 'xmmc',
+      span: 10,
+      component: 'ElInput',
+      componentProps: {
+        placeholder: '项目名称'
+      }
+    },
+
+    {
+      prop: 'action',
+      span: 4
+    }
+  ]
+]
+
+export const TableHeader = [
+  { label: "隐患点名称", prop: "xmmc", align: 'center' },
+  { label: "所在行政村", prop: "zgbm", width: '120px' },// slot: "mj"
+  { label: "规模等级", prop: "gm", width: '80px ', slot: "mj", align: 'center' },
+  { label: "操作", slot: "action", width: '80px', align: 'center' },
+]
+
+
+// 基本信息详情
+export const jbxxInfos = [
+  { label: '地质灾害隐患点名称', value: 'tbbh', span: 12 },
+  { label: '所在辖区', value: 'dlbm', span: 12 },
+  { label: '所在行政村', value: 'dlmc', span: 12 },
+  { label: '规模等级', value: 'qsxz', span: 12 },
+  { label: '经度', value: 'tbmj', span: 12 },
+  { label: '纬度', value: 'kcdlbm', span: 12 },
+  { label: '威胁人数(人)', value: 'kcxs', span: 12 },
+  { label: '防灾责任划分', value: 'kcmj', span: 12 },
+  { label: '事权划分', value: 'tbdlmj', span: 12 },
+]
+export const zgdwInfos = [
+  { label: '主管单位名称', value: 'gdlx' },
+  { label: '责任领导/职务/电话', value: 'gdpdjb' },
+  { label: '直接责任人/职务/电话', value: 'frdbs' },
+
+]
+export const qcqfInfos = [
+  { label: '群测群防员', value: 'czcsxm' },
+  { label: '联系电话', value: 'sjnf' },
+]
+// 检测资料
+// 隐患排查与整改情况
+export const yhpcInfos = [
+  { label: '排查责任单位', value: 'bz' },
+  { label: '排查负责人/联系电话', value: 'bsm' },
+  { label: '警示标志', value: 'ysdm' },
+  { label: '群测群防员配备', value: '项目类型' },
+  { label: '隔离防护设施', value: 'xmmc', isslot: true },
+  { label: '其他问题隐患', value: 'zzhdlmc' },
+]
+
+export const yhzgInfos = [
+  { label: '整改责任单位', value: 'zzhdlbm' },
+  { label: '整改负责人/联系电话', value: 'qsdwdm' },
+  { label: '整改措施', value: 'qsdwmc' },
+  { label: '整改进展情况', value: 'zldwmc' },
+  { label: '整改完成/预计整改完成时间', value: 'zldwdm' },
+  { label: '下一步防治整改计划', value: 'xzgdlydlbm' },
+]
+
+//应急预案
+export const yjyaInfos = [
+  { label: '地点', value: 'xzgdlydlmc' },
+  { label: '基本情况', value: 'xzgdmj' },
+  { label: '引发因素', value: 'xzgddb' },
+  { label: '危害对象', value: 'xzgdlyxm' },
+  { label: '预警等级', value: 'xzgdlydlmc' },
+  { label: '预警方法', value: 'xzgdmj' },
+  { label: '应急等级', value: 'xzgddb' },
+  { label: '应急方法', value: 'xzgdlyxm' },
+  { label: '撤离路线', value: 'xzgddb' },
+  { label: '避灾地点', value: 'xzgdlyxm' },
+]
+export const jszdInfos = [
+  { label: '姓名', value: 'xzgdlydlmc' },
+  { label: '电话', value: 'xzgdmj' },
+  { label: '单位', value: 'xzgddb' },
+]
+export const timeInfos = [
+  { label: '编制时间', value: 'xzgdlydlmc' },
+  { label: '修编时间', value: 'xzgdmj' },
+]
+
+export const fileHeader = [
+  { label: "资料名称", prop: "xmmc", align: 'center' },
+  { label: "时间", prop: "zgbm", width: '120px' },
+  { label: "操作", slot: "action", width: '80px', align: 'center' },
+]
+export const fzrHeader = [
+  { label: "负责人", prop: "xmmc", align: 'center' },
+  { label: "姓名", prop: "zgbm", width: '120px' },// slot: "mj"
+  { label: "电话", prop: "gm", width: '80px ', slot: "mj", align: 'center' },
+  { label: "责任", width: '80px', align: 'center' },
+]
+
+

src/views/geologyDisaster/details.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="conViews">
+    <div class="sm-panel sm-function-module-query" v-drag v-if="isShallow">
+      <div class="sm-panel-header">
+        <span> 详细信息 </span>
+        <i class="el-icon-close" @click="closeInster"></i>
+      </div>
+      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+        <el-tab-pane label="基本信息" name="jbxx">
+          <div class="xxdiv">
+            <div class="echartTitle">
+              <div class="block-title">基本信息</div>
+            </div>
+            <DesInfo :model="formData" :config="jbxxInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">主管单位</div>
+            </div>
+            <DesInfo :model="formData" :config="zgdwInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">群测群防</div>
+            </div>
+            <DesInfo :model="formData" :config="qcqfInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">检测资料</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fileHeader" :table="fileList" :indexed="false" layout="">
+              <template #action="{ row }">
+                <span class="usable" @click="detail(row)">详情</span>
+                <span class="usable" @click="download(row)"> 查看 </span>
+              </template>
+            </tablePage>
+
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="隐患排查与整改情况" name="yhpcyzg">
+          <div class="xxdiv">
+            <div class="echartTitle">
+              <div class="block-title">隐患排查情况</div>
+            </div>
+            <DesInfo :model="formData" :config="yhpcInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">隐患整改情况</div>
+            </div>
+            <DesInfo :model="formData" :config="yhzgInfos"></DesInfo>
+            <div @click="bigimg = true">
+              <el-carousel indicator-position="outside" @change="(v) => imgIndex = v">
+                <el-carousel-item v-for="(item, i) in monitorList" :key="item">
+                  <div class="imgi"> {{ imgIndex }}</div>
+                  <!-- <div class="imgi">{{ `${i + 1} / ${monitorList.length}` }}</div> -->
+                  <img :src="item.imgUrl" />
+                  <div class="imgInfo"> {{ item.info }} </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div class="echartTitle">
+              <div class="block-title">治理项目资料</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fzrHeader" :table="zzfiletable" :indexed="false" layout=""
+              ref="tableDialogRef">
+              <template #action="{ row }">
+                <span class="usable" @click="detail(row)">详情</span>
+                <span class="usable" @click="download(row)"> 对比 </span>
+              </template>
+            </tablePage>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="应急预案" name="yjya">
+          <div class="xxdiv">
+            <div class="echartTitle">
+              <div class="block-title">应急预案</div>
+            </div>
+            <DesInfo :model="formData" :config="yjyaInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">相关负责人</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fzrHeader" :table="fzrtable" :indexed="false" layout="">
+            </tablePage>
+            <div class="echartTitle">
+              <div class="block-title">技术指导人</div>
+            </div>
+            <DesInfo :column="2" :model="formData" :config="jszdInfos"></DesInfo>
+            <DesInfo :column="2" :model="formData" :config="timeInfos" :border="false"></DesInfo>
+
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="sm-panel bigimgdiv" v-drag v-show="bigimg">
+      <div class="sm-panel-header">
+        <span>图片详情</span>
+        <i class="el-icon-close" @click="bigimg = false"></i>
+      </div>
+      <el-carousel trigger="click" indicator-position="outside" :autoplay="false" :initial-index="imgIndex">
+        <el-carousel-item v-for="(item, i) in monitorList" :key="i">
+          <div class="imgi">{{ `${i + 1} / ${monitorList.length}` }}</div>
+          <img :src="item.imgUrl" />
+          <div class="imgInfo"> {{ item.info }} </div>
+        </el-carousel-item>
+      </el-carousel>
+
+    </div>
+
+  </div>
+</template>
+<script>
+// import Info from "../../Idleland/components/info.vue";
+// import CustomDetails from "@/components/mapView/custom-detailsInfo.vue";
+import DesInfo from "@/components/mapView/descriptionsInfo.vue";
+import tablePage from "@/components/mapView/tablePage.vue";
+import { getXm } from "@/api/stxf/tdzz.js";
+import { jbxxInfos, zgdwInfos, qcqfInfos, fileHeader, yhpcInfos, yhzgInfos, yjyaInfos, fzrHeader, jszdInfos, timeInfos } from "./config.js";
+export default {
+  props: {
+    interObj: {
+      type: Object,
+    },
+  },
+  // components: { Info, Wrjxx },
+  components: { DesInfo, tablePage },
+  data() {
+    return {
+      activeTabs: "jbxx",
+      isShallow: false,
+      formData: { tbbh: 'skmdslcmdrvnfjkvn就是当你发觉的女第就是当你发觉的三次多少地方' },
+      fileList: { data: [{}] },
+      rdData: [],
+      type: "",
+      bigimg: false,
+      imgIndex: 0,
+      monitorList: [
+        {
+          imgUrl:
+            "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
+        },
+        {
+          imgUrl:
+            "http://img2.baidu.com/it/u=516755055,1384417278&fm=253&app=138&f=JPEG?w=800&h=1067",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "http://img0.baidu.com/it/u=1366170349,307387023&fm=253&app=138&f=JPEG?w=800&h=1067",
+          info: "育才生态区那阳小组（治理后）"
+        },
+      ],
+      fzrtable: { data: [{}] },
+      zzfiletable: { data: [{}] },
+      jbxxInfos: jbxxInfos,
+      zgdwInfos: zgdwInfos,
+      qcqfInfos: qcqfInfos,
+      fileHeader: fileHeader,
+      yhpcInfos: yhpcInfos,
+      yhzgInfos: yhzgInfos,
+      yjyaInfos: yjyaInfos,
+      fzrHeader: fzrHeader,
+      jszdInfos: jszdInfos,
+      timeInfos: timeInfos
+    };
+  },
+  mounted() {
+    // this.init();
+  },
+  methods: {
+    //关闭详情
+    closeInster() {
+      this.isShallow = false;
+      this.$nextTick(() => {
+        viewer.entities.removeAll();
+      });
+    },
+    handleView({ parts, queryData, geoms, e }, type) {
+      this.type = type;
+      this.activeTabs = "jbxx";
+      this.jbxxData = [];
+      this.isShallow = true;
+      // if (!e.features[0].fieldNames) {
+      //   this.$message({
+      //     message: "查询结果为空！",
+      //     type: "warning",
+      //     customClass: "messageIndex",
+      //   });
+      // } else if (e && e.totalCount > 0) {
+      //   this.isShallow = true;
+      //   this.jbxxData = queryData[0];
+      //   viewer.entities.removeAll();
+      //   addGeomParts(false, geoms, parts);
+      // }
+    },
+  },
+  mounted() { },
+  watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.sm-panel {
+  width: 460px;
+  max-width: 460px;
+
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
+
+    .el-carousel {
+      height: 300px;
+    }
+  }
+
+  .xxdiv {
+    height: 695px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+.sm-function-module-query {
+  max-height: 800px !important;
+  top: 28px !important;
+}
+
+.el-carousel {
+  margin-top: 10px;
+
+  img {
+    width: 100%;
+    height: 300px;
+    object-fit: contain;
+  }
+
+  .imgi {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  .imgInfo {
+    // width: 245px;
+    width: 60%;
+    height: 46px;
+    // background-color: rgba(255, 192, 203, 0.356);
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+  }
+}
+
+.bigimgdiv {
+  right: 20%;
+  width: 60%;
+  max-width: 100%;
+  height: 700px;
+
+  /deep/ .el-carousel__container {
+    height: 632px;
+  }
+
+  img {
+    width: 100%;
+    height: 632px
+  }
+
+
+
+
+  /deep/.el-carousel__arrow {
+    background-color: rgba(45, 140, 240, 0.4);
+  }
+
+  /deep/.el-carousel__arrow:hover {
+    background-color: rgba(45, 140, 240, 1);
+  }
+
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
+  }
+}
+</style>

src/views/geologyDisaster/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ghzc geologyDisaster">
+    <div class="innerContainer leftPane" v-drag>
+      <h2 class="Pangetitle darg-div">
+        <span class="pange_text"> 地质灾害隐患点 </span>
+        <div class="totalnum">共：{{ total }}个</div>
+      </h2>
+      <div class="xz_box">
+        <div class="el-col headerSelect">
+          <el-input clearable v-model="pageObj.LA" @input="searchFun()" class="search" placeholder="请输入查询内容"
+            size="mini"></el-input>
+          <el-cascader v-model="pageObj.xzqh" :show-all-levels="false" :options="store.state.region_tree"
+            @change="searchFun()" placeholder="行政区" size="mini" :props="{
+              checkStrictly: true,
+              expandTrigger: 'hover',
+              emitPath: false,
+            }"></el-cascader>
+        </div>
+        <tablePage class="tablePage" :cloumn="cloumn" :table="table" :indexed="false" layout="" ref="tableDialogRef"
+          @currentChange="searchFun">
+          <template #mj="{ row }">
+            {{ Number(row.gm).toFixed(2) }}
+          </template>
+          <template #action="{ row }">
+            <span class="usable" @click="detail(row)">详情</span>
+            <span class="usable" @click="handle(row)"> 对比 </span>
+          </template>
+        </tablePage>
+      </div>
+    </div>
+
+    <Details ref="detailModal"></Details>
+  </div>
+</template>
+
+<script>
+import tablePage from "@/components/mapView/tablePage.vue";
+import customForm from "@/components/mapView/custom-form.vue";
+import Details from "./details.vue";
+import { QueryList } from "@/api/cockpitNew";
+import { getXmList } from "@/api/stxf/tdzz.js";
+import { zzForm, TableHeader } from "./config";
+import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
+let geoSources = {};
+export default {
+  components: {
+    tablePage,
+    customForm,
+    Details,
+  },
+  props: {
+    type: {
+      type: String,
+    },
+    recordBsm: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      pageObj: {
+        xzqdm: "",
+        xmmc: "",
+        lxfl: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      region: "",
+      formConfig: zzForm,
+      cloumn: TableHeader,
+      table: {
+        data: [{}],
+        total: 20,
+      },
+      now: "",
+      tempdataLayerId: "",
+    };
+  },
+  mounted() {
+    this.reset();
+  },
+  methods: {
+    cockpit() {
+      this.$emit("cockpit");
+    },
+    regionChange(region) {
+      this.region = region;
+      this.pageObj.xzqdm = region;
+      this.searchFun();
+    },
+    searchFun(page = {}) {
+      this.pageObj.pageNum = page.pageIndex || 1;
+      this.pageObj.pageSize = page.size || 10;
+      this.getTableData();
+    },
+    getTableData() {
+      this.$emit("updateParent", "loading", true);
+      removeGeoJSON("zzxm");
+      getXmList(this.pageObj).then((res) => {
+        this.$emit("updateParent", "loading", false);
+        this.table = { total: res.total, data: res.rows };
+        this.active_tableData(res.rows);
+      });
+    },
+
+    tableRowClassName({ row, rowIndex }) {
+      // if (rowIndex === this.scrollTop_index) {
+      //   return "warning-row";
+      // }
+      // return "";
+    },
+    active_tableData(newVal) {
+      newVal.forEach((item, index) => {
+        item.tQytdzzZzxm.forEach((res) => {
+          if (res.geom)
+            loadGeoJSON(res.geom, "#facd91", { isfly: false }, (data) => {
+              geoSources[res.pid + res.id] = data;
+              data.name = "zzxm";
+              res.entity = "整治图斑";
+              data.entities.values.forEach((entity) => {
+                entity.properties = { type: "图斑上图", res };
+              });
+            });
+        });
+      });
+    },
+    flyTo(item, fill_a = 0.4) {
+      // let xzqdm = "h_" + item.xzqdm;
+      // this.tempdataLayerId = xzqdm;
+      // if (geoSources[xzqdm]) return;
+      removeGeoJSON("zzxmhig");
+      item.tQytdzzZzxm.forEach((res) => {
+        if (res.geom)
+          loadGeoJSON(res.geom, "#ff0000", { isfly: true, fill_a }, (data) => {
+            data.name = "zzxmhig";
+            geoSources[res.pid + res.id + "h"] = data;
+            res.entity = "整治图斑";
+            data.entities.values.forEach((entity) => {
+              entity.properties = { type: "图斑上图", res };
+            });
+          });
+      });
+    },
+
+    reset(xzqh) {
+      this.pageObj = {
+        xzqdm: this.region,
+        xmmc: "",
+        lxfl: "",
+        pageNum: 1,
+        pageSize: 10,
+      };
+      removeGeoJSON("zzxm");
+      removeGeoJSON("zzxmhig");
+    },
+    detail(row) {
+      this.$refs.detailModal.handleView(row);
+    },
+    async handle(row) {
+      removeGeoJSON("zzxm");
+      this.flyTo(row, 0.01);
+      let res = await QueryList({
+        jscType: "qytuzz_zzxm_qhdb",
+        id: row.id,
+      });
+      console.log("----", res);
+      this.$emit("contrast", { id: this.region, fp: res.data });
+    },
+
+    changerdxz() {
+      this.pageObj.isConfirm = !this.pageObj.isConfirm;
+      this.searchFun();
+    },
+  },
+  watch: {
+    tempdataLayerId(newVal, oldVal) {
+      if (oldVal && geoSources[oldVal]) {
+        viewer.dataSources.remove(geoSources[oldVal]);
+        geoSources[oldVal] = null;
+      }
+    },
+  },
+  beforeDestroy() { },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../complianceAnalysis/ghzc.scss";
+
+.geologyDisaster {
+  width: 100%;
+  height: 100%;
+
+  .totalnum {
+    margin-left: 20px;
+  }
+
+  .headerSelect {
+    width: 100%;
+    height: 26px;
+    //   background: #00ffff;
+    margin: 10px 0px;
+    display: flex;
+    justify-content: space-between;
+
+    .el-cascader--mini {
+      margin-left: 10px;
+      top: 0px !important;
+    }
+  }
+
+  .tablePage {
+    height: calc(100% - 20px);
+  }
+}
+</style>
+
+<style lang="scss">
+.geologyDisaster {
+  .el-col {
+    padding-right: 0 !important;
+  }
+}
+</style>

src/views/map3d.vue

@@ -71,7 +71,7 @@
           active-text-color="white"
         >
           <template v-for="(item, index) in menu_right">
-            <el-menu-item v-if="!item.children" :index="item.path">{{
+            <el-menu-item class="right-submenu" v-if="!item.children" :index="item.path">{{
               item.title
             }}</el-menu-item>
             <el-submenu
@@ -246,7 +246,7 @@ export default {
     GetRouters() {
       getRouters().then((res) => {
         this.menu_left = res.data[0].children.slice(0, 3);
-        this.menu_right = res.data[0].children.slice(3, 5);
+        this.menu_right = res.data[0].children.slice(3, 6);
 
         let curRouter = this.$router.currentRoute.path;
         if (curRouter == "/") {