|
@@ -1,41 +1,60 @@
|
|
|
<template>
|
|
|
- <el-form ref="form" label-width="84px" class="camera-from">
|
|
|
+ <el-form ref="form" label-width="94px" 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-form-item label="事件分类" class="mandatory">
|
|
|
<el-input
|
|
|
v-model="bindFire.projectSn"
|
|
|
maxlength="18"
|
|
|
- placeholder="请输入项目编号"
|
|
|
+ placeholder="请输入事件分类"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="起火对象" class="mandatory">
|
|
|
+ <el-form-item label="分类登记" class="mandatory">
|
|
|
<el-input
|
|
|
v-model="bindFire.projectName"
|
|
|
maxlength="50"
|
|
|
- placeholder="请输入起火对象"
|
|
|
+ placeholder="请输入分类登记"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
- <el-form-item label="起火地址" class="mandatory">
|
|
|
- <el-input
|
|
|
+ <el-form-item label="详细地址" class="mandatory asdasd">
|
|
|
+ <!-- <el-input
|
|
|
v-model="bindFire.projectAddress"
|
|
|
maxlength="50"
|
|
|
- placeholder="请输入起火地址"
|
|
|
- />
|
|
|
+ placeholder="请输入详细地址"
|
|
|
+ /> -->
|
|
|
+ <el-input v-model="keyword" placeholder="输入名称搜索" clearable @change="search">
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Search" @click="search" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <div class="search-result" v-show="!info" ref="resultEl"></div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="勘验地址" class="mandatory">
|
|
|
+ <el-input v-model="bindFire.field1" maxlength="50" placeholder="请输入勘验地址" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="起火场所" class="mandatory">
|
|
|
+ <el-form-item label="勘验信息" class="mandatory">
|
|
|
+ <el-input
|
|
|
+ v-model="bindFire.projectSite"
|
|
|
+ placeholder="请输入天气情况等标准化勘验信息"
|
|
|
+ />
|
|
|
+ <!--
|
|
|
<el-cascader
|
|
|
style="width: 100%"
|
|
|
v-model="projectSite"
|
|
|
- placeholder="起火场所"
|
|
|
+ placeholder="天气情况等标准化勘验信息"
|
|
|
:options="place"
|
|
|
:props="{ expandTrigger: 'hover' }"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="全宗名称" class="mandatory">
|
|
|
+ <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">
|
|
@@ -43,14 +62,34 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="承办人员" class="mandatory" placeholder="请输入承办人员">
|
|
|
+ <el-form-item label="勘验人员" class="mandatory" placeholder="请输入勘验人员">
|
|
|
<el-input v-model="bindFire.organizerUsers" maxlength="50" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
<div class="el-form-item">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="事故日期" class="mandatory" placeholder="请选择事故日期">
|
|
|
+ <el-form-item label="勘验人姓名" class="mandatory">
|
|
|
+ <el-input
|
|
|
+ v-model="bindFire.field3"
|
|
|
+ maxlength="18"
|
|
|
+ placeholder="请输入勘验人姓名"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="单位、职务" class="mandatory">
|
|
|
+ <el-input
|
|
|
+ v-model="bindFire.field4"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="请输入勘验人单位、职务"
|
|
|
+ />
|
|
|
+ </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"
|
|
@@ -60,7 +99,7 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="火灾原因" class="mandatory">
|
|
|
+ <!-- <el-form-item label="火灾原因" class="mandatory">
|
|
|
<el-cascader
|
|
|
style="width: 100%"
|
|
|
v-model="fireReason"
|
|
@@ -68,7 +107,7 @@
|
|
|
:options="reason"
|
|
|
:props="{ expandTrigger: 'hover' }"
|
|
|
/>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-form>
|
|
@@ -76,14 +115,16 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import companySelect from "@/components/company-select/index.vue";
|
|
|
-import { ref } from "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 } from "@/util";
|
|
|
+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";
|
|
|
|
|
|
const props = defineProps<{ fire?: Fire }>();
|
|
|
|
|
@@ -100,30 +141,83 @@ const projectSite = genCascaderValue(bindFire, "projectSite");
|
|
|
const accidentDate = ref(
|
|
|
bindFire.value.accidentDate ? new Date(bindFire.value.accidentDate) : new Date()
|
|
|
);
|
|
|
+const keyword = ref("");
|
|
|
+const resultEl = ref<HTMLDivElement>();
|
|
|
+const searchAMap = ref<any>();
|
|
|
+type MapInfo = { lat: number; lng: number };
|
|
|
+const info = ref<MapInfo>();
|
|
|
+const mapEl = ref<HTMLDivElement>();
|
|
|
+
|
|
|
+watchEffect(async (onCleanup) => {
|
|
|
+ if (!mapEl.value || !resultEl.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const AMap = await AMapLoader.load({
|
|
|
+ plugins: ["AMap.PlaceSearch"],
|
|
|
+ key: "e661b00bdf2c44cccf71ef6070ef41b8",
|
|
|
+ version: "2.0",
|
|
|
+ });
|
|
|
+
|
|
|
+ const map = new AMap.Map(mapEl.value, {
|
|
|
+ WebGLParams: {
|
|
|
+ preserveDrawingBuffer: true,
|
|
|
+ },
|
|
|
+ resizeEnable: true,
|
|
|
+ });
|
|
|
+ const placeSearch = new AMap.PlaceSearch({
|
|
|
+ pageSize: 5,
|
|
|
+ pageIndex: 1,
|
|
|
+ map: map,
|
|
|
+ panel: resultEl.value,
|
|
|
+ autoFitView: true,
|
|
|
+ });
|
|
|
+ placeSearch.on("listElementClick", (e) => {
|
|
|
+ bindFire.value.projectAddress =
|
|
|
+ e.data.pname + e.data.cityname + e.data.adname + e.data.address;
|
|
|
+ keyword.value = bindFire.value.projectAddress;
|
|
|
+ bindFire.value.latlng = `${e.data.lat},${e.data.lng}`;
|
|
|
+ info.value = {
|
|
|
+ lat: e.data.lat,
|
|
|
+ lng: e.data.lng,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ searchAMap.value = placeSearch;
|
|
|
+ console.log(placeSearch.listElementClick);
|
|
|
+ onCleanup(() => {
|
|
|
+ searchAMap.value = null;
|
|
|
+ map.destroy();
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const search = () => {
|
|
|
+ info.value = undefined;
|
|
|
+ searchAMap.value.search(keyword.value);
|
|
|
+};
|
|
|
|
|
|
defineExpose<QuiskExpose>({
|
|
|
async submit() {
|
|
|
if (!bindFire.value.projectAddress || !bindFire.value.projectAddress.trim()) {
|
|
|
- ElMessage.error("起火地址不能为空!");
|
|
|
- throw "起火地址不能为空!";
|
|
|
+ ElMessage.error("详细地址不能为空!");
|
|
|
+ throw "详细地址不能为空!";
|
|
|
} else if (!bindFire.value.projectSn || !bindFire.value.projectSn.trim()) {
|
|
|
- ElMessage.error("项目编号不能为空!");
|
|
|
- throw "项目编号不能为空!";
|
|
|
+ ElMessage.error("事件分类不能为空!");
|
|
|
+ throw "事件分类不能为空!";
|
|
|
} else if (!bindFire.value.projectName || !bindFire.value.projectName.trim()) {
|
|
|
- ElMessage.error("起火对象不能为空!");
|
|
|
- throw "起火对象不能为空!";
|
|
|
+ ElMessage.error("分类登记不能为空!");
|
|
|
+ throw "分类登记不能为空!";
|
|
|
} else if (!bindFire.value.projectSite || !bindFire.value.projectSite.trim()) {
|
|
|
- ElMessage.error("起火场所不能为空!");
|
|
|
- throw "起火场所不能为空!";
|
|
|
+ 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 "承办人员不能为空!";
|
|
|
+ ElMessage.error("勘验人员不能为空!");
|
|
|
+ throw "勘验人员不能为空!";
|
|
|
} else if (!accidentDate) {
|
|
|
- ElMessage.error("事故日期不能为空!");
|
|
|
- throw "事故日期不能为空!";
|
|
|
+ ElMessage.error("勘验日期不能为空!");
|
|
|
+ throw "勘验日期不能为空!";
|
|
|
} else if (!bindFire.value.fireReason || !bindFire.value.fireReason.trim()) {
|
|
|
ElMessage.error("火灾原因不能为空!");
|
|
|
throw "火灾原因不能为空!";
|
|
@@ -137,3 +231,54 @@ defineExpose<QuiskExpose>({
|
|
|
},
|
|
|
});
|
|
|
</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>
|