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

<template>
  <div class="select-com">
    <div class="draw __box-shadow">
      <div class="tools">
        <div class="label">空间选择：</div>
        <div class="right">
          <div class="item __hover" :class="{active: selectParams.type === 'circle'}" @click="mapDraw('circle')">
            <img src="@/assets/images/gis-layout/gis-layout-tools_select-circle.png" alt=""/>圆形
          </div>
          <div class="line"/>
          <div class="item __hover" :class="{active: selectParams.type === 'rectangle'}" @click="mapDraw('rectangle')">
            <img src="@/assets/images/gis-layout/gis-layout-tools_select-rectangle.png" alt=""/>矩形
          </div>
          <div class="line"/>
          <div class="item __hover" :class="{active: selectParams.type === 'polygon'}" @click="mapDraw('polygon')">
            <img src="@/assets/images/gis-layout/gis-layout-tools_select-polygon.png" alt=""/>多边形
          </div>
          <div class="line"/>
          <div class="item __hover" @click="mapClear">
            <img src="@/assets/images/gis-layout/gis-layout-tools_select-clear.png" alt=""/>清除
          </div>
        </div>
      </div>
    </div>
    <div class="result __box-shadow" v-if="selectParams.wkt">
      <div class="head">查询结果</div>
      <div class="chart">
        <SelectChartCom :data="hasTypeCpt"/>
      </div>
      <div class="data">
        <div class="form">
          <CusFormColumn
              labelWidth="50"
              :span="24"
              link="select"
              label="类型:"
              v-model:param="result.tempForm.type"
              :options="hasTypeCpt"
          />
          <div class="two">
            <CusFormColumn
                labelWidth="50"
                :span="24"
                label="搜索:"
                v-model:param="result.tempForm.name"
            />
            <div class="__cus-buttons-2">
              <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
              <div class="__cus-button-cancel __hover" @click="onReset">重置</div>
            </div>
          </div>
        </div>
        <div class="table">
          <CusTable
              ref="ref_cusTable"
              :tableData="resultTableDataCpt"
              :tableHead="result.table.head"
              :total="resultTableFilterCpt.length"
              :page="result.table.pageNum"
              :pageSize="result.table.pageSize"
              @handlePage="handlePage"
          >
            <template #type-column-value="{ scope }">
              {{$store.getters['dictionary/elementTypeMap'].get(scope.row.type) ?? scope.row.type}}
            </template>
          </CusTable>
        </div>
      </div>
    </div>
  </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 SelectChartCom from './select-chart.vue'

export default defineComponent({
  name: '',
  components: {
    SelectChartCom
  },
  props: {
    map: {
      required: true
    },
    mapFunc: <any>{
      required: true
    }
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      selectParams: {
        type: '',
        wkt: '22'
      },
      result: {
        form: {},
        tempForm: {
          type: '',
          name: ''
        },
        table: {
          head: [
            {value: "type", label: "类型", show: true, align: 'left', width: 100},
            {value: "name", label: "名称", show: true, align: 'left'},
          ],
          data: <any>[],
          pageNum: 1,
          pageSize: 10,
        }
      }
    })
    const mapClear = () => {
      props.mapFunc.drawClear()
      state.selectParams = {
        type: '',
        wkt: ''
      }
      state.result.table.data = []
      state.result.table.pageNum = 1
      state.result.form = {
        type: '',
        name: ''
      }
    }
    const mapDraw = (type) => {
      props.mapFunc.draw(type).then(({feature, wkt}) => {
        state.selectParams.type === type
        state.selectParams.wkt = wkt
        initData()
      }).catch(() => {})
    }
    const initData = () => {
      state.result.table.data = []
      state.result.table.pageNum = 1
      for (let i = 0; i <= 10000; i++) {
        const dict = store.state.dictionary.elementTypeList
        const p = dict[that.$util.randomNum(0, dict.length - 1)]
        const obj = {
          name: p.dictLabel + '_' + i,
          type: p.dictValue,
        }
        state.result.table.data.push(obj)
      }
    }
    const resultTableFilterCpt = computed(() => {
      return state.result.table.data.filter(v => (!state.result.form.type || v.type === state.result.form.type) && v.name.includes(state.result.form.name))
    })
    const resultTableDataCpt = computed(() => {
      return resultTableFilterCpt.value.slice((state.result.table.pageNum - 1) * state.result.table.pageSize, state.result.table.pageNum * state.result.table.pageSize)
    })
    const handlePage = ({page, pageSize}: any) => {
      state.result.table.pageNum = page
      state.result.table.pageSize = pageSize
    }
    const hasTypeCpt = computed(() => {
      const m = new Map()
      state.result.table.data.forEach(v => {
        if (m.has(v.type)) {
          m.set(v.type, m.get(v.type) + 1)
        } else {
          m.set(v.type, 1)
        }
      })
      const arr: any = []
      m.forEach((v, k) => {
        arr.push({
          dictValue: k,
          dictLabel: store.getters['dictionary/elementTypeMap'].get(k),
          num: v
        })
      })
      return arr
    })
    const onSearch = () => {
      state.result.table.pageNum = 1
      state.result.form = JSON.parse(JSON.stringify(state.result.tempForm))
    }
    const onReset = () => {
      state.result.tempForm = {
        name: '',
        type: ''
      }
      onSearch()
    }
    onMounted(() => {
      initData()
      state.result.form = JSON.parse(JSON.stringify(state.result.tempForm))
    })
    return {
      ...toRefs(state),
      mapDraw,
      mapClear,
      resultTableFilterCpt,
      resultTableDataCpt,
      handlePage,
      hasTypeCpt,
      onSearch,
      onReset
    }
  },
})
</script>

<style scoped lang="scss">
.select-com {
  position: fixed;
  width: 404px;
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  .draw {
    width: 100%;
    background-color: #FFFFFF;
    padding: 12px 14px;
    .tools {
      display: flex;
      align-items: center;
      .label {
        width: 72px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4C4C4C;
        display: flex;
        align-items: center;
      }
      .right {
        flex: 1;
        height: 36px;
        background-color: rgba(170, 198, 238, 0.2);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        .item {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #4C4C4C;
          >img {
            margin-right: 8px;
          }
          &:hover {
            color: #1174DB;
          }
        }
        .line {
          width: 1px;
          height: 16px;
          background: linear-gradient(0deg, rgba(17,116,219,0) 0%, rgba(17,116,219,0.99) 50%, rgba(17,116,219,0) 100%);
        }
      }
    }
  }
  .result {
    background-color: #FFFFFF;
    margin-top: 2px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .head {
      height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #0096FF;
      display: flex;
      align-items: center;
      padding-left: 14px;
      border-bottom: 1px solid #EEEEEE;
    }
    .chart {
      height: 212px;
      width: 100%;
    }
    .data {
      flex: 1;
      padding: 0 12px 12px 12px;
      display: flex;
      flex-direction: column;
      .form {
        :deep(.el-form-item) {
          margin-bottom: 7px;
        }
        .two {
          display: flex;
          align-items: flex-start;
          .cus-form-column {
            flex: 1;
            margin-right: 8px;
          }
        }
      }
      .table {
        flex: 1;
      }
    }
  }
}
</style>