Merge branch 'main' of http://61.139.16.27:26684/lcw/xzlz_JczWeb
This commit is contained in:
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-25130105.fd375632.css
Normal file
1
jcz/static/css/chunk-25130105.fd375632.css
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-277f5888.40d2b7e9.css
Normal file
1
jcz/static/css/chunk-277f5888.40d2b7e9.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-5ab5d726.bb7a4a81.css
Normal file
1
jcz/static/css/chunk-5ab5d726.bb7a4a81.css
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-5f2a9fdd.3a5f3305.css
Normal file
1
jcz/static/css/chunk-5f2a9fdd.3a5f3305.css
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-62b7b60a.a7c07e0b.css
Normal file
1
jcz/static/css/chunk-62b7b60a.a7c07e0b.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-66b48802.286feebd.css
Normal file
1
jcz/static/css/chunk-66b48802.286feebd.css
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-6e609613.7f9e0018.css
Normal file
1
jcz/static/css/chunk-6e609613.7f9e0018.css
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-75e08e9c.d1ea9ff8.css
Normal file
1
jcz/static/css/chunk-75e08e9c.d1ea9ff8.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/css/chunk-de41fb3a.7855a926.css
Normal file
1
jcz/static/css/chunk-de41fb3a.7855a926.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/app.608ae779.js
Normal file
1
jcz/static/js/app.608ae779.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-06cbb5fa.eb1e17e0.js
Normal file
1
jcz/static/js/chunk-06cbb5fa.eb1e17e0.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-07739de5.5c0d089e.js
Normal file
1
jcz/static/js/chunk-07739de5.5c0d089e.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-10aa2ead.21b69760.js
Normal file
1
jcz/static/js/chunk-10aa2ead.21b69760.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-119f6a70.47cd5539.js
Normal file
1
jcz/static/js/chunk-119f6a70.47cd5539.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-1f611575.1115e891.js
Normal file
1
jcz/static/js/chunk-1f611575.1115e891.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-25130105.573e7e62.js
Normal file
1
jcz/static/js/chunk-25130105.573e7e62.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-277f5888.77e2190a.js
Normal file
1
jcz/static/js/chunk-277f5888.77e2190a.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-5ab5d726.8c72db13.js
Normal file
1
jcz/static/js/chunk-5ab5d726.8c72db13.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-5f2a9fdd.78a71116.js
Normal file
1
jcz/static/js/chunk-5f2a9fdd.78a71116.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-61a92c87.49490763.js
Normal file
1
jcz/static/js/chunk-61a92c87.49490763.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-62b7b60a.f31f3f01.js
Normal file
1
jcz/static/js/chunk-62b7b60a.f31f3f01.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-63debe5e.b48b9370.js
Normal file
1
jcz/static/js/chunk-63debe5e.b48b9370.js
Normal file
File diff suppressed because one or more lines are too long
10
jcz/static/js/chunk-66b48802.fda2ac54.js
Normal file
10
jcz/static/js/chunk-66b48802.fda2ac54.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-6e609613.689cbe89.js
Normal file
1
jcz/static/js/chunk-6e609613.689cbe89.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-75e08e9c.f11e6a9c.js
Normal file
1
jcz/static/js/chunk-75e08e9c.f11e6a9c.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-798e81fa.960fde96.js
Normal file
1
jcz/static/js/chunk-798e81fa.960fde96.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-8a8b5a2c.a0ad2964.js
Normal file
1
jcz/static/js/chunk-8a8b5a2c.a0ad2964.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-de41fb3a.4ee5100d.js
Normal file
1
jcz/static/js/chunk-de41fb3a.4ee5100d.js
Normal file
File diff suppressed because one or more lines are too long
1
jcz/static/js/chunk-f4bc13c4.4e6f79f8.js
Normal file
1
jcz/static/js/chunk-f4bc13c4.4e6f79f8.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -572,7 +572,7 @@ export function MapUtil(map) {
|
||||
if (!coords) return;
|
||||
if (isclear) _that.removeElement(flag)
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let color1 = color ? color : 'rgba(29,237,245,0.6)'
|
||||
let color1 = color ? color : 'rgba(234, 245, 29, 0.6)'
|
||||
let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
|
||||
let style = {
|
||||
color: color1,
|
||||
@ -599,7 +599,6 @@ 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) //高亮展示
|
||||
|
||||
@ -1,82 +1,30 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="1400px"
|
||||
:model-value="modelValue"
|
||||
append-to-body
|
||||
@close="closed"
|
||||
>
|
||||
<el-dialog :title="titleValue" width="1400px" :model-value="modelValue" append-to-body @close="closed">
|
||||
<div>
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="listQuery.loginName"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入用户名" v-model="listQuery.loginName" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码">
|
||||
<el-input
|
||||
placeholder="请输入电话号码"
|
||||
v-model="listQuery.phone"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入电话号码" v-model="listQuery.phone" 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"
|
||||
@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="loginName"
|
||||
align="center"
|
||||
label="用户名"
|
||||
width="150"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="idEntityCard"
|
||||
align="center"
|
||||
label="身份证号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
align="center"
|
||||
label="部门"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="inDustRialId"
|
||||
align="center"
|
||||
width="150"
|
||||
label="警号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="mobile"
|
||||
width="150"
|
||||
align="center"
|
||||
label="电话"
|
||||
></el-table-column>
|
||||
<div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" @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="loginName" align="center" label="用户名" width="150"></el-table-column>
|
||||
<el-table-column prop="idEntityCard" align="center" label="身份证号"></el-table-column>
|
||||
<el-table-column prop="deptName" align="center" label="部门"></el-table-column>
|
||||
<el-table-column prop="inDustRialId" align="center" width="150" label="警号"></el-table-column>
|
||||
<el-table-column prop="mobile" width="150" align="center" label="电话"></el-table-column>
|
||||
<el-table-column prop="sex" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<span> {{ row.sex == 1 ? "男" : "女" }}</span>
|
||||
@ -85,16 +33,9 @@
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
||||
194
src/components/MyComponents/ChooseYjUser/index.vue
Normal file
194
src/components/MyComponents/ChooseYjUser/index.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog :title="titleValue" width="1400px" :model-value="modelValue" append-to-body @close="closed">
|
||||
<div>
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="姓名">
|
||||
<el-input placeholder="请输入姓名" v-model="listQuery.yjRyxm" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input placeholder="请输入身份证号" v-model="listQuery.yjRysfzh" 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" @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="yjRyxm" align="center" label="姓名" width="150"></el-table-column>
|
||||
<el-table-column prop="yjRysfzh" align="center" label="身份证号"></el-table-column>
|
||||
<el-table-column prop="yjBt" align="center" label="标题"></el-table-column>
|
||||
<el-table-column prop="yjbqmc" align="center" width="150" label="标签"></el-table-column>
|
||||
<el-table-column prop="yjDz" width="150" align="center" label="预警地址"></el-table-column>
|
||||
<el-table-column prop="yjTp" align="center" label="预警图片">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[row.yjTp]" fit="cover" style="width: 100px; height: 100px"
|
||||
:src="row.yjTp"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" :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>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { selectUnAccreditPage, selectUserDeptPage } from "@/api/user-manage";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择用户预警人员"
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
onMounted(() => {
|
||||
handleFilter();
|
||||
});
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
loginName: "",
|
||||
phone: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
// 为用户分配角色
|
||||
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("choosedUsers", list);
|
||||
let data = { type: props.LeaderType, userList: userList };
|
||||
emits("choosedUsersLeader", data);
|
||||
closed();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = () => {
|
||||
const params = listQuery.value;
|
||||
qcckPost(params, '/mosty-jcz/tbJczYjxx/getPageList').then((res) => {
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser();
|
||||
});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
if (props.roleIds.some((id) => id == item.id)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
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;
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
/* background: #050e33; */
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
/* color: #fff; */
|
||||
}
|
||||
</style>
|
||||
@ -6,6 +6,7 @@
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="singleElection"
|
||||
@cell-click="cellClick"
|
||||
:row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border"
|
||||
:default-expand-all="getConfiger.defaultExpandAll"
|
||||
@ -123,7 +124,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const emit = defineEmits(["chooseData"]);
|
||||
const emit = defineEmits(["chooseData","columnInfo"]);
|
||||
const multipleTableRef = ref();
|
||||
let getConfiger = reactive({
|
||||
showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
|
||||
@ -164,6 +165,9 @@ const singleElection = (val) => {
|
||||
emit("chooseData", [val]);
|
||||
}
|
||||
};
|
||||
const cellClick = (row, column) => {
|
||||
emit("columnInfo", {row,column});
|
||||
};
|
||||
// 懒加载数据的方法
|
||||
const load = (date, treeNode, resolve) => {
|
||||
setTimeout(() => {
|
||||
|
||||
@ -1,26 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="1400px"
|
||||
v-model="modelValue"
|
||||
@close="closed"
|
||||
>
|
||||
<el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
/>
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="环林卡口名称">
|
||||
<el-input
|
||||
v-model="listQuery.jczmc"
|
||||
placeholder="请输入环林卡口名称"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="listQuery.jczmc" placeholder="请输入环林卡口名称" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
@ -29,98 +16,34 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" style="margin-top: 0px" v-if="modelValue">
|
||||
<el-table
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
:highlight-current-row="props.Single"
|
||||
border
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
:row-key="keyid"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
:reserve-selection="true"
|
||||
v-if="!props.Single"
|
||||
/>
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData"
|
||||
:highlight-current-row="props.Single" border v-loading="loading" style="width: 100%" :row-key="keyid"
|
||||
height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
|
||||
<el-table-column width="55" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jczmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="环林卡口名称"
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column sortable prop="jczmc" show-overflow-tooltip align="center" label="环林卡口名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="环林卡口类型"
|
||||
prop="jczlx"
|
||||
>
|
||||
<el-table-column show-overflow-tooltip align="center" label="环林卡口类型" prop="jczlx">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_JCZLX"
|
||||
:value="row.jczlx"
|
||||
:tag="false"
|
||||
/>
|
||||
<dict-tag :options="D_BZ_JCZLX" :value="row.jczlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xxdz"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="环林卡口地址"
|
||||
>
|
||||
<el-table-column prop="xxdz" show-overflow-tooltip align="center" label="环林卡口地址">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jd"
|
||||
show-overflow-tooltip
|
||||
label="经度"
|
||||
align="center"
|
||||
>
|
||||
<el-table-column sortable prop="jd" show-overflow-tooltip label="经度" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="wd"
|
||||
show-overflow-tooltip
|
||||
label="纬度"
|
||||
align="center"
|
||||
>
|
||||
<el-table-column sortable prop="wd" show-overflow-tooltip label="纬度" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
@ -327,14 +250,16 @@ watch(
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell {
|
||||
// background: #106fdc;
|
||||
}
|
||||
</style>
|
||||
|
||||
281
src/components/loder/gjclloder.vue
Normal file
281
src/components/loder/gjclloder.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="环林卡口名称">
|
||||
<el-input v-model="listQuery.clztwptzdm" placeholder="请输入环林卡口名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="车后部物品特征代码">
|
||||
<el-input v-model="listQuery.chbwptzdm" placeholder="请输入车后部物品特征代码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="车前部物品特征代码">
|
||||
<el-input v-model="listQuery.cqbwptzdm" placeholder="请输入车前部物品特征代码" clearable />
|
||||
</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" style="margin-top: 0px" v-if="modelValue">
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData"
|
||||
:highlight-current-row="props.Single" border v-loading="loading" style="width: 100%" :row-key="keyid"
|
||||
height="430">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single && props.chooseShow" />
|
||||
<el-table-column width="55" #default="{ row }" v-if="props.Single && props.chooseShow">
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column show-overflow-tooltip align="center" label="车前盖图" prop="swrltx">
|
||||
<template #default="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.cqgt" :src="urlImg + row.cqgt" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="kkMc" show-overflow-tooltip align="center" label="卡口名称"></el-table-column>
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column sortable prop="clztwptzdm" show-overflow-tooltip align="center" label="车辆张贴物品特征代码"></el-table-column>
|
||||
<el-table-column sortable prop="chbwptzdm" show-overflow-tooltip align="center" label="车后部物品特征代码"></el-table-column>
|
||||
<el-table-column sortable prop="zqlx" show-overflow-tooltip align="center" label="车前部物品特征代码"></el-table-column>
|
||||
<el-table-column sortable prop="clychjdm" show-overflow-tooltip align="center" label="车辆异常痕迹代码"></el-table-column>
|
||||
<el-table-column sortable prop="hphm" show-overflow-tooltip align="center" label="机动车号牌号码"></el-table-column>
|
||||
<el-table-column sortable prop="txsj" show-overflow-tooltip align="center" label="通行时间"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Person from '@/assets/images/default_male.png'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JCZLX } = proxy.$dict("D_BZ_JCZLX");
|
||||
const props = defineProps({
|
||||
//是否显示
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
//标题
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "过检车辆"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//已经选中得数据回显
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 是否显示选择框
|
||||
chooseShow:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 搜索条件
|
||||
searchData:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
});
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const ridioIndex = ref(null);
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const emits = defineEmits(["update:modelValue", "choosedJcz"]);
|
||||
const closed = () => {
|
||||
listQuery.value.jczmc = "";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 判断传进来的选中数据和加载的选中数据不满足的数据
|
||||
const checkopenList = ref([]);
|
||||
|
||||
// 确定选中
|
||||
const onComfirm = () => {
|
||||
//单选
|
||||
if (props.Single) {
|
||||
if (![ridioIndex.value][0]) {
|
||||
proxy.$message.warning("请选择过检车辆");
|
||||
return;
|
||||
}
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedJcz", JSON.parse(JSON.stringify(info)));
|
||||
} else {
|
||||
//多选
|
||||
const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||||
if (jczList.length === 0) {
|
||||
proxy.$message.warning("请选择过检车辆");
|
||||
return;
|
||||
}
|
||||
emits("choosedJcz", [...jczList, ...checkopenList.value]);
|
||||
}
|
||||
closed();
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
});
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
//检查站数据
|
||||
const getListData = async () => {
|
||||
loading.value = true;
|
||||
qcckGet({...listQuery.value,...props.searchData}, "/mosty-jcz/jczGjcltx/selectPage")
|
||||
.then((res) => {
|
||||
tableData.value = res?.records;
|
||||
loading.value = false;
|
||||
multipleUser(props.data, tableData.value);
|
||||
total.value = Number(res.total);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelectionUser.value = val;
|
||||
if (checkopenList.value) {
|
||||
for (let i = 0; i < multipleSelectionUser.value.length; i++) {
|
||||
const l = multipleSelectionUser.value[i];
|
||||
for (let j = 0; j < checkopenList.value.length; j++) {
|
||||
const z = checkopenList.value[j];
|
||||
if (l.id == z.id) {
|
||||
checkopenList.value.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//回显--用于多选表格
|
||||
function multipleUser(row, list) {
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (typeof item == "object") {
|
||||
if (item.id == select.id) {
|
||||
ridioIndex.value = item.id;
|
||||
}
|
||||
} else {
|
||||
if (item == select.id) {
|
||||
ridioIndex.value = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (item.id == select.id) {
|
||||
if (multipleUserRef.value) {
|
||||
multipleUserRef.value.toggleRowSelection(select, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) {
|
||||
ridioIndex.value = "";
|
||||
handleFilter();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (multipleUserRef.value) multipleUser(val, tableData.value);
|
||||
checkopenList.value = JSON.parse(JSON.stringify(val));
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell {
|
||||
// background: #106fdc;
|
||||
}
|
||||
</style>
|
||||
290
src/components/loder/gjrxloder.vue
Normal file
290
src/components/loder/gjrxloder.vue
Normal file
@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="过检人员姓名">
|
||||
<el-input v-model="listQuery.gjryxm" placeholder="请输入过检人员姓名" clearable />
|
||||
</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" style="margin-top: 0px" v-if="modelValue">
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData"
|
||||
:highlight-current-row="props.Single" border v-loading="loading" style="width: 100%" :row-key="keyid"
|
||||
height="430">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single && props.chooseShow" />
|
||||
<el-table-column width="55" #default="{ row }" v-if="props.Single && props.chooseShow">
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column sortable prop="gjryxm" show-overflow-tooltip align="center" label="过检人员姓名" />
|
||||
<el-table-column sortable prop="gjrysfzh" show-overflow-tooltip align="center" label="过检人员身份证号" />
|
||||
<el-table-column sortable prop="kkMc" show-overflow-tooltip align="center" label="卡口名称" />
|
||||
<el-table-column show-overflow-tooltip align="center" label="三维人脸图像" prop="swrltx">
|
||||
<template #default="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.swrltx" :src="urlImg + row.swrltx" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="人脸图" prop="swrltx">
|
||||
<template #default="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.rlt" :src="urlImg + row.rlt" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="人员图" prop="swrltx">
|
||||
<template #default="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.ryt" :src="urlImg + row.ryt" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="txsj" show-overflow-tooltip align="center" label="通行时间">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Person from '@/assets/images/default_male.png'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
ref,
|
||||
onMounted,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_JCZLX } = proxy.$dict("D_BZ_JCZLX");
|
||||
const props = defineProps({
|
||||
//是否显示
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
//标题
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "过检人员"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//已经选中得数据回显
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 是否显示选择框
|
||||
chooseShow:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 搜索条件
|
||||
searchData:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const ridioIndex = ref(null);
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const emits = defineEmits(["update:modelValue", "choosedJcz"]);
|
||||
const closed = () => {
|
||||
listQuery.value.jczmc = "";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 判断传进来的选中数据和加载的选中数据不满足的数据
|
||||
const checkopenList = ref([]);
|
||||
|
||||
// 确定选中
|
||||
const onComfirm = () => {
|
||||
//单选
|
||||
if (props.Single) {
|
||||
if (![ridioIndex.value][0]) {
|
||||
proxy.$message.warning("请选择过检人员");
|
||||
return;
|
||||
}
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedJcz", JSON.parse(JSON.stringify(info)));
|
||||
} else {
|
||||
//多选
|
||||
const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||||
if (jczList.length === 0) {
|
||||
proxy.$message.warning("请选择过检人员");
|
||||
return;
|
||||
}
|
||||
emits("choosedJcz", [...jczList, ...checkopenList.value]);
|
||||
}
|
||||
closed();
|
||||
};
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
//检查站数据
|
||||
const getListData = async () => {
|
||||
loading.value = true;
|
||||
qcckGet({...listQuery.value,...props.searchData}, "/mosty-jcz/jczGjrytx/selectPage")
|
||||
.then((res) => {
|
||||
tableData.value = res?.records;
|
||||
loading.value = false;
|
||||
multipleUser(props.data, tableData.value);
|
||||
total.value = Number(res.total);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelectionUser.value = val;
|
||||
if (checkopenList.value) {
|
||||
for (let i = 0; i < multipleSelectionUser.value.length; i++) {
|
||||
const l = multipleSelectionUser.value[i];
|
||||
for (let j = 0; j < checkopenList.value.length; j++) {
|
||||
const z = checkopenList.value[j];
|
||||
if (l.id == z.id) {
|
||||
checkopenList.value.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//回显--用于多选表格
|
||||
function multipleUser(row, list) {
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (typeof item == "object") {
|
||||
if (item.id == select.id) {
|
||||
ridioIndex.value = item.id;
|
||||
}
|
||||
} else {
|
||||
if (item == select.id) {
|
||||
ridioIndex.value = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (item.id == select.id) {
|
||||
if (multipleUserRef.value) {
|
||||
multipleUserRef.value.toggleRowSelection(select, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) {
|
||||
ridioIndex.value = "";
|
||||
handleFilter();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (multipleUserRef.value) multipleUser(val, tableData.value);
|
||||
checkopenList.value = JSON.parse(JSON.stringify(val));
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell {
|
||||
// background: #106fdc;
|
||||
}
|
||||
</style>
|
||||
274
src/components/loder/gjwploder.vue
Normal file
274
src/components/loder/gjwploder.vue
Normal file
@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="过检人员姓名">
|
||||
<el-input v-model="listQuery.gjryxm" placeholder="请输入过检人员姓名" clearable />
|
||||
</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" style="margin-top: 0px" v-if="modelValue">
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData"
|
||||
:highlight-current-row="props.Single" border v-loading="loading" style="width: 100%" :row-key="keyid"
|
||||
height="430">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"
|
||||
v-if="!props.Single && props.chooseShow" />
|
||||
<el-table-column width="55" #default="{ row }" v-if="props.Single && props.chooseShow">
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="kkMc" show-overflow-tooltip align="center" label="卡口名称" />
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column sortable prop="ryxm" show-overflow-tooltip align="center" label="人员姓名" />
|
||||
<el-table-column sortable prop="rysfzh" show-overflow-tooltip align="center" label="人员身份证号" />
|
||||
<el-table-column sortable prop="hphm" show-overflow-tooltip align="center" label="过检车辆" />
|
||||
<el-table-column show-overflow-tooltip align="center" label="物品类型" prop="wplx">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.wplx" :options="D_BZ_WPLX" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="wpsl" show-overflow-tooltip align="center" label="物品数量">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
ref,
|
||||
onMounted,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_JCZLX } = proxy.$dict("D_BZ_JCZLX");
|
||||
const props = defineProps({
|
||||
//是否显示
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
//标题
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "过检物品"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//已经选中得数据回显
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 是否显示选择框
|
||||
chooseShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 搜索条件
|
||||
searchData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const ridioIndex = ref(null);
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const emits = defineEmits(["update:modelValue", "choosedJcz"]);
|
||||
const closed = () => {
|
||||
listQuery.value.jczmc = "";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 判断传进来的选中数据和加载的选中数据不满足的数据
|
||||
const checkopenList = ref([]);
|
||||
|
||||
// 确定选中
|
||||
const onComfirm = () => {
|
||||
//单选
|
||||
if (props.Single) {
|
||||
if (![ridioIndex.value][0]) {
|
||||
proxy.$message.warning("请选择过检人员");
|
||||
return;
|
||||
}
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedJcz", JSON.parse(JSON.stringify(info)));
|
||||
} else {
|
||||
//多选
|
||||
const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||||
if (jczList.length === 0) {
|
||||
proxy.$message.warning("请选择过检人员");
|
||||
return;
|
||||
}
|
||||
emits("choosedJcz", [...jczList, ...checkopenList.value]);
|
||||
}
|
||||
closed();
|
||||
};
|
||||
onMounted(() => { });
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
//检查站数据
|
||||
const getListData = async () => {
|
||||
loading.value = true;
|
||||
qcckGet(
|
||||
{ ...listQuery.value, ...props.searchData },
|
||||
"/mosty-jcz/tbJczBpcWp/getPagelist"
|
||||
)
|
||||
.then((res) => {
|
||||
tableData.value = res?.records;
|
||||
loading.value = false;
|
||||
multipleUser(props.data, tableData.value);
|
||||
total.value = Number(res.total);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelectionUser.value = val;
|
||||
if (checkopenList.value) {
|
||||
for (let i = 0; i < multipleSelectionUser.value.length; i++) {
|
||||
const l = multipleSelectionUser.value[i];
|
||||
for (let j = 0; j < checkopenList.value.length; j++) {
|
||||
const z = checkopenList.value[j];
|
||||
if (l.id == z.id) {
|
||||
checkopenList.value.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//回显--用于多选表格
|
||||
function multipleUser(row, list) {
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (typeof item == "object") {
|
||||
if (item.id == select.id) {
|
||||
ridioIndex.value = item.id;
|
||||
}
|
||||
} else {
|
||||
if (item == select.id) {
|
||||
ridioIndex.value = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (item.id == select.id) {
|
||||
if (multipleUserRef.value) {
|
||||
multipleUserRef.value.toggleRowSelection(select, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) {
|
||||
ridioIndex.value = "";
|
||||
handleFilter();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (multipleUserRef.value) multipleUser(val, tableData.value);
|
||||
checkopenList.value = JSON.parse(JSON.stringify(val));
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell {
|
||||
// background: #106fdc;
|
||||
}
|
||||
</style>
|
||||
@ -304,6 +304,18 @@ export const publicRoutes = [
|
||||
title: "感知源管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/EquipmentStatistics",
|
||||
name: "EquipmentStatistics",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/EquipmentStatistics/index"
|
||||
),
|
||||
meta: {
|
||||
title: "装备统计",
|
||||
icon: "article"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -315,6 +327,18 @@ export const publicRoutes = [
|
||||
icon: "article"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/CheckStatisticsManage",
|
||||
name: "CheckStatisticsManage",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/CheckStatisticsManage/index"
|
||||
),
|
||||
meta: {
|
||||
title: "盘查统计",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/InventoryManage",
|
||||
name: "InventoryManage",
|
||||
@ -338,8 +362,19 @@ export const publicRoutes = [
|
||||
title: "车辆盘查",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/wpCheckManage",
|
||||
name: "wpCheckManage",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/wpCheckManage/index"
|
||||
),
|
||||
meta: {
|
||||
title: "物品盘查",
|
||||
icon: "article"
|
||||
}
|
||||
,
|
||||
},
|
||||
{
|
||||
path: "/TrackPerson",
|
||||
name: "TrackPerson",
|
||||
@ -381,6 +416,42 @@ export const publicRoutes = [
|
||||
title: "过检车辆管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/InspectionItemManage",
|
||||
name: "InspectionItemManage",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/InspectionItemManage/index"
|
||||
),
|
||||
meta: {
|
||||
title: "过检物品管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/crossStation",
|
||||
name: "crossStation",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/crossStation/index"
|
||||
),
|
||||
meta: {
|
||||
title: "过站汇总管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/CheckpointAnalysis",
|
||||
name: "CheckpointAnalysis",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/peopleManag/CheckpointAnalysis/index"
|
||||
),
|
||||
meta: {
|
||||
title: "卡口管控分析管理",
|
||||
icon: "article"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="图片" style="width: 10%">
|
||||
<img
|
||||
class="imgBox"
|
||||
:src="
|
||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
||||
listQuery.sfzh
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="listQuery.ssbm"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:options="depList"
|
||||
:props="props"
|
||||
v-model:modelValue="listQuery.gldwdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查民警姓名">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjXm"
|
||||
placeholder="盘查民警姓名"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查民警警号" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcmjJh"
|
||||
placeholder="盘查民警警号"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人身份证号" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.sfzh"
|
||||
placeholder="请输入被盘查人身份证号"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人性别" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.sexmc"
|
||||
placeholder="请输入被盘查人性别"
|
||||
disabled
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人出生日期" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.csrq"
|
||||
disabled
|
||||
placeholder="被盘查人出生日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人民族" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.mzmc"
|
||||
disabled
|
||||
placeholder="被盘查人民族"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="被盘查人学历" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.whcdmc"
|
||||
disabled
|
||||
placeholder="被盘查人学历"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人籍贯" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.jgdm"
|
||||
disabled
|
||||
placeholder="被盘查人籍贯"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人住址详址" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.zzxz"
|
||||
disabled
|
||||
placeholder="被盘查人住址详址"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="被盘查人联系电话" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.lxdh"
|
||||
disabled
|
||||
placeholder="被盘查人联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查日期" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcrq" disabled placeholder="盘查日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="盘查时间" style="width: 40%">
|
||||
<el-input v-model="listQuery.pcsj" disabled placeholder="盘查时间" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查输入类型" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcsrlxmc"
|
||||
disabled
|
||||
placeholder="盘查输入类型"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员标签" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.bqxxsj"
|
||||
disabled
|
||||
placeholder="人员标签"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="盘查处理结果" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcclJgmc"
|
||||
disabled
|
||||
placeholder="盘查处理结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="移交单位" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.pcclYjdw"
|
||||
disabled
|
||||
placeholder="移交单位"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="移交原因" style="width: 100%">
|
||||
<el-input
|
||||
placeholder="移交原因"
|
||||
v-model="listQuery.pcclYjyy"
|
||||
disabled
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查图片</span>
|
||||
</div>
|
||||
<el-form :model="listQuery" :inline="true" label-position="top">
|
||||
<div v-if="listQuery.tpList && listQuery.tpList.length > 0">
|
||||
<el-image
|
||||
class="image"
|
||||
v-for="(item, index) in listQuery.tpList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item.fjid}`"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="head_box">
|
||||
<span class="title">盘查物品</span>
|
||||
</div>
|
||||
<div v-if="listQuery.wpVoList && listQuery.wpVoList.length > 0">
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="物品图片" prop="name">
|
||||
<div style="height: 120px; display: inline-block">
|
||||
<el-image
|
||||
v-for="(item, index) in listQuery.wpVoList[0]?.wpTpIdList"
|
||||
:key="index"
|
||||
:src="`/mosty-api/mosty-base/minio/image/download/${item}`"
|
||||
class="image"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品描述" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpms"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品数量" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wpsl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品类型" prop="name">
|
||||
<el-input v-model="listQuery.wpVoList[0].wplx"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const propsTree = ref({
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
//页面关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight1.value = window.innerHeight - 450;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.imgBox {
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
}
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px 0 10px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="盘查统计">
|
||||
<!-- <el-link type="primary" @click="addEdit('detail', row)">详情</el-link> -->
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div ref="searchBox">
|
||||
<!-- <Search :searchArr="searchConfiger" @submit="onSearch" /> -->
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "车辆数", prop: "clNum" },
|
||||
{ label: "车辆物品数", prop: "clwpNum" },
|
||||
{ label: "人员数", prop: "ryNum" },
|
||||
{ label: "人员物品数", prop: "rywpNum" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 获取数据
|
||||
const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes = { ...queryCondition.value, ...pageData.pageConfiger };
|
||||
qcckGet(promes,"/mosty-jcz/tbJczBpcCount/getRcwTj")
|
||||
.then((res) => {
|
||||
pageData.tableData = [res];
|
||||
})
|
||||
.finally(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
const promes = {
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
};
|
||||
if (val.startTime) {
|
||||
promes.startTime = val.startTime[0];
|
||||
promes.endTime = val.startTime[1];
|
||||
} else {
|
||||
promes.startTime = "";
|
||||
promes.endTime = "";
|
||||
}
|
||||
queryCondition.value = { ...queryCondition.value, ...val, ...promes };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
const searchBox = ref(null);
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 280;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" :id="echartsId"></div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
onUnmounted,
|
||||
watch,
|
||||
nextTick
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
echartsId: {
|
||||
type: String,
|
||||
default: "lineId"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#fff"
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
function chartFn() {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
var option = {
|
||||
legend: {
|
||||
data: ['出城车辆', '入城车辆'],
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "0",
|
||||
left: "0",
|
||||
bottom: "10%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#ddd"
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(255,255,255,1)",
|
||||
padding: [5, 10],
|
||||
textStyle: {
|
||||
color: "#7588E4"
|
||||
},
|
||||
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: props.data.rzcl.map((el) => el.time)
|
||||
},
|
||||
yAxis: {
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "出城车辆",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
data: props.data.rzcl.map((el) => el.num)
|
||||
},
|
||||
{
|
||||
name: "入城车辆",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
smooth: true,
|
||||
data: props.data.czcl.map((el) => el.num)
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
// chartFn();
|
||||
});
|
||||
watch(() => props.data, (val) => {
|
||||
if (val) {
|
||||
chartFn();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" :id="echartsId"></div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
onUnmounted,
|
||||
watch,
|
||||
nextTick
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
echartsId: {
|
||||
type: String,
|
||||
default: "pieId"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#fff"
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
|
||||
function chartFn() {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
var option = {
|
||||
legend: {
|
||||
bottom: '5%',
|
||||
left: 'center',
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "0",
|
||||
right: "0",
|
||||
left: "0",
|
||||
bottom: "12%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: props.data
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
// chartFn();
|
||||
});
|
||||
watch(() => props.data, (val) => {
|
||||
if (val) {
|
||||
chartFn();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部数据卡片区域 -->
|
||||
<div class="top-cards">
|
||||
<el-card class="card-item" v-for="item in topData" :key="item">
|
||||
<div class="card-title">{{ item.bt }}</div>
|
||||
<div class="card-value">{{ item.num }}</div>
|
||||
<div class="card-desc">{{ item.nr }}</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 中间图表+数据区域 -->
|
||||
<div class="middle-section">
|
||||
<!-- 左侧:车流量折线图 -->
|
||||
<el-card class="section-item">
|
||||
<div class="section-title flex just-between align-center">
|
||||
<div>进出镇区主干道卡口数据监测</div>
|
||||
<!-- <el-select v-model="value" placeholder="请选择" style="width: 240px">
|
||||
<el-option label="今日数量" value="0" />
|
||||
</el-select> -->
|
||||
</div>
|
||||
<LineEchart :data="clData" style="height: 200px" />
|
||||
<div class="traffic-footer">
|
||||
<div>入镇口:{{ clData.rck }}</div>
|
||||
<div>出镇口:{{ clData.cck }}</div>
|
||||
<div>重点卡口:{{ clData.zdkk }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 右侧:人口结构环形图 -->
|
||||
<el-card class="section-item">
|
||||
<div class="section-title">入镇人员分析模型-人口数据统计</div>
|
||||
<PieEcharts style="height: 210px" :data="yjfxData" />
|
||||
<div class="population-footer">
|
||||
<div v-for="item in yjfxData" :key="item">{{ item.bt }}:{{ item.num }} ({{ item.bfb }}%)</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 底部数据+地图区域 -->
|
||||
<div class="bottom-section">
|
||||
<!-- 左侧:预警人员表格 -->
|
||||
<el-card class="section-item_small">
|
||||
<div class="section-title">人员数据比对分析-预警人员信息</div>
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div>#</div>
|
||||
</el-col>
|
||||
<el-col :span="10">人员信息</el-col>
|
||||
<el-col :span="8">预警类型</el-col>
|
||||
<el-col :span="4">风险等级</el-col>
|
||||
</el-row>
|
||||
<div class="row_mian"><el-row v-for="(el, index) in tableData" :key="el.id">
|
||||
<el-col :span="2">
|
||||
<div>{{ index + 1 }}</div>
|
||||
</el-col>
|
||||
<el-col :span="10"> {{ el.yjRyxm }} </el-col>
|
||||
<el-col :span="8"> <dict-tag :options="D_BZ_YJLX" :value="el.yjLx" :tag="false" /> </el-col>
|
||||
<el-col :span="4" style="text-align: center;"> <dict-tag :options="D_BZ_YJJB" :value="el.yjJb"
|
||||
:tag="false" /> </el-col>
|
||||
</el-row></div>
|
||||
<el-button type="primary" style="width: 100%; margin-top: 10px" @click="onLoad"
|
||||
v-if="tableData.length < total">查看全部预警人员</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- 右侧:地图+监控说明 -->
|
||||
<el-card class="section-item map-card">
|
||||
<div class="section-title flex just-between align-center">
|
||||
<div>预警人员轨迹追踪系统-多源数据联动</div>
|
||||
<div class="flex">
|
||||
<el-input readonly @click="chooseUserVisible = true" v-model="listQuery.yjRyxm" placeholder="请选择预警人员"
|
||||
clearable />
|
||||
<!-- <el-button type="primary">轨迹跟踪</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-container">
|
||||
<div class="mapbox">
|
||||
<GdMap />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChooseYjUser v-model="chooseUserVisible" @choosedUsers="saveUsers" :Single="true"></ChooseYjUser>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import ChooseYjUser from "@/components/MyComponents/ChooseYjUser";
|
||||
import LineEchart from "./components/lineEcharts.vue";
|
||||
import PieEcharts from "./components/pieEcharts.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
import Total from "element-plus/es/components/pagination/src/components/total.mjs";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
// 预警人员列表数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const total = ref(0);
|
||||
const topData = ref([]);
|
||||
const clData = ref({});
|
||||
const yjfxData = ref(null);
|
||||
const value = ref();
|
||||
const chooseUserVisible = ref(false);
|
||||
const tableData = ref([]);
|
||||
onMounted(() => {
|
||||
Promise.all([getTopTj(), getclTj(), getYjfxTj(), getListData()]);
|
||||
});
|
||||
//查询条件
|
||||
const queryCondition = ref({});
|
||||
// 统计
|
||||
const getTopTj = () => {
|
||||
qcckGet({}, "/mosty-jcz/kktj/getKkgkfx").then((res) => {
|
||||
topData.value = res;
|
||||
});
|
||||
};
|
||||
|
||||
const getclTj = () => {
|
||||
qcckGet({}, "/mosty-jcz/kktj/getClkksjtj")
|
||||
.then((res) => {
|
||||
clData.value = res;
|
||||
})
|
||||
};
|
||||
const getYjfxTj = () => {
|
||||
qcckGet({}, "/mosty-jcz/kktj/getRjryfxmx")
|
||||
.then((res) => {
|
||||
yjfxData.value = res.map((el) => {
|
||||
return { value: el.num, name: el.bt, ...el }
|
||||
});
|
||||
})
|
||||
};
|
||||
const getListData = () => {
|
||||
qcckPost(listQuery.value, '/mosty-jcz/tbJczYjxx/getPageList').then((res) => {
|
||||
tableData.value =
|
||||
listQuery.value.pageCurrent == 1
|
||||
? res.records
|
||||
: tableData.value.concat(res.records);
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const onLoad = () => {
|
||||
if (tableData.value.length >= total.value) {
|
||||
return
|
||||
}
|
||||
listQuery.value.pageCurrent++;
|
||||
getListData()
|
||||
}
|
||||
const columnInfo = (val) => {
|
||||
// 过站类型(01 入林 02 出林) 01 入林 02 出林
|
||||
dialogSearch.value.kkId = val.row.kkId;
|
||||
switch (val.column.property) {
|
||||
case "gzryNum":
|
||||
dialogSearch.value.gzlx = "";
|
||||
showGjry.value = true;
|
||||
break;
|
||||
case "rlclNum":
|
||||
dialogSearch.value.gzlx = "01";
|
||||
showGjry.value = true;
|
||||
break;
|
||||
case "clryNum":
|
||||
dialogSearch.value.gzlx = "02";
|
||||
showGjry.value = true;
|
||||
break;
|
||||
case "gzclNum":
|
||||
dialogSearch.value.gzlx = "";
|
||||
showGjcl.value = true;
|
||||
break;
|
||||
case "rlclNum":
|
||||
dialogSearch.value.gzlx = "01";
|
||||
showGjcl.value = true;
|
||||
break;
|
||||
case "clclNum":
|
||||
dialogSearch.value.gzlx = "02";
|
||||
showGjcl.value = true;
|
||||
break;
|
||||
case "gzwpNum":
|
||||
dialogSearch.value.gzlx = "";
|
||||
showGjwp.value = true;
|
||||
break;
|
||||
case "rlwpNum":
|
||||
dialogSearch.value.gzlx = "01";
|
||||
showGjwp.value = true;
|
||||
break;
|
||||
case "clwpNum":
|
||||
dialogSearch.value.gzlx = "02";
|
||||
showGjwp.value = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
//选择预警人员
|
||||
const saveUsers = (users) => {
|
||||
listQuery.value.yjRyxm = users[0].yjRyxm;
|
||||
listQuery.value.yjRysfzh = users[0].yjRysfzh;
|
||||
qcckPost({ yjRysfzh: listQuery.value.yjRysfzh }, '/mosty-jcz/tbJczYjxx/getPageList').then((res) => {
|
||||
let list = res.records.map((item) => {
|
||||
return [item.jd, item.wd]
|
||||
})
|
||||
let obj = { coords: [list], text: '', id: '2222' }
|
||||
console.log(obj, 'obj');
|
||||
emitter.emit("echoLine", {
|
||||
flag: `yjry_gj`,
|
||||
type: "solid",
|
||||
coords: [obj], // 保持使用第一个数据点进行测试
|
||||
isclear:true
|
||||
});
|
||||
emitter.emit("setMapCenter", { location: [res.records[0].jd, res.records[0].wd], zoomLevel: 10 });
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd: res.records[0].jd, wd: res.records[0].wd }],
|
||||
icon: require("@/assets/point/zsdw.png"),
|
||||
flag: "jczMap_Gzy"
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 顶部卡片 */
|
||||
.top-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
flex: 1;
|
||||
background-color: #1e1e30;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-item.warning {
|
||||
border: 1px solid #f56c6c;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 中间区域 */
|
||||
.middle-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
flex: 1;
|
||||
background-color: #1e1e30;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-item_small {
|
||||
width: 33%;
|
||||
background-color: #1e1e30;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.traffic-footer,
|
||||
.population-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 底部区域 */
|
||||
.bottom-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 340px;
|
||||
/* 适配剩余高度 */
|
||||
}
|
||||
|
||||
.map-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.mapbox {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
height: 250px;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.map-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("https://picsum.photos/800/400") center/cover;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.monitor-tip {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(20, 20, 30, 0.8);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tip-desc {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tip-features {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row_mian {
|
||||
height: 24vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" width="60%" custom-class="container" @close="close" :title="title" align-center>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #cplx="{ row }">
|
||||
<dict-tag :options="D_BZ_HPZL" :value="row.cplx" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #jyjtgjlb="{ row }">
|
||||
<dict-tag :options="D_JCGL_JYCL_JYJTGJLB" :value="row.jyjtgjlb" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #jyjtytlb="{ row }">
|
||||
<dict-tag :options="D_JCGL_JYCL_JYJTYTLB" :value="row.jyjtytlb" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #hpyslb="{ row }">
|
||||
<dict-tag :options="D_JCGL_JYCL_HPYSLB" :value="row.hpyslb" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #sblx="{ row }">
|
||||
<dict-tag :options="D_JCGL_TCSB_SBLX" :value="row.sblx" :tag="false"></dict-tag>
|
||||
</template>
|
||||
<template #qxlx="{ row }">
|
||||
<dict-tag :options="D_JCGL_JYQX_QXLX" :value="row.qxlx" :tag="false"></dict-tag>
|
||||
</template>
|
||||
</MyTable>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch, getCurrentInstance } from 'vue'
|
||||
import MyTable from '@/components/aboutTable/MyTable.vue'
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { ysSxtgetPageList } from "@/api/yszx";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_JCGL_JYCL_JYJTYTLB,
|
||||
D_BZ_HPZL,
|
||||
D_JCGL_JYCL_JYJTGJLB,
|
||||
D_JCGL_JYQX_QXLX,
|
||||
D_JCGL_JYCL_HPYSLB,
|
||||
D_JCGL_TCSB_SBLX
|
||||
} = proxy.$dict(
|
||||
"D_JCGL_JYCL_JYJTYTLB",
|
||||
"D_BZ_HPZL",
|
||||
"D_JCGL_JYCL_JYJTGJLB",
|
||||
"D_JCGL_JYQX_QXLX",
|
||||
"D_JCGL_JYCL_HPYSLB",
|
||||
"D_JCGL_TCSB_SBLX"
|
||||
);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '车辆信息'
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["update:modelValue", "choose"])
|
||||
const dataLsit = ref();
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableHeight: 500,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 180, //操作栏宽度
|
||||
tableColumn: []
|
||||
})
|
||||
watch(() => props.type, (newVal) => {
|
||||
switch (newVal) {
|
||||
case 'cl':
|
||||
pageData.tableColumn = [
|
||||
{ label: "车辆名称", prop: "clmc" },
|
||||
{ label: "号牌号码", prop: "cph", showOverflowTooltip: true },
|
||||
{ label: "号牌类型", prop: "cplx", showSolt: true },
|
||||
];
|
||||
break
|
||||
case 'zb':
|
||||
pageData.tableColumn = [
|
||||
{ label: "设备编号", prop: "sbbh" },
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "设备类型", prop: "sblx", showSolt: true },
|
||||
{ label: "关联GPSID", prop: "glgpsid" }
|
||||
]
|
||||
break
|
||||
case 'qx':
|
||||
pageData.tableColumn = [
|
||||
{ label: "器械名称", prop: "qxmc" },
|
||||
{ label: "器械类型", prop: "qxlx", showSolt: true },
|
||||
{ label: "数量", prop: "qxsl" },
|
||||
]
|
||||
break
|
||||
}
|
||||
})
|
||||
watch(() => props.data, (val) => {
|
||||
if (val) {
|
||||
pageData.tableData = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep:true,immediate:true
|
||||
})
|
||||
const close = () => {
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user