|
|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <div class="card-search">
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ name="advanced_search"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ :model="searchParams"
|
|
|
+ >
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="所属县区" :label-col="{ span: 8 }" name="regionCode">
|
|
|
+ <a-select
|
|
|
+ ref="select"
|
|
|
+ v-model:value="searchParams.regionCode"
|
|
|
+ :options="regionList"
|
|
|
+ :field-names="{ label: 'name', value: 'code' }"
|
|
|
+ :allow-clear="true"
|
|
|
+ @change="changeRegion"
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="所属驿站" :label-col="{ span: 8 }" name="siteID">
|
|
|
+ <a-select
|
|
|
+ ref="select"
|
|
|
+ v-model:value="searchParams.siteID"
|
|
|
+ :options="allSites"
|
|
|
+ :field-names="{ label: 'siteName', value: 'siteID' }"
|
|
|
+ :allow-clear="true"
|
|
|
+ style="width: 200px"
|
|
|
+ @change="loadData"
|
|
|
+ >
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="日期" :label-col="{ span: 8 }" name="startDate">
|
|
|
+ <a-input
|
|
|
+ v-model:value="searchParams.startDate"
|
|
|
+ placeholder=""
|
|
|
+ :allow-clear="true"
|
|
|
+ type="date"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" style="text-align: left">
|
|
|
+ <a-button type="primary" html-type="submit" @click="onSearch">查询</a-button>
|
|
|
+ <a-button
|
|
|
+ style="margin: 0 8px"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ formRef.resetFields();
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >重置
|
|
|
+ </a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="人员名称" :label-col="{ span: 8 }" name="userName">
|
|
|
+ <a-input v-model:value="searchParams.userName" placeholder="" :allow-clear="true" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ <div
|
|
|
+ id="mapDiv"
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 270px);
|
|
|
+ height: calc(100% - 300px);
|
|
|
+ z-index: 100;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent, onMounted, ref } from 'vue';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import type { FormInstance, SelectProps } from 'ant-design-vue';
|
|
|
+ import { getRegionCodeList } from '@/api/system/area/index';
|
|
|
+ import { getSiteList } from '@/api/baseSettings/siteInfo';
|
|
|
+
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'PositionMapIndex',
|
|
|
+ setup() {
|
|
|
+ const formRef = ref<FormInstance>();
|
|
|
+ const T = (window as any).T;
|
|
|
+ const zoom = 14;
|
|
|
+ let map = null;
|
|
|
+ const regionList = ref<SelectProps['options']>();
|
|
|
+ const allSites = ref<any>([]);
|
|
|
+ const searchParams = ref({
|
|
|
+ startDate: dayjs(new Date()).format('YYYY-MM-DD'),
|
|
|
+ });
|
|
|
+
|
|
|
+ const loadData = () => {
|
|
|
+ return '';
|
|
|
+ };
|
|
|
+ const getRegionList = async function () {
|
|
|
+ const regionResult: any = await getRegionCodeList();
|
|
|
+ regionList.value = regionResult;
|
|
|
+ };
|
|
|
+ const getAllSites = () => {
|
|
|
+ getSiteList({ pageIndex: 1, pageSize: 1000 }).then((result: any) => {
|
|
|
+ allSites.value = result.list;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const initMap = () => {
|
|
|
+ console.log(`T:${T}`);
|
|
|
+ //初始化地图对象
|
|
|
+ map = new T.Map('mapDiv');
|
|
|
+
|
|
|
+ if (map != null) (map as any).centerAndZoom(new T.LngLat(114.4, 23.08), zoom); //惠州市
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ initMap();
|
|
|
+ getRegionList();
|
|
|
+ getAllSites();
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ searchParams,
|
|
|
+ loadData,
|
|
|
+ formRef,
|
|
|
+ regionList,
|
|
|
+ allSites,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ });
|
|
|
+</script>
|
