<template>
|
<el-row class="fy-body fy-overlay-container" gutter="0">
|
<el-col :span="6">
|
<div class="fy-card fy-main">
|
<div class="fy-h1">网格化管理</div>
|
<div class="fy-flex-row">
|
<span>方案</span>
|
<OptionGridRecord
|
:refresh="newScheme"
|
v-model:value="gridSchemeId"
|
></OptionGridRecord>
|
<el-button
|
:disabled="!gridSchemeId"
|
icon="Search"
|
type="primary"
|
@click="getSchemeList"
|
>查询</el-button
|
>
|
<SchemeCreate @created="newScheme = !newScheme"></SchemeCreate>
|
</div>
|
<ListGridDetail></ListGridDetail>
|
<GridCreate
|
:schemeId="gridSchemeId"
|
:is-active="dialogVisible"
|
></GridCreate>
|
</div>
|
</el-col>
|
<el-col v-if="gridStore.selectedGrid" :span="4" :offset="14">
|
<div class="fy-column-reverse">
|
<!-- <div class="fy-card"> -->
|
<GridEditing></GridEditing>
|
<!-- </div> -->
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup>
|
import ListGridDetail from './components/ListGridDetail.vue';
|
import OptionGridRecord from './components/OptionGridRecord.vue';
|
import GridCreate from './components/GridCreate.vue';
|
import GridEditing from './components/GridEditing.vue';
|
import SchemeCreate from './components/SchemeCreate.vue';
|
|
import { ref, watch } from 'vue';
|
import baseMapUtil from '@/components/map/baseMapUtil';
|
import { onMapMounted } from '@/components/map/baseMap';
|
import gridInfoApi from '@/api/grid/gridInfoApi';
|
import { useGridStore } from '@/stores/grid';
|
|
const gridStore = useGridStore();
|
|
// 网格规划方案id
|
const gridSchemeId = ref();
|
|
const newScheme = ref(false)
|
|
// 获取方案记录
|
function getSchemeList() {
|
onMapMounted(() => {
|
gridInfoApi.fetchGridList(gridSchemeId.value).then((res) => {
|
baseMapUtil.clearMap();
|
gridStore.setGridList(res);
|
});
|
});
|
}
|
|
// watch(gridSchemeId, getList);
|
</script>
|
<style scoped></style>
|
