日常任务包新增打卡追加逻辑、验证打卡次数 必须只能在当天时间内才能追加、编辑、下发处理

src/api/service/dailyTaskPackage.js

@@ -28,3 +28,18 @@ export function fetchIssueData(data) {
     data
   })
 }
+
+export function fetchTbZdxlFgdwBddSelectList(fgxlrwId) {
+  return request({
+    url: api + `/tbZdxlFgdwBddxlrw/selectUnSelectedVoListByFgxlrwId/${fgxlrwId}`,
+  })
+}
+
+// 追加列表
+export function fetchTbAppendList(data) {
+  return request({
+    url: api + '/tbZdxlFgdwBddxlrw/appendList',
+    method: 'POST',
+    data
+  })
+}

src/views/backOfficeSystem/service/taskPage/collectPage/AddFgFormDialog.vue

@@ -261,7 +261,7 @@ const submit = async () => {
   try {
     await formRef.value.validate()
 
-    if (form.value?.id) {
+    if (!form.value?.id) {
       await fetchTbZdxlFgdwBddSave(form.value)
     } else {
       await fetchTbZdxlFgdwBddUpdate(form.value)  

src/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/addCheckInCard.vue

@@ -0,0 +1,313 @@
+<script setup>
+import { computed, getCurrentInstance, reactive, ref, nextTick } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { fetchTbAppendList, fetchTbZdxlFgdwBddSelectList } from "@/api/service/dailyTaskPackage";
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  disabledIds: {
+    type: Array,
+    default: () => []
+  },
+  bddList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const formRef = ref(null)
+const emits = defineEmits(["update:modelValue", "change"]);
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emits("update:modelValue", val);
+  }
+})
+
+const selectList = ref([])
+const pageData = reactive({
+  tableConfiger: {
+    rowKey: 'bddId',
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: 'checkBox',
+    defaultSelectKeys: [],
+    loading: false
+  },
+  data: {},
+  tableData: [],
+  total: 0,
+  tableColumn: [
+    {
+      label: "必到点",
+      prop: "bddMc"
+    },
+    {
+      label: "打卡次数",
+      prop: "xlghDkcs",
+      showSolt:true
+    }
+  ]
+})
+
+// 打卡点验证规则
+const checkPointRules = [
+  { required: true, message: '请输入打卡次数', trigger: 'change' },
+  {
+    validator: (rule, value, callback) => {
+      if (value < 1) {
+        callback(new Error('打卡次数必须大于0'));
+      } else {
+        callback();
+      }
+    },
+    trigger: 'change'
+  }
+];
+
+const handleClickClose = () => {
+  visible.value = false;
+}
+
+const handleChooseDataChange = (event) => {
+  if (!Array.isArray(event)) return
+  selectList.value = [...event]
+
+  // 重新初始化验证
+  nextTick(() => {
+    if (formRef.value) {
+      formRef.value.clearValidate()
+    }
+  })
+}
+
+const selectable = (row) => {
+  return !props.disabledIds.has(row.bddId)
+}
+
+// 自定义验证
+const fieldErrors = ref({})
+
+// 判断行是否被选中
+const isRowSelected = (row) => {
+  return selectList.value.some(selected => selected.bddId === row.bddId)
+}
+
+// 检查指定索引是否有错误
+const hasError = (index) => {
+  const propPath = `tableData[${index}].xlghDkcs`
+  return !!fieldErrors.value[propPath]
+}
+
+// 获取指定索引的错误信息
+const getError = (index) => {
+  const propPath = `tableData[${index}].xlghDkcs`
+  return fieldErrors.value[propPath] || ''
+}
+
+// 验证单个字段（只为选中的行验证）
+const validateField = async (index) => {
+  const row = pageData.tableData[index]
+  if (!isRowSelected(row)) return true // 未选中的行不验证
+
+  const propPath = `tableData[${index}].xlghDkcs`
+  return new Promise((resolve) => {
+    formRef.value.validateField(propPath, (errorMessage) => {
+      fieldErrors.value[propPath] = errorMessage
+      console.log(errorMessage);
+      resolve(!errorMessage)
+    })
+  })
+}
+
+// 只为选中的行验证
+const validateSelectedCheckpoints = async () => {
+  if (!pageData.tableData) return true
+
+  const validations = pageData.tableData
+    .map((item, index) => isRowSelected(item) ? validateField(index) : Promise.resolve(true))
+
+  const results = await Promise.all(validations)
+  return results.every(result => result)
+}
+
+// // 防抖验证，避免频繁触发
+// const debouncedValidate = debounce((index) => {
+//   validateField(index)
+// }, 300)
+//
+// const handleInputChange = (index) => {
+//   debouncedValidate(index)
+// }
+//
+// // 监听数据变化，自动验证选中的行
+// watch(() => pageData.tableData,
+//   (newData) => {
+//     newData.forEach((row, index) => {
+//       if (isRowSelected(row)) {
+//         validateField(index)
+//       }
+//     })
+//   },
+//   { deep: true }
+// )
+
+const open = async (data) => {
+  selectList.value = [];
+  fieldErrors.value = {}
+  const res = await fetchTbZdxlFgdwBddSelectList(data?.id)
+
+  if (res && res.length > 0) {
+    pageData.tableData = res
+    pageData.tableConfiger.defaultSelectKeys = props.bddList?.map(i => {
+      if (i?.selected) return i?.bddId
+    })
+
+    pageData.data = data
+    visible.value = true;
+  } else {
+    proxy.$message({
+      type: "warning",
+      message: "所有必到点已全部下发任务"
+    })
+  }
+}
+
+const onSubmit = async () => {
+  if (selectList.value.length === 0) {
+    proxy.$message({
+      type: "warning",
+      message: "请选择打卡数据"
+    });
+    return
+  }
+
+
+  try {
+    const allValid = await validateSelectedCheckpoints()
+    if (!allValid) {
+      throw new Error('请完善选中的打卡点信息')
+    }
+    await formRef.value.validate()
+
+    await fetchTbAppendList({
+      bddList: selectList.value || [],
+      fgxlrwId: pageData.data?.id
+    })
+
+    emits("change", selectList.value)
+    visible.value = false;
+  } catch(error) {
+    console.log(error);
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <el-form ref="formRef" :model="pageData">
+    <el-dialog v-model="visible" @close="handleClickClose">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableConfiger="pageData.tableConfiger"
+        @chooseData="handleChooseDataChange"
+        :selectable="selectable"
+      >
+        <template #xlghDkcs="{ row, $index }">
+          <div class="validation-container">
+            <el-input-number
+              style="width: 30%;"
+              :placeholder="`输入打卡点${$index + 1}需打卡次数`"
+              clearable
+              min="0"
+              :disabled="!selectable(row)"
+              v-model="row.xlghDkcs"
+              :class="{ 'is-error': hasError($index) }"
+              @blur="validateField($index)"
+            />
+
+            <!-- 展示错误信息 -->
+            <span
+              v-if="hasError($index)"
+              class="error-message"
+            >
+              {{ getError($index) }}
+            </span>
+          </div>
+        </template>
+      </MyTable>
+
+      <!-- 用于处理验证-->
+      <div style="display: none">
+        <template v-for="(item, index) in pageData.tableData" :key="index">
+          <el-form-item v-if="isRowSelected(item)" :prop="`tableData[${index}].xlghDkcs`" :label="item?.bddMc" :rules="checkPointRules">
+            <el-input-number
+              style="width: 100%;"
+              :placeholder="`输入打卡点${index + 1}需打卡次数`"
+              clearable
+              v-model="item.xlghDkcs"
+            />
+          </el-form-item>
+        </template>
+      </div>
+
+      <template #footer>
+        <el-button @click="handleClickClose">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </el-form>
+</template>
+
+<style scoped lang="scss">
+::v-deep {
+  .el-checkbox__input.is-disabled .el-checkbox__inner,
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: var(--el-checkbox-checked-bg-color);
+    border-color: var(--el-checkbox-checked-input-border-color);
+  }
+
+  .el-checkbox__input.is-disabled .el-checkbox__inner,
+  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border: 1px solid var(--el-checkbox-checked-icon-color);
+    border-left: 0;
+    border-top: 0;
+  }
+}
+
+.validation-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  min-height: 60px; /* 预留错误信息空间 */
+}
+
+.error-message {
+  color: #f56c6c;
+  font-size: 12px;
+  line-height: 1;
+  padding: 2px 0;
+  display: block;
+}
+
+.is-error .el-input-number__inner {
+  border-color: #f56c6c;
+}
+
+/* 确保表格行高度适应错误信息 */
+.el-table .cell {
+  min-height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

src/views/backOfficeSystem/service/taskPage/dailyTaskPackage/editAddFormDialog.vue

@@ -55,12 +55,12 @@
           :model="form"
           :rules="rules"
           :inline="true"
-          :disabled="infoActive"
         >
           <el-form-item prop="xlghSc" label="巡逻时长:">
             <el-input-number
               style="width: 80%;"
               min="0"
+              :disabled="disabled"
               placeholder="请填写巡逻时长"
               v-model="form.xlghSc"
             ></el-input-number>
@@ -70,6 +70,7 @@
             <el-input
               placeholder="请填写盘查人员"
               clearable
+              :disabled="disabled"
               v-model="form.xlghPcRy"
             ></el-input>
           </el-form-item>
@@ -77,6 +78,7 @@
             <el-input
               placeholder="请填写盘查车辆"
               clearable
+              :disabled="disabled"
               v-model="form.xlghPcCl"
             ></el-input>
           </el-form-item>
@@ -84,27 +86,35 @@
             <el-input-number
               style="width: 80%;"
               min="0"
+              :disabled="disabled"
               placeholder="请填写巡逻里程"
               v-model="form.xlghXllc"
             ></el-input-number>
             <el-tag size="small" type="warning">公里</el-tag>
           </el-form-item>
-          <el-form-item prop="xfbbName" label="下发巡组:">
+          <el-form-item label="下发巡组:">
             <el-input
               placeholder="请填写下发巡组"
               clearable
+              :disabled="disabled"
               v-model="form.xfbbName"
               @click="visible = true"
               readonly
             ></el-input>
           </el-form-item>
 
+          <div v-if="form?.rwZt !== '01'" style="flex: 1; display: flex; justify-content: flex-end;">
+            <el-button :disabled="isButtonDisabled" @click="checkInCardOpen">追加打卡</el-button>
+          </div>
+
           <el-row style="width:100%;">
             <el-col>
               <MyTable
                 :tableData="form?.bddList"
                 :tableColumn="pageData.tableColumn"
                 :tableConfiger="pageData.tableConfiger"
+                @chooseData="handleChooseDataChange"
+                :selectable="selectable"
               >
                 <template #xlghDkcs="{ row, $index }">
                   <div class="validation-container">
@@ -113,6 +123,7 @@
                       :placeholder="`输入打卡点${$index + 1}需打卡次数`"
                       clearable
                       min="0"
+                      :disabled="!selectable(row)"
                       v-model="row.xlghDkcs"
                       :class="{ 'is-error': hasError($index) }"
                       @blur="validateField($index)"
@@ -147,32 +158,39 @@
     </div>
 
     <distribute-patrol-team-dialog v-model="visible" @selection-change="handleChange" />
+    <add-check-in-card ref="addCheckInCardRef" :disabledIds="disabledIds" :bddList="form?.bddList" v-model="checkInCardVisible" @change="handleSelectChange" />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance, computed } from "vue";
+import { ref, reactive, getCurrentInstance, computed, watch } from "vue";
 import { updateData } from "@/api/service/dailyTaskPackage";
 import DictTag from "@/components/DictTag/index.vue";
 import MyTable from "@/components/aboutTable/MyTable.vue";
 import DistributePatrolTeamDialog
   from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/DistributePatrolTeamDialog.vue";
+import AddCheckInCard from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/addCheckInCard.vue"
 const { proxy } = getCurrentInstance();
 const { D_ZDXL_FGXLRW_YJDJ } = proxy.$dict("D_ZDXL_FGXLRW_YJDJ");
 const btnLoading = ref(false); //按钮截流
 const title = ref("修改");
 const formRef = ref(null);
+const addCheckInCardRef = ref(null)
 const infoActive = ref(true);
 const visible = ref(false);
+const checkInCardVisible = ref(false)
 
 const pageData = reactive({
   tableConfiger: {
+    rowKey: 'bddId',
     rowHieght: 61,
     haveControls: false,
     showSelectType: 'checkBox',
+    defaultSelectKeys: [],
     loading: false
   },
   total: 0,
+  selectCheckList: [],
   tableColumn: [
     {
       label: "必到点",
@@ -181,7 +199,7 @@ const pageData = reactive({
     {
       label: "打卡次数",
       prop: "xlghDkcs",
-      showSolt:true
+      showSolt: true
     },
   ]
 })
@@ -210,6 +228,21 @@ const form = ref({
   bddList: [{ xlghDkcs: 1 }, { xlghDkcs: "" }]
 });
 
+const isButtonDisabled = computed(() => {
+  // const target = new Date('2025-09-18')
+  const target = new Date(form.value?.rwRq)
+  const now = new Date()
+
+  // 只比较日期，忽略时间
+  return target.setHours(0, 0, 0, 0) < now.setHours(0, 0, 0, 0)
+})
+
+const disabled = computed(() => {
+  // const targetDate = new Date(form.value?.rwRq);
+  // const today = new Date();
+  return (form.value?.rwZt === '03' || isButtonDisabled.value);
+})
+
 // 打卡点验证规则
 const checkPointRules = [
   { required: true, message: '请输入打卡次数', trigger: 'change' },
@@ -255,13 +288,6 @@ const rules = reactive({
       trigger: "change"
     }
   ],
-  xfbbName: [
-    {
-      required: true,
-      message: "请填写下发巡组",
-      trigger: "change"
-    }
-  ],
 });
 
 //新增
@@ -272,7 +298,11 @@ function open(row = {}, type) {
     item.index = index // 直接添加index属性
   })
 
-  title.value = "编辑信息";
+  pageData.tableConfiger.defaultSelectKeys = form.value?.bddList?.map(i => {
+    if (i?.selected) return i?.bddId
+  })
+
+  title.value = type === 'view' ? '查看详情' : "编辑信息";
   dialogFormVisible.value = true;
 }
 
@@ -288,6 +318,43 @@ const handleChange = (val) => {
   form.value.xfbbName = val?.xfbbName;
 }
 
+const selectList = ref([])
+const handleChooseDataChange = (event) => {
+  selectList.value = [...event]
+}
+
+// 保存原始bddList的ID用于对比
+const disabledIds = ref(new Set())
+
+const updateDisabledIds = () => {
+  disabledIds.value = new Set(form.value?.bddList?.map(i => i.bddId))
+}
+
+const selectable = (row) => {
+  return !disabledIds.value.has(row.bddId)
+}
+
+const handleSelectChange = (selection) => {
+  pageData.selectCheckList = selection
+
+  // 添加新项目
+  const newItems = selection.filter(item => !disabledIds.value.has(item.bddId))
+  form.value.bddList = [...form.value.bddList, ...newItems]
+
+  // 更新禁用ID集合
+  updateDisabledIds()
+  emits("ok", false)
+}
+
+// 监听form.bddList的变化，确保禁用集合同步更新
+watch(() => form.value.bddList, () => {
+  updateDisabledIds()
+}, { deep: true })
+
+const checkInCardOpen = () => {
+  addCheckInCardRef.value?.open(form.value)
+}
+
 const fieldErrors = ref({})
 
 // 检查指定索引是否有错误
@@ -313,11 +380,10 @@ const validateField = async (propPath) => {
 }
 
 const validateAllCheckpoints = async () => {
-  // if (!form.value.bddList) return true
+  if (!form.value.bddList) return true
-  
+  const validations = form.value?.bddList?.map((_, index) =>
-  const validations = form.value.bddList.map((_, index) => 
     validateField(`bddList[${index}].xlghDkcs`)
-  )
+  ) || []
 
   const results = await Promise.all(validations)
   return results.every(result => result)
@@ -325,12 +391,11 @@ const validateAllCheckpoints = async () => {
 
 //提交
 const submit = async () => {
-  console.log(await validateAllCheckpoints())
-  console.log(fieldErrors.value)
   try {
+    await validateAllCheckpoints()
     await formRef.value.validate()
 
-    await updateData(form.value)
+    await updateData({ ...form.value, bddList: selectList.value || [] })
     proxy.$message({
       type: "success",
       message: "修改成功"
@@ -352,6 +417,25 @@ defineExpose({ open })
 @import "~@/assets/css/element-plus.scss";
 
 .dialog {
+  ::v-deep {
+    .el-table__header-wrapper .el-checkbox {
+      display: none;
+    }
+
+    .el-checkbox__input.is-disabled .el-checkbox__inner,
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: var(--el-checkbox-checked-bg-color);
+      border-color: var(--el-checkbox-checked-input-border-color);
+    }
+
+    .el-checkbox__input.is-disabled .el-checkbox__inner,
+    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+      border: 1px solid var(--el-checkbox-checked-icon-color);
+      border-left: 0;
+      border-top: 0;
+    }
+  }
+
   .dialogWrapper {
     margin: 20px 20px 0 20px;
 

src/views/backOfficeSystem/service/taskPage/dailyTaskPackage/index.vue

@@ -111,7 +111,12 @@ const pageData = reactive({
   ]
 })
 
-const selectable = (row) => row?.rwZt === '01' || row?.rwZt === '02'
+const selectable = (row) => {
+  const targetDate = new Date(row?.rwRq);
+  const today = new Date();
+  return targetDate.toDateString() === today.toDateString() && (row?.rwZt === '01' || row?.rwZt === '02');
+  // return row?.rwZt === "01" || row?.rwZt === "02";
+}
 
 const editAddFormRef = ref(null);
 const addEdit = (row, type) => {
@@ -206,16 +211,15 @@ const getListData = async (params = {}) => {
       ...pageData.pageConfiger,
       ...params
     })
-
     pageData.tableData = res?.records?.map((item) => ({
       ...item,
-      xfxz: item?.xfbb?.fzrXm ? `${item?.xfbb?.fzrXm}警组` : '-',
+      xfxz: item?.xfbb?.fzrXm ? `${item?.xfbb?.fzrXm}警组` : '',
-      bddListLabel: item?.bddList?.map((i, idx) => (`卡点${idx + 1}-${i?.xlghDkcs}次`))?.join(',') || '-',
+      bddListLabel: item?.bddList?.map((i, idx) => (`卡点${idx + 1}-${i?.xlghDkcs}次`))?.join(',') || '',
-      fgJqtjXsLabel: JSON.parse(item?.fgJqtjXs)?.filter(i => (i?.count !== 0))?.map(i => (`${i?.hour}小时-${i?.count}起`))?.join('、') || '-',
+      fgJqtjXsLabel: JSON.parse(item?.fgJqtjXs)?.filter(i => (i?.count !== 0))?.map(i => (`${i?.hour}小时-${i?.count}起`))?.join('、') || '',
       fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx')
     })) || []
-    // pageData.tableData[0].rwZt = '03'
+    // pageData.tableData[2].rwRq = '2025-09-18'
-    console.log(pageData.tableData);
+    // pageData.tableData[0].rwZt = '01'
     pageData.total = res.total;
     pageData.tableConfiger.loading = false;
   } catch (err) {
@@ -233,11 +237,18 @@ const changeSize = (val) => {
   getListData();
 }
 
-const handleFilter = () => {
+const handleFilter = (reset = true) => {
-  pageData.pageConfiger.pageCurrent = 1;
+  // reset 是否重置 pageCurrent = 1
+  if (reset) pageData.pageConfiger.pageCurrent = 1;
   getListData();
 }
 
+const isVisibleDel = (row = {}) => {
+  const targetDate = new Date(row?.rwRq);
+  const today = new Date();
+  return targetDate.toDateString() === today.toDateString() && (row?.rwZt === '01' || row?.rwZt === '02');
+}
+
 // 删除的方法
 //批量删除数据
 const batchDelete = async (id) => {
@@ -323,9 +334,9 @@ onMounted(() => {
         </template>
         <!-- 操作 -->
         <template #controls="{ row }">
-          <el-button size="small" @click="addEdit(row, 'del')">编辑</el-button>
+          <el-button size="small" v-if="isVisibleDel(row)" @click="addEdit(row, 'del')">编辑</el-button>
           <el-button size="small" @click="addEdit(row, 'view')">查看详情</el-button>
-          <el-button size="small" v-if="row?.rwZt === '01' || row?.rwZt === '02'" @click="handleIssue([row.id])">下发</el-button>
+          <el-button size="small" v-if="isVisibleDel(row)" @click="handleIssue([row.id])">下发</el-button>
 <!--          <el-button size="small" @click="delDictItem([row.id])">删除</el-button>-->
         </template>
       </MyTable>

src/views/backOfficeSystem/service/taskPage/taskProgress/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import GdMap from "@/components/Map/GdMap/index.vue"
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watchEffect, defineAsyncComponent } from "vue";
 import { fetchTbZdxlFgdwSelectList, fetchTbZdxlFgxlrwSelectList } from "@/api/service/taskProgress";
 import emitter from "@/utils/eventBus";
 import TaskDetailsDialog from "@/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue";
@@ -16,12 +16,11 @@ const data = reactive({
 const fetchTaskList = async () => {
   if (!data.currentDate) return
   // const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
-  const res = await fetchTbZdxlFgxlrwSelectList();
+  const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
+  emitter.emit("deletePointArea", "zdxl_fzyc")
   if (res && res?.length > 0) {
     data.list = res;
 
-    emitter.emit("deletePointArea", "zdxl_fzyc")
-
     let cc = []
     const list = data.list?.map((el, index) => {
       let centerPoint = [el.zxX,el.zxY]
@@ -34,9 +33,12 @@ const fetchTaskList = async () => {
 
     emitter.emit("echoPlane", { fontColor:'red',coords: list, type:'rectangle', flag:'zdxl_fzyc', color:'rgba(2,20,51,0.5)', linecolor:'#ee0629'})
     emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
+  } else {
+    data.list = [];
   }
 }
 
+const info = ref([])
 const getData = async () => {
   const res = await fetchTbZdxlFgdwSelectList()
   if (res && res?.length > 0) {
@@ -52,9 +54,12 @@ const getData = async () => {
       return obj;
     })
 
+    info.value = list
     emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: list, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
     emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
   }
+
+  await fetchTaskList()
 }
 
 const handleChange = (val) => {
@@ -66,13 +71,16 @@ const handleItem = (item) => {
   emitter.emit("setMapCenter", { location: [zxX, zxY], zoomLevel: 14 });
 }
 
-onMounted(() => {
+const handleUpdate = () => {
+  emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: info.value, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+}
+
+onMounted(async () => {
   // 设置当前日期
   const today = new Date();
   data.currentDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
 
-  getData()
+  await getData()
-  fetchTaskList()
 
   emitter.on("showFzycInfo", (data) => {
     taskDetailsRef.value?.open(data?.info)
@@ -93,12 +101,12 @@ onMounted(() => {
         <div class="search">
           <el-date-picker
             v-model="data.currentDate"
-            placeholder="搜索"
+            placeholder="请选择日期"
             type="date"
             @change="handleChange"
             value-format="YYYY-MM-DD"
           />
-          <el-button @click="handleChange">查询</el-button>
+<!--          <el-button @click="handleChange">查询</el-button>-->
         </div>
 
         <div class="listWrapper">
@@ -106,13 +114,13 @@ onMounted(() => {
             <div class="item" @click="handleItem(item)">
               <div>方格名称：{{ item?.fgMc }}</div>
 <!--              <div>必到点名称：</div>-->
-              <div style="display: flex;align-items: center;">
+              <div>
                 <div>打卡进度：</div>
-                <el-progress type="circle" width="50" :percentage="item?.bddAllProgress || 0" />
+                <el-progress width="50" :percentage="item?.bddAllProgress || 0" />
               </div>
-              <div style="display: flex;align-items: center;">
+              <div>
                 <div>巡逻里程进度：</div>
-                <el-progress type="circle" width="50" color="#e6a23c" :percentage="item?.xllcProgress || 0" />
+                <el-progress width="50" color="#e6a23c" :percentage="item?.bddAllProgress || 0" />
               </div>
             </div>
           </template>
@@ -120,7 +128,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <task-details-dialog ref="taskDetailsRef" v-model="visible" />
+    <task-details-dialog ref="taskDetailsRef" v-model="visible" @update="handleUpdate" />
   </div>
 </template>
 
@@ -146,7 +154,7 @@ onMounted(() => {
       padding: 10px;
       border: 1px solid #24b6dd;
       width: 100%;
-      //height: 120px;
+      height: auto;
       margin-bottom: 10px;
       cursor: pointer;
 

src/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue

@@ -8,7 +8,6 @@
             v-if="!infoActive"
             type="primary"
             size="small"
-            @click="submit"
             :loading="btnLoading"
           >保存</el-button
           >
@@ -22,11 +21,7 @@
             <div :class="['item', { 'active': current === index }]" @click="handleItem(index)">{{ item?.bddMc }}</div>
           </template>
         </div>
-        <Suspense>
+        <div id="viewer" ref="viewerRef" style="width: 100%; height: 100%;background-color: aliceblue;"></div>
-          <template #default>
-            <GbMap mapid="mapDetail" />
-          </template>
-        </Suspense>
       </div>
     </div>
 
@@ -34,9 +29,10 @@
 </template>
 
 <script setup>
-import { ref, getCurrentInstance, computed, defineAsyncComponent, onUnmounted } from "vue";
+import { ref, getCurrentInstance, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
 import { fetchSelectListByBddxlrwId } from "@/api/service/taskProgress";
 import emitter from "@/utils/eventBus";
+import { MapUtil } from "@/components/Map/GdMap/mapUtil";
 const { proxy } = getCurrentInstance();
 const btnLoading = ref(false); //按钮截流
 const title = ref("修改");
@@ -44,7 +40,6 @@ const formRef = ref(null);
 const infoActive = ref(true);
 const current = ref(0)
 
-const GbMap = ref(null);
 //级联选择器配置
 const props = defineProps({
   modelValue: {
@@ -53,7 +48,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(['update:modelValue', 'ok']);
+const emits = defineEmits(['update:modelValue', 'ok', 'update']);
 
 const formData = computed(() => form.value?.bddList[current.value])
 const dialogFormVisible = computed({
@@ -61,9 +56,6 @@ const dialogFormVisible = computed({
     return props.modelValue;
   },
   set(val) {
-    if (!val) {
-      location.reload();
-    }
     emits("update:modelValue", val);
   }
 })
@@ -73,29 +65,116 @@ const form = ref({
   bddList: []
 });
 
+
+let viewerMap = null
+const viewerRef = ref(null); // 添加 ref
+const mapUtil = ref(null)
+const initMap = () => {
+  nextTick(() => {
+    viewerMap = new EliMap({
+      id: viewerRef.value.id,
+      crs: "EPSG:3857",
+      style: {
+        glyphs: "./fonts/{fontstack}/{range}.pbf",
+        center: [104.41361653448905, 31.127827898122767],
+        zoom: 10
+      },
+      transformRequest: (url) => {
+        if (url.indexOf("TileMatrix=") != -1) {
+          const arr = url.split("TileMatrix=");
+          const arr1 = arr[1].split("&");
+          const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]
+            }`;
+
+        }
+      }
+    });
+
+    viewerMap.mapboxGLMap.on("load", () => {
+      viewerMap.addGaudLayer({
+        url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+      })
+    });
+    console.log(viewerMap)
+    // mapUtil.value = new MapUtil(viewerMap);
+  })
+}
+
+
+
+// 监听对话框显示状态
+watch(dialogFormVisible, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      initMap();
+    });
+  }
+});
+
+const setMapCenter = (location, zoomLevel) => {
+  viewerMap.mapboxGLMap.setCenter(location);
+  viewerMap.mapboxGLMap.setZoom(zoomLevel);
+};
+
+  const echoPlane = (res) => {
+    let { type , coords ,fontColor, text = '' ,radius = 0, isclear ,flag ,id = 1 , color , linecolor} = res;
+    if(!coords) return;
+    // if(isclear) _that.removeElement(flag)
+    // if(!_that._self[flag]) _that._self[flag] = [];
+    let color1 = color ? color : 'rgba(29,237,245,0.6)'
+    let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
+    let style = {
+      color:color1,
+      outLineColor:linecolor1,
+      outLineWidth:2,
+      highlightColor:'rgba(255,0,0,0.5)',
+      labelOption:{
+        pixelOffset:[0,0],
+        allShow:true,
+        fontColor:fontColor ? fontColor:'#ffffff',
+        fontSize:'12px'
+      }
+    }
+    let maker ;
+    // 矩形
+    if(type == 'rectangle') maker = map.createRectangle(coords,style);
+    
+  }
+
+  const makerSki = (res) => {
+    const { coords, icon } = res
+    if (!coords) return;
+    coords.forEach(item => {
+      
+      const el = document.createElement("img");
+      el.src = icon;
+      el.style.width = "25px";
+      const marker = viewerMap.Marker(el,[item.jd,item.wd],{anchor:'bottom', offset:[0,0]})
+    });
+  };
+
 const getData = async () => {
   const { id = "" } = formData.value
   const res = await fetchSelectListByBddxlrwId({ bddxlrwId: id })
   if (res && res?.length > 0) {
-    console.log(res);
-    emitter.emit("deletePointArea", "fgxlrw")
-
     const { zxX, zxY, x1, x2, y1, y2, id, fgMc } = form.value
     let centerPoint = [zxX, zxY]
     let position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
     let text = fgMc
     let obj = [{ position: position, text, id: id ,userData: form.value}]
-    // const list = data.list?.map((el, index) => {
-    //   let centerPoint = [el.zxX,el.zxY]
-    //   if(index == 0) cc = centerPoint;
-    //   let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
-    //   let text = el.mc
-    //   let obj = { position: position, text, id: el.id ,userData: el}
-    //   return obj;
-    // })
 
-    emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'fgxlrw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+    // 方格
-    emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
+    echoPlane({ fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'fgxlrw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+    setMapCenter(centerPoint, 14);
+
+    const dkJs = res?.map(i => ({ jd: i?.dkJsJd + 0.04, wd: i?.dkJsWd + 0.08 }))
+    const dkKs = res?.map((i, k) => ({ jd: i?.dkKsJd * k, wd: i?.dkKsWd * k }))
+
+    // 标注
+    makerSki({
+      coords: [...dkKs, ...dkJs],
+      icon: require("@/assets/lz/dw.png"),
+    })
   }
 }
 
@@ -106,12 +185,13 @@ const handleItem = (index) => {
 
 //新增
 function open(row = {}, type) {
-  GbMap.value = defineAsyncComponent(() => import("@/components/Map/GdMap/index.vue"))
+  nextTick(() => {
-  infoActive.value = !type;
+    infoActive.value = !type;
-  form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
+    form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
-  title.value = "任务详情";
+    title.value = "任务详情";
-  getData()
+    getData()
-  dialogFormVisible.value = true;
+    dialogFormVisible.value = true;
+  })
 }
 
 //关闭弹窗
@@ -120,23 +200,23 @@ function close() {
   dialogFormVisible.value = false;
 }
 
-//提交
+// //提交
-const submit = async () => {
+// const submit = async () => {
-  try {
+//   try {
-    await formRef.value.validate()
+//     await formRef.value.validate()
 
-    await updateData(form.value)
+//     await updateData(form.value)
-    proxy.$message({
+//     proxy.$message({
-      type: "success",
+//       type: "success",
-      message: "修改成功"
+//       message: "修改成功"
-    });
+//     });
-    dialogFormVisible.value = false;
+//     dialogFormVisible.value = false;
-    emits("ok")
+//     emits("ok")
 
-  } catch (error) {
+//   } catch (error) {
-    console.log(error);
+//     console.log(error);
-  }
+//   }
-}
+// }
 
 defineExpose({ open })
 </script>
@@ -146,6 +226,11 @@ defineExpose({ open })
 @import "~@/assets/css/element-plus.scss";
 
 .dialog {
+  #viewer {
+    height: 100vh;
+    width: 100vw;
+  }
+
   .dialogWrapper {
     height: calc(100vh - 256px);
     margin: 20px 20px 0 20px;