zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-08-06 14:25:36 +08:00
parent 2b06febd8e
commit 71487ac647
15 changed files with 1067 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/ChooseList/ChooseCl/addPeo.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<el-dialog v-model="showDialog" :destroy-on-close="true" title="新增车辆" @close="close" :close-on-click-modal="false">
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
<template #bqList>
<div class="marks pointer" @click="chooseMarksVisible = true">
<span style="color: rgb(175 178 184);padding-left: 10px;"
v-if="!listQuery.bqList || listQuery.bqList.length == 0">请选择标签</span>
<span v-else>
<el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it, idx) in listQuery.bqList"
:key="idx">{{ it.bqMc }}</el-tag>
</span>
</div>
</template>
</FormMessage>
<template #footer>
<div class="flex just-center">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="submitForm">确认</el-button>
</div>
</template>
</el-dialog>
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>
<script setup>
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { reactive, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { D_BZ_XB } = proxy.$dict("D_BZ_XB"); // 获取字典数据
const elform = ref()
const roleIds = ref([])
const showDialog = ref(false)
const chooseMarksVisible = ref(false)
const emit = defineEmits(['change'])
const listQuery = ref({})
const formData = ref([
{ label: "车牌号", prop: "hphm", type: "input" },
{ label: "车架号", prop: "clCjh", type: "input" },
{
label: "车辆颜色",
prop: "clYs",
type: "input",
},
{ label: "车辆所有人", prop: "clSyr", type: "input" },
{ label: "人员身份证", prop: "clSyrsfzh", type: "input" },
{ label: "责任单位", prop: "zrSsbmdm", depMc: 'zrSsbmmc', type: "department" },
{ label: "管辖单位", prop: "gxSsbmdm", depMc: 'gxSsbmmc', type: "department" },
{ label: "管控民警姓名", prop: "gkMjXm", type: "input" },
{ label: "管控民警警号", prop: "gkMjJh", type: "input" },
{ label: "管控原因", prop: "clLkyy", type: "textarea", width: "100%" },
{ label: "车辆照片", prop: "fjdz", type: "upload", width: "100%" },
])
const rules = reactive({
hphm: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
clCjh: [{ required: true, message: "请输入车架号", trigger: "blur" }],
clYs: [{ required: true, message: "请输入车辆颜色", trigger: "blur" }],
clSyr: [{ required: true, message: "请输入车辆所有人", trigger: "blur" }],
clSyrsfzh: [{ required: true, message: "请输入人员身份证", trigger: "blur" }],
})
const init = () => {
showDialog.value = true;
}
// 选择标签
const choosed = (val) => {
listQuery.value.bqList = val.map(v => {
return { bqZl: v.bqLb, bqId: v.id, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm }
});
roleIds.value = val.map(v => v.id)
}
// 删除数据
const closeTag = (idx) => {
listQuery.value.bqList.splice(idx, 1)
roleIds.value.splice(idx, 1)
}
const submitForm = () => {
elform.value.submit((val) => {
val.id = new Date().getTime()
emit('change', val)
showDialog.value = false;
})
}
const close = () => {
elform.value.reset();
listQuery.value.bqList = []
roleIds.value = []
showDialog.value = false;
}
defineExpose({ init })
</script>
<style lang="scss" scoped>
.marks {
width: 100%;
min-height: 32px;
border: 1px solid #e9e9e9;
border-radius: 4px;
}
</style>

204
src/components/ChooseList/ChooseCl/index.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
<template #title>
<span class="mr10 f16">选择布控车辆</span>
<el-button type="primary" size="small" @click="zdyaddPerson">添加其他车辆</el-button>
</template>
<el-form :model="listQuery" :inline="true">
<el-form-item label="车牌号">
<el-input placeholder="请输入车牌号" v-model="listQuery.hphm" clearable ></el-input>
</el-form-item>
<el-form-item label="车架号">
<el-input placeholder="请输入车架号" v-model="listQuery.clCjh" clearable ></el-input>
</el-form-item>
<el-form-item label="车辆所有人">
<el-input placeholder="请输入车辆所有人" v-model="listQuery.clSyr" clearable ></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
<el-table ref="multipleUserRef" :key="keyTabel" v-loading="loading" @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" style="width: 100%" height="450">
<el-table-column type="selection" width="55" :reserve-selection="true"/>
<el-table-column prop="hphm" align="center" label="车牌号"/>
<el-table-column prop="clCjh" align="center" label="车架号"/>
<el-table-column prop="clYs" align="center" label="车辆颜色"/>
<el-table-column prop="clSyr" align="center" label="车辆所有人"/>
<el-table-column prop="gxSsbmmc" align="center" label="管辖单位"/>
<el-table-column prop="gkMjXm" align="center" label="管控民警"/>
</el-table>
</div>
<div class="fenye flex just-end " :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.pageCurrent"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
<template #footer>
<div class="flex just-center">
<el-button @click="closed">取消</el-button>
<el-button type="primary" @click="onComfirm">确认</el-button>
</div>
</template>
</el-dialog>
<!-- 自定义选添加人 -->
<AddPeo ref="addPerson" @change="changeZdy"></AddPeo>
</template>
<script setup>
import AddPeo from './addPeo.vue'
import { qcckGet} from "@/api/qcckApi.js";
import { defineProps, ref ,getCurrentInstance, watch} from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_XB,D_BZ_MZ } = proxy.$dict("D_BZ_XB","D_BZ_MZ"); //获取字典数据
const props = defineProps({
modelValue: {
type: Boolean,
default:false
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: false
},
roleIds: {
type: Array,
default: []
},
});
const loading = ref(false)
const total = ref(0);
const listQuery = ref({
pageCurrent: 1,
pageSize: 20
});
const addPerson = ref()
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosed","choosedAdd"]);
const keyTabel = ref(0)
const keyid = (row) => {
return row.id;
};
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { pageCurrent: 1, pageSize: 20, };
getListData();
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("choosed", list);
closed();
};
// 自定义加人
const changeZdy = (val) => {
emits("choosedAdd", val);
closed();
}
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.pageSize = currentSize;
getListData();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.pageCurrent = currentPage;
getListData();
};
const getListData = () => {
keyTabel.value++
const params = {...listQuery.value}
loading.value = true;
qcckGet(params,'/mosty-gsxt/tbGsxtZdcl/selectPage').then(res=>{
loading.value = false;
tableData.value = res.records || [];
total.value = res.total;
multipleUser();
}).catch(()=>{
loading.value = false;
})
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
multipleUserRef.value.toggleRowSelection(item, false);
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.pageCurrent = 1;
getListData();
};
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
const zdyaddPerson = () => {
addPerson.value.init();
};
watch(()=>props.modelValue,val=>{
if(val) handleFilter();
},{immediate:true})
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

12
src/components/GdMap/index.vue
View File

@ -46,11 +46,15 @@ const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const zoomTarget = ref(6);
// 定义组件发出的事件
const emit = defineEmits(['mapLoaded'])
const props = defineProps({
mapid: {
type: String,
default: "mapDiv"
},
//是否显示可以切换地图底图
isShow: {
type: Boolean,
@ -79,13 +83,15 @@ let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
console.log("xxxxxxx");
emitter.on("followUp", (res) => {
let box = document.getElementsByClassName("changeMap_box");
if (!box) return;
box[0].style.right = !res ? "4px" : "398px";
box[0].style.transition = "0.5s";
});
map = new EliMap({
id: props.mapid,
crs: "EPSG:3857",
@ -110,6 +116,8 @@ onMounted(() => {
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
@ -253,7 +261,7 @@ const mapSetLayer = (id, source) => {
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,