我的布控

src/views/backOfficeSystem/IntelligentControl/myControl/components/areaModel.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
+    <div class="dialog-container">
+      <el-form :model="formData" label-width="auto" label-position="left">
+        <div class="form-row">
+          <el-form-item label="模型名称">
+            <el-input v-model="formData.modelName" placeholder="请输入模型名称" />
+          </el-form-item>
+          <el-form-item label="感知模型类型" prop="region">
+            <el-select v-model="formData.region" placeholder="重点区域类型">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="生成时间范围">
+            <el-date-picker
+              v-model="formData.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="感知源信息">
+          <el-input v-model="formData.perceptionDomain" placeholder="请输入模型名称">
+            <template #append>
+              <el-button type="primary">选择感知源</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="地图范围">
+          <el-input v-model="formData.mapRange" placeholder="请输入模型名称">
+            <template #append>
+              <el-button type="primary">选择地图范围</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div class="map"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const formData = ref({
+    modelName: "",
+    perceptionDomain: "",
+    mapRange: "",
+    dateRange: [],
+    region: ""
+  });
+  const dialogTableVisible = ref(false);
+  // 初始化数据
+  const init = (type, row) => {
+    dialogTableVisible.value = true;
+  };
+
+  const close = () => {};
+
+  defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+  .dialog-container {
+    height: 550px;
+    .map {
+      height: 400px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+    }
+
+    .form-row {
+      display: flex;
+      gap: 5px;
+      .el-form-item {
+        flex: 1;
+      }
+    }
+  }
+</style>