城市体检-首页修改20250418-04

package.json

@@ -40,17 +40,18 @@
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "min-dash": "4.2.1",
+    "nanoid": "^5.1.5",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "screenfull": "6.0.2",
     "tiny-svg": "3.1.3",
+    "vodal": "^2.4.0",
     "vue": "3.4.34",
     "vue-cropper": "1.1.1",
     "vue-i18n": "9.10.2",
     "vue-router": "4.3.2",
     "vue-types": "5.1.1",
-    "vxe-table": "4.5.22",
-    "vodal": "^2.4.0"
+    "vxe-table": "4.5.22"
   },
   "devDependencies": {
     "@iconify/json": "2.2.201",

src/utils/map/AddLayer.js

@@ -922,3 +922,16 @@ export async function ShowBJ(type) {
   }
 }
 
+
+export function DrawGeometry(params){
+  invokeParams('Draw', {
+    "type": params.type,
+    "hasZ": false,
+    "clear": true,
+  })
+}
+
+export function ClearSketchLayer(){
+  invokeParams('ClearSketchLayer', {
+  })
+}

src/views/cstj/problemsMain/index.vue

@@ -27,12 +27,12 @@
           </el-col>
           <el-col :span="1.5">
             <el-button v-hasPermi="['cstj:problemsMain:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-              >修改</el-button
+            >修改</el-button
             >
           </el-col>
           <el-col :span="1.5">
             <el-button v-hasPermi="['cstj:problemsMain:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-              >删除</el-button
+            >删除</el-button
             >
           </el-col>
           <el-col :span="1.5">
@@ -65,10 +65,10 @@
       <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改问题清单填报(改版)对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="1400px" append-to-body>
-      <el-form ref="problemsMainFormRef" :model="form" :rules="rules" label-width="100px">
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="1700px" height="800px" append-to-body>
+      <el-form ref="problemsMainFormRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
-          <el-col :span="12">
+          <el-col :span="8">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="区县名称" prop="qxmc">
@@ -83,7 +83,7 @@
             </el-row>
             <el-row>
               <el-col :span="12">
-                <el-form-item label="年度" prop="yearly">
+                <el-form-item label="年度" prop="nd">
                   <el-select v-model="form.yearly" placeholder="请选择年度" clearable filterable @change="getTargetList(form.yearly)">
                     <el-option v-for="dict in yearList" :key="dict.yearly" :label="dict.yearly" :value="dict.yearly" />
                   </el-select>
@@ -126,7 +126,7 @@
                           </span>
                         </template>
                       </el-table-column>
-                      <el-table-column prop="yearly" label="点位名称">
+                      <el-table-column prop="proPoint" label="点位名称">
                         <template #default="scope">
                           <span>
                             <template v-if="scope.row.edit">
@@ -145,6 +145,15 @@
                           </el-select>
                         </template>
                       </el-table-column>
+
+                      <el-table-column prop="geojson" label="空间数据">
+                        <template #default="scope">
+                          <span>
+                               {{ scope.row.geojson }}
+                          </span>
+                        </template>
+                      </el-table-column>
+
                       <el-table-column label="操作" width="130">
                         <template #default="scope">
                           <el-button v-if="!scope.row.edit" class="setDel" size="small" @click="editDemandValue(scope.$index)"> 编辑 </el-button>
@@ -159,7 +168,32 @@
               </el-col>
             </el-row>
           </el-col>
-          <el-col :span="12"></el-col>
+          <el-col :span="1">
+
+          </el-col>
+          <el-col :span="15">
+            <div class="map-container">
+              <div class="map_type">
+                <el-form ref="singleProblemRef" :model="singleForm"  label-width="80px">
+                  <el-form-item label="点位名称" prop="proPoint">
+                    <el-input v-model="singleForm.proPoint" placeholder="请输入点位名称" />
+                  </el-form-item>
+                  <el-form-item label="绘制类型" prop="indMappingIds">
+                    <el-select v-model="singleForm.type" placeholder="绘制类型" @change="drawGeometry()" clearable filterable>
+                      <el-option  label="点" value="point" />
+                      <el-option  label="线" value="polyline" />
+                      <el-option  label="面" value="polygon" />
+                    </el-select>
+                  </el-form-item>
+                  <div class="single-footer">
+                    <el-button type="primary" :disabled="singleForm.shape==''" @click="submitSingleForm">确 定</el-button>
+                    <el-button @click="cancelSingleForm">取 消</el-button>
+                  </div>
+                </el-form>
+              </div>
+              <iframe id="i_map" name="i_map" style="width: 100%;height: 100%"> </iframe>
+            </div>
+          </el-col>
         </el-row>
       </el-form>
       <template #footer>
@@ -176,9 +210,16 @@
 import { listProblemsMain, getProblemsMain, delProblemsMain, addProblemsMain, updateProblemsMain } from '@/api/cstj/problemsMain';
 import { ProblemsMainVO, ProblemsMainQuery, ProblemsMainForm } from '@/api/cstj/problemsMain/types';
 import { getIndicatorData, getIndicatorYears } from '@/api/cstj/assign';
+import Map from "@/views/map/Map.vue";
+import {myBridge} from "@/utils/map/Map";
+import CityGis from "@/utils/map/CityGis.Bridge";
+import {nextTick} from "vue";
+import {ClearSketchLayer, DrawGeometry} from "@/utils/map/AddLayer";
+import {SideThemeEnum} from "@/enums/SideThemeEnum";
+import {nanoid} from "nanoid";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+let bridge;
 const problemsMainList = ref<ProblemsMainVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
@@ -193,12 +234,21 @@ const yearList = ref<any[]>([]);
 
 const queryFormRef = ref<ElFormInstance>();
 const problemsMainFormRef = ref<ElFormInstance>();
+const singleProblemRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
 
+
+const singleForm = ref({
+  id:"",
+  proPoint: '',
+  type:'',
+  shape: ''
+})
+
 const initFormData: ProblemsMainForm = {
   id: undefined,
   probType: undefined,
@@ -208,6 +258,7 @@ const initFormData: ProblemsMainForm = {
   subType: undefined,
   problemsPointList: []
 };
+
 const data = reactive<PageData<ProblemsMainForm, ProblemsMainQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -275,6 +326,8 @@ const handleAdd = () => {
   reset();
   dialog.visible = true;
   dialog.title = '添加问题清单填报(改版)';
+
+  showMap()
 };
 
 /** 修改按钮操作 */
@@ -283,10 +336,42 @@ const handleUpdate = async (row?: ProblemsMainVO) => {
   const _id = row?.id || ids.value[0];
   const res = await getProblemsMain(_id);
   Object.assign(form.value, res.data);
+  form.value.problemsPointList.forEach((item)=>{
+    item.edit = false;
+  })
   dialog.visible = true;
   dialog.title = '修改问题清单填报(改版)';
+  showMap();
+
 };
 
+const showMap =()=>{
+  nextTick(() => {
+    myBridge.bridgeContent = bridge = new CityGis.Bridge({
+      id: 'i_map',
+      url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=light&type=3D', //建科发布
+      onReady: function () {
+        console.log('地图创建完成');
+      }
+    });
+    bridge.addEventListener((arg) => {
+      switch (arg.action) {
+        case 'DrawComplete':
+          debugger
+          let geometry = arg.data.geometry;
+          if(singleForm.value.type == "polygon"){
+            singleForm.value.shape = geometry.rings
+          }else if(singleForm.value.type == "polyline"){
+            singleForm.value.shape = geometry.paths
+          }else{
+            singleForm.value.shape = [geometry.x,geometry.y]
+          }
+          break
+      }
+    })
+  });
+}
+
 /** 提交按钮 */
 const submitForm = () => {
   problemsMainFormRef.value?.validate(async (valid: boolean) => {
@@ -326,9 +411,9 @@ const handleExport = () => {
 
 function addDemandValue() {
   if (form.value.problemsPointList) {
-    form.value.problemsPointList.push({ 'proPoint': '', 'indMappingIds': [], 'geojson': '', edit: true });
+    form.value.problemsPointList.push({'id':nanoid(),'proPoint': '', 'indMappingIds': [], 'geojson': '', edit: false });
   } else {
-    form.value.problemsPointList = [{ 'proPoint': '', 'indMappingIds': [], 'geojson': '', edit: true }];
+    form.value.problemsPointList = [{ 'id':nanoid(), 'proPoint': '', 'indMappingIds': [], 'geojson': '', edit: false }];
   }
 
   nextTick(() => {
@@ -337,17 +422,38 @@ function addDemandValue() {
 }
 
 function editDemandValue(index) {
-  if (form.value.problemsPointList[index].indMappingIds == '') {
-    proxy?.$modal.msgError('关联指标，请选择关联指标！');
-    return false;
-  }
-  if (form.value.problemsPointList[index].proPoint == '') {
-    proxy?.$modal.msgError('关联指标，请输入点位信息！');
-    return false;
+  if(!form.value.problemsPointList[index].edit){
+    debugger
+    singleForm.value.id = form.value.problemsPointList[index].id;
+    singleForm.value.proPoint = form.value.problemsPointList[index].proPoint;
+    if(form.value.problemsPointList[index]?.geojson){
+      if(form.value.problemsPointList[index]?.geojson.type == "Polygon"){
+        singleForm.value.type = "polygon";
+        singleForm.value.shape = form.value.problemsPointList[index].geojson.coordinates;
+      }else if(form.value.problemsPointList[index]?.geojson.type == "LineString"){
+        singleForm.value.type = "polyline";
+        singleForm.value.shape = form.value.problemsPointList[index].geojson.coordinates;
+      }else if(form.value.problemsPointList[index]?.geojson.type == "Point"){
+        singleForm.value.type = "point";
+        singleForm.value.shape = {x:form.value.problemsPointList[index]?.geojson.coordinates[0],y:form.value.problemsPointList[index]?.geojson.coordinates[1]};
+      }
+    }
+  }else{
+    if (form.value.problemsPointList[index].indMappingIds == '') {
+      proxy?.$modal.msgError('关联指标，请选择关联指标！');
+      return false;
+    }
+    if (form.value.problemsPointList[index].proPoint == '') {
+      proxy?.$modal.msgError('关联指标，请输入点位信息！');
+      return false;
+    }
   }
   // if (!checkstandardDataMappingList()) {
   //   return;
   // }
+
+
+
   form.value.problemsPointList[index].edit = !form.value.problemsPointList[index].edit;
 }
 
@@ -366,6 +472,44 @@ const getTargetList = async (year) => {
   targetList.value = res.data;
 };
 
+function drawGeometry(){
+  singleForm.value;
+  DrawGeometry({
+    type: singleForm.value.type,
+    status: true,
+  })
+}
+
+function toFullGeoJson(shape){
+  if(singleForm.value.type == "polygon"){
+    return {"type":"Polygon","crs":{"type":"name","properties":{"name":"EPSG:3857"}},"coordinates":shape}
+  }else if(singleForm.value.type == "polyline"){
+    return {"type":"LineString","crs":{"type":"name","properties":{"name":"EPSG:3857"}},"coordinates":shape}
+  }else if(singleForm.value.type == "point"){
+    return {"type":"Point","crs":{"type":"name","properties":{"name":"EPSG:3857"}},"coordinates":shape}
+  }
+}
+
+function submitSingleForm(){
+  form.value.problemsPointList.forEach((item)=>{
+    if(item.id == singleForm.value.id){
+      item.geojson = toFullGeoJson(singleForm.value.shape);
+    }
+  })
+  ClearSketchLayer()
+
+}
+
+
+function cancelSingleForm(){
+  singleForm.value = {
+    id:"",
+    proPoint: '',
+    type:'',
+    shape: ''
+  }
+  ClearSketchLayer()
+}
 onMounted(() => {
   getYears();
   getList();
@@ -413,4 +557,21 @@ onMounted(() => {
   height: 880px;
   overflow-y: auto;
 }
+.map-container{
+  width: 100%;
+  height:800px;
+  position: relative;
+  .map_type{
+    border-radius: 5px;
+    position: absolute;
+    width: 300px;
+    top: 5px;
+    left: 5px;
+    padding: 10px;
+    background-color: rgba(255,255,255,.7);
+  }
+}
+.single-footer{
+  float:right
+}
 </style>