feat: save

src/app/fire/store/fire.ts

@@ -48,6 +48,8 @@ export type Fire = {
   updateTime: string;
   isDelete?: number;
 
+  mapUrl: string;
+
   field1: string;
   field2: string;
   field3: string;

src/app/fire/view/dispatch/editFire copy.vue

@@ -0,0 +1,325 @@
+<template>
+  <el-form ref="form" label-width="106px" class="camera-from">
+    <div class="def-select-map" ref="mapEl"></div>
+    <div class="el-form-item">
+      <el-col :span="12">
+        <el-form-item label="项目编号" class="mandatory">
+          <el-input
+            v-model="bindFire.projectSn"
+            maxlength="18"
+            placeholder="请输入项目编号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="起火对象" class="mandatory">
+          <el-input
+            v-model="bindFire.projectName"
+            maxlength="50"
+            placeholder="请输入起火对象"
+          />
+        </el-form-item>
+      </el-col>
+    </div>
+    <el-form-item label="详细地址" class="mandatory asdasd">
+      <!-- <el-input
+        v-model="bindFire.projectAddress"
+        maxlength="50"
+        placeholder="请输入详细地址"
+      /> -->
+      <el-input
+        v-model="bindFire.projectAddress"
+        placeholder="输入名称搜索"
+        clearable
+        disabled
+      >
+        <template #append>
+          <el-button :icon="Search" @click="searchAMapAddress" />
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item label="勘验地址">
+      <el-input v-model="bindFire.field1" maxlength="50" placeholder="请输入勘验地址" />
+    </el-form-item>
+    <el-form-item label="起火场所" class="mandatory">
+      <el-cascader
+        style="width: 100%"
+        v-model="projectSite"
+        placeholder="起火场所"
+        :options="place"
+        :props="{ expandTrigger: 'hover' }"
+      />
+    </el-form-item>
+    <!-- <el-form-item label="全宗名称">
+      <el-input v-model="bindFire.field2" maxlength="50" placeholder="请输入全宗名称" />
+    </el-form-item> -->
+
+    <div class="el-form-item">
+      <el-col :span="12">
+        <el-form-item label="勘验单位" class="mandatory">
+          <companySelect v-model="bindFire.deptId" hideAll :notUpdate="true" disabled />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="勘验人员" class="mandatory">
+          <el-input
+            v-model="bindFire.organizerUsers"
+            maxlength="50"
+            placeholder="请输入勘验人员"
+          />
+        </el-form-item>
+      </el-col>
+    </div>
+    <div class="el-form-item">
+      <!-- <el-col :span="12">
+        <el-form-item label="勘验人姓名">
+          <el-input
+            v-model="bindFire.field3"
+            maxlength="18"
+            placeholder="请输入勘验人姓名"
+          />
+        </el-form-item>
+      </el-col> -->
+      <el-col :span="12">
+        <el-form-item label="勘验人职务">
+          <el-input
+            v-model="bindFire.field4"
+            maxlength="50"
+            placeholder="请输入勘验人职务"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="火灾原因" class="mandatory">
+          <el-cascader
+            style="width: 100%"
+            v-model="fireReason"
+            placeholder="火灾原因："
+            :options="reason"
+            :props="{ expandTrigger: 'hover' }"
+          />
+        </el-form-item>
+      </el-col>
+    </div>
+
+    <div class="el-form-item">
+      <el-col :span="12">
+        <el-form-item label="事故日期" class="mandatory" placeholder="请选择事故日期">
+          <el-date-picker
+            type="date"
+            v-model="accidentDate"
+            style="width: 100%"
+            :disabled-date="(date) => date.getTime() > new Date().getTime()"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="大屏显示" class="mandatory">
+          <el-switch v-model="bindFire.mapShow" :disabled="!bindFire.latlng" />
+        </el-form-item>
+      </el-col>
+    </div>
+
+    <div class="el-form-item">
+      <el-col :span="12">
+        <el-form-item label="事件分类">
+          <el-input
+            v-model="bindFire.field5"
+            maxlength="18"
+            placeholder="请输入事件分类"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="分类登记">
+          <el-input
+            v-model="bindFire.field6"
+            maxlength="50"
+            placeholder="请输入分类登记"
+          />
+        </el-form-item>
+      </el-col>
+    </div>
+
+    <div class="el-form-item">
+      <el-col :span="12">
+        <el-form-item label="天气情况">
+          <el-input
+            v-model="bindFire.field7"
+            placeholder="请输入天气情况"
+            show-word-limit
+            maxlength="100"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item
+          label="勘验起止时间"
+          class="mandatory"
+          placeholder="请选择勘验起止时间"
+        >
+          <el-date-picker
+            v-model="f8"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :disabled-date="(date) => date.getTime() > new Date().getTime()"
+          />
+          <!-- <el-date-picker
+            type="date"
+            v-model="f8"
+            style="width: 100%"
+            :disabled-date="(date) => date.getTime() > new Date().getTime()"
+          /> -->
+        </el-form-item>
+      </el-col>
+    </div>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import companySelect from "@/components/company-select/index.vue";
+import { ref, watchEffect } from "vue";
+import { Fire, setFire, addFire } from "@/app/fire/store/fire";
+import { reason, place } from "@/app/fire/constant/fire";
+import { ElMessage } from "element-plus";
+import { dateFormat, debounce } from "@/util";
+import { genCascaderValue, getCode } from "@/helper/cascader";
+import { QuiskExpose } from "@/helper/mount";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { user } from "@/store/user";
+import { Search } from "@element-plus/icons-vue";
+import { selectMapImage } from "@/view/case/quisk";
+
+const props = defineProps<{ fire?: Fire }>();
+
+const bindFire = ref<Fire>(
+  props.fire
+    ? { ...props.fire }
+    : ({
+        deptId: user.value.info.deptId,
+      } as Fire)
+);
+
+const fireReason = genCascaderValue(bindFire, "fireReason");
+const projectSite = genCascaderValue(bindFire, "projectSite");
+const accidentDate = ref(
+  bindFire.value.accidentDate ? new Date(bindFire.value.accidentDate) : new Date()
+);
+
+const f8s = [new Date(), new Date()];
+if (bindFire.value.field8) {
+  const s = bindFire.value.field8.split("至");
+  console.log(s);
+  if (s.length > 1) {
+    f8s[0] = new Date(s[0]);
+    f8s[1] = new Date(s[1]);
+  } else {
+    f8s[0] = new Date(s[0]);
+  }
+}
+
+const f8 = ref(f8s);
+const searchAMapAddress = async () => {
+  const data = await selectMapImage({});
+  if (!data?.search) return;
+
+  bindFire.value.projectAddress = data.search.text;
+  bindFire.value.latlng = bindFire.value.latAndLong = `${data.search.lat},${data.search.lng}`;
+  if (!data.search.text) {
+    bindFire.value.projectAddress = bindFire.value.latAndLong;
+  }
+};
+
+defineExpose<QuiskExpose>({
+  async submit() {
+    if (!bindFire.value.projectAddress || !bindFire.value.projectAddress.trim()) {
+      ElMessage.error("详细地址不能为空！");
+      throw "详细地址不能为空！";
+    } else if (!bindFire.value.projectSn || !bindFire.value.projectSn.trim()) {
+      ElMessage.error("项目编号不能为空！");
+      throw "项目编号不能为空！";
+    } else if (!bindFire.value.projectName || !bindFire.value.projectName.trim()) {
+      ElMessage.error("起火对象不能为空！");
+      throw "起火对象不能为空！";
+    } else if (!bindFire.value.projectSite || !bindFire.value.projectSite.trim()) {
+      ElMessage.error("起火场所不能为空！");
+      throw "起火场所不能为空！";
+    } else if (!bindFire.value.deptId || !bindFire.value.deptId.trim()) {
+      ElMessage.error("勘验单位不能为空！");
+      throw "勘验单位不能为空！";
+    } else if (!bindFire.value.organizerUsers || !bindFire.value.organizerUsers.trim()) {
+      ElMessage.error("勘验人员不能为空！");
+      throw "勘验人员不能为空！";
+    } else if (!accidentDate) {
+      ElMessage.error("事故日期不能为空！");
+      throw "事故日期不能为空！";
+    } else if (!bindFire.value.fireReason || !bindFire.value.fireReason.trim()) {
+      ElMessage.error("火灾原因不能为空！");
+      throw "火灾原因不能为空！";
+    }
+
+    bindFire.value.accidentDate = dateFormat(accidentDate.value, "yyyy-MM-dd");
+    bindFire.value.field8 =
+      dateFormat(f8.value[0], "yyyy-MM-dd") +
+      "至" +
+      dateFormat(f8.value[1], "yyyy-MM-dd");
+    bindFire.value.projectSiteCode = getCode(place, bindFire.value.projectSite);
+    bindFire.value.id
+      ? await setFire(bindFire.value)
+      : await addFire(bindFire.value as any);
+  },
+});
+</script>
+
+<style scoped>
+.search-result {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  overflow: hidden;
+  top: 100%;
+
+  &.show {
+    max-height: 450px;
+    overflow-y: auto;
+  }
+}
+
+.def-map-info {
+  margin-top: 10px;
+  p {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+    display: inline;
+    &:not(:last-child)::after {
+      content: ",";
+      margin-right: 6px;
+    }
+  }
+
+  span::after {
+    content: "：";
+  }
+}
+
+.def-select-map {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 540px;
+  height: 390px;
+  z-index: 1;
+  left: -100vw;
+  top: -100vh;
+  display: none;
+}
+
+.asdasd {
+  position: relative;
+  margin-bottom: 15px;
+  z-index: 2;
+}
+</style>

src/app/fire/view/dispatch/editFire.vue

@@ -167,7 +167,11 @@ defineExpose<QuiskExpose>({
 const searchAMapAddress = async () => {
   const data = await selectMapImage({});
   if (!data?.search) return;
+
   bindFire.value.mapUrl = data.search.text;
-  bindFire.value.latAndLong = `${data.search.lat},${data.search.lng}`;
+  bindFire.value.latlng = bindFire.value.latAndLong = `${data.search.lat},${data.search.lng}`;
+  if (!data.search.text) {
+    bindFire.value.mapUrl = bindFire.value.latAndLong;
+  }
 };
 </script>

src/view/case/draw/selectMapImage.vue

@@ -87,12 +87,36 @@ watchEffect(async (onCleanup) => {
     setSearch(e.data);
     showSearch.value = false;
   });
+  let clickMarker;
 
+  map.on("click", function (e) {
+    // 获取点击位置的经纬度坐标
+    var latitude = e.lnglat.lat;
+    var longitude = e.lnglat.lng;
+
+    searchInfo.value = {
+      text: "",
+      lat: latitude,
+      lng: longitude,
+      zoom: 0,
+    };
+    clickMarker && map.remove(clickMarker);
+    clickMarker = null;
+    // 在地图上添加标记
+    clickMarker = new AMap.Marker({
+      position: [longitude, latitude],
+      title: "点击位置",
+    });
+
+    map.add(clickMarker);
+  });
   placeSearch.on("complete", function (result) {
     setTimeout(() => {
       const markers = map.getAllOverlays("marker");
       for (const marker of markers) {
         marker.on("click", () => {
+          clickMarker && map.remove(clickMarker);
+          clickMarker = null;
           setSearch(marker._data);
         });
       }