必到点采集模块并且展示地图方格 新增任务进度展示所有方格和任务处理

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

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ title }}</span>
+        <div>
+          <el-button
+            v-if="!infoActive"
+            type="primary"
+            size="small"
+            @click="submit"
+            :loading="btnLoading"
+          >保存</el-button
+          >
+          <el-button size="small" @click="close">关闭</el-button>
+        </div>
+      </div>
+
+      <div class="dialogWrapper">
+        <div class="tabsWrapper">
+          <template v-for="(item, index) in form?.bddList" :key="index">
+            <div :class="['item', { 'active': current === index }]" @click="handleItem(index)">{{ item?.bddMc }}</div>
+          </template>
+        </div>
+        <Suspense>
+          <template #default>
+            <GbMap mapid="mapDetail" />
+          </template>
+        </Suspense>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, computed, defineAsyncComponent, onUnmounted } from "vue";
+import { fetchSelectListByBddxlrwId } from "@/api/service/taskProgress";
+import emitter from "@/utils/eventBus";
+const { proxy } = getCurrentInstance();
+const btnLoading = ref(false); //按钮截流
+const title = ref("修改");
+const formRef = ref(null);
+const infoActive = ref(true);
+const current = ref(0)
+
+const GbMap = ref(null);
+//级联选择器配置
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emits = defineEmits(['update:modelValue', 'ok']);
+
+const formData = computed(() => form.value?.bddList[current.value])
+const dialogFormVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    if (!val) {
+      location.reload();
+    }
+    emits("update:modelValue", val);
+  }
+})
+
+//表单数据
+const form = ref({
+  bddList: []
+});
+
+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 });
+  }
+}
+
+const handleItem = (index) => {
+  current.value = index;
+  getData();
+}
+
+//新增
+function open(row = {}, type) {
+  GbMap.value = defineAsyncComponent(() => import("@/components/Map/GdMap/index.vue"))
+  infoActive.value = !type;
+  form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
+  title.value = "任务详情";
+  getData()
+  dialogFormVisible.value = true;
+}
+
+//关闭弹窗
+function close() {
+  formRef.value?.resetFields();
+  dialogFormVisible.value = false;
+}
+
+//提交
+const submit = async () => {
+  try {
+    await formRef.value.validate()
+
+    await updateData(form.value)
+    proxy.$message({
+      type: "success",
+      message: "修改成功"
+    });
+    dialogFormVisible.value = false;
+    emits("ok")
+
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.dialog {
+  .dialogWrapper {
+    height: calc(100vh - 256px);
+    margin: 20px 20px 0 20px;
+
+    .el-form--inline {
+      padding: 0 0 0rem 0;
+    }
+
+    .tabsWrapper {
+      display: flex;
+      margin-bottom: 0.53vw;
+      overflow-x: auto;
+      .item {
+        cursor: pointer;
+        padding: 0.27vw 0.53vw;
+        width: fit-content;
+        flex-shrink: 0;
+        border: 1px solid #EDEDED;
+        border-radius: 5px;
+        margin-right: 0.53vw;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .active {
+        color: #24b6dd;
+        border: 1px solid #24b6dd !important;
+      }
+    }
+  }
+}
+
+.label {
+  margin-bottom: 1rem;
+}
+</style>