2023.10.31

riku

2023-10-31 2d3d56ff801b73afdb779267004d740f9beafe57

 src/views/overlay-grid/GridLayout.vue

@@ -1,16 +1,36 @@
<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-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" class="grid-content bg-content-1">
      <GridEditing></GridEditing>
    <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>
@@ -20,60 +40,31 @@
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 gridRecordApi from '@/api/gridRecordApi';
import gridInfoApi from '@/api/grid/gridInfoApi';
import { useGridStore } from '@/stores/grid';

const gridStore = useGridStore();

// 网格规划方案id
const gridRecord = ref({ value: '' });
// 方案具体网格信息集合
const gridSchemeId = ref();

const getList = function () {
const newScheme = ref(false)

// 获取方案记录
function getSchemeList() {
  onMapMounted(() => {
    gridRecordApi
      .getGridRecordDetail(gridRecord.value)
      .then((res) => {
        baseMapUtil.clearMap();
        gridStore.setGridList(res);
      });
    gridInfoApi.fetchGridList(gridSchemeId.value).then((res) => {
      baseMapUtil.clearMap();
      gridStore.setGridList(res);
    });
  });
};
}

watch(gridRecord, getList);
// watch(gridSchemeId, 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>
<style scoped></style>