From 86cc25ecb00b4f33739ba330449a0f9e86805311 Mon Sep 17 00:00:00 2001
From: yanfeiyong <2060201549@qq.com>
Date: Sat, 22 Mar 2025 16:18:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B6=E4=BB=96=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ManageApi/index.js                    |  88 +++-
 src/views/components/ProjectDetails/Basic.vue |  24 +-
 src/views/components/ProjectDetails/Memo.vue  | 208 ++++++---
 .../components/ProjectDetails/Others.vue      | 431 +++++++++---------
 .../components/ProjectDetails/Projectgift.vue |  22 +-
 .../ProjectDetails/Projectpicture.vue         |   2 +-
 .../ProjectDetails/Projectpicturetwo22.vue    | 284 +++++++++---
 src/views/components/ProjectDetails/luotu.vue |  13 +-
 src/views/manage-info/index.vue               |  24 +-
 src/views/models/manages/index.vue            | 250 +++++-----
 10 files changed, 831 insertions(+), 515 deletions(-)

diff --git a/src/api/ManageApi/index.js b/src/api/ManageApi/index.js
index 9e4084f..845cfa6 100644
--- a/src/api/ManageApi/index.js
+++ b/src/api/ManageApi/index.js
@@ -128,7 +128,7 @@ export function getProjectEvaluationPage(params) {
 }
 // 评价配置结束
 
-// 要素指标管理
+// 要素指标管理（模型管理）
 // 新增要素或者指标
 export function addElement(data) {
   return request({
@@ -157,10 +157,11 @@ export function editElemention(data) {
 }
 
 // 删除指标
-export function deleteElemention(id) {
+export function deleteElemention(idList) {
   return request({
     url: `/gysl/mx/delete`,
-    method: 'delete'
+    method: 'delete',
+    params: { idList }
   });
 }
 
@@ -336,7 +337,7 @@ export function addjzxx(data) {
 export function deletejzxx(idList) {
   console.log('Deleting buildings with IDs:', idList); // 调试信息
   return request({
-      url: '/gysl/buildingInformation/delete', // 使用正确的URL
+      url: '/gysl/buildingInformation/delete', 
       method: 'delete',
       params: { idList: idList.join(',') } // 将数组转换为逗号分隔的字符串
   });
@@ -394,11 +395,11 @@ export function deletexmtl(idList) {
 export function updatexmtll(data) {
   return request({
     url:'/gysl/projectLegend/edit',
-    method:'post',
+    method:'put',
     data
   })
 }
-//分页查询所有数据
+//分页查询所有数据（根据xmid）
 export function getxmtlPageByxmid(params) {
   return request({
     url:'/gysl/projectLegend/page',
@@ -412,4 +413,79 @@ export function getxmtlById(id) {
     url:`/gysl/projectLegend/${id}`,
     method:'get',
   })
+}
+
+//项目其他信息
+//新增数据
+export function addxmqt(data) {
+  return request({
+    url:'/gysl/projectOtherInfo/add',
+    method:'post',
+    data
+  })
+}
+//删除数据
+export function deletexmqt(idList) {
+  return request({
+    url:'/gysl/projectOtherInfo/delete',
+    method:'delete',
+    params:{idList}
+  })
+}
+//修改数据
+export function updatexmqt(data) {
+  return request({
+    url:'/gysl/projectOtherInfo/edit',
+    method:'post',
+    data
+  })
+}
+//根据项目id查询信息// 根据项目id查询信息
+export function getOtherInfoByxmid(query) {
+  return request({
+    url: '/gysl/projectOtherInfo/searchId',
+    method: 'get',
+    params: query // 使用 params 传递查询参数
+  });
+}
+//项目备忘录
+//新增数据
+export function addxmmmb(data) {
+  return request({
+    url:'/gysl/projectRemark/add',
+    method:'post',
+    data
+  })
+}
+//删除数据
+export function deletexmmmb(idList) {
+  return request({
+    url:'/gysl/projectRemark/delete',
+    method:'delete',
+    params:{idList}
+  })
+}
+//修改数据
+export function updatexmmmb(data) {
+  return request({
+    url:'/gysl/projectRemark/edit',
+    method:'post',
+    data
+  })
+}
+//查询所有数据
+export function getxmmmbPage(params) {
+  return request({
+    url:'/gysl/projectRemark/page',
+    method:'get',
+    params
+  })
+}
+//通过主键查询单条数据
+export function getxmmmbById(id) {
+  return request({
+    url:`/gysl/projectRemark/${id}`,
+    method:'get',
+    params:{id}
+  })
 }
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/Basic.vue b/src/views/components/ProjectDetails/Basic.vue
index e1cdae1..1f231bc 100644
--- a/src/views/components/ProjectDetails/Basic.vue
+++ b/src/views/components/ProjectDetails/Basic.vue
@@ -170,6 +170,16 @@
                             <el-input v-model="form.jsjd" maxlength="50"></el-input>
                         </el-form-item>
                     </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="经度" prop="longitude">
+                            <el-input v-model="form.longitude" maxlength="50"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="纬度" prop="latitude">
+                            <el-input v-model="form.latitude" maxlength="50"></el-input>
+                        </el-form-item>
+                    </el-col>
                 </el-row>
                 <el-form-item label="项目法人单位简介" prop="unitIntroduction">
                     <el-input v-model="form.unitIntroduction" type="textarea" rows="4" maxlength="1000"></el-input>
@@ -247,7 +257,11 @@ export default {
                 unitIntroduction: '',
                 introduction: '',
                 fj: '',
-                jsjd: ''
+                jsjd: '',
+                //纬度
+                latitude:'',
+                //经度
+                longitude:''
             },
             rules: {
                 name: [
@@ -361,6 +375,8 @@ export default {
                 { label: '施工许可证发放时间', value: data.issuingTime },
                 { label: '竣工验收时间', value: data.acceptanceTime },
                 { label: '建设进度', value: data.jsjd },
+                // { label: '经度', value: data.longitude },
+                // { label: '纬度', value: data.latitude },
                 { label: '项目法人单位简介', value: data.unitIntroduction },
                 { label: '项目简介', value: data.introduction }
             ];
@@ -392,6 +408,8 @@ export default {
                 ssgnq: parseInt(this.form.ssgnq),
                 unitIntroduction: this.form.unitIntroduction,
                 jsjd: this.form.jsjd,
+                latitude:this.form.latitude,
+                longitude:this.form.longitude,
                 updateBy: '',
                 updateId: 0,
                 updateTime: '',
@@ -472,6 +490,10 @@ export default {
                 updateBy: '',
                 updateId: 0,
                 updateTime: '',
+                //纬度
+                latitude:'',
+                //经度
+                longitude:''
             };
         },
         // 格式化日期范围
diff --git a/src/views/components/ProjectDetails/Memo.vue b/src/views/components/ProjectDetails/Memo.vue
index 9d91f43..dd3185d 100644
--- a/src/views/components/ProjectDetails/Memo.vue
+++ b/src/views/components/ProjectDetails/Memo.vue
@@ -8,7 +8,8 @@
             </div>
             <div class="topright">
                 <el-button type="primary" size="medium" plain
-                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
+                    @click="handleEditMemo">
                     <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
                         style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                     编辑
@@ -33,107 +34,166 @@
                 </el-form>
             </div>
             <div class="descriptionsdivnext">
-                <div class="descriptionditem">
-                    <div class="itemone">2024-09-28</div>
-                    <div class="itemtwo">该项目已完工，需继续更新</div>
-                    <div class="itemthree">2024-09-28</div>
-                </div>
-                <div class="descriptionditem">
-                    <div class="itemone">2024-09-28</div>
-                    <div class="itemtwo">该项目已完工，需继续更新</div>
-                    <div class="itemthree">2024-09-28</div>
-                </div>
-                <div class="descriptionditem">
-                    <div class="itemone">2024-09-28</div>
-                    <div class="itemtwo">该项目已完工，需继续更新</div>
-                    <div class="itemthree">2024-09-28</div>
+                <!-- 渲染多个备忘录 -->
+                <div v-for="memo in memos" :key="memo.id" class="descriptionditem">
+                    <div class="itemone">{{ memo.createTime }}</div>
+                    <div class="itemtwo">{{ memo.remark }}</div>
+                    <div class="itemthree">{{ memo.createBy }}</div>
+                    <div class="itemfour">
+                        <el-button type="text" @click="handleEditMemo(memo)">编辑</el-button>
+                        <el-button type="text" @click="handleDeleteMemo(memo.id)">删除</el-button>
+                    </div>
                 </div>
             </div>
         </div>
 
-        <!-- 新增弹窗表单 -->
-        <el-dialog title="新增备忘录" :visible.sync="dialogVisible" width="500px">
+        <!-- 新增/编辑弹窗表单 -->
+        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
             <el-form :model="newMemo" label-width="100px">
-                <el-form-item label="姓名">
-                    <el-input v-model="newMemo.name"></el-input>
-                </el-form-item>
-                <el-form-item label="时间">
-                    <el-date-picker type="date" placeholder="选择日期" v-model="newMemo.date"
-                        style="width: 100%;"></el-date-picker>
-                </el-form-item>
-                <el-form-item label="内容">
-                    <el-input type="textarea" v-model="newMemo.content" :rows="4"></el-input>
+                <el-form-item label="备忘录内容">
+                    <el-input type="textarea" v-model="newMemo.remark" :rows="4"></el-input>
                 </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="handleAddMemo">确定</el-button>
+                <el-button type="primary" @click="handleSubmit">确定</el-button>
             </span>
         </el-dialog>
     </div>
 </template>
 
 <script>
+import { addxmmmb, deletexmmmb, updatexmmmb, getxmmmbPage } from '@/api/ManageApi/index';
+
 export default {
+    props: {
+        xmId: {
+            type: Number,
+            required: true
+        }
+    },
     data() {
         return {
-            dynamicTags: ['标签一', '标签二', '标签三'],
-            inputVisible: false,
-            inputValue: '',
             form: {
-                name: '',
-                region: '',
                 date1: null,
-                date2: '',
-                delivery: false,
-                type: [],
-                resource: '',
-                desc: ''
             },
             dialogVisible: false,
+            dialogTitle: '新增备忘录',
             newMemo: {
-                name: '',
-                date: '',
-                content: ''
-            }
+                id: null,
+                remark: '', // 只需要发送 remark
+                xmId: this.xmId, // 使用传入的 xmId
+            },
+            memos: [], // 备忘录列表
         };
     },
+    created() {
+        this.fetchMemos(); // 页面加载时获取数据
+    },
     methods: {
         onSubmit() {
             console.log('submit!');
             console.log(this.form);
         },
-        handleClose(tag) {
-            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+        // 获取备忘录数据
+        fetchMemos() {
+            const params = {
+                xmId: this.xmId, // 使用传入的 xmId
+            };
+            getxmmmbPage(params)
+                .then(response => {
+                    if (response.code === 200 && response.data) {
+                        this.memos = response.data; // 填充数据
+                    } else {
+                        console.error("获取备忘录失败：数据为空");
+                    }
+                })
+                .catch(error => {
+                    console.error("获取备忘录失败:", error);
+                });
         },
-        showInput() {
-            this.inputVisible = true;
-            this.$nextTick(_ => {
-                this.$refs.saveTagInput.$refs.input.focus();
-            });
+        // 打开新增弹窗
+        handleAdd() {
+            this.dialogTitle = '新增备忘录';
+            this.dialogVisible = true;
+            this.newMemo = {
+                id: null,
+                remark: '', // 只需要发送 remark
+                xmId: this.xmId, // 使用传入的 xmId
+            };
         },
-        handleInputConfirm() {
-            let inputValue = this.inputValue;
-            if (inputValue) {
-                this.dynamicTags.push(inputValue);
+        // 打开编辑弹窗
+        handleEditMemo(memo) {
+            if (memo) {
+                this.dialogTitle = '编辑备忘录';
+                this.dialogVisible = true;
+                this.newMemo = {
+                    id: memo.id,
+                    remark: memo.remark, // 只需要发送 remark
+                    xmId: memo.xmId,
+                };
             }
-            this.inputVisible = false;
-            this.inputValue = '';
         },
-        handleAdd() {
-            this.dialogVisible = true;
+        // 删除备忘录
+        handleDeleteMemo(id) {
+            this.$confirm('此操作将永久删除该备忘录, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                deletexmmmb([id])
+                    .then(response => {
+                        if (response.code === 200) {
+                            this.$message.success('删除成功!');
+                            this.fetchMemos(); // 刷新数据
+                        } else {
+                            this.$message.error('删除失败!');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('删除失败', error);
+                        this.$message.error('删除失败!');
+                    });
+            }).catch(() => {
+                this.$message.info('已取消删除');
+            });
         },
-        handleAddMemo() {
-            console.log('新增备忘录:', this.newMemo);
-            // 在这里可以将新备忘录添加到列表中或提交到服务器
+        // 提交表单（新增/编辑）
+        handleSubmit() {
             this.dialogVisible = false;
-            this.newMemo = {
-                name: '',
-                date: '',
-                content: ''
-            };
-        }
-    }
+            if (this.newMemo.id) {
+                // 编辑数据
+                updatexmmmb(this.newMemo)
+                    .then(response => {
+                        if (response.code === 200) {
+                            this.$message.success('数据编辑成功！');
+                            this.fetchMemos(); // 刷新数据
+                        } else {
+                            this.$message.error('数据编辑失败！');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('编辑数据失败', error);
+                        this.$message.error('数据编辑失败！');
+                    });
+            } else {
+                // 新增数据
+                addxmmmb(this.newMemo)
+                    .then(response => {
+                        if (response.code === 200) {
+                            this.$message.success('数据新增成功！');
+                            this.fetchMemos(); // 刷新数据
+                        } else {
+                            this.$message.error('数据新增失败！');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('新增数据失败', error);
+                        this.$message.error('数据新增失败！');
+                    });
+            }
+        },
+    },
 };
 </script>
 
@@ -218,22 +278,24 @@ export default {
     height: 8rem;
     margin-top: -1rem;
     gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .descriptionditem {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
     width: 21.75rem;
-    height: 7rem;
+    height: auto;
     background: #FBFCFF;
     border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
     border: 0.06rem solid #E6E6E6;
     padding: .5rem;
+    position: relative;
 }
 
 .itemone {
-    width: 5.88rem;
+    width: 100%;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
     font-weight: 500;
@@ -257,7 +319,7 @@ export default {
 }
 
 .itemthree {
-    width: 6.06rem;
+    width: 100%;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
     font-weight: 400;
@@ -268,6 +330,12 @@ export default {
     text-transform: none;
 }
 
+.itemfour {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+}
+
 .el-textarea__inner {
     height: 10rem !important;
     /* 固定高度 */
diff --git a/src/views/components/ProjectDetails/Others.vue b/src/views/components/ProjectDetails/Others.vue
index 87a105d..56237a2 100644
--- a/src/views/components/ProjectDetails/Others.vue
+++ b/src/views/components/ProjectDetails/Others.vue
@@ -1,214 +1,237 @@
 <template>
-    <div class="container">
-      <!-- 顶部信息 -->
-      <div class="containertop">
-        <div class="topleft">
-          <img src="../../../assets/images/detailsicon/1.png" alt="">
-          <span>其他信息</span>
-        </div>
-        <div class="topright">
-          <el-button type="primary" size="medium" plain
-            style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
-            <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="新增"
-              style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
-            新增
-          </el-button>
-          <el-button type="primary" size="medium" plain
-            style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
-            <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
-              style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
-            编辑
-          </el-button>
-          <el-button type="primary" size="medium" plain
-            style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
-            <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="导出"
-              style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
-            导出
-          </el-button>
-          <el-button type="primary" size="medium" plain
-            style="border: none;background-color: rgba(242,83,83,0.1);color: #F25353;">
-            <img src="../../../assets/images/detailsicon/icon-delet@2x.png" alt="删除"
-              style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
-            删除
-          </el-button>
-        </div>
+  <div class="container">
+    <!-- 顶部信息 -->
+    <div class="containertop">
+      <div class="topleft">
+        <img src="../../../assets/images/detailsicon/1.png" alt="">
+        <span>其他信息</span>
       </div>
-      <!-- 内容区上方的表格 -->
-      <div class="tagdiv">
-        <div class="descriptionsdiv">
-          <el-descriptions class="margin-top" :column="4" border>
-            <el-descriptions-item>
-              <template slot="label">
-                改造前容积率
-              </template>
-              18100000000
-            </el-descriptions-item>
-            <el-descriptions-item>
-              <template slot="label">
-                改造后容积率
-              </template>
-              苏州市
-            </el-descriptions-item>
-            <el-descriptions-item>
-              <template slot="label">
-                亩均税收（万元/每亩）
-              </template>
-              kooriookami
-            </el-descriptions-item>
-            <el-descriptions-item>
-              <template slot="label">
-                亩均销售（万元/每亩）
-              </template>
-              18100000000
-            </el-descriptions-item>
-            <el-descriptions-item>
-              <template slot="label">
-                贷款情况
-              </template>
-              苏州市
-            </el-descriptions-item>
-            <el-descriptions-item>
-              <template slot="label">
-                荣誉情况
-              </template>
-              苏州市
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
+      <div class="topright">
+        <el-button type="primary" size="medium" plain
+          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="openDialog('add')">
+          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="新增"
+            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+          新增
+        </el-button>
+        <el-button type="primary" size="medium" plain
+          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="openDialog('edit')">
+          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
+            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+          编辑
+        </el-button>
+        <el-button type="primary" size="medium" plain
+          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+          <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="导出"
+            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+          导出
+        </el-button>
+        <el-button type="primary" size="medium" plain
+          style="border: none;background-color: rgba(242,83,83,0.1);color: #F25353;" @click="deleteData">
+          <img src="../../../assets/images/detailsicon/icon-delet@2x.png" alt="删除"
+            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+          删除
+        </el-button>
       </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      size: {
-        type: String,
-        default: '' // 提供默认值
-      }
-    },
-    data() {
-      return {
-        tableData: [
-          {
-            date: '2016-05-02',
-            name: '大众电脑生成制造基地',
-            address: ' 1518 弄',
-            data: '1000',
-            status: '在建'
-          },
-          {
-            date: '2016-05-04',
-            name: '大众电脑生成制造基地',
-            address: ' 1517 弄',
-            data: '1500',
-            status: '拟建'
-          },
-          {
-            date: '2016-05-01',
-            name: '大众电脑生成制造基地',
-            address: ' 1519 弄',
-            data: '2000',
-            status: '已建'
-          },
-          {
-            date: '2016-05-03',
-            name: '大众电脑生成制造基地',
-            address: ' 1516 弄',
-            data: '2500',
-            status: '在建'
+
+    <!-- 数据展示表格 -->
+    <div class="tagdiv">
+      <div class="descriptionsdiv">
+        <el-descriptions class="margin-top" :column="4" border>
+          <el-descriptions-item label="键">
+            {{ otherInfo.zdname }}
+          </el-descriptions-item>
+          <el-descriptions-item label="值">
+            {{ otherInfo.zdinfor }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+
+    <!-- 表单弹窗 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="键">
+          <el-input v-model="form.zdname" placeholder="请输入键"></el-input>
+        </el-form-item>
+        <el-form-item label="值">
+          <el-input v-model="form.zdinfor" placeholder="请输入值"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addxmqt, updatexmqt, getOtherInfoByxmid } from '@/api/ManageApi/index';
+
+export default {
+  props: {
+    xmId: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      otherInfo: { // 其他信息
+        zdname: '', // 键
+        zdinfor: '' // 值
+      },
+      dialogVisible: false, // 控制弹窗显示
+      dialogTitle: '', // 弹窗标题
+      form: { // 表单数据
+        zdname: '',
+        zdinfor: ''
+      },
+      isEditMode: false // 是否为编辑模式
+    };
+  },
+  created() {
+    this.fetchOtherInfo(); // 页面加载时获取数据
+  },
+  methods: {
+    // 获取其他信息
+    fetchOtherInfo() {
+      getOtherInfoByxmid({ xmId: this.xmId }) // 确保参数名和接口定义一致
+        .then(response => {
+          if (response.code === 200 && response.data) {
+            this.otherInfo = response.data; // 填充数据
+          } else {
+            console.error("获取其他信息失败：数据为空");
           }
-        ],
+        })
+        .catch(error => {
+          console.error("获取其他信息失败:", error);
+        });
+    },
+    // 打开弹窗
+    openDialog(mode) {
+      if (mode === 'add') {
+        this.dialogTitle = '新增';
+        this.isEditMode = false;
+        this.form = { zdname: '', zdinfor: '' }; // 重置表单
+      } else if (mode === 'edit') {
+        this.dialogTitle = '编辑';
+        this.isEditMode = true;
+        this.form = { ...this.otherInfo }; // 填充当前数据
       }
+      this.dialogVisible = true;
     },
-    methods: {
-      getStatusColor(status) {
-        switch (status) {
-          case '在建':
-            return 'color: #2DD29F;';
-          case '拟建':
-            return 'color: #F08445;';
-          case '已建':
-            return 'color: #2B62F1;';
-        }
+    // 提交表单
+    submitForm() {
+      if (this.isEditMode) {
+        // 编辑模式
+        updatexmqt({ ...this.form, xmId: this.xmId })
+          .then(response => {
+            if (response.code === 200) {
+              this.$message.success('编辑成功');
+              this.fetchOtherInfo(); // 刷新数据
+            }
+          })
+          .catch(error => {
+            console.error("编辑失败:", error);
+          });
+      } else {
+        // 新增模式
+        addxmqt({ ...this.form, xmId: this.xmId })
+          .then(response => {
+            if (response.code === 200) {
+              this.$message.success('新增成功');
+              this.fetchOtherInfo(); // 刷新数据
+            }
+          })
+          .catch(error => {
+            console.error("新增失败:", error);
+          });
       }
+      this.dialogVisible = false; // 关闭弹窗
+    },
+    // 删除数据（暂不实现）
+    deleteData() {
+      this.$message.warning('删除功能暂未实现');
     }
   }
-  </script>
-  
-  <style scoped>
-  .container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
-    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-  }
-  
-  .content {
-    padding: 1rem;
-    display: flex;
-  }
-  
-  .containertop {
-    height: auto;
-    display: flex;
-    justify-content: space-between;
-    padding: .7rem 0;
-    padding: .5rem;
-    border-bottom: 1px solid #E5E5E5;
-  }
-  
-  .topleft {
-    width: 8rem;
-    display: flex;
-    gap: 0.4rem;
-    align-items: center;
-  }
-  
-  .topleft img {
-    width: 0.81rem;
-    height: 0.81rem;
-  }
-  
-  .topleft span {
-    width: auto;
-    height: 0.88rem;
-    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-    font-weight: 500;
-    font-size: 0.88rem;
-    color: #3D424C;
-    line-height: 0.88rem;
-    text-align: right;
-    font-style: normal;
-    text-transform: none;
-  }
-  
-  .picturediv {
-    width: 18.31rem;
-    height: 25.31rem;
-    background-color: lightblue;
-  }
-  
-  .descriptionsdiv {
-    width: 100%;
-    margin-left: 1rem;
-    height: auto;
-  }
-  
-  .two-row-item {
-    height: 20rem;
-  }
-  
-  .tagdiv {
-    padding: 1rem 3em 1rem 1rem;
-  }
-  .block{
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1rem;
-  }
-  </style>
-  
\ No newline at end of file
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #FFFFFF;
+  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
+  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+}
+
+.content {
+  padding: 1rem;
+  display: flex;
+}
+
+.containertop {
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  padding: .7rem 0;
+  padding: .5rem;
+  border-bottom: 1px solid #E5E5E5;
+}
+
+.topleft {
+  width: 8rem;
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+.topleft img {
+  width: 0.81rem;
+  height: 0.81rem;
+}
+
+.topleft span {
+  width: auto;
+  height: 0.88rem;
+  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+  font-weight: 500;
+  font-size: 0.88rem;
+  color: #3D424C;
+  line-height: 0.88rem;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+}
+
+.picturediv {
+  width: 18.31rem;
+  height: 25.31rem;
+  background-color: lightblue;
+}
+
+.descriptionsdiv {
+  width: 100%;
+  margin-left: 1rem;
+  height: auto;
+}
+
+.two-row-item {
+  height: 20rem;
+}
+
+.tagdiv {
+  padding: 1rem 3em 1rem 1rem;
+}
+
+.block {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/Projectgift.vue b/src/views/components/ProjectDetails/Projectgift.vue
index 1560865..877da1a 100644
--- a/src/views/components/ProjectDetails/Projectgift.vue
+++ b/src/views/components/ProjectDetails/Projectgift.vue
@@ -15,7 +15,7 @@
                 </el-button>
             </div>
         </div>
-        <!-- 图片盒子容器 -->
+        <!-- 展示的区域 -->
         <div class="image-container">
             <div v-for="(image, index) in images" :key="index" class="image-box">
                 <img :src="image.src" alt="项目图片" class="image">
@@ -24,23 +24,9 @@
                 </div>
             </div>
         </div>
-        <!-- 上传附件弹窗 -->
+        <!-- 新增项目巡礼的弹窗 -->
         <el-dialog title="上传附件" :visible.sync="dialogVisible" width="50%">
-            <el-upload
-                ref="upload"
-                action="/gysl/xmxl/add"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove"
-                :on-success="handleSuccess"
-                :before-upload="beforeUpload"
-                :auto-upload="false"
-            >
-                <i class="el-icon-plus"></i>
-            </el-upload>
-            <el-dialog :visible.sync="previewDialogVisible">
-                <img width="100%" :src="previewImageUrl" alt="">
-            </el-dialog>
+
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="submitUpload">确 定</el-button>
@@ -50,7 +36,7 @@
 </template>
 
 <script>
-import { addXmxl, getXmxlPage } from '@/api/ManageApi/index.js';
+// import { addXmxl, getXmxlPage } from '@/api/ManageApi/index.js';
 
 export default {
     data() {
diff --git a/src/views/components/ProjectDetails/Projectpicture.vue b/src/views/components/ProjectDetails/Projectpicture.vue
index cef4e34..36502f9 100644
--- a/src/views/components/ProjectDetails/Projectpicture.vue
+++ b/src/views/components/ProjectDetails/Projectpicture.vue
@@ -15,7 +15,7 @@
         <!-- 内容区 -->
         <div class="content">
             <div class="picturediv">
-                <div ref="chart" style="width: 30rem; height: 28rem; margin-left: 2rem;"></div>
+                <div ref="chart" style="width: 40rem; height: 28rem; margin-left: 2rem;"></div>
             </div>
             <div class="descriptionsdiv">
                 <div class="tablehead">
diff --git a/src/views/components/ProjectDetails/Projectpicturetwo22.vue b/src/views/components/ProjectDetails/Projectpicturetwo22.vue
index 395ecf0..cb82929 100644
--- a/src/views/components/ProjectDetails/Projectpicturetwo22.vue
+++ b/src/views/components/ProjectDetails/Projectpicturetwo22.vue
@@ -1,93 +1,239 @@
 <template>
-    <div>
-        <el-form :model="form" label-width="120px">
-            <el-form-item label="ID">
-                <el-input v-model="form.id"></el-input>
-            </el-form-item>
-            <el-form-item label="文件类型" prop="lx">
-                <el-select v-model="form.imgType" placeholder="请选择文件类型">
-                    <el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
-                        :value="dict.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="图片url">
-                <el-input v-model="form.img"></el-input>
-            </el-form-item>
-            <el-form-item label="经度">
-                <el-input v-model="form.latitude"></el-input>
-            </el-form-item>
-            <el-form-item label="纬度">
-                <el-input v-model="form.longitude"></el-input>
-            </el-form-item>
-            <el-form-item label="项目ID">
-                <el-input v-model="form.xmId"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="handleSubmit">提交</el-button>
-                <el-button @click="resetForm">重置</el-button>
-            </el-form-item>
-        </el-form>
+    <div class="container">
+        <!-- 顶部操作栏 -->
+        <div class="containertop">
+            <div class="topleft">
+                <img src="../../../assets/images/detailsicon/1.png" alt="">
+                <span>项目图例</span>
+            </div>
+            <div class="topright">
+                <el-button type="primary" size="medium" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleAdd">
+                    <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    新增
+                </el-button>
+                <el-button type="primary" size="medium" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
+                    <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="main-content">
+            <!-- 上侧三张图 -->
+            <div class="image-row">
+                <div v-for="(item, index) in carousel1Items.slice(0, 3)" :key="index" class="image-item">
+                    <img :src="item.imageUrl" :alt="'Image ' + (index + 1)" />
+                    <div class="classify">
+                        类型A
+                    </div>
+                    <el-input v-if="dialogVisible" v-model="form.images[index]" placeholder="请输入图片URL"></el-input>
+                </div>
+            </div>
+
+            <!-- 下侧三张图 -->
+            <div class="image-row">
+                <div v-for="(item, index) in carousel2Items.slice(0, 3)" :key="index" class="image-item">
+                    <img :src="item.imageUrl" :alt="'Image ' + (index + 1)" />
+                    <div class="classify">
+                        类型B
+                    </div>
+                    <el-input v-if="dialogVisible" v-model="form.images[index + 3]" placeholder="请输入图片URL"></el-input>
+                </div>
+            </div>
+        </div>
+
+        <!-- 编辑/新增对话框 -->
+        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
+            <el-form :model="form" label-width="120px">
+                <el-form-item label="类型">
+                    <el-select v-model="form.type" placeholder="请选择类型">
+                        <el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="图片上传">
+                    <div v-for="(image, index) in form.images" :key="index" style="margin-bottom: 10px;">
+                        <ImageUpload v-model="form.images[index]" />
+                        <el-input v-model="form.images[index]" placeholder="请输入图片URL"></el-input>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="handleSubmit">确定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
 <script>
-import { addxmtl } from '@/api/ManageApi/index';
 import ImageUpload from '@/components/ImageUpload';
+import { getxmtlPageByxmid, addxmtl, updatexmtll } from '@/api/ManageApi/index';
 
 export default {
     components: { ImageUpload },
     dicts: ['tplx'],
+    props: {
+        xmId: {
+            type: Number,
+            required: true
+        }
+    },
     data() {
         return {
+            carousel1Items: [], // 类型A的图片
+            carousel2Items: [], // 类型B的图片
+            dialogVisible: false,
+            dialogTitle: '',
             form: {
-                createBy: '',
-                createTime: '',
-                id: 0,
-                img: '',
-                imgType: 0,
-                latitude: '',
-                longitude: '',
-                remark: '',
-                updateBy: '',
-                updateTime: '',
-                xmId: 0,
-            },
+                type: '',
+                images: ['', '', '', '', '', ''] // 用于绑定图片上传组件的值
+            }
         };
     },
+    created() {
+        this.fetchProjectLegends();
+    },
     methods: {
-        handleFileUploaded(fileUrl) {
-            this.form.img = fileUrl;
-        },
-        handleSubmit() {
-            addxmtl(this.form)
-                .then((response) => {
-                    if (response.code === 200) {
-                        this.$message.success('新增成功');
-                        this.resetForm();
-                    } else {
-                        this.$message.error('新增失败');
+        // 获取项目图例数据
+        fetchProjectLegends() {
+            console.log('Fetching data for xmId:', this.xmId);
+            if (this.xmId === null || this.xmId === undefined) {
+                console.error('xmId is null or undefined');
+                return;
+            }
+            getxmtlPageByxmid({ xmId: this.xmId })
+                .then(response => {
+                    if (response.code === 200 && response.data.length > 0) {
+                        const data = response.data[0]; // 假设返回的数据在数组中
+                        // 映射类型A的图片
+                        this.carousel1Items = data.type1.images.map(imageUrl => ({ imageUrl }));
+                        // 映射类型B的图片
+                        this.carousel2Items = data.type2.images.map(imageUrl => ({ imageUrl }));
                     }
                 })
-                .catch((error) => {
-                    console.error('新增失败:', error);
-                    this.$message.error('新增失败');
+                .catch(error => {
+                    console.error("获取项目图例数据失败:", error);
                 });
         },
-        resetForm() {
+        // 打开新增对话框
+        handleAdd() {
+            this.dialogTitle = '新增';
+            this.form = { type: '', images: ['', '', '', '', '', ''] }; // 重置表单
+            this.dialogVisible = true;
+        },
+        // 打开编辑对话框
+        handleEdit() {
+            this.dialogTitle = '编辑';
+            // 假设编辑时填充当前数据
             this.form = {
-                createBy: '',
-                createTime: '',
-                id: 0,
-                img: '',
-                imgType: 0,
-                latitude: '',
-                longitude: '',
-                remark: '',
-                updateBy: '',
-                updateTime: '',
-                xmId: 0,
+                type: '', // 类型默认为空
+                images: [
+                    this.carousel1Items[0] ? this.carousel1Items[0].imageUrl : '',
+                    this.carousel1Items[1] ? this.carousel1Items[1].imageUrl : '',
+                    this.carousel1Items[2] ? this.carousel1Items[2].imageUrl : '',
+                    this.carousel2Items[0] ? this.carousel2Items[0].imageUrl : '',
+                    this.carousel2Items[1] ? this.carousel2Items[1].imageUrl : '',
+                    this.carousel2Items[2] ? this.carousel2Items[2].imageUrl : ''
+                ]
             };
+            this.dialogVisible = true;
         },
-    },
+        // 提交表单
+        handleSubmit() {
+            if (this.dialogTitle === '新增') {
+                // 调用新增API
+                addxmtl({ ...this.form, xmId: this.xmId })
+                    .then(response => {
+                        if (response.code === 200) {
+                            this.$message.success('新增成功');
+                            this.fetchProjectLegends(); // 刷新数据
+                        }
+                    })
+                    .catch(error => {
+                        console.error("新增失败:", error);
+                    });
+            } else if (this.dialogTitle === '编辑') {
+                // 调用编辑API
+                updatexmtll({ ...this.form, xmId: this.xmId })
+                    .then(response => {
+                        if (response.code === 200) {
+                            this.$message.success('编辑成功');
+                            this.fetchProjectLegends(); // 刷新数据
+                        }
+                    })
+                    .catch(error => {
+                        console.error("编辑失败:", error);
+                    });
+            }
+            this.dialogVisible = false;
+        }
+    }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #FFFFFF;
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
+    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+    gap: 1rem;
+    overflow: auto;
+}
+
+.containertop {
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
+}
+
+.main-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.image-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.image-item {
+    position: relative;
+    width: calc(33.33% - 0.67rem); /* 三张图片每张占三分之一减去间隔 */
+}
+
+.image-item img {
+    width: 100%;
+    height: 12rem;
+    object-fit: cover;
+}
+
+.classify {
+    width: 2.81rem;
+    height: 1.38rem;
+    background-color: rgba(43, 98, 241, 0.8);
+    border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
+    color: white;
+    position: absolute;
+    bottom: .5rem;
+    left: .5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: .7rem;
+    z-index: 98;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/luotu.vue b/src/views/components/ProjectDetails/luotu.vue
index 07e477f..a453130 100644
--- a/src/views/components/ProjectDetails/luotu.vue
+++ b/src/views/components/ProjectDetails/luotu.vue
@@ -17,8 +17,11 @@
                         <el-form-item label="项目名称">
                             <el-input v-model="pointForm.name" ref="pointNameInput"></el-input>
                         </el-form-item>
-                        <el-form-item label="现状分类">
-                            <el-input v-model="pointForm.latlng" ></el-input>
+                        <el-form-item label="纬度">
+                            <el-input v-model="pointForm.lat" readonly></el-input>
+                        </el-form-item>
+                        <el-form-item label="经度">
+                            <el-input v-model="pointForm.lng" readonly></el-input>
                         </el-form-item>
                     </el-form>
                 </div>
@@ -71,7 +74,8 @@ export default {
             pointDialogTitle: '新增点位', // 新增点位弹窗标题
             pointForm: {
                 name: '',
-                latlng: '',
+                lat: '',
+                lng: '',
             },
             selectedLatLng: null, // 选中的经纬度
             existingMarker: null, // 存储已存在的点位标记
@@ -112,7 +116,8 @@ export default {
             }
             const { latlng } = event;
             this.selectedLatLng = latlng;
-            this.pointForm.latlng = `${latlng.lat}, ${latlng.lng}`;
+            this.pointForm.lat = latlng.lat.toString();
+            this.pointForm.lng = latlng.lng.toString();
             this.showFloatingPanel();
         },
         // 显示悬浮面板
diff --git a/src/views/manage-info/index.vue b/src/views/manage-info/index.vue
index 62d7cec..bcff368 100644
--- a/src/views/manage-info/index.vue
+++ b/src/views/manage-info/index.vue
@@ -53,25 +53,25 @@
             </div>
             <!-- 项目图例 -->
             <div id="projectpicturetwo">
-                <Projectpicturetwo22 :id="projectId"></Projectpicturetwo22>
+                <Projectpicturetwo22 :xmId="projectId"></Projectpicturetwo22>
             </div>
             <!-- 项目巡礼 -->
-            <div id="projectgift">
+            <!-- <div id="projectgift">
                 <Projectgift></Projectgift>
-            </div>
+            </div> -->
             <!-- 现场实况 -->
             <div id="liver">
                 <Liver></Liver>
             </div>
             <!-- 项目备忘录 -->
             <div id="memo">
-                <Memo></Memo>
+                <Memo :xmId="projectId"></Memo>
             </div>
             <!-- 其他信息 -->
             <div class="bottombox" id="others">
-                <Others></Others>
+                <Others :xmId="projectId"></Others>
             </div>
-            <div>
+            <div class="footer">
                 <el-button type="primary">审核通过</el-button>
             </div>
         </div>
@@ -91,7 +91,7 @@ import Memo from '../components/ProjectDetails/Memo.vue';
 import Models from '../components/ProjectDetails/Models.vue';
 import Months from '../components/ProjectDetails/Months.vue';
 import Programme from '../components/ProjectDetails/Programme.vue';
-import Projectgift from '../components/ProjectDetails/Projectgift.vue';
+// import Projectgift from '../components/ProjectDetails/Projectgift.vue';
 import Projectpicture from '../components/ProjectDetails/Projectpicture.vue';
 import Projectpicturetwo from '../components/ProjectDetails/Projectpicturetwo.vue';
 import Others from '../components/ProjectDetails/Others.vue';
@@ -108,7 +108,7 @@ export default {
         Models,
         Months,
         Programme,
-        Projectgift,
+        // Projectgift,
         Projectpicture,
         Projectpicturetwo,
         Others
@@ -135,7 +135,7 @@ export default {
     },
     created() {
         // 从路由参数中获取 projectId
-        this.projectId = this.$route.params.id;
+        this.projectId = Number(this.$route.params.id); // 将 projectId 转换为数字类型
         this.loadData();
     },
     methods: {
@@ -249,4 +249,10 @@ export default {
     z-index: 99;
     font-size: 18px;
 }
+
+.footer {
+    display: flex;
+    padding: 0 0 2rem 0;
+    justify-content: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/models/manages/index.vue b/src/views/models/manages/index.vue
index 7205bdc..671e8dd 100644
--- a/src/views/models/manages/index.vue
+++ b/src/views/models/manages/index.vue
@@ -5,18 +5,21 @@
                 <el-row style="margin-top: 1rem;">
                     <el-col :span="6">
                         <el-form-item label="关键要素" style="width: 100%;">
-                            <el-input placeholder="请输入关键要素" clearable style="width: 14rem;" />
+                            <el-input placeholder="请输入关键要素" clearable style="width: 14rem;"
+                                v-model="searchForm.keyElement" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="具体指标" style="width: 100%;">
-                            <el-input placeholder="请输入具体指标" clearable style="width: 14rem;" />
+                            <el-input placeholder="请输入具体指标" clearable style="width: 14rem;"
+                                v-model="searchForm.specificIndicator" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="8">
                         <el-form-item style="margin-left: 2.5rem;">
-                            <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
-                            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+                            <el-button type="primary" icon="el-icon-search" size="mini"
+                                @click="fetchElements">查询</el-button>
+                            <el-button icon="el-icon-refresh" size="mini" @click="resetSearchForm">重置</el-button>
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -25,43 +28,47 @@
 
         <div class="tablebox" style="margin: .5rem;">
             <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true; resetForm()">新增要素</el-button>
-            <div v-for="(category, categoryName) in tableData" :key="categoryName">
-                <div v-for="(items, itemName) in category" :key="itemName" class="tablebox">
-                    <div class="boxheader">
-                        <div class="headerone">
-                            <div>{{ categoryName }}：</div>
-                            <div>{{ itemName }}</div>
-                        </div>
-                        <div class="headertwo">
-                            <el-button type="primary" icon="el-icon-edit" size="mini"
-                                @click="handleUpdate(items[0])">编辑要素</el-button>
-                            <el-button type="primary" icon="el-icon-edit"
-                                @click="showAddIndicatorDialog">新增指标</el-button>
-                        </div>
+            <!-- 渲染所有要素 -->
+            <div v-for="(element, index) in tableData" :key="index" class="tablebox">
+                <div class="boxheader">
+                    <div class="headerone">
+                        <!-- 关键要素/重要要素 -->
+                        <div>{{ element.type === 1 ? '关键要素' : '重要要素' }}：</div>
+                        <!-- 关键要素/重要要素的名称 -->
+                        <div>{{ element.name }}</div>
+                    </div>
+                    <!-- 对要素的类型和名称进行编辑 -->
+                    <div class="headertwo">
+                        <el-button type="primary" icon="el-icon-edit" size="mini"
+                            @click="handleUpdate(element)">编辑要素</el-button>
+                        <el-button type="primary" icon="el-icon-edit"
+                            @click="showAddIndicatorDialog(element)">新增指标</el-button>
                     </div>
-                    <el-table :data="items" style="width: 100%">
-                        <el-table-column prop="id" label="序号" width="180"></el-table-column>
-                        <el-table-column prop="jtzb" label="具体指标" width="180"></el-table-column>
-                        <el-table-column prop="xxyq" label="详细要求" width="950"></el-table-column>
-                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-                            <template slot-scope="scope">
-                                <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
-                                    v-hasPermi="['system:post:edit']">编辑</el-button>
-                                <el-button size="mini" type="text" @click="handleDelete(scope.row)" style="color: #F25353;" 
-                                    v-hasPermi="['system:post:remove']">删除</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
                 </div>
+                <!-- 每个要素对应的指标和详细要求的展示，这里编辑和删除只是删除这个指标（不删除要素） -->
+                <el-table :data="element.indicators" style="width: 100%">
+                    <el-table-column prop="id" label="序号" width="180"></el-table-column>
+                    <el-table-column prop="jtzb" label="具体指标" width="180"></el-table-column>
+                    <el-table-column prop="xxyq" label="详细要求" width="950"></el-table-column>
+                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="text" @click="handleUpdateIndicator(scope.row)"
+                                v-hasPermi="['system:post:edit']">编辑指标</el-button>
+                            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
+                                style="color: #F25353;" v-hasPermi="['system:post:remove']">删除指标</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
             </div>
         </div>
-        <!-- 新增要素//编辑要素弹窗 -->
+
+        <!-- 这是新增要素/编辑要素弹窗 -->
         <el-dialog :title="form.id ? '编辑要素' : '新增要素'" :visible.sync="dialogVisible" width="30%">
             <el-form :model="form" label-width="80px">
                 <el-form-item label="类型">
                     <el-select v-model="form.type" placeholder="请选择类型">
-                        <el-option label="关键" value="关键要素"></el-option>
-                        <el-option label="重要" value="重要要素"></el-option>
+                        <el-option v-for="dict in dict.type.yslx" :key="dict.value" :label="dict.label"
+                            :value="parseInt(dict.value)"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="名称">
@@ -74,17 +81,14 @@
             </span>
         </el-dialog>
 
-        <!-- 新增指标弹窗 -->
-        <el-dialog title="新增指标" :visible.sync="indicatorDialogVisible" width="30%">
+        <!-- 这是新增指标/编辑指标弹窗 -->
+        <el-dialog :title="indicatorForm.id ? '编辑指标' : '新增指标'" :visible.sync="indicatorDialogVisible" width="30%">
             <el-form :model="indicatorForm" label-width="80px">
-                <el-form-item label="指标名称">
-                    <el-input v-model="indicatorForm.name" placeholder="请输入指标名称"></el-input>
+                <el-form-item label="具体指标">
+                    <el-input v-model="indicatorForm.jtzb" placeholder="请输入具体指标"></el-input>
                 </el-form-item>
-                <el-form-item label="指标类型">
-                    <el-select v-model="indicatorForm.type" placeholder="请选择类型">
-                        <el-option label="关键指标" value="关键指标"></el-option>
-                        <el-option label="重要指标" value="重要指标"></el-option>
-                    </el-select>
+                <el-form-item label="详细内容">
+                    <el-input v-model="indicatorForm.xxyq" placeholder="请输入详细要求"></el-input>
                 </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
@@ -96,122 +100,102 @@
 </template>
 
 <script>
-import { getAllElements, addElement, editElemention } from '@/api/ManageApi/index';
+import { addElement, getAllElements } from '@/api/ManageApi/index'; 
 
 export default {
+    dicts: ['yslx'],
     data() {
         return {
-            tableData: {
-                关键要素: {
-                    环保安全: [],
-                    安全: []
-                },
-                重要要素: {
-                    设备: [],
-                    设备载重: []
-                }
+            searchForm: {
+                keyElement: '',
+                specificIndicator: ''
             },
-            dialogVisible: false, // 新增/编辑要素弹窗
-            indicatorDialogVisible: false, // 新增指标弹窗
+            tableData: [], // 表格数据
+            dialogVisible: false, // 控制新增/编辑要素弹窗的显示
+            indicatorDialogVisible: false, // 控制新增/编辑指标弹窗的显示
             form: {
-                id: '',
+                id: null,
                 type: '',
                 name: ''
             },
             indicatorForm: {
-                name: '',
-                type: ''
+                id: null,
+                jtzb: '',
+                xxyq: '',
+                elementId: null 
             }
-        }
-    },
-    mounted() {
-        this.fetchData();
+        };
     },
     methods: {
-        // 获取数据
-        async fetchData() {
-            try {
-                const response = await getAllElements();
-                if (response.code === 200) {
-                    this.tableData = response.data;
-                } else {
-                    console.error('获取数据失败', response.msg);
-                }
-            } catch (error) {
-                console.error('请求错误', error);
-            }
+        // 查询要素
+        fetchElements() {
+            getAllElements(this.searchForm).then(response => {
+                this.tableData = response.data;
+            });
         },
-        // 显示新增指标弹窗
-        showAddIndicatorDialog() {
-            this.indicatorForm = { name: '', type: '' }; // 重置表单
-            this.indicatorDialogVisible = true; // 显示弹窗
+        // 重置查询表单
+        resetSearchForm() {
+            this.searchForm = {
+                keyElement: '',
+                specificIndicator: ''
+            };
+            this.fetchElements();
         },
-        // 处理新增指标
-        handleAddIndicator() {
-            addElement(this.indicatorForm).then(response => {
-                if (response.code === 200) {
-                    this.$message.success('新增指标成功');
-                    this.indicatorDialogVisible = false; // 关闭弹窗
-                    this.fetchData(); // 刷新数据
-                } else {
-                    this.$message.error('新增指标失败：' + response.msg);
-                }
-            }).catch(error => {
-                this.$message.error('请求错误：' + error.message);
-            });
+        // 重置表单
+        resetForm() {
+            this.form = {
+                id: null,
+                type: '',
+                name: ''
+            };
         },
-        // 处理新增/编辑要素
+        // 新增或编辑要素
         handleAddElement() {
-            if (this.form.id) {
-                // 编辑操作
-                editElemention(this.form).then(response => {
-                    if (response.code === 200) {
-                        this.$message.success('编辑成功');
-                        this.dialogVisible = false; // 关闭弹窗
-                        this.fetchData(); // 刷新数据
-                    } else {
-                        this.$message.error('编辑失败：' + response.msg);
-                    }
-                });
-            } else {
-                // 新增操作
-                addElement(this.form).then(response => {
-                    if (response.code === 200) {
-                        this.$message.success('新增成功');
-                        this.dialogVisible = false; // 关闭弹窗
-                        this.fetchData(); // 刷新数据
-                    } else {
-                        this.$message.error('新增失败：' + response.msg);
-                    }
-                });
-            }
+            addElement(this.form).then(response => {
+                this.$message.success('操作成功');
+                this.dialogVisible = false;
+                this.fetchElements();
+            });
         },
-        // 编辑操作
-        handleUpdate(row) {
-            this.form = { ...row }; // 将当前行的数据填充到表单中
-            this.dialogVisible = true; // 显示弹窗
+        // 编辑要素
+        handleUpdate(element) {
+            this.form = { ...element };
+            this.dialogVisible = true;
         },
-        // 删除操作
-        handleDelete(row) {
-            this.$confirm('确定删除该要素吗？', '提示', {
+        // 显示新增指标弹窗
+        showAddIndicatorDialog(element) {
+            this.indicatorForm.elementId = element.id;
+            this.indicatorDialogVisible = true;
+        },
+        // 新增或编辑指标
+        handleAddIndicator() {
+            // 这里调用新增指标的接口
+            this.$message.success('操作成功');
+            this.indicatorDialogVisible = false;
+            this.fetchElements();
+        },
+        // 编辑指标
+        handleUpdateIndicator(indicator) {
+            this.indicatorForm = { ...indicator };
+            this.indicatorDialogVisible = true;
+        },
+        // 删除指标
+        handleDelete(indicator) {
+            this.$confirm('确定删除该指标吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
-                // 在这里添加删除逻辑
+                // 这里调用删除指标的接口
                 this.$message.success('删除成功');
-            }).catch(() => {
-                this.$message.info('已取消删除');
+                this.fetchElements();
             });
-        },
-        // 重置表单
-        resetForm() {
-            this.form = {
-                id: '',
-                type: '',
-                name: ''
-            };
         }
+    },
+    mounted() {
+        this.fetchElements();
     }
-}
+};
 </script>
 
 <style scoped>