添加分屏页面

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,136 +1,12 @@
 <template>
-  <div class="sm-panel" v-if="LayerManageShow">
-    <div class="sm-panel-header">
-      <span>{{ Resource.LayerManage }}</span>
-      <span class="closeBtn" @click="toggleVisibility">&times;</span>
-    </div>
-    <Tabs value="">
-      <TabPane :label="Resource.Resource" name="zyml">
-        <div class="zyml">
-          <el-input
-            :placeholder="Resource.InputPlaceholder"
-            prefix-icon="el-icon-search"
-            v-model="treeSearchText"
-            size="small"
-          >
-          </el-input>
-          <div class="treeDiv">
-            <el-tree
-              @check="handleCheckChange"
-              class="filter-tree"
-              :data="TreeDatas"
-              show-checkbox
-              :props="defaultProps"
-              :filter-node-method="filterNode"
-              ref="tree"
-            >
-              <span class="custom-tree-node" slot-scope="{ node, data }">
-                <span>{{ node.label }}</span>
-                <span>
-                  <Icon
-                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
-                    color="green"
-                    size="18"
-                    class="opBtn"
-                    :title="
-                      data.favorite ? Resource.DelCollect : Resource.AddCollect
-                    "
-                    @click="favoriteHandle(data)"
-                    v-if="data.url != ''"
-                  />
-                </span>
-              </span>
-            </el-tree>
-          </div>
-        </div>
-      </TabPane>
-      <TabPane :label="Resource.LayerOptions" name="tckz">
-        <div class="tckz">
-          <List split size="large">
-            <ListItem v-for="(item, index) in addlayerdata" :key="index">
-              {{ item.title }}
-              <div class="listBtn">
-                <i-switch
-                  v-model="item.visible"
-                  size="small"
-                  @on-change="visibleChange(item, $event)"
-                >
-                  <template #open>
-                    <span></span>
-                  </template>
-                  <template #close>
-                    <span></span>
-                  </template>
-                </i-switch>
-                <Icon
-                  type="md-arrow-round-up"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.MoveUpOneLevel"
-                  @click="raise(item)"
-                  v-if="
-                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
-                  "
-                />
-                <Icon
-                  type="md-arrow-round-down"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.MoveDownOneLevel"
-                  @click="lower(item)"
-                  v-if="
-                    index < addlayerdata.length - 1 &&
-                    (item.type == 'Vector' || item.type == 'IMG')
-                  "
-                />
-                <Icon
-                  type="md-locate"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.location"
-                  @click="location(item)"
-                />
-              </div>
-              <div class="sliderBtn" v-if="item.type != 'Terrain'">
-                <Slider
-                  v-model="item.trans"
-                  @on-change="transSliderChange(item, $event)"
-                ></Slider>
-              </div>
-            </ListItem>
-          </List>
-        </div>
-      </TabPane>
-      <TabPane :label="Resource.Favorite" name="collect">
-        <div class="collect">
-          <List split>
-            <ListItem
-              v-for="(item, index) in favoriteLayerList"
-              :key="index"
-              class="layerlist"
-            >
-              <Checkbox @on-change="checkboxChange(item, $event)">{{
-                item.title
-              }}</Checkbox>
-              <div class="listBtn">
-                <Icon
-                  type="ios-star"
-                  color="green"
-                  size="18"
-                  class="opBtn"
-                  :title="Resource.DelCollect"
-                  @click="favoriteHandle(item)"
-                />
-              </div>
-            </ListItem>
-          </List>
-        </div>
-      </TabPane>
-    </Tabs>
-  </div>
+  <layer-manage-split
+    @visibleChange="visibleChange"
+    @transSliderChange="transSliderChange"
+    @handleCheckChange="handleCheckChange"
+    @location="location"
+    @raise="raise"
+    @lower="lower"
+  ></layer-manage-split>
 </template>
 
 <script>
@@ -139,65 +15,47 @@ export default {
   name: "LayerManage",
   data() {
     return {
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
       modellayerlist: [],
       vectorlayerlist: [],
       username: "admin",
-      treeSearchText: "",
+      // treeSearchText: "",
       addlayerdata: [],
       sceneLayers: {},
-      favoriteLayerList: [],
+      // favoriteLayerList: [],
       sharedState: store.state,
       //   flag: false,
       //   s3mLen: 0,
-      hid: true,
+      // hid: true,
       layerparams: {},
-      ImgHid: false, //影响图层移动默认不显示
-      S3MLayersObj: {
-        title: Resource.s3mLayer,
-        expand: true,
-        checked: true,
-        type: "S3M",
-        children: [],
-      },
-      imgLayersObj: {
-        title: Resource.imageryLayer,
-        expand: true,
-        checked: true,
-        type: "IMG",
-        children: [],
-      },
-      TerrainLayersObj: {
-        title: Resource.terrainLayer,
-        expand: true,
-        checked: true,
-        type: "TERRAIN",
-        children: [],
-      },
-
-      TreeDatas: [
-        {
-          title: Resource.layerList,
-          expand: true,
-          //   selected: true,
-          //   contextmenu: true,
-          children: [],
-          type: "ROOT",
-        },
-      ],
+      // ImgHid: false, //影响图层移动默认不显示
+      // S3MLayersObj: {
+      //   title: Resource.s3mLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "S3M",
+      //   children: [],
+      // },
+      // imgLayersObj: {
+      //   title: Resource.imageryLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "IMG",
+      //   children: [],
+      // },
+      // TerrainLayersObj: {
+      //   title: Resource.terrainLayer,
+      //   expand: true,
+      //   checked: true,
+      //   type: "TERRAIN",
+      //   children: [],
+      // },
       contextData: null,
-      hideS3mNames: [],
-      hideImgNames: [],
-      hideTerrainNames: [],
+      // hideS3mNames: [],
+      // hideImgNames: [],
+      // hideTerrainNames: [],
     };
   },
   computed: {
-    LayerManageShow: function () {
-      return this.sharedState.toolBar[0];
-    },
     imgLayers: function () {
       return this.sharedState.imgLayerManage;
     },
@@ -217,33 +75,6 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    favoriteHandle(data) {
-      if (data.favorite) {
-        data.favorite = null;
-        for (let i = 0; i < this.favoriteLayerList.length; i++) {
-          if (this.favoriteLayerList[i].id == data.id) {
-            this.favoriteLayerList.splice(i, 1);
-          }
-        }
-      } else {
-        data.favorite = this.username;
-        this.favoriteLayerList.push(data);
-      }
-      Collect(this.username, data.id)
-        .then((res) => {
-          if (res.statuscode == 200) {
-            this.$message({
-              message: "操作成功",
-              type: "success",
-            });
-          } else {
-            this.$message.error(res.message);
-          }
-        })
-        .catch((e) => {
-          this.$message.error(e);
-        });
-    },
     favorite(data) {
       console.log(data);
     },
@@ -359,7 +190,7 @@ export default {
     add3DTiles(obj) {
       let tileset = new Cesium.Cesium3DTileset({
         url: obj.url + "?id=" + obj.id,
-        skipLevelOfDetail: true
+        skipLevelOfDetail: true,
       });
       this.sceneLayers[obj.title] = tileset;
       let thisLayer = viewer.scene.primitives.add(tileset);
@@ -385,7 +216,7 @@ export default {
             this.flyTo(sceneName);
           }
           if (obj.title == "分层分户") {
-            store.setLayerList(layers[0][0])
+            store.setLayerList(layers[0][0]);
             layers[0][0].setQueryParameter({
               url: "https://www.supermapol.com/realspace/services/data-HeBing8HaoLou/rest/data",
               dataSourceName: "Model_8_old",
@@ -393,7 +224,7 @@ export default {
               keyWord: "SmID",
             });
           }
-          store.state.tempLatData = layers[0][0]
+          store.state.tempLatData = layers[0][0];
           // for (var i = 0; i < layers.length; i++) {
           //   let style = new Cesium.Style3D();
           //   style.bottomAltitude = window.modelBottomAltitude; //底部高度
@@ -560,28 +391,9 @@ export default {
       store.setModelLayerList(this.modellayerlist);
     },
 
-    //获取后台资源目录树结构
-    getResourceTree() {
-      GetResourceTree().then((res) => {
-        if (res.statuscode == 200) {
-          this.TreeDatas = res.data;
-          store.state.tempResourceTree = res.data
-        } else {
-          console.log(e);
-        }
-      });
-    },
+ 
 
-    //获取后台资源目录树结构
-    getFavoriteLayers() {
-      GetMyCollect().then((res) => {
-        if (res.statuscode == 200) {
-          this.favoriteLayerList = res.data;
-        } else {
-          console.log(e);
-        }
-      });
-    },
+ 
 
     //图层定位
     location(obj) {
@@ -682,14 +494,9 @@ export default {
   },
 
   mounted() {
-    this.getResourceTree();
-    this.getFavoriteLayers();
   },
 
   watch: {
-    treeSearchText(val) {
-      this.$refs.tree.filter(val);
-    },
   },
 };
 </script>

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="sm-panel" v-if="LayerManageShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.LayerManage }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
+    <Tabs value="">
+      <TabPane :label="Resource.Resource" name="zyml">
+        <div class="zyml">
+          <el-input
+            :placeholder="Resource.InputPlaceholder"
+            prefix-icon="el-icon-search"
+            v-model="treeSearchText"
+            size="small"
+          >
+          </el-input>
+          <div class="treeDiv">
+            <el-tree
+              @check="handleCheckChange"
+              class="filter-tree"
+              :data="TreeDatas"
+              show-checkbox
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              ref="tree"
+            >
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <span>{{ node.label }}</span>
+                <span>
+                  <Icon
+                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
+                    color="green"
+                    size="18"
+                    class="opBtn"
+                    :title="
+                      data.favorite ? Resource.DelCollect : Resource.AddCollect
+                    "
+                    @click="favoriteHandle(data)"
+                    v-if="data.url != ''"
+                  />
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane
+        :label="Resource.LayerOptions"
+        name="tckz"
+        v-if="!$props.splitId"
+      >
+        <div class="tckz">
+          <List split size="large">
+            <ListItem v-for="(item, index) in addlayerdata" :key="index">
+              {{ item.title }}
+              <div class="listBtn">
+                <i-switch
+                  v-model="item.visible"
+                  size="small"
+                  @on-change="visibleChange(item, $event)"
+                >
+                  <template #open>
+                    <span></span>
+                  </template>
+                  <template #close>
+                    <span></span>
+                  </template>
+                </i-switch>
+                <Icon
+                  type="md-arrow-round-up"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.MoveUpOneLevel"
+                  @click="raise(item)"
+                  v-if="
+                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                />
+                <Icon
+                  type="md-arrow-round-down"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.MoveDownOneLevel"
+                  @click="lower(item)"
+                  v-if="
+                    index < addlayerdata.length - 1 &&
+                    (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                />
+                <Icon
+                  type="md-locate"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.location"
+                  @click="location(item)"
+                />
+              </div>
+              <div class="sliderBtn" v-if="item.type != 'Terrain'">
+                <Slider
+                  v-model="item.trans"
+                  @on-change="transSliderChange(item, $event)"
+                ></Slider>
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
+      <TabPane :label="Resource.Favorite" name="collect">
+        <div class="collect">
+          <List split>
+            <ListItem
+              v-for="(item, index) in favoriteLayerList"
+              :key="index"
+              class="layerlist"
+            >
+              <Checkbox @on-change="checkboxChange(item, $event)">{{
+                item.title
+              }}</Checkbox>
+              <div class="listBtn">
+                <Icon
+                  type="ios-star"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.DelCollect"
+                  @click="favoriteHandle(item)"
+                />
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<script>
+import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
+export default {
+  name: "LayerManageSplit",
+  props: {
+    splitId: {
+      type: Number,
+      default: false,
+    },
+    isshow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      treeSearchText: "",
+      addlayerdata: [],
+      favoriteLayerList: [],
+      sharedState: store.state,
+      TreeDatas: [
+        {
+          title: Resource.layerList,
+          expand: true,
+          //   selected: true,
+          //   contextmenu: true,
+          children: [],
+          type: "ROOT",
+        },
+      ],
+    };
+  },
+  computed: {
+    LayerManageShow: function () {
+      return this.$props.splitId
+        ? this.$props.isshow
+        : this.sharedState.toolBar[0];
+    },
+  },
+
+  methods: {
+    toggleVisibility() {
+      this.$props.splitId ? this.$emit("close") : store.setToolBarAction(0);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    favoriteHandle(data) {
+      // this.$emit("favoriteHandle", data);
+      if (data.favorite) {
+        data.favorite = null;
+        for (let i = 0; i < this.favoriteLayerList.length; i++) {
+          if (this.favoriteLayerList[i].id == data.id) {
+            this.favoriteLayerList.splice(i, 1);
+          }
+        }
+      } else {
+        data.favorite = this.username;
+        this.favoriteLayerList.push(data);
+      }
+      Collect(this.username, data.id).then((res) => {
+        if (res.statuscode == 200) {
+          this.$message({
+            message: "操作成功",
+            type: "success",
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    favorite(data) {
+      console.log(data);
+    },
+    checkboxChange(obj, checked, a) {
+      obj.checked = checked;
+      this.handleCheckChange(obj, checked);
+    },
+    visibleChange(obj, visible, a) {
+      this.$emit("visibleChange", obj, visible, a);
+    },
+    transSliderChange(obj, v, a) {
+      this.$emit("transSliderChange", obj, v, a);
+    },
+    // 复选框改变
+    handleCheckChange(obj, checked) {
+      this.$emit("handleCheckChange", obj, checked);
+    },
+
+    //获取后台资源目录树结构
+    getResourceTree() {
+      GetResourceTree().then((res) => {
+        if (res.statuscode == 200) {
+          this.TreeDatas = res.data;
+          store.state.tempResourceTree = res.data;
+        } else {
+          console.log(e);
+        }
+      });
+    },
+
+    //获取后台资源目录树结构
+    getFavoriteLayers() {
+      GetMyCollect().then((res) => {
+        if (res.statuscode == 200) {
+          this.favoriteLayerList = res.data;
+        } else {
+          console.log(e);
+        }
+      });
+    },
+    //图层定位
+    location(obj) {
+      this.$emit("location", obj);
+    },
+    //影像图层操作
+    raise(obj) {
+      this.$emit("raise", obj);
+    },
+    lower(obj) {
+      this.$emit("lower", obj);
+    },
+  },
+
+  mounted() {
+    this.getResourceTree();
+    this.getFavoriteLayers();
+  },
+
+  watch: {
+    treeSearchText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./LayerManage.scss";
+</style>

src/components/Viewer/smViewer.vue

@@ -7,6 +7,7 @@
     <compass></compass>
     <china-epidemic-map></china-epidemic-map>
     <world-epidemic-map></world-epidemic-map> -->
+    <split-screen></split-screen>
   </div>
 </template>
 

src/components/index.js

@@ -32,6 +32,7 @@ import sceneCamera from "./sceneAtttribute/camera/index";
 import sceneLight from "./sceneAtttribute/light/index";
 import ParticleSystem from "./sceneAtttribute/ParticleSystem/index";
 import otherOptions from "./sceneAtttribute/otherOptions/index";
+import splitScreen from "./sceneAtttribute/splitScreen/index";
 
 // 裁剪部分组件
 import ClipBox from "./Clip/ClipBox/index.js";
@@ -80,6 +81,7 @@ import WorldEpidemicMap from "./hotSpot/WorldEpidemicMap/index";
 
 //组合组件
 import LayerManage from "./Combinations/LayerManage/index"
+import LayerManageSplit from "./Combinations/LayerManage/LayerManageSplit.vue"
 import addLayers from "./Combinations/addLayersCombination/index";
 import addBaseLayer from "./Combinations/addBaseLayer/index";
 import TerrainAnalysis from "./Combinations/terrainCombination/index";
@@ -138,6 +140,8 @@ const components = [
     // serviceAreaAnalysis,
     // 组合
     LayerManage,
+    LayerManageSplit,
+    splitScreen,
     addLayers,
     TerrainAnalysis,
     ClipAnalysis,

src/components/sceneAtttribute/splitScreen/index.js

@@ -0,0 +1,2 @@
+import splitScreen from './splitScreen.vue';
+export default splitScreen;

src/components/sceneAtttribute/splitScreen/splitScreen.vue

@@ -0,0 +1,85 @@
+
+<template>
+  <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
+    <div
+      v-for="i in value"
+      :key="i"
+      class="splitScreen"
+      :class="{
+        w50:
+          type == 'HORIZONTAL' ||
+          type == 'QUAD' ||
+          (type == 'TRIPLE' && i != 3),
+        h50: type == 'VERTICAL' || type == 'QUAD' || type == 'TRIPLE',
+      }"
+    >
+      <li
+        class="sm-btn sm-tool-btn"
+        title="资源目录"
+        @click="$set(layers, i, !layers[i])"
+      >
+        <span class="iconfont icontuceng"></span>
+      </li>
+      <layer-manage-split
+        :splitId="i"
+        :isshow="layers[i]"
+        @close="$set(layers, i, false)"
+        @handleCheckChange="handleCheckChange"
+      ></layer-manage-split>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "splitScreen",
+  data() {
+    return {
+      layers: [],
+    };
+  },
+  computed: {
+    type() {
+      return store.state.splitType;
+    },
+    value() {
+      switch (store.state.splitType) {
+        case "HORIZONTAL":
+        case "VERTICAL":
+          return 2;
+        case "TRIPLE":
+          return 3;
+        case "QUAD":
+          return 4;
+        default:
+          break;
+      }
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.splitScreen {
+  float: left;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .sm-btn {
+    position: absolute;
+    top: 20px;
+    background-color: transparent;
+    // font-size: 30px;
+    z-index: 100;
+  }
+}
+
+.w50 {
+  width: 50%;
+}
+.h50 {
+  height: 50%;
+}
+</style>
+

src/store/store.js

@@ -30,7 +30,9 @@ var store2 = {
         vectorlayerlist: [],
         modellayerlist: [],
         chooseLayer: [],
-        flattenNames:[],//存储压平的名称数组
+        splitType: 'NONE',//分屏类型
+        sceneLayerlist: [],
+        flattenNames: [],//存储压平的名称数组
     },
     setisInitViewer(newValue) {
         this.state.isInitViewer = newValue;
@@ -42,6 +44,9 @@ var store2 = {
     setVectorLayerList(newValue) {
         this.state.vectorlayerlist = newValue;
     },
+    setSceneLayersList(newValue) {
+        this.state.sceneLayerlist = newValue;
+    },
     setLayerList(newValue) {//分层分户
         this.state.chooseLayer = newValue;
     },
@@ -91,6 +96,9 @@ var store2 = {
     setSceneAtttribute(newValue) {
         this.state.sceneAtttribute = newValue;
     },
+    setsplitType(newValue) {
+        this.state.splitType = newValue;
+    },
     setClipAction(newValue) {
         this.state.clip = newValue;
     },