样式优化

YHYZT/client/public/config.js

@@ -86,6 +86,7 @@ window.ApplicationConfig = {
           base: true, // 是否底图,底图 在 设置 visible-layer-ids 时会跳过,向下传递
           opacity: 1, // 图层透明度,取值0~1或false,false禁用透明度调节功能,可选配置
           hidden: false, // 只在 layerTree 组件里面不显示,代码上依旧能获取到,可选配置
+          icon: 'md-apps',
           children: [
             {
               id: "tdt",
@@ -93,6 +94,7 @@ window.ApplicationConfig = {
               enabled: true,
               expand: false,
               visible: true,
+              icon: 'md-globe',
               children: [
                 {
                   id: "tdtsl",
@@ -129,6 +131,7 @@ window.ApplicationConfig = {
               enabled: true,
               expand: false,
               visible: true,
+              icon: 'ios-cube',
               children: [
                 {
                   id: "yhzq2024",
@@ -151,6 +154,7 @@ window.ApplicationConfig = {
               enabled: true,
               expand: false,
               visible: false,
+              icon: 'md-notifications',
               children: [
                 {
                   id: "DZZHYFQ",
@@ -178,8 +182,9 @@ window.ApplicationConfig = {
           id: "gll",
           name: "管理类",
           enabled: true,
-          expand: true,
+          expand: false,
           visible: false,
+          icon: 'md-settings',
           children: [
             {
               id: "YHYZT_PEWG_NEW",

YHYZT/client/src/components/ol/VlConfigLayers/VlConfigLayers.vue

@@ -105,7 +105,6 @@ export default {
           if (base) { // 底图不用处理
             return
           }
-
           if (visibleLayerIds.length) {
             // [...]
             if (isGroup) {

YHYZT/client/src/components/ol/VlConfigLayers/VlLayerTree.vue

@@ -2,7 +2,6 @@
   <div
     v-if="true"
     class="vl-layer-tree flex-align-center"
-    :style="`width: ${height}px;height: ${height}px;`"
   >
 <!--    <template v-if="$slots.default">
       <slot />
@@ -29,6 +28,7 @@
           :render="renderContent"
           expand-node
           class="layer-tree"
+          @on-toggle-expand="toggleExpandHandle"
         />
       </div>
     </transition>
@@ -77,13 +77,15 @@ export default {
   mounted() {
   },
   methods: {
+    toggleExpandHandle(node, evt){
+      console.log(evt)
+    },
     getTreeData() {
       this.expandIdsSet.clear()
       layerConfigEach(this.treeData, (item, hasChild) => {
         const { id, expand } = item
         expand && this.expandIdsSet.add(id)
       })
-
       this.treeData.splice(0)
       this.dealTreeData(this.enabledLayers, this.treeData)
     },
@@ -109,64 +111,6 @@ export default {
     },
     renderContent(h, { root, node, data }) {
       const { visible, name, id, isGroup, item } = data
-      const btns = [
-        h('span', {
-          class: ['btn', 'opacity'],
-          on: {
-            click: (e) => {
-              e.stopPropagation()
-            }
-          }
-        }, [
-          h('Poptip', {
-            props: {
-              placement: 'left',
-              trigger: 'hover'
-            }
-          }, [
-            h('Icon', {
-              props: {
-                type: 'md-contrast'
-              },
-              style:{fontSize:'18px'}
-            }),
-            h('Slider', {
-              slot: 'content',
-              props: {
-                'show-tip': 'never',
-                'show-input': true,
-                value: (item.opacity || 1) * 100
-              },
-              on: {
-                input: (value) => {
-                  this.changeOpacity(item, value)
-                }
-              }
-            })
-          ])
-        ]),
-        h('span', {
-          class: 'btn',
-          on: {
-            click: (e) => {
-              e.stopPropagation()
-              this.changeVisible(item)
-            }
-          }
-        }, [
-          h('Icon', {
-            props: {
-              type: `${visible ? 'md-eye' : 'md-eye-off'}`
-            },
-            class: `${visible ? 'visible' : ''}`,
-            style:{fontSize:'20px'}
-          })
-        ])
-      ]
-      if (isBoolean(item.opacity)) {
-        btns.shift()
-      }
-
       return h('div', {
         class: [
           'flex-between',
@@ -179,30 +123,39 @@ export default {
         ]
       }, [
         h('span', { class: 'flex-1', style: { cursor: 'pointer' }}, [
+          isGroup ? 
           h('Icon', {
             props: {
-              type: `${isGroup ? 'ios-folder-outline' : 'ios-map-outline'}`
+              type: item['icon'],
+              color: '#1790EC',
+              size: 20
             },
             style: {
               marginRight: '4px'
             }
-          }),
+          }):
+          h('Checkbox', {
+            props: {
+              value: item['visible']
+            },
+            style: {
+              marginRight: '4px'
+            },
+            on: {
+              'on-change': (val)=>{
+                item['visible'] = val
+              }
+            }
+          }, []),
           h('span', { class: 'label' }, name)
         ]),
-        h('div', {
-          class: `btns`,
-          on: {
-            click: (e) => {
-              e.stopPropagation()
-            }
-          }
-        }, btns)
       ])
     },
     changeVisible(item) {
       //
       const { visible } = item
-      item.visible = !visible
+      
+      item.checked = item.visible = !visible
     },
     changeOpacity(item, value) {
       item.opacity = value / 100
@@ -214,29 +167,21 @@ export default {
 <style lang="scss" scoped>
 .vl-layer-tree {
   position: relative;
-
   .layer-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin: 5px 0;
-    padding: 5px 0;
     background-color: #fff;
     box-sizing: border-box;
     border-radius: 4px;
     box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
     z-index: 900;
-
+    width: 100%;
     .layer-tree {
-      min-width: 440px;
+      width: 100%;
       max-height: 75vh;
-      padding: 0 10px;
       line-height: 2em;
       color: #515a6e;
       cursor: default;
       overflow-x: hidden;
       overflow-y: auto;
-
       ::v-deep {
         .ivu-tree-title {
           width: 100%;
@@ -259,9 +204,9 @@ export default {
               padding: 0.3em;
               cursor: pointer;
               font-size: 16px;
-
-              .visible {
-
+              color: #777;
+              >.visible {
+                color: #2d8cf0;
               }
             }
 
@@ -270,7 +215,7 @@ export default {
                 padding: 4px;
 
                 .ivu-poptip-body-content {
-                  padding: 0 10px;
+                  
                 }
 
                 .ivu-slider {
@@ -308,26 +253,20 @@ export default {
 
         ul li {
           margin: 3px 0;
+          position: relative;
+          background: #fff;
         }
-
         .layer-group {
           width: 98%;
           height: auto;
           float: left;
-          height: 40px;
-          line-height: 40px;
-          background: #eef3ff;
           border-radius: 4px 4px 4px 4px;
-          padding: 0 10px;
-          margin-bottom: 8px;
-
           font-weight: normal;
           font-size: 16px;
-          color: #717C89;
+          color: #171717;
 
           .group-title {
             height: 30px;
-            line-height: 30px;
             padding-left: 15px;
             background: #F4F7FB;
             font-weight: 400;
@@ -349,12 +288,6 @@ export default {
               }
             }
           }
-
-          .group-item {
-            //margin-bottom: 2px;
-
-          }
-
           .group-item.open > .layer-item {
             display: block;
           }
@@ -450,20 +383,12 @@ export default {
           width: 98%;
           height: auto;
           float: left;
-          height: 40px;
-          line-height: 40px;
-          background: rgba(89, 136, 255, .1);
           border-radius: 4px 4px 4px 4px;
-          padding: 0 10px;
-          margin-bottom: 8px;
-
           font-weight: normal;
           font-size: 16px;
-          color: rgba(68, 106, 231, 1);
+          color: #171717;
 
           .group-title {
-            height: 30px;
-            line-height: 30px;
             padding-left: 15px;
             background: #F4F7FB;
             font-weight: 400;
@@ -486,11 +411,6 @@ export default {
             }
           }
 
-          .group-item {
-            //margin-bottom: 2px;
-
-          }
-
           .group-item.open > .layer-item {
             display: block;
           }
@@ -586,17 +506,10 @@ export default {
           width: 98%;
           height: auto;
           float: left;
-          height: 40px;
-          line-height: 40px;
-          background: rgba(89, 136, 255, 1);
           border-radius: 4px 4px 4px 4px;
-          padding: 0 10px;
-          margin-bottom: 8px;
-
-
+          color: #171717;
           font-weight: normal;
           font-size: 16px;
-          color: #fff;
 
           .group-title {
             height: 30px;
@@ -622,12 +535,6 @@ export default {
               }
             }
           }
-
-          .group-item {
-            //margin-bottom: 2px;
-
-          }
-
           .group-item.open > .layer-item {
             display: block;
           }
@@ -722,16 +629,11 @@ export default {
           width: 98%;
           height: auto;
           float: left;
-          height: 40px;
-          line-height: 40px;
-          background: rgba(89, 136, 255, .1);
           border-radius: 4px 4px 4px 4px;
-          padding: 0 10px;
-          margin-bottom: 8px;
-
+          
           font-weight: normal;
           font-size: 16px;
-          color: rgba(113, 124, 137, 1);
+          color: #171717;
 
           .group-title {
             height: 30px;
@@ -758,11 +660,6 @@ export default {
             }
           }
 
-          .group-item {
-            //margin-bottom: 2px;
-
-          }
-
           .group-item.open > .layer-item {
             display: block;
           }
@@ -854,9 +751,6 @@ export default {
           }
 
         }
-        .ivu-tree-arrow{
-          line-height: 40px;
-        }
       }
     }
   }
@@ -902,11 +796,6 @@ export default {
       }
     }
 
-    .group-item {
-      //margin-bottom: 2px;
-
-    }
-
     .group-item.open > .layer-item {
       display: block;
     }
@@ -999,4 +888,32 @@ export default {
 
   }
 }
+::v-deep {
+  .layer-dropdown {
+    .layer-tree {
+      >ul {
+        >li {
+          border-bottom: 1px solid #D9E0EB;
+          border-left: 2px solid #138EEC;
+          padding: 5px 0px;
+          padding-left: 20px !important;
+        }
+      }
+    }
+    .ivu-icon-ios-arrow-forward {
+      &:before {
+        content: "";
+        display: block;
+        width: 0px;
+        height: 0px;
+        border: 5px solid transparent;
+        border-left-color: #999;
+      }
+    }
+  }
+  .ivu-tree-arrow {
+    position: absolute;
+    right: 20px;
+  }
+}
 </style>

YHYZT/client/src/components/ol/VlToolBox/index.vue

@@ -6,7 +6,7 @@
   >
     <span
       class="tool-box-title"
-      :style="`padding:0 ${paddingLR}px`"
+      style="color: #70859F;"
     >
       <svg
         t="1638254738618"
@@ -366,11 +366,9 @@ export default {
 
   .tool-box-title {
     svg {
-      width: 27px;
-      height: 27px;
       vertical-align: middle;
       position: relative;
-      top: -2px;
+      color: #70859F;
     }
   }
 

YHYZT/client/src/views/DataCenter.vue

@@ -15,50 +15,29 @@
       </div>
     </div>
     <transition name="fade">
-      <div class="page-left" v-show="leftBoxClose">
-        <div class="condition">
-          <div class="panel flex-1">
-            <Cascader
-              :data="xzqOptions"
-              v-model="query.xzqdm"
-              change-on-select
-              :clearable="false"
-              @on-change="cascaderChange"
-            />
-          </div>
-          <!--          <div class="panel flex-1" style="margin-left: 20px">
-            <el-input v-model="input" placeholder="输入关键词进行搜索" style="width: 90%"  class="base"/>
-            <i class="iconfont yh-sousuo"/>
-          </div>-->
-        </div>
-        <div v-show="isComponent === 'zyml'" class="contents">
+      <div class="page-left" :class="{'zyml-page': isComponent === 'zyml'}" v-show="leftBoxClose">
+        
+        <div v-show="isComponent === 'zyml'" class="contents zymlClass">
           <div class="title">
-            <div
-              style="
-                width: 6px;
-                height: 20px;
-                background: #5988ff;
-                border-radius: 1px 1px 1px 1px;
-                margin-right: 8px;
-              "
-            />
             <p>{{ nameComp }}</p>
           </div>
+          <div class="condition">
+            <div class="panel flex-1">
+              <Cascader
+                :data="xzqOptions"
+                v-model="query.xzqdm"
+                change-on-select
+                :clearable="false"
+                @on-change="cascaderChange"
+              />
+            </div>
+          </div>
           <vl-tool-bar class="data-c" height="0" :radius="0">
             <vl-layer-tree :enabled-layers="enabledLayersConfig" />
           </vl-tool-bar>
         </div>
         <div v-show="isComponent === 'sxsb'" class="contents">
           <div class="title">
-            <div
-              style="
-                width: 6px;
-                height: 20px;
-                background: #5988ff;
-                border-radius: 1px 1px 1px 1px;
-                margin-right: 8px;
-              "
-            />
             <p>{{ nameComp }}</p>
           </div>
           <div class="sxsb btn-groups">
@@ -288,15 +267,6 @@
         </div>
         <div v-show="isComponent === 'kjfx'" class="contents">
           <div class="title">
-            <div
-              style="
-                width: 6px;
-                height: 20px;
-                background: #5988ff;
-                border-radius: 1px 1px 1px 1px;
-                margin-right: 8px;
-              "
-            />
             <p class="flex-1">{{ nameComp }}</p>
             <i
               v-show="kjfxData.fxType != -1"
@@ -391,7 +361,7 @@
       </div>
     </transition>
     <vl-map
-      class-name="base-map flex-2"
+      :class-name="{'base-map': true, 'flex-2': true, 'zyml-map': isComponent === 'zyml'}"
       :map.sync="map"
       projection="EPSG:4490"
       @loaded="mapLoaded"
@@ -404,10 +374,9 @@
         @loaded="configLayerLoaded"
       />
       <!-- 工具栏 -->
-      <vl-tool-bar :height="32" :radius="4">
-        <vl-tool-bar-item
+      <vl-tool-bar class="tool_box" :height="32" :radius="4">
+        <li
           no-padding
-          style="width: 32px"
           @click="resetMapView"
           title="还原"
         >
@@ -426,39 +395,35 @@
               p-id="6661"
             />
           </svg>
-        </vl-tool-bar-item>
-        <vl-tool-bar-item
+        </li>
+        <li
           no-padding
-          style="width: 32px"
           @click="sqFeatrue"
           title="属性识别"
         >
           <i class="iconfont yh-sxsb" style="font-size: 26px" />
-        </vl-tool-bar-item>
-        <vl-tool-bar-item
+        </li>
+        <li
           no-padding
-          style="width: 26px"
           @click="openCoordinate"
           title="坐标导入"
         >
           <i class="iconfont yh-daoru" style="font-size: 22px" />
-        </vl-tool-bar-item>
-        <vl-tool-bar-item
+        </li>
+        <li
           no-padding
-          style="width: 32px"
           @click="cleanLayer"
           title="清除"
         >
           <i class="iconfont yh-qingchu" style="font-size: 26px" />
-        </vl-tool-bar-item>
-        <vl-tool-bar-item
+        </li>
+        <li
           no-padding
-          style="width: 26px"
           @click="cleanLayer"
           title="地图量算"
         >
-          <vl-tool-box :height="26" />
-        </vl-tool-bar-item>
+          <vl-tool-box />
+        </li>
       </vl-tool-bar>
       <!-- 图例 -->
       <vl-legend
@@ -1905,12 +1870,27 @@ export default {
     z-index: 1;
     height: 100%;
     width: 480px;
-    background: #ededed;
+    padding: 15px 20px;
+    background: #f1f4f7;
     //border-right: 1px solid #d3e3fd;
-    padding: 20px 10px 0px 10px;
+    background: #fff;
+    &.zyml-page {
+      width: 380px;
+      padding: 15px 0px;
+      background: #f5f7fa;
+      >.contents {
+        >.title {
+          padding: 0px 20px;
+        }
+        >.condition {
+          padding: 0px 20px;
+        }
+      }
+    }
     .condition {
       display: flex;
       justify-content: space-around;
+      margin-top: 10px;
       .panel {
         background: #ffffff;
         border-radius: 4px 4px 4px 4px;
@@ -1932,9 +1912,7 @@ export default {
       position: relative;
       height: calc(100% - 60px);
       margin-top: 8px;
-      background: #ffffff;
-      border-radius: 4px 4px 4px 4px;
-      padding: 20px;
+      padding: 0px;
       .btn-groups {
         height: 38px;
         background: linear-gradient(to bottom, #e9f6ff, #ffffff);
@@ -2185,6 +2163,10 @@ export default {
     overflow: hidden;
     background: url("~@/assets/ol/map-bg.png") round;
     border-radius: 5px;
+    &.zyml-map {
+      left: 470px;
+      width: calc(100% - 470px);
+    }
     // z-index: -1;
 
     $mask-bgc: radial-gradient(
@@ -2204,8 +2186,6 @@ export default {
     }
 
     ::v-deep .vl-tool-bar {
-      top: 15px;
-      right: 15px;
       .vl-tool-bar-item {
         & + .vl-tool-bar-item {
           margin-left: 0px !important;
@@ -2554,5 +2534,23 @@ export default {
       }
     }
   }
+  .tool_box {
+    border-radius: 3px;
+    background: #FFFFFF;
+    text-align: center;
+    padding: 4px;
+    >li {
+      margin: auto;
+      padding: 8px 5px;
+      width: 50px;
+      color: #000000;
+      border-bottom: 1px solid #DFE4EA;
+      font-size: 14px;
+      opacity: 0.7;
+      &:last-child {
+        border-bottom: 0px;
+      }
+    }
+  }
 }
 </style>