更新下发任务页面

This commit is contained in:
2026-03-04 11:27:50 +08:00
parent a67719927e
commit 4328f381cd
4 changed files with 91 additions and 113 deletions

View File

@ -1,6 +1,5 @@
<template> <template>
<el-dialog title="任务" width="80%" :model-value="modelValue" destroy-on-close :close-on-click-modal="false" <el-dialog title="任务" width="80%" :model-value="modelValue" destroy-on-close :close-on-click-modal="false" @close="close">
@close="close">
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top"> <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
<el-form-item prop="dwmc" label="点位名称" style="width: 100%"> <el-form-item prop="dwmc" label="点位名称" style="width: 100%">
<el-input v-model="listQuery.dwmc" clearable style="width: 100%" /> <el-input v-model="listQuery.dwmc" clearable style="width: 100%" />
@ -22,56 +21,32 @@
<el-button type="primary" @click="submit">保存</el-button> <el-button type="primary" @click="submit">保存</el-button>
</template> </template>
</el-dialog> </el-dialog>
<FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" />
</template> </template>
<script setup> <script setup>
import emitter from "@/utils/eventBus.js"; import emitter from "@/utils/eventBus.js";
import FgLoad from "./fgLoad.vue";
import * as MOSTY from "@/components/MyComponents/index";
import GdMap from "@/components/Map/GdMap/index.vue"; import GdMap from "@/components/Map/GdMap/index.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js"; import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import * as rule from "@/utils/rules.js"; import { ref,reactive,defineProps,defineEmits,onMounted,onUnmounted,watch } from "vue";
import { IdCard } from "@/utils/validate.js";
import {
ref,
defineExpose,
reactive,
defineProps,
getCurrentInstance,
defineEmits,
nextTick,
onMounted,
onUnmounted,
watch
} from "vue";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Boolean, type: Boolean,
required: true required: true
}, },
data: { type: Object, default: {} },
dic: { type: Object, default: {} }, dic: { type: Object, default: {} },
formData: { formData: {
type: Object, type: Object,
default: {} default: {}
} }
}); });
const fgData = ref([]);
const fgVisible = ref(false);
const emits = defineEmits(["update:modelValue","submit"]); const emits = defineEmits(["update:modelValue","submit"]);
const { proxy } = getCurrentInstance();
const dialogFormVisible = ref(false); //表单禁用 const dialogFormVisible = ref(false); //表单禁用
const listQuery = ref({ gridType: 150 }); //表单 const listQuery = ref({}); //表单
const elform = ref();
const rules = reactive({ const rules = reactive({
fgRwbt: [ dwmc: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
{ required: true, message: "请输入方格任务标题", trigger: "change" } jd: [{ required: true, message: "请输入经度", trigger: ["blur",'change'] }],
], wd: [{ required: true, message: "请输入纬度", trigger: ["blur",'change'] }],
fgRwnr: [{ required: true, message: "请输入方格任务内容", trigger: "blur" }],
rwRq: [{ required: true, message: "请选择任务日期", trigger: "change" }],
gridType: [
{ required: true, message: "请输入网格大小", trigger: ["change", "blur"] }
]
}); });
onMounted(() => { onMounted(() => {
@ -82,33 +57,32 @@ onMounted(() => {
} }
}); });
}); });
watch( watch(() => props.modelValue,(val) => {
() => props.modelValue, setTimeout(() => {
(val) => { dialogFormVisible.value = true;
if (val) { showFg()
setTimeout(() => { }, 1000);
dialogFormVisible.value = true; });
}, 1000);
} else {
listQuery.value = {};
fgData.value = [];
}
}
);
//选择方格 function showFg(){
function hanlderChoose(arr) { setTimeout(() => {
const jzryList = arr.map((item) => { const position = [
return { [Number(props.data[0].x1), Number(props.data[0].y1)],
id: item.id, [Number(props.data[0].x2), Number(props.data[0].y2)]
fgmc: item.mc1 ];
}; const obj = [{ position: position,text:props.data[0].fgmc,id:1 ,userData:props.data[0]}];
}); emitter.emit("echoPlane", {
fgData.value = jzryList; fontColor: "#12fdb8",
} coords: obj,
function handleClose(idx) { type: "rectangle",
fgData.value.splice(idx, 1); flag: "addfg",
color: "rgba(2,20,51,0.5)",
linecolor: "#1C97FF"
});
emitter.emit("setMapCenter",{location:[Number(props.data[0].zxX), Number(props.data[0].zxY)],zoomLevel:12})
},2000)
} }
//获取经纬度 //获取经纬度
function chackLat() { function chackLat() {
listQuery.value.jd = ""; listQuery.value.jd = "";
@ -122,7 +96,10 @@ const submit = () => {
close("新增成功"); close("新增成功");
}; };
// 关闭 // 关闭
const close = (val) => { const close = () => {
listQuery.value.dwmc = "";
listQuery.value.jd = "";
listQuery.value.wd = "";
emits("update:modelValue", false); emits("update:modelValue", false);
}; };
onUnmounted(() => { onUnmounted(() => {

View File

@ -23,9 +23,9 @@
<el-form-item style="width: 48%" prop="rwmc" label="任务名称"> <el-form-item style="width: 48%" prop="rwmc" label="任务名称">
<el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" style="width: 100%" clearable /> <el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" style="width: 100%" clearable />
</el-form-item> </el-form-item>
<el-form-item style="width: 45%" label="方格" prop=""> <el-form-item style="width: 45%" label="方格" prop="fgData">
<div :class="fgData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="fgVisible = true"> <div :class="listQuery.fgData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="fgVisible = true">
<el-tag v-for="(tag, idx) in fgData" :key="tag.id" class="mx-1" closable :type="tag.type" <el-tag v-for="(tag, idx) in listQuery.fgData" :key="tag.id" class="mx-1" closable :type="tag.type"
@close="handleClose(idx)"> @close="handleClose(idx)">
{{ tag.fgmc }} {{ tag.fgmc }}
</el-tag> </el-tag>
@ -56,7 +56,10 @@
</div> </div>
</div> </div>
<FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" :Single="true" /> <FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" :Single="true" />
<AddDw v-model="showDialog" :dic="{ D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT }" <AddDw
v-model="showDialog"
:data="listQuery.fgData"
:dic="{ D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT }"
@submit="dwSubmit" /> @submit="dwSubmit" />
</template> </template>
@ -83,15 +86,14 @@ const showDialog = ref(false);
const stepActive = ref(0) const stepActive = ref(0)
const emit = defineEmits(["updateDate"]); const emit = defineEmits(["updateDate"]);
const dialogForm = ref(false); //弹窗 const dialogForm = ref(false); //弹窗
const fgData = ref([]); const listQuery = ref({ fgData: [] }); //表单
const listQuery = ref({ qcys: "#409eff" }); //表单
const fgVisible = ref(false); const fgVisible = ref(false);
const loading = ref(false); const loading = ref(false);
const elform = ref(); const elform = ref();
const title = ref(""); const title = ref("");
const rules = reactive({ const rules = reactive({
rwmc: [{ required: true, message: "请输入任务名称", trigger: "change" }], rwmc: [{ required: true, message: "请输入任务名称", trigger: "change" }],
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }], fgData: [{ required: true, message: "请选择方格", trigger: "change" }],
sblx: [{ required: true, message: "请选择任务类型", trigger: "change" }], sblx: [{ required: true, message: "请选择任务类型", trigger: "change" }],
jd: [{ required: true, message: "请选择坐标", trigger: ["change", "blur"] }] jd: [{ required: true, message: "请选择坐标", trigger: ["change", "blur"] }]
}); });
@ -151,11 +153,22 @@ function hanlderChoose(arr) {
const jzryList = arr.map((item) => { const jzryList = arr.map((item) => {
return { return {
id: item.id, id: item.id,
fgmc: item.mc1 fgmc: item.mc1,
x1:item.x1,
y1:item.y1,
x2:item.x2,
y2:item.y2,
x11:item.x11,
y11:item.y11,
x21:item.x21,
y21:item.y21 ,
zxX:item.zxX,
zxY:item.zxY,
}; };
}); });
fgData.value = jzryList; listQuery.value.fgData = jzryList;
} }
const dwSubmit = (val) => { const dwSubmit = (val) => {
pageData.tableData.push(val) pageData.tableData.push(val)
} }

View File

@ -20,11 +20,10 @@
<div class="tabBox"> <div class="tabBox">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth" @chooseData="chooseData"> :controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
<template #sblx="{ row }"> <template #rwzt="{ row }">
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false" /> <el-table-column prop="wlq" label="未领取"/>
</template> <el-table-column prop="ylq" label="已领取"/>
<template #sblxdm="{ row }"> <el-table-column prop="ywc" label="已完成"/>
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
</template> </template>
<!-- 操作 --> <!-- 操作 -->
<template #controls="{ row }"> <template #controls="{ row }">
@ -86,22 +85,11 @@ const pageData = reactive({
}, //分页 }, //分页
controlsWidth: 210, //操作栏宽度 controlsWidth: 210, //操作栏宽度
tableColumn: [ tableColumn: [
{ label: "任务名称", prop: "sbmc", showOverflowTooltip: true }, { label: "任务名称", prop: "sbmc" },
{ label: "编号", prop: "sbbh", showOverflowTooltip: true }, { label: "方格编号", prop: "sbbh" },
{ label: "地址", prop: "dzmc", showOverflowTooltip: true }, { label: "下发时间", prop: "xfcsj" },
{ { label: "任务领取人", prop: "rwlqr" },
label: "任务类型", { label: "任务状态", prop: "rwzt", showSolt: true },
prop: "sblx",
showSolt: true,
showOverflowTooltip: true
},
{
label: "摄像机类型",
prop: "sblxdm",
showSolt: true,
showOverflowTooltip: true
},
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true }
] ]
}); });
onMounted(() => { onMounted(() => {
@ -109,7 +97,7 @@ onMounted(() => {
pageData.keyCount = data; pageData.keyCount = data;
}); });
tabHeightFn(); tabHeightFn();
// getDataList(); getDataList();
}); });
// 搜索 // 搜索
const onSearch = (val) => { const onSearch = (val) => {
@ -127,16 +115,16 @@ const getDataList = () => {
...listQuery.value ...listQuery.value
}; };
delete pramas.daterange; delete pramas.daterange;
pageData.tableConfiger.loading = true; // pageData.tableConfiger.loading = true;
qcckPost(pramas, "/mosty-yszx/tbYsSxt/getPageList") // qcckPost(pramas, "/mosty-yszx/tbYsSxt/getPageList")
.then((res) => { // .then((res) => {
pageData.tableData = res.records || []; // pageData.tableData = res.records || [];
pageData.tableConfiger.loading = false; // pageData.tableConfiger.loading = false;
pageData.total = res.total; // pageData.total = res.total;
}) // })
.catch(() => { // .catch(() => {
pageData.tableConfiger.loading = false; // pageData.tableConfiger.loading = false;
}); // });
}; };
const changeNo = (val) => { const changeNo = (val) => {
pageData.pageConfiger.pageNum = val; pageData.pageConfiger.pageNum = val;
@ -157,17 +145,14 @@ const chooseData = (val) => {
}; };
//批量删除 //批量删除
const deletList = (id) => { const deletList = (id) => {
proxy proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
.$confirm("确定要删除", "警告", { type: "warning" }) // qcckDelete({}, "/mosty-yszx/tbYsSxt/" + id).then(() => {
.then(() => { // proxy.$message({ type: "success", message: "删除成功" });
qcckDelete({}, "/mosty-yszx/tbYsSxt/" + id).then(() => { // getDataList();
proxy.$message({ type: "success", message: "删除成功" }); // });
getDataList(); }).catch(() => {
}); proxy.$message.info("已取消");
}) });
.catch(() => {
proxy.$message.info("已取消");
});
}; };
// 新增编辑表单 // 新增编辑表单
@ -188,6 +173,9 @@ const tabHeightFn = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-table thead.is-group th.el-table__cell{
background: rgba(6, 42, 72, 0.8);
}
</style> </style>
<style> <style>
.el-loading-mask { .el-loading-mask {

View File

@ -41,7 +41,7 @@
<CountModel /> <CountModel />
</div> </div>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<BottomBtn /> <!-- <BottomBtn /> -->
<div class="footBox"> <div class="footBox">
<ul> <ul>
<li v-for="(item, index) in btnTatol" :key="item"> <li v-for="(item, index) in btnTatol" :key="item">