共享资源搜索样式与服务详情入口

src/components/Combinations/LayerManage/LayerManage.scss

@@ -160,4 +160,36 @@
 
 .close_eyes {
     background-image: url("/static/images/ghzc/close_eyes.png");
+}
+
+.headerSearch {
+    .el-form-item {
+        margin-bottom: 0px;
+    }
+
+    .el-input {
+        width: 90%;
+    }
+}
+
+.myDatePicker {
+    .el-date-picker__header-label {
+        color: #fff !important;
+    }
+
+    .el-picker-panel__icon-btn {
+        color: #fff !important;
+    }
+
+    .el-year-table td.today .cell {
+        color: #409EFF;
+    }
+
+    .el-year-table td .cell {
+        color: #fff;
+    }
+
+    .el-year-table td .cell:hover {
+        color: #409EFF !important;
+    }
 }

src/components/Combinations/LayerManage/LayerManage.vue

@@ -249,7 +249,6 @@ export default {
       Cesium.when.all(
         promiseArray,
         (layers) => {
-          console.log(layers, "layerslayers");
           this_.sceneLayers[obj.title] = layers;
           // if (sceneName) {
           //   this.flyTo(sceneName);
@@ -317,7 +316,6 @@ export default {
     },
     // 复选框改变
     handleCheckChange(obj, checked) {
-      // console.log(obj, checked ,);
       if (obj.children && obj.children.length > 0) {
         for (let i = 0; i < obj.children.length; i++) {
           this.handleCheckChange(obj.children[i], checked);
@@ -362,7 +360,6 @@ export default {
                 obj.title.indexOf("雨水") > -1 ||
                 obj.title.indexOf("管线") > -1
               ) {
-                console.log(obj.checked, "obj.checked");
                 this.bus.$emit("setnUderground", obj.checked);
               }
 
@@ -456,7 +453,6 @@ export default {
 
       } else {
         if (obj.title.indexOf("雨水") > -1 || obj.title.indexOf("管线") > -1) {
-          console.log(obj.checked, "obj.checked");
           this.bus.$emit("setnUderground", obj.checked);
         }
         for (let i = 0; i < this.addlayerdata.length; i++) {

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="$props.type == 'share' ? '' : 'sm-panel'" v-show="LayerManageShow" v-drag>
+  <div
+    :class="$props.type == 'share' ? '' : 'sm-panel'"
+    v-show="LayerManageShow"
+    v-drag
+  >
     <div class="sm-panel-header" v-if="$props.type != 'share'">
       <span>{{ Resource.LayerManage }}</span>
       <span class="closeBtn" @click="toggleVisibility">&times;</span>
@@ -7,7 +11,59 @@
     <Tabs value="">
       <TabPane :label="Resource.Resource" name="zyml">
         <div class="zyml" :class="$props.splitId >= 0 ? `zymlsplit` : ''">
-          <div class="searchDiv">
+          <div class="headerSearch">
+            <el-form ref="form" :model="form">
+              <el-form-item label="数据年份:" v-if="$props.type == 'share'">
+                <el-col :span="8">
+                  <el-date-picker
+                    placeholder="开始年份"
+                    v-model="form.startYear"
+                    type="year"
+                    format="yyyy"
+                    value-format="yyyy"
+                    popper-class='myDatePicker'
+                  ></el-date-picker>
+                </el-col>
+                <el-col class="line" :span="2">-</el-col>
+                <el-col :span="8">
+                  <el-date-picker
+                    placeholder="结束年份"
+                    v-model="form.endYears"
+                    type="year"
+                    format="yyyy"
+                    value-format="yyyy"
+                    popper-class='myDatePicker'
+                  ></el-date-picker>
+                </el-col>
+              </el-form-item>
+              <el-form-item>
+                <el-input
+                  :placeholder="Resource.InputPlaceholder"
+                  prefix-icon="el-icon-search"
+                  v-model="form.treeSearchText"
+                  size="small"
+                >
+                </el-input>
+                <div
+                  class="eicon"
+                  :class="isshowNum ? 'eyes' : 'close_eyes'"
+                  @click="isshowNum = !isshowNum"
+                ></div>
+              </el-form-item>
+            </el-form>
+            <!-- <span>数据年份:</span>
+            <el-date-picker
+              v-model="value"
+              type="year"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="yyyy"
+              value-format="yyyy"
+            >
+            </el-date-picker> -->
+          </div>
+          <!-- <div class="searchDiv">
             <el-input
               :placeholder="Resource.InputPlaceholder"
               prefix-icon="el-icon-search"
@@ -20,7 +76,7 @@
               :class="isshowNum ? 'eyes' : 'close_eyes'"
               @click="isshowNum = !isshowNum"
             ></div>
-          </div>
+          </div> -->
           <div class="treeDiv">
             <el-tree
               @check="handleCheckChange"
@@ -40,6 +96,7 @@
                     : node.label
                 }}</span>
                 <span>
+                  <i class="el-icon-notebook-2" v-if="data.url != '' && $props.type == 'share'"></i>
                   <Icon
                     :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
                     color="green"
@@ -63,8 +120,9 @@
         v-if="$props.splitId == -1 || $props.type == 'share'"
       >
         <div class="tckz">
+          {{ addlayerdataCopy }}
           <List split size="large">
-            <ListItem v-for="(item, index) in addlayerdata" :key="index">
+            <ListItem v-for="(item, index) in addlayerdataCopy" :key="index">
               {{ item.title }}
               <div class="listBtn">
                 <i-switch
@@ -98,7 +156,7 @@
                   :title="Resource.MoveDownOneLevel"
                   @click="lower(item)"
                   v-if="
-                    index < addlayerdata.length - 1 &&
+                    index < addlayerdataCopy.length - 1 &&
                     (item.type == 'Vector' || item.type == 'IMG')
                   "
                 />
@@ -177,6 +235,12 @@ export default {
   },
   data() {
     return {
+      form: {
+        startYear: "",
+        endYears: "",
+        treeSearchText: "",
+      },
+      addlayerdataCopy:[],//用于双向绑定
       defaultProps: {
         children: "children",
         label: "label",
@@ -368,6 +432,9 @@ export default {
       },
       immediate: true,
     },
+    addlayerdata(val){
+      this.addlayerdataCopy = val
+    }
   },
 };
 </script>
@@ -384,4 +451,26 @@ export default {
     width: calc(100% - 30px);
   }
 }
+// .headerSearch {
+//   /deep/ .el-form-item{
+//   //   display: flex;
+//   // justify-content: space-between;
+//   margin-bottom: 0px;
+//   }
+//   /deep/ .el-input{
+//     width: 90%;
+//   }
+//   /deep/ .el-date-picker .el-picker-panel__body .el-year-table td{
+//     color: #fff !important;
+//   }
+//   /deep/ .el-year-table td .cell{
+//     color: #fff !important;
+//   }
+//   /deep/ .el-date-picker__header-label{
+//     color: #fff !important;
+//   }
+//   /deep/ .el-picker-panel__icon-btn{
+//     color: #fff !important;
+//   }
+// }
 </style>

src/views/shareResources/components/ServiceDetails.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="sm-panel sm-function-module-query" v-drag>
+      <div class="sm-panel-header">
+        <span>服务详情</span>
+        <i class="el-icon-close" @click="isDetailsShow = false"></i>
+      </div>
+      <div class="ServiceCon"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        isDetailsShow:false,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ServiceCon {
+  height: 560px;
+}
+</style>

src/views/shareResources/index.vue

@@ -1,19 +1,31 @@
 <template>
-  <div class="ghzc">
-    <div class="innerContainer leftPane" v-drag @click.native.stop>
+  <div >
+    <div class="ghzc">
+        <div class="innerContainer leftPane" v-drag @click.native.stop>
       <h2 class="Pangetitle darg-div">
         <span class="pange_text">共享资源目录</span>
       </h2>
-      <LayerManageSplit type="share" :splitId="-2" ref="shareManage" :isshow="true" @handleCheckChange="handleCheckChange"></LayerManageSplit>
+      <LayerManageSplit
+        type="share"
+        :splitId="-2"
+        ref="shareManage"
+        :isshow="true"
+        @handleCheckChange="handleCheckChange"
+      ></LayerManageSplit>
+      
     </div>
+    </div>
+    <ServiceDetails></ServiceDetails>
   </div>
 </template>
 
 <script>
 import LayerManageSplit from "../../components/Combinations/LayerManage/LayerManageSplit.vue";
+import ServiceDetails from './components/ServiceDetails.vue'
 export default {
   components: {
     LayerManageSplit,
+    ServiceDetails
   },
   data() {
     return {};
@@ -21,7 +33,7 @@ export default {
   mounted() {
     this.bus.$on("setShareResources", this.handleCheckChange);
   },
-  methods:{
+  methods: {
     handleCheckChange(obj, checked, splitId, initset) {
       if (obj.children && obj.children.length > 0) {
         for (let i = 0; i < obj.children.length; i++) {
@@ -30,10 +42,10 @@ export default {
       } else {
         if (checked) {
           store.setCheckedData(obj);
-        //   this.$set(this.toolTitle, splitId, obj.title);
+          //   this.$set(this.toolTitle, splitId, obj.title);
           // this.toolTitle[splitId] = obj.title;
         }
-        console.log(obj.title, obj.type, splitId, "q");
+        console.log(obj.title, obj.type, splitId, initset, "q");
         // if (obj.checked) {
         let sceneLayer;
         switch (obj.type) {
@@ -53,7 +65,6 @@ export default {
             let slist = viewer.imageryLayers._layers.filter(
               (element) => element._imageryProvider._name == obj.title
             );
-            console.log(slist, "slist");
             sceneLayer = slist.length > 0 ? slist[0] : null;
             break;
           case "Terrain": //地形
@@ -64,20 +75,19 @@ export default {
             null;
         }
         if (sceneLayer) {
-          if (initset) {
-            //初始时隐藏其他分屏
-            for (let i = 0; i < this.checkedKeys.length; i++) {
-              if (splitId != i) sceneLayer.setVisibleInViewport(i, false);
-            }
-          }
-          sceneLayer.setVisibleInViewport(splitId, obj.checked);
-          // sceneLayer.setVisibleInViewport(1, obj.checked);
+          //   if (initset) {
+          //     //初始时隐藏其他分屏
+          //     for (let i = 0; i < this.checkedKeys.length; i++) {
+          //       if (splitId != i) sceneLayer.setVisibleInViewport(i, false);
+          //     }
+          //   }
+          this.bus.$emit("checkedChange", obj, "split", splitId);
         } else {
           this.bus.$emit("checkedChange", obj, "split", splitId);
         }
       }
     },
-  }
+  },
 };
 </script>