<template>
|
<el-row class="container">
|
<el-col :span="4" class="grid-content bg-content">
|
<div class="title">网格化管理</div>
|
<OptionGridRecord v-model:value="gridRecord"></OptionGridRecord>
|
<ListGridDetail></ListGridDetail>
|
<GridCreate
|
:is-active="dialogVisible"
|
:is-create="true"
|
></GridCreate>
|
</el-col>
|
<el-col v-if="gridStore.selectedGrid" :span="4" class="grid-content bg-content-1">
|
<GridEditing></GridEditing>
|
</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 { ref, watch } from 'vue';
|
import baseMapUtil from '@/components/map/baseMapUtil';
|
import { onMapMounted } from '@/components/map/baseMap';
|
import gridRecordApi from '@/api/gridRecordApi';
|
import { useGridStore } from '@/stores/grid';
|
|
const gridStore = useGridStore();
|
|
// 网格规划方案id
|
const gridRecord = ref({ value: '' });
|
// 方案具体网格信息集合
|
|
const getList = function () {
|
onMapMounted(() => {
|
gridRecordApi
|
.getGridRecordDetail(gridRecord.value)
|
.then((res) => {
|
baseMapUtil.clearMap();
|
gridStore.setGridList(res);
|
});
|
});
|
};
|
|
watch(gridRecord, getList);
|
</script>
|
<style scoped>
|
.container {
|
pointer-events: none;
|
}
|
|
.title {
|
font-size: var(--el-font-size-large);
|
}
|
|
.grid-content {
|
min-width: calc(var(--screen-min-width) / 6);
|
/* min-width: 180px; */
|
border-radius: 4px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
padding: 8px 8px;
|
pointer-events: auto;
|
}
|
|
.bg-content {
|
height: 90vh;
|
background: white;
|
}
|
|
.bg-content-1 {
|
background: antiquewhite;
|
height: 40vh;
|
margin-left: 8px;
|
}
|
</style>
|
