commit

sub-government-affairs-service/src/router/modules/inputSupplies/index.js

@@ -9,12 +9,12 @@ const inputSuppliesRoutes = [
     redirect: '/sub-government-affairs-service/material/pesticide',
     meta: { title: '农产品种植管理', icon: 'FullScreen' },
     children: [
-      // {
+      {
-      //   path: '/sub-government-affairs-service/statistics',
+        path: '/sub-government-affairs-service/statistics',
-      //   name: 'Statistics',
+        name: 'Statistics',
-      //   component: () => import('@/views/planting-management/statistics/index.vue'),
+        component: () => import('@/views/planting-management/statistics/index.vue'),
-      //   meta: { title: '使用监管概况统计', icon: 'PieChart' },
+        meta: { title: '使用监管概况统计', icon: 'PieChart' },
-      // },
+      },
       {
         path: '/sub-government-affairs-service/variety-record',
         name: 'PlantVarietyRecord',

sub-government-affairs-service/src/views/inputSuppliesManage/material/pesticide/index.vue

@@ -199,14 +199,14 @@ const tableLoading = ref(false);
 const tableTotal = ref(0);
 const columns = ref([
   // { prop: "id", label: "ID" },
-  { prop: 'name', label: '类别名称' },
+  { prop: 'name', label: '姓名' },
   { prop: 'phone', label: '联系方式' },
   { prop: 'landName', label: '用药地块' },
   { prop: 'detectionTime', label: '检测时间' },
   { prop: 'detectionResult', label: '检测结果' },
   { prop: 'detectionUnit', label: '检测单位' },
-  // { prop: 'status', label: '检测报告(是否上传)' },
+  { prop: 'isUpload', label: '检测报告(是否上传)' },
-  { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
+  // { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
 ]);
 const handlePaginationChange = ({ page, pageSize }) => {
   formInline.current = page;

sub-government-affairs-service/src/views/inputSuppliesManage/material/seed/index.vue

@@ -38,11 +38,11 @@
           @page-change="handlePaginationChange"
         >
           <!-- 自定义-操作 -->
-          <template #action="slotProps">
+          <!-- <template #action="slotProps">
             <el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
             <el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
             <el-button @click="handleDelete(slotProps.row)">删除</el-button>
-          </template>
+          </template> -->
         </tableComponent>
       </div>
     </div>
@@ -136,14 +136,30 @@ const selectedIds = ref([]);
 const tableLoading = ref(false);
 const tableTotal = ref(0);
 const columns = ref([
-  { prop: 'id', label: '编码' },
+  // 行政区划编码
-  { prop: 'seedName', label: '种子种苗名称' },
+  { prop: 'regionCode', label: '行政区划编码' },
-  { prop: 'varietyName', label: '品种名称' },
+  // 行政区划名称
-  { prop: 'brand', label: '品牌' },
+  { prop: 'regionCode', label: '行政区划名称' },
-  { prop: 'manufacturer', label: '生产厂家' },
+  // 网格编码
-  { prop: 'classifyName', label: '分类' },
+  { prop: 'gridId', label: '网格编码' },
-  { prop: 'productUnit', label: '产品规格' },
+  // 网格名称
-  { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
+  { prop: 'gridName', label: '网格名称' },
+  // 地块编号
+  { prop: 'landId', label: '地块编号' },
+  // 地块名称
+  { prop: 'landName', label: '地块名称' },
+  // 种子编号
+  { prop: 'provenanceId', label: '种子编号' },
+  { prop: 'provenanceName', label: '种子种苗名称' },
+  // 使用量
+  { prop: 'useNumber', label: '使用量' },
+  // 使用时间
+  { prop: 'useTime', label: '使用时间' },
+  // 生成经营主体编码
+  { prop: 'generateBusinessSubjectCode', label: '生成经营主体编码' },
+  // 生产经营主体名称
+  { prop: 'generateBusinessSubjectName', label: '生产经营主体名称' },
+  // { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
 ]);
 const handlePaginationChange = ({ page, pageSize }) => {
   formInline.current = page;

sub-government-affairs-service/src/views/planting-management/statistics/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
+  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`">
     <!-- <h1>统计数据</h1>
     <div class="content"></div> -->
   </div>

sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue

@@ -3,9 +3,9 @@
     <SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
     <el-tabs v-model="activeTab" @tab-click="handleTabChange">
       <!-- <el-tab-pane label="待提交" name="-1" /> -->
-      <el-tab-pane label="待审核" name="0" />
+      <el-tab-pane label="待审核" name="1" />
-      <el-tab-pane label="已通过" name="1" />
+      <el-tab-pane label="已通过" name="2" />
-      <el-tab-pane label="已驳回" name="2" />
+      <el-tab-pane label="已驳回" name="3" />
     </el-tabs>
     <avue-crud
       ref="crudRef"
@@ -16,9 +16,9 @@
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
     >
-      <template #menu="scope">
+      <!-- <template #menu="scope">
         <custom-table-operate :actions="getActions(scope.row)" :data="scope" />
-      </template>
+      </template> -->
     </avue-crud>
     <el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
       <RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />

sub-government-affairs-service/src/views/resource/database/LandMap.vue

@@ -1,401 +1,47 @@
 <template>
-  <div class="field-management">
+  <div class="mapDiv">
-    <!-- 左侧面板 -->
+    <tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
-    <div class="panel left">
+      <!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
-      <el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
+      <!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
-
+      <tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
-      <el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
+      <tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
-        <el-table-column prop="name" label="名称"></el-table-column>
+    </tdt-map>
-        <el-table-column prop="area" label="面积(㎡)">
-          <template #default="{ row }">
-            {{ row.area.toFixed(2) }}
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
-
-      <div class="button-group">
-        <el-button type="primary" @click="startDrawing">新增地块</el-button>
-        <el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
-      </div>
-    </div>
-
-    <!-- 右侧地图区域 -->
-    <div class="panel right">
-      <tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
-
-      <div class="layer-switch">
-        <el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
-          <el-radio-button label="vector">矢量</el-radio-button>
-          <el-radio-button label="image">影像</el-radio-button>
-        </el-radio-group>
-      </div>
-
-      <div class="field-layer-switch">
-        <el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
-      </div>
-
-      <div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
-
-      <el-dialog v-model="drawDialogVisible" title="新增地块">
-        <el-form>
-          <el-form-item label="地块名称">
-            <el-input v-model="newFieldName"></el-input>
-          </el-form-item>
-          <el-form-item label="地块面积">
-            <el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
-          </el-form-item>
-        </el-form>
-        <template #footer>
-          <el-button @click="cancelDrawing">取消</el-button>
-          <el-button type="primary" @click="saveNewField">保存</el-button>
-        </template>
-      </el-dialog>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import { reactive, onMounted, ref } from 'vue';
-import { TdtMap } from 'vue-tianditu';
+import { TdtMap, TdtTileLayer } from 'vue-tianditu';
-import { ElMessage } from 'element-plus';
+import { map_config } from '@/config/map';
-// import { map_config } from '../../config/map';
 
-// 模拟接口服务（使用localStorage）
+const key = map_config.tianditu.token;
-const fieldService = {
-  getFields() {
-    const fields = localStorage.getItem('fields');
-    return Promise.resolve(fields ? JSON.parse(fields) : []);
-  },
-  createField(field) {
-    return this.getFields().then((fields) => {
-      field.id = Date.now();
-      fields.push(field);
-      localStorage.setItem('fields', JSON.stringify(fields));
-      return field;
-    });
-  },
-  deleteField(id) {
-    return this.getFields().then((fields) => {
-      const newFields = fields.filter((f) => f.id !== id);
-      localStorage.setItem('fields', JSON.stringify(newFields));
-      return newFields;
-    });
-  },
-};
 
-// 响应式状态
+const state = reactive({
-const fields = ref([]);
+  center: [100.088, 23.883],
-const selectedField = ref(null);
+  zoom: 14,
-const searchTerm = ref('');
+  img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
-const newFieldName = ref('');
+  cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
-const drawDialogVisible = ref(false);
+  // 添加其他地图层URL
-const newFieldCoords = ref([]);
+  // ...
-const newFieldArea = ref(0);
-const layerType = ref('vector');
-const showFieldLayer = ref(true);
-const map = ref(null);
-const mapCenter = ref([100.088, 23.883]);
-const mapZoom = ref(12);
-const scale = ref(0);
-
-// 天地图图层
-const baseLayers = {
-  vector: null,
-  vectorLabel: null,
-  image: null,
-  imageLabel: null,
-};
-
-// 覆盖物图层
-const overlayLayer = ref(null);
-
-// 计算属性
-const filteredFields = computed(() => {
-  const term = searchTerm.value.toLowerCase();
-  return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
 });
 
-const totalArea = computed(() => {
+// 确保地图有明确的高度
-  return fields.value.reduce((sum, field) => sum + field.area, 0);
+const mapHeight = ref('100vh');
-});
 
-// 地图初始化
+onMounted(() => {
-const onMapInit = (mapInstance) => {
+  console.log('地图组件已挂载');
-  map.value = mapInstance;
+  // 检查天地图API是否加载成功
-
+  if (window.T) {
-  // 创建图层
+    console.log('天地图API已加载:', window.T);
-  baseLayers.vector = new T.TileLayer('vec');
-  baseLayers.vectorLabel = new T.TileLayer('cva');
-  baseLayers.image = new T.TileLayer('img');
-  baseLayers.imageLabel = new T.TileLayer('cia');
-
-  // 添加默认图层
-  map.value.addLayer(baseLayers.image);
-  map.value.addLayer(baseLayers.imageLabel);
-
-  // 创建覆盖物图层
-  overlayLayer.value = new T.Map.OverlayLayer();
-  map.value.addLayer(overlayLayer.value);
-
-  // 添加控件
-  map.value.addControl(new T.Control.Zoom());
-  map.value.addControl(new T.Control.Scale());
-
-  // 事件监听
-  map.value.addEventListener('zoomend', updateScale);
-  map.value.addEventListener('moveend', updateScale);
-
-  // 初始加载数据
-  loadFields();
-};
-
-// 更新比例尺
-const updateScale = () => {
-  if (map.value) {
-    mapZoom.value = map.value.getZoom();
-    scale.value = Math.round(map.value.getScale());
-  }
-};
-
-// 切换底图
-const changeBaseLayer = () => {
-  if (!map.value) return;
-
-  // 移除当前底图
-  map.value.removeLayer(baseLayers.vector);
-  map.value.removeLayer(baseLayers.vectorLabel);
-  map.value.removeLayer(baseLayers.image);
-  map.value.removeLayer(baseLayers.imageLabel);
-
-  // 添加新底图
-  if (layerType.value === 'vector') {
-    map.value.addLayer(baseLayers.vector);
-    map.value.addLayer(baseLayers.vectorLabel);
   } else {
-    map.value.addLayer(baseLayers.image);
+    console.error('天地图API未加载');
-    map.value.addLayer(baseLayers.imageLabel);
   }
-};
-
-// 加载地块数据
-const loadFields = () => {
-  fieldService.getFields().then((data) => {
-    fields.value = data;
-    refreshOverlays();
 });
-};
-
-// 刷新覆盖物
-const refreshOverlays = () => {
-  if (!map.value || !overlayLayer.value) return;
-
-  // 清除所有覆盖物
-  overlayLayer.value.clearOverLays();
-
-  // 如果不显示地块图层则跳过绘制
-  if (!showFieldLayer.value) return;
-
-  // 绘制所有地块
-  fields.value.forEach((field) => {
-    const isSelected = selectedField.value?.id === field.id;
-    const polygon = createPolygon(field, isSelected);
-    overlayLayer.value.addOverLay(polygon);
-  });
-};
-
-// 创建多边形
-const createPolygon = (field, isSelected = false) => {
-  const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
-  return new T.Polygon(coords, {
-    color: isSelected ? '#ff0000' : '#1890ff',
-    weight: isSelected ? 3 : 2,
-    opacity: 0.8,
-    fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
-    fillOpacity: 0.5,
-  });
-};
-
-// 选择地块
-const selectField = (field) => {
-  selectedField.value = field;
-  refreshOverlays();
-
-  // 居中显示选中地块
-  if (map.value) {
-    const coords = field.geometry.coordinates[0];
-    const center = coords.reduce(
-      (acc, coord) => {
-        acc[0] += coord[0];
-        acc[1] += coord[1];
-        return acc;
-      },
-      [0, 0]
-    );
-
-    center[0] /= coords.length;
-    center[1] /= coords.length;
-
-    map.value.panTo(new T.LngLat(center[0], center[1]));
-  }
-};
-
-// 开始绘制
-const startDrawing = () => {
-  if (!map.value) return;
-
-  // 清除当前覆盖物
-  refreshOverlays();
-
-  // 创建绘制工具
-  const polygonTool = new T.PolygonTool(map.value, {
-    showLabel: true,
-    color: '#fa541c',
-    weight: 3,
-    opacity: 0.6,
-    fillColor: '#ffbb96',
-    fillOpacity: 0.4,
-  });
-
-  polygonTool.open();
-
-  // 绘制完成事件
-  polygonTool.addEventListener('draw', (e) => {
-    newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
-    newFieldArea.value = e.currentArea;
-    drawDialogVisible.value = true;
-
-    // 清除临时图形
-    polygonTool.close();
-  });
-};
-
-// 保存新地块
-const saveNewField = () => {
-  if (!newFieldName.value.trim()) {
-    ElMessage.error('请输入地块名称');
-    return;
-  }
-
-  const newField = {
-    id: Date.now(),
-    name: newFieldName.value,
-    area: newFieldArea.value,
-    geometry: {
-      type: 'Polygon',
-      coordinates: [newFieldCoords.value],
-    },
-  };
-
-  fieldService.createField(newField).then(() => {
-    ElMessage.success('地块创建成功');
-    drawDialogVisible.value = false;
-    newFieldName.value = '';
-    loadFields();
-  });
-};
-
-// 取消绘制
-const cancelDrawing = () => {
-  drawDialogVisible.value = false;
-  refreshOverlays();
-};
-
-// 删除地块
-const removeField = () => {
-  if (!selectedField.value) return;
-
-  fieldService.deleteField(selectedField.value.id).then(() => {
-    ElMessage.success('地块已删除');
-    selectedField.value = null;
-    loadFields();
-  });
-};
-
-// 监听地块图层显示状态
-watch(showFieldLayer, refreshOverlays);
 </script>
 
 <style scoped>
-.field-management {
+.mapDiv {
-  display: flex;
-  height: calc(100vh - 160px);
-}
-
-.panel.left {
-  width: 320px;
-  padding: 15px;
-  border-right: 1px solid #e4e7ed;
-  display: flex;
-  flex-direction: column;
-  background: #f8fafc;
-}
-
-.panel.right {
-  flex: 1;
-  position: relative;
-}
-
-.map {
   width: 100%;
-  height: 100%;
+  height: 100vh; /* 确保容器有明确高度 */
-}
-
-.layer-switch {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: white;
-  padding: 8px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-}
-
-.field-layer-switch {
-  position: absolute;
-  top: 60px;
-  right: 15px;
-  background: white;
-  padding: 8px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.zoom-scale {
-  position: absolute;
-  bottom: 15px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.85);
-  padding: 6px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-}
-
-.stats {
-  padding: 12px;
-  margin: 10px 0;
-  background: #edf2ff;
-  border-radius: 4px;
-  font-weight: 500;
-  color: #364fc7;
-}
-
-.button-group {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
-}
-
-.button-group > * {
-  flex: 1;
 }
 </style>

sub-government-affairs-service/src/views/resource/database/LandMapBak.vue

@@ -1,47 +1,401 @@
 <template>
-  <div class="mapDiv">
+  <div class="field-management">
-    <tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
+    <!-- 左侧面板 -->
-      <!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
+    <div class="panel left">
-      <!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
+      <el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
-      <tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
+
-      <tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
+      <el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
-    </tdt-map>
+        <el-table-column prop="name" label="名称"></el-table-column>
+        <el-table-column prop="area" label="面积(㎡)">
+          <template #default="{ row }">
+            {{ row.area.toFixed(2) }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
+
+      <div class="button-group">
+        <el-button type="primary" @click="startDrawing">新增地块</el-button>
+        <el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
+      </div>
+    </div>
+
+    <!-- 右侧地图区域 -->
+    <div class="panel right">
+      <tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
+
+      <div class="layer-switch">
+        <el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
+          <el-radio-button label="vector">矢量</el-radio-button>
+          <el-radio-button label="image">影像</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <div class="field-layer-switch">
+        <el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
+      </div>
+
+      <div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
+
+      <el-dialog v-model="drawDialogVisible" title="新增地块">
+        <el-form>
+          <el-form-item label="地块名称">
+            <el-input v-model="newFieldName"></el-input>
+          </el-form-item>
+          <el-form-item label="地块面积">
+            <el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <el-button @click="cancelDrawing">取消</el-button>
+          <el-button type="primary" @click="saveNewField">保存</el-button>
+        </template>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, onMounted, ref } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
-import { TdtMap, TdtTileLayer } from 'vue-tianditu';
+import { TdtMap } from 'vue-tianditu';
-import { map_config } from '@/config/map';
+import { ElMessage } from 'element-plus';
+// import { map_config } from '../../config/map';
 
-const key = map_config.tianditu.token;
+// 模拟接口服务（使用localStorage）
+const fieldService = {
+  getFields() {
+    const fields = localStorage.getItem('fields');
+    return Promise.resolve(fields ? JSON.parse(fields) : []);
+  },
+  createField(field) {
+    return this.getFields().then((fields) => {
+      field.id = Date.now();
+      fields.push(field);
+      localStorage.setItem('fields', JSON.stringify(fields));
+      return field;
+    });
+  },
+  deleteField(id) {
+    return this.getFields().then((fields) => {
+      const newFields = fields.filter((f) => f.id !== id);
+      localStorage.setItem('fields', JSON.stringify(newFields));
+      return newFields;
+    });
+  },
+};
 
-const state = reactive({
+// 响应式状态
-  center: [100.088, 23.883],
+const fields = ref([]);
-  zoom: 14,
+const selectedField = ref(null);
-  img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
+const searchTerm = ref('');
-  cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
+const newFieldName = ref('');
-  // 添加其他地图层URL
+const drawDialogVisible = ref(false);
-  // ...
+const newFieldCoords = ref([]);
+const newFieldArea = ref(0);
+const layerType = ref('vector');
+const showFieldLayer = ref(true);
+const map = ref(null);
+const mapCenter = ref([100.088, 23.883]);
+const mapZoom = ref(12);
+const scale = ref(0);
+
+// 天地图图层
+const baseLayers = {
+  vector: null,
+  vectorLabel: null,
+  image: null,
+  imageLabel: null,
+};
+
+// 覆盖物图层
+const overlayLayer = ref(null);
+
+// 计算属性
+const filteredFields = computed(() => {
+  const term = searchTerm.value.toLowerCase();
+  return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
 });
 
-// 确保地图有明确的高度
+const totalArea = computed(() => {
-const mapHeight = ref('100vh');
+  return fields.value.reduce((sum, field) => sum + field.area, 0);
+});
 
-onMounted(() => {
+// 地图初始化
-  console.log('地图组件已挂载');
+const onMapInit = (mapInstance) => {
-  // 检查天地图API是否加载成功
+  map.value = mapInstance;
-  if (window.T) {
+
-    console.log('天地图API已加载:', window.T);
+  // 创建图层
-  } else {
+  baseLayers.vector = new T.TileLayer('vec');
-    console.error('天地图API未加载');
+  baseLayers.vectorLabel = new T.TileLayer('cva');
+  baseLayers.image = new T.TileLayer('img');
+  baseLayers.imageLabel = new T.TileLayer('cia');
+
+  // 添加默认图层
+  map.value.addLayer(baseLayers.image);
+  map.value.addLayer(baseLayers.imageLabel);
+
+  // 创建覆盖物图层
+  overlayLayer.value = new T.Map.OverlayLayer();
+  map.value.addLayer(overlayLayer.value);
+
+  // 添加控件
+  map.value.addControl(new T.Control.Zoom());
+  map.value.addControl(new T.Control.Scale());
+
+  // 事件监听
+  map.value.addEventListener('zoomend', updateScale);
+  map.value.addEventListener('moveend', updateScale);
+
+  // 初始加载数据
+  loadFields();
+};
+
+// 更新比例尺
+const updateScale = () => {
+  if (map.value) {
+    mapZoom.value = map.value.getZoom();
+    scale.value = Math.round(map.value.getScale());
   }
+};
+
+// 切换底图
+const changeBaseLayer = () => {
+  if (!map.value) return;
+
+  // 移除当前底图
+  map.value.removeLayer(baseLayers.vector);
+  map.value.removeLayer(baseLayers.vectorLabel);
+  map.value.removeLayer(baseLayers.image);
+  map.value.removeLayer(baseLayers.imageLabel);
+
+  // 添加新底图
+  if (layerType.value === 'vector') {
+    map.value.addLayer(baseLayers.vector);
+    map.value.addLayer(baseLayers.vectorLabel);
+  } else {
+    map.value.addLayer(baseLayers.image);
+    map.value.addLayer(baseLayers.imageLabel);
+  }
+};
+
+// 加载地块数据
+const loadFields = () => {
+  fieldService.getFields().then((data) => {
+    fields.value = data;
+    refreshOverlays();
   });
+};
+
+// 刷新覆盖物
+const refreshOverlays = () => {
+  if (!map.value || !overlayLayer.value) return;
+
+  // 清除所有覆盖物
+  overlayLayer.value.clearOverLays();
+
+  // 如果不显示地块图层则跳过绘制
+  if (!showFieldLayer.value) return;
+
+  // 绘制所有地块
+  fields.value.forEach((field) => {
+    const isSelected = selectedField.value?.id === field.id;
+    const polygon = createPolygon(field, isSelected);
+    overlayLayer.value.addOverLay(polygon);
+  });
+};
+
+// 创建多边形
+const createPolygon = (field, isSelected = false) => {
+  const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
+  return new T.Polygon(coords, {
+    color: isSelected ? '#ff0000' : '#1890ff',
+    weight: isSelected ? 3 : 2,
+    opacity: 0.8,
+    fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
+    fillOpacity: 0.5,
+  });
+};
+
+// 选择地块
+const selectField = (field) => {
+  selectedField.value = field;
+  refreshOverlays();
+
+  // 居中显示选中地块
+  if (map.value) {
+    const coords = field.geometry.coordinates[0];
+    const center = coords.reduce(
+      (acc, coord) => {
+        acc[0] += coord[0];
+        acc[1] += coord[1];
+        return acc;
+      },
+      [0, 0]
+    );
+
+    center[0] /= coords.length;
+    center[1] /= coords.length;
+
+    map.value.panTo(new T.LngLat(center[0], center[1]));
+  }
+};
+
+// 开始绘制
+const startDrawing = () => {
+  if (!map.value) return;
+
+  // 清除当前覆盖物
+  refreshOverlays();
+
+  // 创建绘制工具
+  const polygonTool = new T.PolygonTool(map.value, {
+    showLabel: true,
+    color: '#fa541c',
+    weight: 3,
+    opacity: 0.6,
+    fillColor: '#ffbb96',
+    fillOpacity: 0.4,
+  });
+
+  polygonTool.open();
+
+  // 绘制完成事件
+  polygonTool.addEventListener('draw', (e) => {
+    newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
+    newFieldArea.value = e.currentArea;
+    drawDialogVisible.value = true;
+
+    // 清除临时图形
+    polygonTool.close();
+  });
+};
+
+// 保存新地块
+const saveNewField = () => {
+  if (!newFieldName.value.trim()) {
+    ElMessage.error('请输入地块名称');
+    return;
+  }
+
+  const newField = {
+    id: Date.now(),
+    name: newFieldName.value,
+    area: newFieldArea.value,
+    geometry: {
+      type: 'Polygon',
+      coordinates: [newFieldCoords.value],
+    },
+  };
+
+  fieldService.createField(newField).then(() => {
+    ElMessage.success('地块创建成功');
+    drawDialogVisible.value = false;
+    newFieldName.value = '';
+    loadFields();
+  });
+};
+
+// 取消绘制
+const cancelDrawing = () => {
+  drawDialogVisible.value = false;
+  refreshOverlays();
+};
+
+// 删除地块
+const removeField = () => {
+  if (!selectedField.value) return;
+
+  fieldService.deleteField(selectedField.value.id).then(() => {
+    ElMessage.success('地块已删除');
+    selectedField.value = null;
+    loadFields();
+  });
+};
+
+// 监听地块图层显示状态
+watch(showFieldLayer, refreshOverlays);
 </script>
 
 <style scoped>
-.mapDiv {
+.field-management {
+  display: flex;
+  height: calc(100vh - 160px);
+}
+
+.panel.left {
+  width: 320px;
+  padding: 15px;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  background: #f8fafc;
+}
+
+.panel.right {
+  flex: 1;
+  position: relative;
+}
+
+.map {
   width: 100%;
-  height: 100vh; /* 确保容器有明确高度 */
+  height: 100%;
+}
+
+.layer-switch {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: white;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.field-layer-switch {
+  position: absolute;
+  top: 60px;
+  right: 15px;
+  background: white;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.zoom-scale {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.stats {
+  padding: 12px;
+  margin: 10px 0;
+  background: #edf2ff;
+  border-radius: 4px;
+  font-weight: 500;
+  color: #364fc7;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.button-group > * {
+  flex: 1;
 }
 </style>