|
|
|
|
@ -0,0 +1,321 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:title="title"
|
|
|
|
|
v-model="visible"
|
|
|
|
|
width="35%"
|
|
|
|
|
class="x-dialog"
|
|
|
|
|
destroy-on-close
|
|
|
|
|
>
|
|
|
|
|
<el-form class="dialog-data" :model="form" ref="formRef" label-width="78px">
|
|
|
|
|
<el-form-item label="工单地址:" prop="address">
|
|
|
|
|
<div class="map">
|
|
|
|
|
<MarsMap
|
|
|
|
|
:url="configUrl"
|
|
|
|
|
:options="getMapOptions"
|
|
|
|
|
map-key="workOrder"
|
|
|
|
|
@onload="marsOnload"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="form.address"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
clearable
|
|
|
|
|
@keyup.enter="handleSearch"
|
|
|
|
|
>
|
|
|
|
|
<template #prepend>
|
|
|
|
|
<el-button icon="MapLocation" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
|
|
|
|
|
<div class="serch-list" v-show="gaodePOIList.length > 0">
|
|
|
|
|
<div
|
|
|
|
|
clss="list-item"
|
|
|
|
|
:class="currentId === item.id ? 'activeitem' : ''"
|
|
|
|
|
v-for="item in gaodePOIList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@click="handleCograph(item)"
|
|
|
|
|
>
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="工单类型:" prop="gdType">
|
|
|
|
|
<el-radio-group v-model="form.gdType">
|
|
|
|
|
<el-radio :value="dict.value" v-for="dict in gdlx">{{
|
|
|
|
|
dict.label
|
|
|
|
|
}}</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="简要描述:" prop="gdms">
|
|
|
|
|
<el-select v-model="form.gdms" placeholder="请选择" clearable>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="dict in gdms"
|
|
|
|
|
:key="dict.value"
|
|
|
|
|
:label="dict.label"
|
|
|
|
|
:value="dict.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="选派人员:" prop="pqrs">
|
|
|
|
|
<el-cascader
|
|
|
|
|
v-model="form.pqrs"
|
|
|
|
|
:options="deptList"
|
|
|
|
|
:props="cascaderProps"
|
|
|
|
|
@expand-change="handleChange"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="visible = false" icon="CloseBold">取消</el-button>
|
|
|
|
|
<el-button type="primary" icon="Select" @click="confirm()"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { addyj, updateyj } from "@/api/emergency-rescue";
|
|
|
|
|
import MarsMap from "@/components/mars-work/mars-map.vue";
|
|
|
|
|
import mapOptions from "@/components/mars-work/mapOptions";
|
|
|
|
|
import markerIcon from "@/assets/images/map-marker.png";
|
|
|
|
|
import { gaodeAddress, gaodePOI } from "@/utils/common.js";
|
|
|
|
|
import { deptTreeSelect } from "@/api/system/user";
|
|
|
|
|
import { onMounted } from "vue";
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const { gdlx, gdms } = proxy.useDict("gdlx", "gdms");
|
|
|
|
|
|
|
|
|
|
const deptList = ref([]);
|
|
|
|
|
const gaodePOIList = ref([]);
|
|
|
|
|
const currentId = ref(0);
|
|
|
|
|
const cascaderProps = {
|
|
|
|
|
value: "id",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
title: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
modelValue: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const emit = defineEmits(["update:modelValue", "confirm"]);
|
|
|
|
|
//地图配置
|
|
|
|
|
const configUrl = "lib/config/config.json";
|
|
|
|
|
let mapData = null;
|
|
|
|
|
let mapLayer = {};
|
|
|
|
|
let entity = null;
|
|
|
|
|
const data = reactive({
|
|
|
|
|
form: {
|
|
|
|
|
id: null,
|
|
|
|
|
address: undefined, //地址
|
|
|
|
|
clbz: undefined, //处理班组
|
|
|
|
|
clfa: undefined, //处理方案
|
|
|
|
|
clhtp: undefined, //处理后图片
|
|
|
|
|
clms: undefined, //处理描述
|
|
|
|
|
createBy: undefined, //创建人
|
|
|
|
|
createId: undefined, //创建者id
|
|
|
|
|
createTime: undefined, //创建时间
|
|
|
|
|
deptId: undefined, //部门id
|
|
|
|
|
dflx: undefined, //倒伏类型
|
|
|
|
|
gdLevel: undefined, //工单等级
|
|
|
|
|
gdType: undefined, //工单类型
|
|
|
|
|
gdms: undefined, //工单描述
|
|
|
|
|
gdtp: undefined, //工单图片
|
|
|
|
|
lat: undefined, //纬度
|
|
|
|
|
lon: undefined, //经度
|
|
|
|
|
pqcl: undefined, //派遣车辆
|
|
|
|
|
pqrs: undefined, //派遣人数
|
|
|
|
|
reason: undefined, //退单原因
|
|
|
|
|
status: undefined, //状态 0:待勘察，1:待派发,2:已退单.3:待处理,4:已完成
|
|
|
|
|
zyxt: undefined, //资源协调
|
|
|
|
|
},
|
|
|
|
|
rules: {},
|
|
|
|
|
});
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
const visible = ref(props.modelValue);
|
|
|
|
|
// 监听外部 modelValue 变化
|
|
|
|
|
watch(
|
|
|
|
|
() => props.modelValue,
|
|
|
|
|
(val) => {
|
|
|
|
|
visible.value = val;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
watch(visible, (val) => {
|
|
|
|
|
emit("update:modelValue", val);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getDeptTree();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 提交
|
|
|
|
|
*/
|
|
|
|
|
const confirm = () => {
|
|
|
|
|
proxy.$refs["formRef"].validate(async (valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
if (form.value.id) {
|
|
|
|
|
} else {
|
|
|
|
|
await addyj(form.value);
|
|
|
|
|
proxy.$modal.msgSuccess("新增成功");
|
|
|
|
|
}
|
|
|
|
|
emit("confirm");
|
|
|
|
|
visible.value = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 地址搜索
|
|
|
|
|
*/
|
|
|
|
|
const handleSearch = async () => {
|
|
|
|
|
if (!form.value.address) {
|
|
|
|
|
proxy.$modal.msgWarning("请输入关键字");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const res = await gaodePOI(form.value.address);
|
|
|
|
|
gaodePOIList.value = res;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 结果上图
|
|
|
|
|
* @param item
|
|
|
|
|
*/
|
|
|
|
|
const handleCograph = (item) => {
|
|
|
|
|
if (currentId.value != item.id) {
|
|
|
|
|
const point = item.location.split(",");
|
|
|
|
|
handleMapClick(parseFloat(point[0]), parseFloat(point[1]));
|
|
|
|
|
mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
|
|
|
|
|
currentId.value = item.id;
|
|
|
|
|
form.value.address = item.name;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
* 级联变化
|
|
|
|
|
*/
|
|
|
|
|
const handleChange = (value) => {};
|
|
|
|
|
const getDeptTree = async () => {
|
|
|
|
|
const res = await deptTreeSelect();
|
|
|
|
|
deptList.value = res.data;
|
|
|
|
|
console.log(deptList.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 获取系统组织架构
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 获取地图配置
|
|
|
|
|
*/
|
|
|
|
|
const getMapOptions = computed(() => {
|
|
|
|
|
mapOptions.scene.sceneMode = 2;
|
|
|
|
|
mapOptions.basemaps[0] = {
|
|
|
|
|
pid: 10,
|
|
|
|
|
name: "高德电子",
|
|
|
|
|
type: "gaode",
|
|
|
|
|
icon: "//data.mars3d.cn/img/thumbnail/basemap/gaode_vec.png",
|
|
|
|
|
layer: "vec",
|
|
|
|
|
show: true,
|
|
|
|
|
};
|
|
|
|
|
return mapOptions;
|
|
|
|
|
});
|
|
|
|
|
/**
|
|
|
|
|
* 地图初始化成功
|
|
|
|
|
* @param map
|
|
|
|
|
*/
|
|
|
|
|
const marsOnload = (map) => {
|
|
|
|
|
mapData = map;
|
|
|
|
|
mapLayer.marker = new mars3d.layer.GraphicLayer({
|
|
|
|
|
allowDrillPick: true,
|
|
|
|
|
});
|
|
|
|
|
mapData.addLayer(mapLayer.marker);
|
|
|
|
|
map.on(mars3d.EventType.click, async ({ cartesian }) => {
|
|
|
|
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
|
|
|
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
|
|
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
|
|
const res = await gaodeAddress(`${longitude},${latitude}`);
|
|
|
|
|
form.value.address = res.formatted_address;
|
|
|
|
|
|
|
|
|
|
handleMapClick(longitude, latitude);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (form.value.longitude && form.value.latitude) {
|
|
|
|
|
handleMapClick(form.value.longitude, form.value.latitude);
|
|
|
|
|
map.flyToGraphic(mapLayer.marker, { radius: 300 });
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
/**
|
|
|
|
|
* @description: 处理地图点击
|
|
|
|
|
* @private
|
|
|
|
|
* @param {number} longitude 经度
|
|
|
|
|
* @param {number} latitude 纬度
|
|
|
|
|
* @returns
|
|
|
|
|
*/
|
|
|
|
|
const handleMapClick = (longitude, latitude) => {
|
|
|
|
|
if (entity) {
|
|
|
|
|
entity.position = [longitude, latitude];
|
|
|
|
|
} else {
|
|
|
|
|
entity = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
position: [longitude, latitude],
|
|
|
|
|
style: {
|
|
|
|
|
image: markerIcon,
|
|
|
|
|
width: 35,
|
|
|
|
|
height: 36,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
mapLayer.marker?.addGraphic(entity);
|
|
|
|
|
}
|
|
|
|
|
form.value.lat = longitude; //纬度
|
|
|
|
|
form.value.lon = latitude; //经度
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
if (mapData) {
|
|
|
|
|
mapData.destroy();
|
|
|
|
|
mapData = null;
|
|
|
|
|
}
|
|
|
|
|
mapLayer.marker?.clear();
|
|
|
|
|
mapLayer = null;
|
|
|
|
|
entity = null;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.map {
|
|
|
|
|
height: 400px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-gps {
|
|
|
|
|
height: 25px;
|
|
|
|
|
width: 25px;
|
|
|
|
|
}
|
|
|
|
|
.serch-list {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 50px;
|
|
|
|
|
max-height: 250px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
& > div {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 3px 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
& > div:hover,
|
|
|
|
|
.activeitem {
|
|
|
|
|
background-color: #4776eb;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
