图例

src/views/gis/layout/tools/example.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="example-com">
-    图例
+    <template v-for="p in listMapper">
+      <div class="p-label">{{p.label}}</div>
+      <div class="son">
+        <template v-for="s in p.children">
+          <div class="son-item">
+            <img :src="s.icon" alt=""/>
+            <div class="label" v-html="s.label"/>
+          </div>
+        </template>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -20,6 +30,27 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import iconHAJC from '@/assets/images/gis-layout/gis-layout-tools_hajc.png'
+import iconJSJ from '@/assets/images/gis-layout/gis-layout-tools_jsj.png'
+import iconWGY from '@/assets/images/gis-layout/gis-layout-tools_wgy.png'
+import iconWXCL from '@/assets/images/gis-layout/gis-layout-tools_wxcl.png'
+import iconGALSB from '@/assets/images/gis-layout/gis-layout-tools_galsb.png'
+import iconSHLSB from '@/assets/images/gis-layout/gis-layout-tools_shlsb.png'
+import iconMYLSB from '@/assets/images/gis-layout/gis-layout-tools_mylsb.png'
+import iconLGSZYJKSCSB from '@/assets/images/gis-layout/gis-layout-tools_lgszyjcscsb.png'
+import iconJGZZMGS from '@/assets/images/gis-layout/gis-layout-tools_jgzzmgs.png'
+import iconLGSJKYFL from '@/assets/images/gis-layout/gis-layout-tools_lgsjkyfl.png'
+import iconJQ from '@/assets/images/gis-layout/gis-layout-tools_jq.png'
+import iconLG from '@/assets/images/gis-layout/gis-layout-tools_lg.png'
+import iconCZW from '@/assets/images/gis-layout/gis-layout-tools_czw.png'
+import iconHCZ from '@/assets/images/gis-layout/gis-layout-tools_hcz.png'
+import iconFZS from '@/assets/images/gis-layout/gis-layout-tools_fzs.png'
+import iconAXCBYPYJ from '@/assets/images/gis-layout/gis-layout-tools_axcbypyj.png'
+import iconGGCSFXYF from '@/assets/images/gis-layout/gis-layout-tools_ggcsfxyf.png'
+import iconXFJY from '@/assets/images/gis-layout/gis-layout-tools_xfjy.png'
+import iconQYFXFK from '@/assets/images/gis-layout/gis-layout-tools_qyfxfk.png'
+import iconSHZLFXFK from '@/assets/images/gis-layout/gis-layout-tools_shzlfxfk.png'
+import iconAJ from '@/assets/images/gis-layout/gis-layout-tools_aj.png'
 
 export default defineComponent({
   name: '',
@@ -31,15 +62,140 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+    })
+    const listMapper = [
+      {
+        label: '处置力量',
+        children: [
+          {label: '海岸警察', icon: iconHAJC},
+          {label: '缉私警', icon: iconJSJ},
+          {label: '网格员', icon: iconWGY},
+        ]
+      },
+      {
+        label: '危险车辆',
+        children: [
+          {label: '危险车辆', icon: iconWXCL},
+        ]
+      },
+      {
+        label: '设备资源',
+        children: [
+          {label: '公安类设备', icon: iconGALSB},
+          {label: '社会类设备', icon: iconSHLSB},
+          {label: '民用类设备', icon: iconMYLSB},
+        ]
+      },
+      {
+        label: '企业',
+        children: [
+          {label: '零关税自用<br/>进口生产设备', icon: iconLGSZYJKSCSB},
+          {label: '加工增值免关税', icon: iconJGZZMGS},
+          {label: '零关税<br/>进口原辅料', icon: iconLGSJKYFL},
+        ]
+      },
+      {
+        label: '景区',
+        children: [
+          {label: '景区', icon: iconJQ},
+        ]
+      },
+      {
+        label: '旅馆',
+        children: [
+          {label: '旅馆', icon: iconLG},
+        ]
+      },
+      {
+        label: '出租屋',
+        children: [
+          {label: '出租屋', icon: iconCZW},
+        ]
+      },
+      {
+        label: '火车站',
+        children: [
+          {label: '火车站', icon: iconHCZ},
+        ]
+      },
+      {
+        label: '线索',
+        children: [
+          {label: '线索(反走私)', icon: iconFZS},
+          {label: '线索(岸线船舶<br/>研判预警)', icon: iconAXCBYPYJ},
+          {label: '线索(公共场所<br/>风险预防)', icon: iconGGCSFXYF},
+          {label: '线索(消防救援)', icon: iconXFJY},
+          {label: '线索(企业风险<br/>防控)', icon: iconQYFXFK},
+          {label: '线索(社会治理<br/>风险防控)', icon: iconSHZLFXFK},
+        ]
+      },
+      {
+        label: '案件',
+        children: [
+          {label: '案件', icon: iconAJ},
+        ]
+      },
+    ]
     onMounted(() => {
     })
     return {
       ...toRefs(state),
+      listMapper
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+.example-com {
+  padding: 12px 14px;
+  position: fixed;
+  width: 404px;
+  height: calc(100% - 100px);
+  background-color: #FFFFFF;
+  box-sizing: border-box;
+  overflow-y: auto;
+  .p-label {
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #4C4C4C;
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+  .son {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    .son-item {
+      height: 119px;
+      background-image: url("@/assets/images/gis-layout/gis-layout-tools_bg.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      >img {
+        width: 40px;
+        height: 55px;
+        margin-top: 12px;
+      }
+      .label {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #4C4C4C;
+        text-align: center;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
 </style>