This commit is contained in:
给我
2026-03-20 17:49:22 +08:00
parent 35796371e2
commit 8436bf60fa
5 changed files with 168 additions and 84 deletions

View File

@ -1,8 +1,8 @@
import emitter from "@/utils/eventBus.js";
export function MapUtil(map) {
export function MapUtil(map) {
let _that = this;
_that.mMap = map; //地图对象
_that.mMap = map; //地图对象
_that.heatmapOverlay = {}; //热力图层对象
_that.markerClusterers = null; //聚合图层对象
_that.flagSircle = []; //自定义HTML
@ -24,7 +24,7 @@ export function MapUtil(map) {
};
/**
* 撒点.鼠标滑动展示内容
* 撒点.鼠标滑动展示内容
* @param {*} coords 坐标 geojson
* @param {*} icon 图标
* @param {*} flag 标识
@ -44,7 +44,7 @@ export function MapUtil(map) {
}
if(it.jd && it.wd) return obj;
});
const point = map.createdPoint(pointList,{
image:icon,//对应上面的图片名称
scale:0.6,
@ -69,7 +69,7 @@ export function MapUtil(map) {
/**
* 撒点
* @param {*} coords 坐标 geojson
* @param {*} icon 图标
* @param {*} icon 图标
* @param {*} flag 标识
* @param {*} isBounds 点击图标是否变大方法
* @param {*} showTitle 是否展示标题
@ -156,8 +156,8 @@ export function MapUtil(map) {
/**
* 装备图标
* @param {点位数据} data
* @param {点} point
* @param {点位数据} data
* @param {点} point
*/
MapUtil.prototype.shouIcon = (data, point) => {
if(!_that._self.gpsZb) _that._self.gpsZb = []
@ -213,8 +213,8 @@ export function MapUtil(map) {
/**
* 聚合撒点
* @param {*} coords 点位数据 geojson lng lat
* @param {*} icon 点位图
* @param {*} coords 点位数据 geojson lng lat
* @param {*} icon 点位图
*/
MapUtil.prototype.aggregateScatteringPoint = (obj) => {
let { coords, icon, flag,isclear,scale } = obj;
@ -243,11 +243,11 @@ export function MapUtil(map) {
// 聚合的点击一个
maker.addEventListener("click", (val) => {
_that.openInfoDetail(flag,[val]) //点击打开详情
_that.openInfoDetail(flag,[val]) //点击打开详情
})
// 聚合的多个
maker.addEventListener("clusterClick", (val) => {
_that.openInfoDetail(flag,val) //点击打开详情
_that.openInfoDetail(flag,val) //点击打开详情
})
};
@ -289,7 +289,7 @@ export function MapUtil(map) {
})
_that.heatmapOverlay[flag] = []
};
/**
* 删除图层要素
* @param {*} layer 唯一标识
@ -304,7 +304,7 @@ export function MapUtil(map) {
_that._self.gpsZb[key] = []
}
}
}
}
// 其他图层
if (!_that._self[layer]) return false;
if(layer !== 'gpsZb'){
@ -313,7 +313,7 @@ export function MapUtil(map) {
el.destroy()//destory()销毁 , show(false) false:隐藏 true :展示
}
_that._self[layer] = [];
// d带标题的撒点
let flagT = layer+'Title';
if (!_that._self[flagT]) return false;
@ -358,7 +358,7 @@ export function MapUtil(map) {
} catch (err) {}
}
}
// 绘制数据的初始化
MapUtil.prototype.Drawplot = (color) => {
const {point,line,polygon,circle,rectangle,geoJson,remove,enableEdit } = map.draw({
@ -372,7 +372,7 @@ export function MapUtil(map) {
}
/**
* 绘制工具
* @param {*} type 绘制形状
* @param {*} type 绘制形状
* (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
* geoJson:根据geojson回显图
*/
@ -450,8 +450,8 @@ export function MapUtil(map) {
}
/**
* 创建线
* @param {*} type 回显形状
* (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
* @param {*} type 回显形状
* (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
*/
MapUtil.prototype.createLine = (res) => {
let { type , coords , isclear ,flag ,color,width} = res;
@ -496,9 +496,9 @@ export function MapUtil(map) {
/**
* 回显平面- 圆 - 多边形 - 矩形
* @param {*} type 回显形状
* type: 'polygon', 'rectangle
coords = [{
* @param {*} type 回显形状
* type: 'polygon', 'rectangle
coords = [{
position:[[[jd,wd],[jd,wd] ---]], //三维数组
text,//展示的文字
id, //唯一标识
@ -506,10 +506,10 @@ export function MapUtil(map) {
userData:{} //存储数据
}]
* type:circle
* type:circle
coords:[jd,wd] radius:半径
* @param {*} text 展示的文字
* @param {*} text 展示的文字
*/
MapUtil.prototype.echoPlane = (res) => {
let { type , coords ,fontColor, text = '' ,radius = 0, isclear ,flag ,id = 1 , color , linecolor} = res;
@ -533,7 +533,7 @@ export function MapUtil(map) {
let maker ;
// 圆
if(type == 'circle'){
let params = [{ center:coords,radius, text, id }]
let params = [{ center:coords,radius, text, id }]
maker = map.createCircle(params,style);
}
@ -542,7 +542,7 @@ export function MapUtil(map) {
// 多边形
if(type == 'polygon') maker = map.createPolygon(coords,style);
_that._self[flag].push(maker);
maker.addEventListener("click", (val) => {
if( flag == 'xfq'){
maker.highlight(val.id) //高亮展示
@ -552,10 +552,13 @@ export function MapUtil(map) {
if( flag == 'zdxl_fzyc'){
emitter.emit('showFzycInfo', {info:val,type:true})
}
if(flag == 'taskFg-flag'){
emitter.emit('showTaskFgInfo', val)
}
})
}
// 分割线展示文字
MapUtil.prototype.gapText = (obj) => {
let { points, text ,flag} = obj
@ -666,7 +669,7 @@ export function MapUtil(map) {
_that.polygonGeo.destroy()
}
// 打开详情弹窗
// 打开详情弹窗
MapUtil.prototype.openInfoDetail = (flag,data) => {
switch (flag) {
case "rx":

View File

@ -24,8 +24,9 @@
<el-input v-model="listQuery.fgRwmc" placeholder="请输入任务名称" style="width: 100%" clearable />
</el-form-item>
<el-form-item style="width: 45%" label="方格" prop="fgData">
<div :class="listQuery.fgData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="fgVisible = true">
<el-tag v-for="(tag, idx) in listQuery.fgData" :key="tag.id" class="mx-1" closable :type="tag.type"
<div :class="listQuery?.fgData && listQuery?.fgData.length === 0 ? 'ipt mj' : 'ipt'"
@click.stop="fgVisible = true">
<el-tag v-for="(tag, idx) in listQuery?.fgData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleClose(idx)">
{{ tag.fgmc }}
</el-tag>
@ -34,35 +35,46 @@
<el-form-item style="width: 48%" prop="dkjgsj" label="间隔时间">
<el-input v-model="listQuery.dkjgsj" type="number" placeholder="请输入间隔时间" style="width: 100%" clearable />
</el-form-item>
<div class="center-btn"><el-button style="margin-top: 12px" @click="next">下一步</el-button></div>
<div class="center-btn"><el-button style="margin: 12px 0;" @click="next">下一步</el-button></div>
<div style="height: 40vh; width: 100%">
<gd-map />
</div>
</el-form>
<div class="box_main" v-if="stepActive == 1">
<el-button style="margin: 12px 0 10px 0;" @click="addDw" v-if="openType!=='detail'">新增点位</el-button>
<el-button style="margin: 12px 0 10px 0;" @click="addDw" v-if="openType !== 'detail'">新增点位</el-button>
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
@chooseData="chooseData">
<template #dktp="{ row }">
<el-image :append-to-body="true" :preview-src-list="[
`/mosty-api/mosty-base/minio/image/download/${row.dktp}`
]" style="width: 75px; height: 75px" :src="`/mosty-api/mosty-base/minio/image/download/${row.dktp}`"
fit="cover" lazy />
</template>
<!-- 操作 -->
<template #controls="{ row, index }">
<el-button @click="deletList(index)" type="danger" size="small">删除</el-button>
</template>
</MyTable>
<div class="center-btn">
<el-button style="margin-top: 12px" @click="stepActive--; pageData.tableData = []">上一步</el-button>
<el-button style="margin-top: 12px" @click="submit" v-if="openType!=='detail'">提交</el-button>
<el-button style="margin-top: 12px" @click="stepFn">上一步</el-button>
<el-button style="margin-top: 12px" @click="submit" v-if="openType !== 'detail'">提交</el-button>
</div>
</div>
</div>
<FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" :Single="true" />
<AddDw v-model="showDialog" v-if="showDialog" :data="listQuery.fgData"
<AddDw v-model="showDialog" v-if="showDialog" :data="listQuery?.fgData"
:dic="{ D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT }" @submit="dwSubmit" />
</template>
<script setup>
import FgLoad from "./fgLoad.vue";
import AddDw from "./addDw.vue";
import emitter from "@/utils/eventBus";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import { fetchTbZdxlFgdwSelectList } from "@/api/service/taskProgress";
import {
ref,
defineExpose,
@ -85,7 +97,7 @@ const fgVisible = ref(false);
const loading = ref(false);
const elform = ref();
const title = ref("");
const openType=ref("")
const openType = ref("")
const rules = reactive({
fgRwmc: [{ required: true, message: "请输入任务名称", trigger: "change" }],
fgData: [{ required: true, message: "请选择方格", trigger: "change" }],
@ -99,7 +111,7 @@ const pageData = reactive({
tableConfiger: {
loading: false,
rowHieght: 61,
showSelectType: "checkBox"
haveControls: true,
},
total: 0,
pageConfiger: {
@ -114,6 +126,25 @@ const pageData = reactive({
]
});
onMounted(() => {
// 点击地图方格选择
emitter.on("showTaskFgInfo", (val) => {
if (openType.value !== 'detail') {
listQuery.value.fgData = [{
id: val.id,
fgmc: val.mc1,
x1: val.x1,
y1: val.y1,
x2: val.x2,
y2: val.y2,
x11: val.x11,
y11: val.y11,
x21: val.x21,
y21: val.y21,
zxX: val.zxX,
zxY: val.zxY,
}];
}
})
});
// 初始化数据
@ -121,33 +152,98 @@ const init = (type, row) => {
dialogForm.value = true;
openType.value = type;
title.value = row ? "编辑任务" : "新增任务";
stepActive.value = 0;
getData()
pageData.tableColumn = [
{ label: "点位名称", prop: "bxdMc", showOverflowTooltip: true },
{ label: "经度", prop: "jd", showOverflowTooltip: true },
{ label: "维度", prop: "wd", showOverflowTooltip: true },
]
pageData.tableConfiger.haveControls = true
if (row) {
getDataById(row);
if (openType.value == 'detail') {
pageData.tableColumn = [
{ label: "点位名称", prop: "bxdMc", showOverflowTooltip: true },
{ label: "经度", prop: "jd", showOverflowTooltip: true },
{ label: "维度", prop: "wd", showOverflowTooltip: true },
{ label: "打卡时间", prop: "dksj", showOverflowTooltip: true },
{ label: "图片", prop: "dktp", showOverflowTooltip: true, showSolt: true },
]
pageData.tableConfiger.haveControls = false
}
} else {
stepActive.value = 0;
listQuery.value = { fgData: [] };
pageData.tableData = [];
}
};
// 根据id查询详情
const getDataById = (row) => {
qcckGet({ fgrwid: row.id }, "/mosty-yjzl/tbZdyrw/getFgrwXq").then(async (res) => {
qcckGet({ fgrwid: row.id }, "/mosty-yjzl/tbZdyrw/getFgrwXq").then((res) => {
listQuery.value = res;
listQuery.value.fgData = [{...res.fgxx,
listQuery.value.fgData = [{
...res.fgxx,
fgmc: res.fgmc,
id: res.fgId,
}]
console.log(listQuery.value.fgData ,'listQuery.value.fgData ');
pageData.tableData=res.bxds
const fginfo = listQuery.value.fgData?.map((el, index) => {
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: "white",
coords: fginfo,
type: "rectangle",
flag: "taskFg-info",
color: "red",
linecolor: "red"
});
pageData.tableData = res.bxds
});
};
const getData = async () => {
const res = await fetchTbZdxlFgdwSelectList();
if (res && res?.length > 0) {
emitter.emit("deletePointArea", "taskFg-flag");
let cc = [];
const list = res?.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: list,
type: "rectangle",
flag: "taskFg-flag",
color: "rgba(2,20,51,0.5)",
linecolor: "#1C97FF"
});
emitter.emit("setMapCenter", { location: cc, zoomLevel: 11 });
}
};
const next = () => {
elform.value.validate((valid) => {
if (!valid) return false;
stepActive.value++;
});
});
}
// 上一步
const stepFn = () => {
stepActive.value--;
getData()
}
const addDw = () => {
showDialog.value = true
@ -174,29 +270,24 @@ function hanlderChoose(arr) {
}
const dwSubmit = (val) => {
console.log(val, 'val');
pageData.tableData.push(val)
}
// 提交
const submit = () => {
// elform.value.validate((valid) => {
// if (!valid) return false;
loading.value = true;
const pramas = {
fgRwmc: listQuery.value.fgRwmc,
fgId: listQuery.value.fgData[0].id,
dkjgsj: listQuery.value.dkjgsj,
dtoList: pageData.tableData.map(item => {
return {
bxdMc: item.bxdMc,
jd: item.jd,
wd: item.wd
}
})
}
if (title.value == "新增任务") {
console.log(listQuery.value, pageData.tableData);
const pramas = {
fgRwmc: listQuery.value.fgRwmc,
fgId: listQuery.value.fgData[0].id,
dkjgsj: listQuery.value.dkjgsj,
dtoList: pageData.tableData.map(item => {
return {
bxdMc: item.bxdMc,
jd: item.jd,
wd: item.wd
}
})
}
qcckPost(pramas, "/mosty-yjzl/tbZdyrw/addTbZdyrw")
.then((res) => {
proxy.$message({ type: "success", message: "新增成功" });
@ -207,20 +298,20 @@ const submit = () => {
loading.value = false;
});
} else {
// qcckPut(listQuery.value, "/mosty-yszx/tbYsSxt/update")
// .then((res) => {
// proxy.$message({ type: "success", message: "修改成功" });
// close();
// emit("updateDate");
// })
// .catch(() => {
// loading.value = false;
// });
pramas.id = listQuery.value.id
qcckPost(pramas, "/mosty-yjzl/tbZdyrw/editTbZdyrw")
.then((res) => {
proxy.$message({ type: "success", message: "修改成功" });
close();
emit("updateDate");
})
.catch(() => {
loading.value = false;
});
}
// });
};
const deletList = (idx) => {
console.log(idx, 'idx');
pageData.tableData.splice(idx, 1)
}
// 关闭

View File

@ -37,10 +37,7 @@
<script setup>
import { getCountBqsl } from "@/api/xfll";
import * as rule from "@/utils/rules.js";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import {
defineProps,
watch,
@ -50,7 +47,6 @@ import {
nextTick,
watchEffect
} from "vue";
import { getTbJcglXfll } from "@/api/xfll";
const props = defineProps({
modelValue: {
type: Boolean,

View File

@ -21,9 +21,6 @@
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
<template #fgrwzt="{ row }">
<!-- <el-table-column prop="wlq" label="未领取"/>
<el-table-column prop="ylq" label="已领取"/>
<el-table-column prop="ywc" label="已完成"/> -->
<dict-tag :options="D_BZ_QWRWZT" :value="row.fgrwzt" :tag="false" />
</template>
<template #controls="{ row }">
@ -60,13 +57,13 @@ const editInfo = ref();
const searchConfiger = reactive([
{
showType: "input",
prop: "sbmc",
prop: "fgRwmc",
placeholder: "请输入任务名称",
label: "任务名称"
},
{
showType: "select",
prop: "rwLqZt",
prop: "fgrwzt",
placeholder: "请选择任务领取状态",
label: "任务领取状态",
options: D_BZ_QWRWZT
@ -138,7 +135,7 @@ const chooseData = (val) => {
//批量删除
const deletList = (id) => {
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
qcckPost({ id }, "/mosty-yjzl/tbZdxlFgxlrw/delZdyxlFgxlrw").then(() => {
qcckPost({ id }, "/mosty-yjzl/tbZdyrw/delTbZdyrw").then(() => {
proxy.$message({ type: "success", message: "删除成功" });
getDataList();
});

View File

@ -29,7 +29,6 @@ const fetchTaskList = async () => {
emitter.emit("deletePointArea", "zdxl_fzyc");
if (res && res?.length > 0) {
data.list = res;
let cc = [];
const list = data.list?.map((el, index) => {
let centerPoint = [el.zxX, el.zxY];
@ -62,7 +61,6 @@ const getData = async () => {
const res = await fetchTbZdxlFgdwSelectList();
if (res && res?.length > 0) {
emitter.emit("deletePointArea", "tbZdxlFgdw");
let cc = [];
const list = res?.map((el, index) => {
let centerPoint = [el.zxX, el.zxY];
@ -87,7 +85,6 @@ const getData = async () => {
});
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
}
await fetchTaskList();
};