分屏

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -137,6 +137,7 @@
 
 <script>
 let rollerShutterConfig;
+import { setImageryRoller } from "@/utils/MapHelper/map.js";
 export default {
   name: "sceneOtherOptions",
   data() {
@@ -253,52 +254,17 @@ export default {
       //   if (this.imageryRoller) this.setImageryRoller(imageryLayer)
       //   else this.hideImageryRoller(imageryLayer)
       // }
-      
+
       //案例展示
       let imageryLayer = viewer.imageryLayers.get(1);
-      if (this.imageryRoller) this.setImageryRoller(imageryLayer);
+      if (this.imageryRoller) setImageryRoller(imageryLayer);
       else this.hideImageryRoller(imageryLayer);
     },
     setImageryRollers(imageryLayer) {
-      if (this.imageryRoller) this.setImageryRoller(imageryLayer);
+      if (this.imageryRoller) setImageryRoller(imageryLayer);
       else this.hideImageryRoller(imageryLayer);
     },
 
-    setImageryRoller: function (imageryLayer) {
-      console.log("---",Cesium.SplitDirection.RIGHT)
-      switch (rollerShutterConfig.splitDirection) {
-        case Cesium.SplitDirection.LEFT:
-          imageryLayer.splitDirection = new Cesium.Cartesian2(
-            Cesium.ImagerySplitDirection.RIGHT,
-            Cesium.ImagerySplitDirection.NONE
-          );
-          break;
-        case Cesium.SplitDirection.RIGHT:
-          imageryLayer.splitDirection = new Cesium.Cartesian2(
-            Cesium.ImagerySplitDirection.LEFT,
-            Cesium.ImagerySplitDirection.NONE
-          );
-          break;
-        case Cesium.SplitDirection.TOP:
-          imageryLayer.splitDirection = new Cesium.Cartesian2(
-            Cesium.ImagerySplitDirection.NONE,
-            Cesium.ImagerySplitDirection.BOTTOM
-          );
-          break;
-        case Cesium.SplitDirection.BOTTOM:
-          imageryLayer.splitDirection = new Cesium.Cartesian2(
-            Cesium.ImagerySplitDirection.NONE,
-            Cesium.ImagerySplitDirection.TOP
-          );
-          break;
-        default:
-          imageryLayer.splitDirection = new Cesium.Cartesian2(
-            Cesium.ImagerySplitDirection.NONE,
-            Cesium.ImagerySplitDirection.NONE
-          );
-          break;
-      }
-    },
     hideImageryRoller: function (imageryLayer) {
       imageryLayer.splitDirection = new Cesium.Cartesian2(
         Cesium.ImagerySplitDirection.NONE,

src/views/LandConsolidation/components/contrast.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="qhdb">
+    <div class="headerCheck">
+      <ul>
+        <li
+          :class="{ liActive: i == activeIndex }"
+          v-for="(item, i) in list"
+          :key="i"
+          @click="onClick(i)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <div v-for="(k, i) in 2" :key="i" class="splitScreen w50">
+      <li class="sm-tool-btn sm-btn" title="目录" @click="clickml">
+        <span class="iconfont icontuceng"></span>
+      </li>
+      <div>
+        <el-checkbox-group v-model="checkList" @change="checkedChange">
+          <el-checkbox
+            v-for="mli in mllist"
+            :key="mli.label"
+            :label="mli.label"
+          >
+            {{ mli.label }}==
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { district } from "@/api/Idleland.js";
+export default {
+  props: {},
+  data() {
+    return {
+      list: ["卷帘对比", "分屏对比", "影像对比", "重置"],
+      activeIndex: 1,
+      mllist: [
+        { label: "耕地", value: "0" },
+        { label: "种植园", value: "1" },
+        { label: "林地", value: "2" },
+        { label: "草地", value: "3" },
+        { label: "商服", value: "4" },
+        { label: "住宅", value: "5" },
+      ],
+      checkList: ["耕地"],
+    };
+  },
+  components: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    checkedChange(value) {
+      console.log(value);
+    },
+    getData() {
+      // this.GetDistrict();
+    },
+    onClick() {},
+    clickml() {},
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+.qhdb {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  .splitScreen {
+    float: left;
+    height: calc(100% - 100px);
+    width: 100%;
+    position: relative;
+    margin-top: 100px;
+
+    .sm-btn {
+      position: absolute;
+      top: 10px !important;
+      left: 20px;
+      background-color: transparent;
+      z-index: 100;
+    }
+    .sm-btn1 {
+      position: absolute;
+      top: 40px;
+      right: 20px;
+      background-color: transparent;
+      font-size: 30px;
+      z-index: 100;
+    }
+
+    .sm-panel {
+      max-width: 300px;
+      height: 400px; //75%;
+      max-height: 80%;
+      top: 80px;
+      left: 50px;
+    }
+  }
+  .w50 {
+    width: 50%;
+  }
+}
+</style>

src/views/LandConsolidation/index.vue

@@ -1,93 +1,95 @@
 <!--全域土地综合整治专题-->
 <template>
   <div class="ghzc LandConsolidation">
-    <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="innerContainer leftPane" v-drag>
-      <h2 class="Pangetitle darg-div el-col">
-        <span class="pange_text">全域土地综合整治专题 </span>
-        <div class="region">
-          <!-- clearable -->
-          <el-cascader
-            v-model="xzqh"
-            :show-all-levels="false"
-            :options="store.state.region_tree"
-            @change="regionChange"
-            placeholder="行政区"
-            size="mini"
-            :props="{
-              checkStrictly: true,
-              expandTrigger: 'hover',
-              emitPath: false,
-            }"
-          ></el-cascader>
+    <div v-show="!iscontrast">
+      <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="innerContainer leftPane" v-drag>
+        <h2 class="Pangetitle darg-div el-col">
+          <span class="pange_text">全域土地综合整治专题 </span>
+          <div class="region">
+            <!-- clearable -->
+            <el-cascader
+              v-model="xzqh"
+              :show-all-levels="false"
+              :options="store.state.region_tree"
+              @change="regionChange"
+              placeholder="行政区"
+              size="mini"
+              :props="{
+                checkStrictly: true,
+                expandTrigger: 'hover',
+                emitPath: false,
+              }"
+            ></el-cascader>
+          </div>
+        </h2>
+        <div class="xz_box">
+          <Sdgk
+            v-loading="loading"
+            @updateParent="changeData"
+            ref="sdgk"
+            v-show="activeIndex == 0"
+          ></Sdgk>
+          <List
+            v-loading="loading"
+            @updateParent="changeData"
+            @contrast="iscontrast = true"
+            ref="list"
+            v-show="activeIndex == 1"
+          ></List>
+          <Xzgd
+            v-loading="loading"
+            @updateParent="changeData"
+            ref="xzgd"
+            v-show="activeIndex == 2"
+          ></Xzgd>
+          <preCheck
+            v-loading="loading"
+            @updateParent="changeData"
+            ref="preCheck"
+            v-show="activeIndex == 3"
+          ></preCheck>
         </div>
-      </h2>
-      <div class="xz_box">
-        <Sdgk
-          v-loading="loading"
-          @updateParent="changeData"
-          ref="sdgk"
-          v-show="activeIndex == 0"
-        ></Sdgk>
-        <List
-          v-loading="loading"
-          @updateParent="changeData"
-          @contrast="contrast"
-          ref="list"
-          v-show="activeIndex == 1"
-        ></List>
-        <Xzgd
-          v-loading="loading"
-          @updateParent="changeData"
-          ref="xzgd"
-          v-show="activeIndex == 2"
-        ></Xzgd>
-        <preCheck
-          v-loading="loading"
-          @updateParent="changeData"
-          ref="preCheck"
-          v-show="activeIndex == 3"
-        ></preCheck>
       </div>
-    </div>
-    <div class="innerContainer bottomPane" v-drag v-show="activeIndex == 0">
-      <div class="xz_box">
-        <Qhdb
-          v-loading="loading"
-          @updateParent="changeData"
-          @contrast="contrast"
-          ref="qhdb"
-        ></Qhdb>
+      <div class="innerContainer bottomPane" v-drag v-show="activeIndex == 0">
+        <div class="xz_box">
+          <Qhdb
+            v-loading="loading"
+            @updateParent="changeData"
+            @contrast="iscontrast = true"
+            ref="qhdb"
+          ></Qhdb>
+        </div>
       </div>
-    </div>
-    <div class="innerContainer legendPane" v-drag>
-      <div class="xz_box">
-        图例
-        <div v-for="(litem, li) in legends" :key="litem.label">
-          <span :class="`legend${li}`" class="lcolor"></span>
-          <span class="legLabel">{{ litem }}</span>
+      <div class="innerContainer legendPane" v-drag>
+        <div class="xz_box">
+          图例
+          <div v-for="(litem, li) in legends" :key="litem.label">
+            <span :class="`legend${li}`" class="lcolor"></span>
+            <span class="legLabel">{{ litem }}</span>
+          </div>
         </div>
       </div>
+      <div
+        class="innerContainer rightPane newContainer"
+        v-show="activeIndex == 0"
+      >
+        <Organize></Organize>
+      </div>
     </div>
     <Details ref="detailModal"></Details>
-
-    <div
-      class="innerContainer rightPane newContainer"
-      v-show="activeIndex == 0"
-    >
-      <Organize></Organize>
-    </div>
+    <Contrast ref="contrastModal" v-if="iscontrast"></Contrast>
   </div>
 </template>
 
@@ -99,6 +101,8 @@ import List from "./components/list.vue";
 import preCheck from "./components/preCheck.vue";
 import Xzgd from "./components/xzgd.vue";
 import Details from "./components/details.vue";
+import Contrast from "./components/contrast.vue";
+
 import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 export default {
   name: "LandConsolidation",
@@ -111,6 +115,7 @@ export default {
     Details,
     Organize,
     Xzgd,
+    Contrast,
   },
   data() {
     return {
@@ -132,6 +137,7 @@ export default {
       ],
       activeIndex: 1,
       legends: ["试点区域", "整治区域", "整治项目"],
+      iscontrast: false,
     };
   },
   computed: {
@@ -173,7 +179,7 @@ export default {
       // if (newValue == "qhdb") this.$refs.qhdb.changeForm();
       // if (newValue == 1) this.$refs.list.searchFun();
       if (newValue == 2) this.$refs.xzgd.getData();
-      
+      scene.multiViewportMode = Cesium.MultiViewportMode[value];
     },
     computed_vectorData(newVal) {
       console.log(newVal, "newVal");
@@ -196,51 +202,6 @@ export default {
     cursor: pointer;
     z-index: 200;
   }
-  .headerCheck {
-    width: 520px;
-    height: 50px;
-    // background: rgba(255, 192, 203, 0.379);
-    position: absolute;
-    left: 38%;
-    top: 10px;
-    z-index: 99;
-    pointer-events: none;
-    ul {
-      list-style: none;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 100%;
-      li {
-        width: 114px;
-        height: 36px;
-        background: inherit;
-        // background-color: rgba(128, 255, 255, 0.39);
-        box-sizing: border-box;
-        border-width: 2px;
-        border-style: solid;
-        border-color: #64daff;
-        border-radius: 9px;
-        border-top-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-        color: #64daff;
-        text-align: center;
-        line-height: 36px;
-        pointer-events: all;
-        cursor: pointer;
-      }
-      li:active,
-      li:focus {
-        background-color: rgba(128, 255, 255, 0.39) !important;
-      }
-    }
-    .liActive {
-      background-color: rgba(128, 255, 255, 0.39) !important;
-    }
-    .liItem {
-      background-color: transparent !important;
-    }
-  }
 
   .bottomPane {
     width: 43%;
@@ -293,6 +254,51 @@ export default {
     top: 0px;
     background: transparent;
   }
+  .headerCheck {
+    width: 520px;
+    height: 50px;
+    // background: rgba(255, 192, 203, 0.379);
+    position: absolute;
+    left: 38%;
+    top: 10px;
+    z-index: 99;
+    pointer-events: none;
+    ul {
+      list-style: none;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+      li {
+        width: 114px;
+        height: 36px;
+        background: inherit;
+        // background-color: rgba(128, 255, 255, 0.39);
+        box-sizing: border-box;
+        border-width: 2px;
+        border-style: solid;
+        border-color: #64daff;
+        border-radius: 9px;
+        border-top-right-radius: 0px;
+        border-bottom-left-radius: 0px;
+        color: #64daff;
+        text-align: center;
+        line-height: 36px;
+        pointer-events: all;
+        cursor: pointer;
+      }
+      li:active,
+      li:focus {
+        background-color: rgba(128, 255, 255, 0.39) !important;
+      }
+    }
+    .liActive {
+      background-color: rgba(128, 255, 255, 0.39) !important;
+    }
+    .liItem {
+      background-color: transparent !important;
+    }
+  }
 }
 
 @import "../complianceAnalysis/ghzc.scss";