图例

src/components/header/index.html

@@ -4,6 +4,6 @@
   </div>
   <p class="title">{{title}}</p>
   <div class="right">
-    <div v-if="callBack" @click="back" class="back"></div>
+    <div v-if="callBack" @click="goback" class="back"></div>
   </div>
 </div>

src/components/header/index.js

@@ -28,7 +28,7 @@ export default {
   created () {
   },
   methods: {
-    back () {
+    goback () {
       this.$router.go(-1)
     }
   }

src/components/legend/index.html

@@ -0,0 +1,27 @@
+<div class="pannel" :style="style" :class="[bkClass]">
+  <div class="header_box">
+    <div class="top_line">
+      <div class="left_sign"></div>
+      <div class="right_sign"></div>
+    </div>
+    <div class="header row align_item_center">
+      <div v-if="title" class="title_bk row align_item_center">
+        <!-- <i class="icon"></i> -->
+        <p>{{title}}</p>
+      </div>
+      <div class="more">
+        <slot name="header"></slot>
+      </div>
+    </div>
+    <!-- <div class="light"></div> -->
+  </div>
+  <div class="body">
+    <div>
+      <slot></slot>
+    </div>
+    <div class="bottom_line">
+      <div class="left_sign"></div>
+      <div class="right_sign"></div>
+    </div>
+  </div>
+</div>

src/components/legend/index.js

@@ -0,0 +1,42 @@
+export default {
+  props: {
+    // 定义标题
+    title: {
+      type: String,
+      default: '图例'
+    },
+    bkClass: {
+      type: String,
+      default: 'bk_normal'
+    },
+    // 定义跳转页面url
+    uri: {
+      type: String,
+      default: ''
+    },
+    // 定义组件高度
+    height: {
+      type: String,
+      default: '210'
+    },
+    // 定义组件高度
+    width: {
+      type: String,
+      default: '134'
+    }
+  },
+  computed: {
+    style: function () {
+      return {
+        height: this.height + 'px',
+        width: this.width + 'px'
+      };
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  methods: {
+  }
+};

src/components/legend/index.scss

@@ -0,0 +1,137 @@
+.pannel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // 頭部區域
+  .header_box {
+    position: relative;
+    height: 35px;
+    overflow: visible !important;
+
+    .top_line {
+      display: flex;
+      justify-content: space-between;
+      // background-color: rgba(22, 60, 114, 1);
+      background: linear-gradient(0deg, rgba(49, 129, 246, 0.66) 0% RGBA(40, 99, 183, 1) 100%);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    .header {
+      margin-top: 2px;
+      height: 32px;
+      background: linear-gradient(90deg, RGBA(18, 45, 83, 1) 0% RGBA(40, 99, 183, 1) 50%);
+
+      .title_bk {
+        // font-style: italic;
+        font-weight: 600;
+        height: 50px;
+        margin-left: 20px;
+        line-height: 32px;
+        text-align: center;
+
+        .icon {
+          display: block;
+          background: url('./icon.png');
+          background-size: 100% 100%;
+          width: 18px;
+          height: 18px;
+        }
+
+        p {
+          margin-left: 30px;
+        }
+      }
+
+      .more {
+        margin-right: 20px;
+      }
+    }
+
+    .light {
+      position: absolute;
+      bottom: -15px;
+      left: 30px;
+      background: url('./light.png');
+      background-size: 100% 100%;
+      width: 280px;
+      height: 30px;
+      animation: lightmove 4s infinite;
+    }
+  }
+
+  // 内容区域
+  .body {
+    margin: 2px;
+    padding: 10px;
+    width: 100%;
+    position: relative;
+    flex: 1;
+    background-color: rgba(11, 28, 58, 1);
+    overflow: hidden;
+
+    .bottom_line {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(22, 60, 114, 1);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@keyframes lightmove {
+
+  /* 动画关键帧 */
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+
+  50% {
+    opacity: 0.2;
+    transform: translateX(170px);
+  }
+
+  /* 。。。 */
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+}

src/components/legend/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/components/pannel/index.scss

@@ -35,7 +35,7 @@
       background: rgba(8, 33, 71, 1);
 
       .title_bk {
-        font-style: italic;
+        // font-style: italic;
         font-weight: 600;
         height: 50px;
         margin-left: 20px;
@@ -49,6 +49,10 @@
           width: 18px;
           height: 18px;
         }
+
+        p {
+          margin-left: 10px;
+        }
       }
 
       .more {

src/views/property/main-gis/index.html

@@ -1,4 +1,12 @@
 <div class="map border" id="map2">
+  <Legend class="legend_pos">
+    <div class="legend_full">
+      <div v-for="item in LegendData" class="legend_item">
+        <div class="icon" :style="[item.iconStyle]"></div>
+        <p>{{item.name}}</p>
+      </div>
+    </div>
+  </Legend>
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
   <!--选择地址-->
   <div class="select_address">

src/views/property/main-gis/index.js

@@ -1,8 +1,5 @@
 
 import GisUtils from '@/utils/gis.js';
-import {
-  fromLonLat
-} from 'ol/proj'
 import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
 import { getInfo } from "@/api/login";
 import { getConfigKey } from "@/api/system/config";
@@ -10,11 +7,43 @@ import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.j
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import { attachmentList } from "@/api/common/uploadAttachment.js";
 let gis = null;
+import Legend from '@/components/legend/index.vue';
 export default {
   components: {
+    Legend
   },
   data () {
     return {
+      LegendData: [
+        {
+          iconStyle: {
+            background: 'rgba(38,252,128,0.45)',
+            border: '2px solid #26FC80'
+          },
+          name: '自用'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(232,246,0,0.45)',
+            border: '2px solid #E8F600'
+          },
+          name: '闲置'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(16,252,252,0.45)',
+            border: '2px solid #10FCFC'
+          },
+          name: '出租'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(198,0,255,0.45)',
+            border: '2px solid #C600FF'
+          },
+          name: '其他'
+        }
+      ],
       dialogImageUrl: '',
       dialogVisible: false,
       showInfoDetail: false,

src/views/property/main-gis/index.scss

@@ -5,6 +5,36 @@
   right: 0;
   bottom: 0;
 
+  .legend_pos {
+    z-index: 21 !important;
+    position: absolute;
+    top: 100px;
+    right: 480px;
+
+    .legend_full {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .legend_item {
+        display: flex;
+        justify-content: center;
+        // border: 1px solid red;
+        align-items: center;
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+      }
+
+    }
+  }
+
   .mask {
     z-index: 1;
     width: 100%;

src/views/resources/main-gis/index.html

@@ -1,4 +1,12 @@
 <div class="map border" id="map2">
+  <Legend class="legend_pos">
+    <div class="legend_full">
+      <div v-for="item in LegendData" class="legend_item">
+        <div class="icon" :style="[item.iconStyle]"></div>
+        <p>{{item.name}}</p>
+      </div>
+    </div>
+  </Legend>
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
   <!--选择地址-->
   <!-- <div class="select_address">

src/views/resources/main-gis/index.js

@@ -4,18 +4,46 @@ import {
   fromLonLat
 } from 'ol/proj'
 import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/index.js";
-import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
-import { getInfo } from "@/api/login";
-import { getConfigKey } from "@/api/system/config";
-import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js";
+
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
-import { attachmentList } from "@/api/common/uploadAttachment.js";
+import Legend from '@/components/legend/index.vue';
 let gis = null;
 export default {
   components: {
+    Legend
   },
   data () {
     return {
+      LegendData: [
+        {
+          iconStyle: {
+            background: 'rgba(38,252,128,0.45)',
+            border: '2px solid #26FC80'
+          },
+          name: '自用'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(232,246,0,0.45)',
+            border: '2px solid #E8F600'
+          },
+          name: '闲置'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(16,252,252,0.45)',
+            border: '2px solid #10FCFC'
+          },
+          name: '出租'
+        },
+        {
+          iconStyle: {
+            background: 'rgba(198,0,255,0.45)',
+            border: '2px solid #C600FF'
+          },
+          name: '其他'
+        }
+      ],
     };
   },
   computed: {

src/views/resources/main-gis/index.scss

@@ -5,6 +5,36 @@
   right: 0;
   bottom: 0;
 
+  .legend_pos {
+    z-index: 21 !important;
+    position: absolute;
+    top: 100px;
+    right: 480px;
+
+    .legend_full {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .legend_item {
+        display: flex;
+        justify-content: center;
+        // border: 1px solid red;
+        align-items: center;
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          border-radius: 2px;
+          margin-right: 10px;
+        }
+      }
+
+    }
+  }
+
   .mask {
     z-index: 1;
     width: 100%;