gis-one-map-web/src/views/gis/layout/tools/example.vue

<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>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
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: '',
  components: {},
  props: {
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    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>