120 lines
2.4 KiB
Vue
120 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'图斑搜索', value: 1}]" :select="select" @changeSelect="changeSelect"/>
|
||
|
|
<div class="search-draw-map" v-if="select === 0">
|
||
|
|
<a-radio-group v-model:value="drawMapType">
|
||
|
|
<a-radio-button value="rectangle">矩形</a-radio-button>
|
||
|
|
<a-radio-button value="polygon">多边形</a-radio-button>
|
||
|
|
</a-radio-group>
|
||
|
|
</div>
|
||
|
|
<div class="search-content" v-if="select === 1">
|
||
|
|
<a-input placeholder="请输入目标位置、图斑编号">
|
||
|
|
<template #suffix>
|
||
|
|
<SearchOutlined />
|
||
|
|
</template>
|
||
|
|
</a-input>
|
||
|
|
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :scroll="{ y: 200 }"></a-table>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div class="footer-button-div">
|
||
|
|
<a-button class="search-button" type="primary">查询</a-button>
|
||
|
|
<a-button class="reset-button" type="dashed">重置</a-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue"
|
||
|
|
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
|
||
|
|
import { SearchOutlined } from '@ant-design/icons-vue'
|
||
|
|
import { title } from "process";
|
||
|
|
|
||
|
|
const select = ref(0)
|
||
|
|
const drawMapType = ref()
|
||
|
|
const columns = ref([
|
||
|
|
{
|
||
|
|
title: '图斑编号',
|
||
|
|
dataIndex: 'id',
|
||
|
|
key: 'id',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '行政区',
|
||
|
|
dataIndex: 'region',
|
||
|
|
key: 'region',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
dataIndex: 'control',
|
||
|
|
key: 'control',
|
||
|
|
},
|
||
|
|
])
|
||
|
|
const dataSource = ref([
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '4',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '5',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '6',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '7',
|
||
|
|
region: '北京市',
|
||
|
|
control: '查看',
|
||
|
|
},
|
||
|
|
|
||
|
|
])
|
||
|
|
|
||
|
|
const changeSelect = (value: number) => {
|
||
|
|
select.value = value
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.search-draw-map{
|
||
|
|
background-color: #efefef;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.search-content{
|
||
|
|
padding-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer{
|
||
|
|
display: flex;
|
||
|
|
justify-content: end;
|
||
|
|
margin-top: 15px;
|
||
|
|
.footer-button-div{
|
||
|
|
display: flex;
|
||
|
|
.reset-button{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.search-button{
|
||
|
|
background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|