'删除其他不用的文件'
This commit is contained in:
esacpe
@ -28,9 +28,6 @@ router.beforeEach(async (to, from, next) => {
|
|||||||
// 处理用户权限，筛选出需要添加的权限
|
// 处理用户权限，筛选出需要添加的权限
|
||||||
if (store.state.permission.routes == 0) {
|
if (store.state.permission.routes == 0) {
|
||||||
const filterRoutes = await store.dispatch('permission/filterRoutes', afterMenuList)
|
const filterRoutes = await store.dispatch('permission/filterRoutes', afterMenuList)
|
||||||
|
|
||||||
console.log(filterRoutes);
|
|
||||||
|
|
||||||
filterRoutes.forEach(item => {
|
filterRoutes.forEach(item => {
|
||||||
router.addRoute(item)
|
router.addRoute(item)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,149 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所代码" prop="csdm">
|
|
||||||
<el-input v-model="listQuery.csdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="业务流水号码" prop="sblsh">
|
|
||||||
<el-input v-model="listQuery.sblsh" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="旅客代码" prop="lxrdm">
|
|
||||||
<el-input v-model="listQuery.lxrdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="旅客常用证件代码" prop="cyzjdm">
|
|
||||||
<el-input v-model="listQuery.cyzjdm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="签发机关" prop="qfjg">
|
|
||||||
<el-input v-model="listQuery.qfjg" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="入证日期">
|
|
||||||
<el-date-picker v-model="listQuery.rzrq" type="datetime" style="width:100%" placeholder="请选择入证日期"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="姓名" prop="xm">
|
|
||||||
<el-input v-model="listQuery.xm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="房间号码" prop="fjhm">
|
|
||||||
<el-input v-model="listQuery.fjhm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="到店日期">
|
|
||||||
<el-date-picker v-model="listQuery.ddrq" type="datetime" style="width:100%" placeholder="请选择到店日期"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="离店日期">
|
|
||||||
<el-date-picker v-model="listQuery.ldrq" type="datetime" style="width:100%" placeholder="请选择离店日期"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="照片" prop="imageHeight">
|
|
||||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref("");
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === "edit" ? "编辑" : "详情";
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = "新增";
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ init });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #f7fafb;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #e3e7ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo {
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner {
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="国内旅客信息管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 照片 -->
|
|
||||||
<template #photo="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.zp"
|
|
||||||
:preview-src-list="[row.zp]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所代码",
|
|
||||||
prop: "csdm",
|
|
||||||
placeholder: "请输入场所代码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申办流水号码",
|
|
||||||
prop: "sblsh",
|
|
||||||
placeholder: "请输入申办流水号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "证件号码",
|
|
||||||
prop: "zjhm",
|
|
||||||
placeholder: "请输入证件号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入姓名",
|
|
||||||
showType: "input"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
csdm: "123456789",
|
|
||||||
sblsh: "SB202403150001",
|
|
||||||
lxrdm: "LXR001",
|
|
||||||
lxr: "张三",
|
|
||||||
cyzjdm: "111",
|
|
||||||
zjhm: "510183199609233352",
|
|
||||||
xm: "张三",
|
|
||||||
fjhm: "1001",
|
|
||||||
zp: "",
|
|
||||||
ddrq: "2024-03-15",
|
|
||||||
ldrq: "2024-03-16"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所代码", prop: "csdm" },
|
|
||||||
{ label: "业务流水号码", prop: "sblsh" },
|
|
||||||
{ label: "旅客代码", prop: "lxrdm" },
|
|
||||||
{ label: "旅客常用证件代码", prop: "cyzjdm" },
|
|
||||||
{ label: "旅客证件号码", prop: "zjhm" },
|
|
||||||
{ label: "姓名", prop: "xm" },
|
|
||||||
{ label: "房间号码", prop: "fjhm" },
|
|
||||||
{ label: "照片", prop: "zp", slot: "photo" },
|
|
||||||
{ label: "到店日期", prop: "ddrq" },
|
|
||||||
{ label: "离店日期", prop: "ldrq" },
|
|
||||||
{ label: "签发机关", prop: "qfjg" },
|
|
||||||
{ label: "入证日期", prop: "rzrq" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,140 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所代码" prop="csdm">
|
|
||||||
<el-input v-model="listQuery.csdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="业务流水号码" prop="sblsh">
|
|
||||||
<el-input v-model="listQuery.sblsh" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="旅客代码" prop="lxrdm">
|
|
||||||
<el-input v-model="listQuery.lxrdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="旅客常用证件代码" prop="cyzjdm">
|
|
||||||
<el-input v-model="listQuery.cyzjdm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="姓名" prop="xm">
|
|
||||||
<el-input v-model="listQuery.xm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="房间号码" prop="fjhm">
|
|
||||||
<el-input v-model="listQuery.fjhm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="到店日期">
|
|
||||||
<el-date-picker v-model="listQuery.ddrq" type="datetime" style="width:100%" placeholder="请选择到店日期"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="离店日期">
|
|
||||||
<el-date-picker v-model="listQuery.ldrq" type="datetime" style="width:100%" placeholder="请选择离店日期"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="照片" prop="imageHeight">
|
|
||||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref("");
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === "edit" ? "编辑" : "详情";
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = "新增";
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ init });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #f7fafb;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #e3e7ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo {
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner {
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="境外游客信息管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 照片 -->
|
|
||||||
<template #photo="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.zp"
|
|
||||||
:preview-src-list="[row.zp]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所代码",
|
|
||||||
prop: "csdm",
|
|
||||||
placeholder: "请输入场所代码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申办流水号码",
|
|
||||||
prop: "sblsh",
|
|
||||||
placeholder: "请输入申办流水号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "证件号码",
|
|
||||||
prop: "zjhm",
|
|
||||||
placeholder: "请输入证件号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入姓名",
|
|
||||||
showType: "input"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
csdm: "123456789",
|
|
||||||
sblsh: "SB202403150001",
|
|
||||||
lxrdm: "LXR001",
|
|
||||||
lxr: "张三",
|
|
||||||
cyzjdm: "111",
|
|
||||||
zjhm: "510183199609233352",
|
|
||||||
xm: "张三",
|
|
||||||
fjhm: "1001",
|
|
||||||
zp: "",
|
|
||||||
ddrq: "2024-03-15",
|
|
||||||
ldrq: "2024-03-16"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所代码", prop: "csdm" },
|
|
||||||
{ label: "业务流水号码", prop: "sblsh" },
|
|
||||||
{ label: "境外旅客代码", prop: "lxrdm" },
|
|
||||||
{ label: "旅客常用证件代码", prop: "cyzjdm" },
|
|
||||||
{ label: "旅客证件号码", prop: "zjhm" },
|
|
||||||
{ label: "姓名", prop: "xm" },
|
|
||||||
{ label: "房间号码", prop: "fjhm" },
|
|
||||||
{ label: "照片", prop: "zp", slot: "photo" },
|
|
||||||
{ label: "到店日期", prop: "ddrq" },
|
|
||||||
{ label: "离店日期", prop: "ldrq" }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所代码" prop="csdm">
|
|
||||||
<el-input v-model="listQuery.csdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="房屋间数" prop="fwsl">
|
|
||||||
<el-input-number style="width: 100%;" v-model="listQuery.fwsl" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="楼层数" prop="lcs">
|
|
||||||
<el-input-number style="width: 100%;" v-model="listQuery.lcs" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="床位数量" prop="cwsl">
|
|
||||||
<el-input-number style="width: 100%;" v-model="listQuery.cwsl" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="星级代码" prop="xjdm">
|
|
||||||
<el-input v-model="listQuery.xjdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="等级代码" prop="djsm">
|
|
||||||
<el-input v-model="listQuery.djsm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref('');
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === 'edit' ? '编辑' : '详情';
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = '新增';
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="旅店业场所附加信息管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 事故照片 -->
|
|
||||||
<template #accidentPhoto="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.accidentPhoto"
|
|
||||||
:preview-src-list="[row.accidentPhoto]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所代码",
|
|
||||||
prop: "csdm",
|
|
||||||
placeholder: "请输入场所代码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
csdm: "123456789",
|
|
||||||
fwsl: 'xxx',
|
|
||||||
lcs: "121",
|
|
||||||
cwsl: "25",
|
|
||||||
xjdm: "510183199609233352",
|
|
||||||
djsm:'155d'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所代码", prop: "csdm" },
|
|
||||||
{ label: "房屋间数", prop: "fwsl" },
|
|
||||||
{ label: "楼层数", prop: "lcs" },
|
|
||||||
{ label: "床位数量", prop: "cwsl" },
|
|
||||||
{ label: "星级代码", prop: "xjdm" },
|
|
||||||
{ label: "等级代码", prop: "djsm" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">旅店业场所附加信息管理{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" @click="close" v-if="title != '详情'">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所代码" prop="csdm">
|
|
||||||
<el-input v-model="listQuery.csdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所名称" prop="csmc">
|
|
||||||
<el-input v-model="listQuery.csmc" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="访客编号" prop="fkbh">
|
|
||||||
<el-input v-model="listQuery.fkbh" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="常用证件代码" prop="cyzjdm">
|
|
||||||
<el-input v-model="listQuery.cyzjdm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="证件号码" prop="zjhm">
|
|
||||||
<el-input v-model="listQuery.zjhm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="xm">
|
|
||||||
<el-input v-model="listQuery.xm" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="联系电话" prop="lxdh">
|
|
||||||
<el-input v-model="listQuery.lxdh" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="旅客代码" prop="lkdm">
|
|
||||||
<el-input v-model="listQuery.fjhm" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="到访时间">
|
|
||||||
<el-date-picker v-model="listQuery.dfsj" type="datetime" style="width:100%" placeholder="请选择到访时间"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="离访时间">
|
|
||||||
<el-date-picker v-model="listQuery.lfsj" type="datetime" style="width:100%" placeholder="请选择离访时间"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref("");
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === "edit" ? "编辑" : "详情";
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = "新增";
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ init });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #f7fafb;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #e3e7ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo {
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner {
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,221 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="旅馆访客人员信息管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 照片 -->
|
|
||||||
<template #photo="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.zp"
|
|
||||||
:preview-src-list="[row.zp]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所代码",
|
|
||||||
prop: "csdm",
|
|
||||||
placeholder: "请输入场所代码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "场所名称",
|
|
||||||
prop: "csmc",
|
|
||||||
placeholder: "请输入场所名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "访客编号",
|
|
||||||
prop: "fkbh",
|
|
||||||
placeholder: "请输入访客编号",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "证件号码",
|
|
||||||
prop: "zjhm",
|
|
||||||
placeholder: "请输入证件号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入姓名",
|
|
||||||
showType: "input"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
csdm: "123456789",
|
|
||||||
csmc: "XX酒店",
|
|
||||||
fkbh: "FK202403150001",
|
|
||||||
fk: "张三",
|
|
||||||
cyzjdm: "111",
|
|
||||||
zjhm: "510183199609233352",
|
|
||||||
xm: "张三",
|
|
||||||
lxdh: "13800138000",
|
|
||||||
dfsj: "2024-03-15 09:00:00",
|
|
||||||
lfsj: "2024-03-15 11:00:00"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所代码", prop: "csdm" },
|
|
||||||
{ label: "场所名称", prop: "csmc" },
|
|
||||||
{ label: "访客编号", prop: "fkbh" },
|
|
||||||
{ label: "常用证件代码", prop: "cyzjdm" },
|
|
||||||
{ label: "证件号码", prop: "zjhm" },
|
|
||||||
{ label: "姓名", prop: "xm" },
|
|
||||||
{ label: "联系电话", prop: "lxdh" },
|
|
||||||
{ label: "到访时间", prop: "dfsj" },
|
|
||||||
{ label: "离访时间", prop: "lfsj" },
|
|
||||||
{ label: "旅客代码", prop: "lkdm" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,221 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-tabs v-model="activeName">
|
|
||||||
<el-tab-pane label="场所信息" name="basic">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="flex align-center">
|
|
||||||
<div style="width: calc(100% - 176px);">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="统一社会信用代码">
|
|
||||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="单位名称（营业执照登记名称）">
|
|
||||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所名称">
|
|
||||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所联系电话">
|
|
||||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="经营状况">
|
|
||||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所面积">
|
|
||||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="开业日期">
|
|
||||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img height="130" src="@/assets/images/person.png" alt="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-form-item label="单位注册地址">
|
|
||||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="场所地址">
|
|
||||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<div class="flex align-center">
|
|
||||||
<div style="width: calc(100% - 176px);">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="法定代表人">
|
|
||||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="法定代表人证件号码">
|
|
||||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="法定代表人联系电话">
|
|
||||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="法定代表人居住地址">
|
|
||||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所负责人">
|
|
||||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所负责人身份证号">
|
|
||||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所负责人联系方式">
|
|
||||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所负责人居住地址">
|
|
||||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
|
||||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="upload-group">
|
|
||||||
<el-form-item label="营业执照照片">
|
|
||||||
<img height="130" src="@/assets/images/person.png" alt="">
|
|
||||||
<img height="130" src="@/assets/images/person.png" alt="">
|
|
||||||
<img height="130" src="@/assets/images/person.png" alt="">
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="机修场所备案编号">
|
|
||||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所备案机构名称">
|
|
||||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="备案登记日期">
|
|
||||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属辖区">
|
|
||||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="责任民警">
|
|
||||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="警号">
|
|
||||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="从业人员" name="staff">
|
|
||||||
<!-- 从业人员表格 -->
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
import { Plus } from '@element-plus/icons-vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const activeName = ref('basic');
|
|
||||||
const title = ref('废旧金属回收场所详情');
|
|
||||||
const listQuery = ref({});
|
|
||||||
|
|
||||||
const areaOptions = ref([]); // 区域选项数据
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row,) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
// 根据type和row初始化表单数据
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-group {
|
|
||||||
display: flex;
|
|
||||||
// gap: 20px;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="废旧金属回收场所管理" />
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search
|
|
||||||
:searchArr="searchConfiger"
|
|
||||||
@submit="onSearch"
|
|
||||||
:key="pageData.keyCount"
|
|
||||||
>
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="primary">从业人员</el-link>
|
|
||||||
<el-link type="primary">转辖区</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所名称",
|
|
||||||
prop: "name",
|
|
||||||
placeholder: "请输入场所名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "场所电话",
|
|
||||||
prop: "phone",
|
|
||||||
placeholder: "请输入场所电话",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "法人姓名",
|
|
||||||
prop: "frxm",
|
|
||||||
placeholder: "请输入法人姓名",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "法人证件号码",
|
|
||||||
prop: "frzjhm",
|
|
||||||
placeholder: "请输入法人证件号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "法人联系电话",
|
|
||||||
prop: "frlxdh",
|
|
||||||
placeholder: "请输入法人联系电话",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "经营状况",
|
|
||||||
prop: "jyzt",
|
|
||||||
placeholder: "请选择经营状况",
|
|
||||||
showType: "select",
|
|
||||||
options: [{ label: "在业", value: "在业" }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "所属辖区",
|
|
||||||
prop: "ssxq",
|
|
||||||
placeholder: "请选择所属辖区",
|
|
||||||
showType: "department"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "面积大小",
|
|
||||||
prop: "mj",
|
|
||||||
placeholder: "请输入面积范围",
|
|
||||||
showType: "defaultSlot"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: "天上人间KTV",
|
|
||||||
cslx: "KTV",
|
|
||||||
jyzt: "在业",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
frxm: "张三",
|
|
||||||
frzjhm: "510183199656566652",
|
|
||||||
frlxdh: "15882344902"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "天上人间KTV",
|
|
||||||
cslx: "KTV",
|
|
||||||
jyzt: "在业",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
frxm: "张三",
|
|
||||||
frzjhm: "510183199656566652",
|
|
||||||
frlxdh: "15882344902"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "天上人间KTV",
|
|
||||||
cslx: "KTV",
|
|
||||||
jyzt: "在业",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
frxm: "张三",
|
|
||||||
frzjhm: "510183199656566652",
|
|
||||||
frlxdh: "15882344902"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "天上人间KTV",
|
|
||||||
cslx: "KTV",
|
|
||||||
jyzt: "在业",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
frxm: "张三",
|
|
||||||
frzjhm: "510183199656566652",
|
|
||||||
frlxdh: "15882344902"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "天上人间KTV",
|
|
||||||
cslx: "KTV",
|
|
||||||
jyzt: "在业",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
frxm: "张三",
|
|
||||||
frzjhm: "510183199656566652",
|
|
||||||
frlxdh: "15882344902"
|
|
||||||
}
|
|
||||||
], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 250, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所名称", prop: "name" },
|
|
||||||
{ label: "经营状态", prop: "jyzt" },
|
|
||||||
{ label: "所属辖区", prop: "ssxq" },
|
|
||||||
{ label: "法人姓名", prop: "frxm" },
|
|
||||||
{ label: "法人证件号码", prop: "frzjhm" }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
let url = "/mosty-ylth/system/fjjs/hscs/list";
|
|
||||||
qcckPost(data, url)
|
|
||||||
.then((res) => {
|
|
||||||
pageData.tableData = res.rows || [];
|
|
||||||
pageData.total = res.total;
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">废旧金属回收业务信息详情</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="业务流水号码">
|
|
||||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="场所名称">
|
|
||||||
<el-input v-model="listQuery.csmc" placeholder="老王废旧金属回收"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="回收人员姓名">
|
|
||||||
<el-input v-model="listQuery.hsryxm" placeholder="王五"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="回收人证件号码">
|
|
||||||
<el-input v-model="listQuery.hsrzjhm" placeholder="511111111111111111"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="出售人员姓名">
|
|
||||||
<el-input v-model="listQuery.csryxm" placeholder="张三"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="出售人证件号码">
|
|
||||||
<el-input v-model="listQuery.csrzjhm" placeholder="511222222222222222"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="回收物品照片">
|
|
||||||
<div class="image-group">
|
|
||||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
|
||||||
<el-image :src="item.img" fit="cover"></el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="回收物品清单描述">
|
|
||||||
<el-input type="textarea" v-model="listQuery.wpqdms" :rows="4" placeholder="请输入回收物品清单描述"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({
|
|
||||||
plateImages: [
|
|
||||||
{img:require('@/assets/images/person.png')},
|
|
||||||
{img:require('@/assets/images/person.png')},
|
|
||||||
{img:require('@/assets/images/person.png')},
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
// 根据type和row初始化表单数据
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,224 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="废旧金属回收业务管理" />
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search
|
|
||||||
:searchArr="searchConfiger"
|
|
||||||
@submit="onSearch"
|
|
||||||
:key="pageData.keyCount"
|
|
||||||
>
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "场所名称",
|
|
||||||
prop: "name",
|
|
||||||
placeholder: "请输入场所名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "出售人姓名",
|
|
||||||
prop: "csrxm",
|
|
||||||
placeholder: "请输入出售人姓名",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "出售人证件号码",
|
|
||||||
prop: "csrzjhm",
|
|
||||||
placeholder: "请输入出售人证件号码",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "所属辖区",
|
|
||||||
prop: "ssxq",
|
|
||||||
placeholder: "请选择所属辖区",
|
|
||||||
showType: "department"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: "老王废旧金属回收",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
csrxm: "张三",
|
|
||||||
csrzjhm: "511222222222222222222",
|
|
||||||
hsrxm: "王五",
|
|
||||||
hsrzjhm: "511111111111111111",
|
|
||||||
hswp: "废铁"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "老王废旧金属回收",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
csrxm: "张三",
|
|
||||||
csrzjhm: "511222222222222222222",
|
|
||||||
hsrxm: "王五",
|
|
||||||
hsrzjhm: "511111111111111111",
|
|
||||||
hswp: "废铁"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "老王废旧金属回收",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
csrxm: "张三",
|
|
||||||
csrzjhm: "511222222222222222222",
|
|
||||||
hsrxm: "王五",
|
|
||||||
hsrzjhm: "511111111111111111",
|
|
||||||
hswp: "废铁"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "老王废旧金属回收",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
csrxm: "张三",
|
|
||||||
csrzjhm: "511222222222222222222",
|
|
||||||
hsrxm: "王五",
|
|
||||||
hsrzjhm: "511111111111111111",
|
|
||||||
hswp: "废铁"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "老王废旧金属回收",
|
|
||||||
ssxq: "巴宜区纺织路派出所",
|
|
||||||
csrxm: "张三",
|
|
||||||
csrzjhm: "511222222222222222222",
|
|
||||||
hsrxm: "王五",
|
|
||||||
hsrzjhm: "511111111111111111",
|
|
||||||
hswp: "废铁"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false,
|
|
||||||
showIndex: true
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 120,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "场所名称", prop: "name" },
|
|
||||||
{ label: "所属辖区", prop: "ssxq" },
|
|
||||||
{ label: "出售人姓名", prop: "csrxm" },
|
|
||||||
{ label: "出售人证件号码", prop: "csrzjhm" },
|
|
||||||
{ label: "回收人姓名", prop: "hsrxm" },
|
|
||||||
{ label: "回收人证件号码", prop: "hsrzjhm" },
|
|
||||||
{ label: "回收物品", prop: "hswp" }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
let url = "/mosty-ylth/system/fjjs/hsyw/list";
|
|
||||||
qcckPost(data, url)
|
|
||||||
.then((res) => {
|
|
||||||
pageData.tableData = res.rows || [];
|
|
||||||
pageData.total = res.total;
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">印章基本信息{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="业务流水号码" prop="businessNo">
|
|
||||||
<el-input v-model="listQuery.businessNo" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="印章代码" prop="sealCode">
|
|
||||||
<el-input v-model="listQuery.sealCode" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="印章名称" prop="sealName">
|
|
||||||
<el-input v-model="listQuery.sealName" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="印章机关代码" prop="orgCode">
|
|
||||||
<el-input v-model="listQuery.orgCode" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="印章类型代码" prop="sealTypeCode">
|
|
||||||
<el-input v-model="listQuery.sealTypeCode" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="印章面材料代码" prop="materialCode">
|
|
||||||
<el-input v-model="listQuery.materialCode" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="印油颜色情况" prop="inkColor">
|
|
||||||
<el-input v-model="listQuery.inkColor" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="图像宽度" prop="imageWidth">
|
|
||||||
<el-input-number style="width: 100%;" v-model="listQuery.imageWidth" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="图像高度" prop="imageHeight">
|
|
||||||
<el-input-number style="width: 100%;" v-model="listQuery.imageHeight" :min="0" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="印章图像" prop="imageHeight">
|
|
||||||
<MOSTY.Upload v-model="listQuery.imageUrl"></MOSTY.Upload>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref('');
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === 'edit' ? '编辑' : '详情';
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = '新增';
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="印章基本信息">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 事故照片 -->
|
|
||||||
<template #accidentPhoto="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.accidentPhoto"
|
|
||||||
:preview-src-list="[row.accidentPhoto]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "印章名称",
|
|
||||||
prop: "yzmc",
|
|
||||||
placeholder: "请输入印章名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
dwmc: "123456789",
|
|
||||||
sydw: 'xxx',
|
|
||||||
xm: "张三",
|
|
||||||
lxdh: "15882344901",
|
|
||||||
zjhm: "510183199609233352"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "业务流水号码", prop: "lshm" },
|
|
||||||
{ label: "印章代码代码", prop: "yzdm" },
|
|
||||||
{ label: "印章名称", prop: "yzmc" },
|
|
||||||
{ label: "印章机关代码", prop: "orgCode" },
|
|
||||||
{ label: "印章面材料代码", prop: "materialCode" },
|
|
||||||
{ label: "印章印油颜色情况", prop: "inkColor" },
|
|
||||||
{ label: "印章图像宽度", prop: "imageWidth" },
|
|
||||||
{ label: "印章图像高度", prop: "imageHeight" },
|
|
||||||
{ label: "印章图像", prop: "imageUrl" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">印章业务信息{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="业务流水号码">
|
|
||||||
<el-input v-model="listQuery.lshm" placeholder="请输入业务流水号"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="印章代码代码">
|
|
||||||
<el-input v-model="listQuery.yzdm" placeholder="请输入印章代码代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="使用单位代码">
|
|
||||||
<el-input v-model="listQuery.sydwdm" placeholder="请输入使用单位代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="公安机关机构代码">
|
|
||||||
<el-input v-model="listQuery.gajgggdm" placeholder="请输入公安机关机构代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="场所代码">
|
|
||||||
<el-input v-model="listQuery.csdm" placeholder="请输入场所代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="经办人姓名">
|
|
||||||
<el-input v-model="listQuery.jbrxm" placeholder="请输入经办人姓名"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="经办人身份证号">
|
|
||||||
<el-input v-model="listQuery.jbrsfzh" placeholder="请输入经办人身份证号"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="承接日期">
|
|
||||||
<el-date-picker v-model="listQuery.cjrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="制作日期">
|
|
||||||
<el-date-picker style="width: 100%;" v-model="listQuery.zzrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="交付日期">
|
|
||||||
<el-date-picker style="width: 100%;" v-model="listQuery.jfrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="报废日期">
|
|
||||||
<el-date-picker style="width: 100%;" v-model="listQuery.bfrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="挂失日期">
|
|
||||||
<el-date-picker style="width: 100%;" v-model="listQuery.ksrq" type="date" placeholder="请输入承接日期" value-format="YYYY-MM-DD" ></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref('');
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === 'edit' ? '编辑' : '详情';
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = '新增';
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,188 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="印章业务信息">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 事故照片 -->
|
|
||||||
<template #accidentPhoto="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.accidentPhoto"
|
|
||||||
:preview-src-list="[row.accidentPhoto]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "经办人姓名",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入经办人姓名",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
dwmc: "123456789",
|
|
||||||
sydw: 'xxx',
|
|
||||||
xm: "张三",
|
|
||||||
lxdh: "15882344901",
|
|
||||||
zjhm: "510183199609233352"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "业务流水号码", prop: "lshm" },
|
|
||||||
{ label: "印章代码代码", prop: "yzdm" },
|
|
||||||
{ label: "经办人姓名", prop: "jbrxm" },
|
|
||||||
{ label: "经办人身份证", prop: "jbrsfzh" },
|
|
||||||
{ label: "承接日期", prop: "cjrq" },
|
|
||||||
{ label: "制作日期", prop: "zzrq" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">使用单位信息{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="爆破事故登记业务流水号">
|
|
||||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入业务流水号"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发生时间">
|
|
||||||
<el-date-picker v-model="listQuery.fssj" type="datetime" style="width:100%" placeholder="请选择发生时间"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="单位名称">
|
|
||||||
<el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="单位类型">
|
|
||||||
<el-input v-model="listQuery.dwlx" placeholder="请输入单位类型"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="使用单位">
|
|
||||||
<el-input v-model="listQuery.sydw" placeholder="请输入使用单位"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="使用单位代码">
|
|
||||||
<el-input v-model="listQuery.sydwdm" placeholder="请输入使用单位代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="法定代表人">
|
|
||||||
<el-input v-model="listQuery.fddbr" placeholder="请输入法定代表人"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证号">
|
|
||||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref('');
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === 'edit' ? '编辑' : '详情';
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = '新增';
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="使用单位信息">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 事故照片 -->
|
|
||||||
<template #accidentPhoto="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.accidentPhoto"
|
|
||||||
:preview-src-list="[row.accidentPhoto]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "使用单位",
|
|
||||||
prop: "sydw",
|
|
||||||
placeholder: "请输入使用单位",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单位名称",
|
|
||||||
prop: "dwmc",
|
|
||||||
placeholder: "请输入单位名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
dwmc: "123456789",
|
|
||||||
sydw: 'xxx',
|
|
||||||
fddbr: "张三",
|
|
||||||
lxdh: "15882344901",
|
|
||||||
zjhm: "510183199609233352"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "单位名称", prop: "dwmc" },
|
|
||||||
{ label: "使用单位", prop: "sydw" },
|
|
||||||
{ label: "法定代表人", prop: "fddbr" },
|
|
||||||
{ label: "联系电话", prop: "lxdh" },
|
|
||||||
{ label: "证件号码", prop: "zjhm" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">承接车辆交换信息{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="业务流水号码">
|
|
||||||
<el-input v-model="listQuery.lshm" placeholder="请输入业务流水号"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="承接车辆代码">
|
|
||||||
<el-input v-model="listQuery.sydw" placeholder="请输入承接车辆代码"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="送车人">
|
|
||||||
<el-input v-model="listQuery.scr" placeholder="请输入送车人"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名">
|
|
||||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证号">
|
|
||||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const title = ref('');
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, row) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
if (row) {
|
|
||||||
title.value = type === 'edit' ? '编辑' : '详情';
|
|
||||||
listQuery.value = { ...row };
|
|
||||||
} else {
|
|
||||||
title.value = '新增';
|
|
||||||
listQuery.value = {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
listQuery.value = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dialog {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
background-color: #F7FAFB;
|
|
||||||
padding: 0px 8px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid #E3E7ED;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head_box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.cntinfo{
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.image-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input__inner{
|
|
||||||
height: 36px !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #777575;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-form-item--default{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,188 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="承接车辆交换信息">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<div>
|
|
||||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
|
||||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
|
||||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<!-- 事故照片 -->
|
|
||||||
<template #accidentPhoto="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="row.accidentPhoto"
|
|
||||||
:preview-src-list="[row.accidentPhoto]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem([row.id])" >删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入姓名",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
dwmc: "123456789",
|
|
||||||
sydw: 'xxx',
|
|
||||||
xm: "张三",
|
|
||||||
lxdh: "15882344901",
|
|
||||||
zjhm: "510183199609233352"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "业务流水号码", prop: "lshm" },
|
|
||||||
{ label: "承接车辆代码", prop: "sydw" },
|
|
||||||
{ label: "送车人", prop: "scr" },
|
|
||||||
{ label: "姓名", prop: "xm" },
|
|
||||||
{ label: "联系电话", prop: "lxdh" },
|
|
||||||
{ label: "证件号码", prop: "zjhm" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择类型
|
|
||||||
const handleType = (val) => {
|
|
||||||
pageData.keyCount++;
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
// pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
|
||||||
// qcckPost(data,url).then(res=>{
|
|
||||||
// pageData.tableData = res.records || [];
|
|
||||||
// pageData.total = res.total;
|
|
||||||
// pageData.tableConfiger.loading = false;
|
|
||||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) =>{
|
|
||||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
|
||||||
// proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
// getList();
|
|
||||||
// })
|
|
||||||
// }).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,290 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">巡防装备分类管理</div>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button type="primary" @click="addLoad">
|
|
||||||
<el-icon style="vertical-align: middle">
|
|
||||||
<CirclePlus />
|
|
||||||
</el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button typeof="danger">
|
|
||||||
<el-icon style="vertical-align: middle">
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
<span style="vertical-align: middle">批量注销</span>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="一级分类">
|
|
||||||
<el-select @change="changeTree" v-model="listQuery.pcode" class="m-2" placeholder="请选择">
|
|
||||||
<el-option v-for="item in zbTree" :key="item.scode" :label="item.sname" :value="item.scode" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="二级分类">
|
|
||||||
<el-select v-model="listQuery.scode" class="m-2" placeholder="请选择">
|
|
||||||
<el-option v-for="item in ejTree" :key="item.scode" :label="item.sname" :value="item.scode" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table :data="tableData" border ref="dataTreeList" row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }" :height="tableHeight" :key="keyCount">
|
|
||||||
<el-table-column fixed align="center" type="selection" width="55" />
|
|
||||||
<el-table-column type="index" align="center" width="60px" label="序号">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column sortable prop="pname" show-overflow-tooltip align="center" label="一级分类">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column sortable prop="sname" show-overflow-tooltip align="center" label="二级分类">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column sortable prop="count" show-overflow-tooltip align="center" label="数量">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="update(row)" size="small">修改</el-button>
|
|
||||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要注销?"
|
|
||||||
@confirm="delDictItem(row.id)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button type="danger" size="small">注销</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
|
||||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
||||||
:current-page="listQuery.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="dialog" class="dialog">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ diaTitle }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" :loading="btnLoading" size="small" @click="submit">保存</el-button>
|
|
||||||
<el-button size="small" @click="dialog = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<!-- <el-form-item prop="pcode" label="装备分类编号">
|
|
||||||
<el-input
|
|
||||||
v-model="form.pcode"
|
|
||||||
placeholder="请输入装备分类编号"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</el-form-item> -->
|
|
||||||
<el-form-item prop="pname" label="一级分类名称">
|
|
||||||
<el-input v-model="form.pname" placeholder="请输入一级分类名称" clearable style="width: 100%" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="sname" label="二级分类名称">
|
|
||||||
<el-input v-model="form.sname" placeholder="请输入二级分类名称" clearable style="width: 100%" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" style="width: 100%">
|
|
||||||
<el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
getTree,
|
|
||||||
addTpjcglzbfl,
|
|
||||||
getZbfllist,
|
|
||||||
upZbfl,
|
|
||||||
delZbfl,
|
|
||||||
infoZbfl
|
|
||||||
} from "@/api/basicsmanage/watchmanZbgl";
|
|
||||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
|
||||||
const listQuery = ref({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
pcode: "",
|
|
||||||
scode: ""
|
|
||||||
});
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const rules = ref({
|
|
||||||
// pcode: [{ required: true, message: "请输入分类编码", trigger: "change" }],
|
|
||||||
pname: [{ required: true, message: "请输入一级分类名称", trigger: "change" }],
|
|
||||||
sname: [{ required: true, message: "请输入二级分类名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
const zbTree = ref([]);
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const ejTree = ref([]);
|
|
||||||
const diaTitle = ref();
|
|
||||||
//获取装备树
|
|
||||||
function getZbtree() {
|
|
||||||
getTree().then((res) => {
|
|
||||||
zbTree.value = res;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
getZbtree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off("mittFn");
|
|
||||||
});
|
|
||||||
const btnLoading = ref(false);
|
|
||||||
const searchBox = ref(null); // 搜索盒子
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const tableData = ref([]); //表单数据
|
|
||||||
const chackadd = ref(true); //切换新增修改
|
|
||||||
const dialog = ref(false); //是否显示新增弹窗
|
|
||||||
const total = ref(0); //总数据
|
|
||||||
const elform = ref(null);
|
|
||||||
const form = ref({
|
|
||||||
sname: "",
|
|
||||||
pname: "",
|
|
||||||
bz: ""
|
|
||||||
});
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageNo = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
function changeTree(code) {
|
|
||||||
listQuery.value.scode = "";
|
|
||||||
let arr = zbTree.value;
|
|
||||||
arr.forEach((v) => {
|
|
||||||
if (v.scode == listQuery.value.pcode) {
|
|
||||||
ejTree.value = v.children;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//获取数据
|
|
||||||
const getListData = () => {
|
|
||||||
const params = listQuery.value;
|
|
||||||
getZbfllist(params).then((res) => {
|
|
||||||
tableData.value = res?.records;
|
|
||||||
total.value = res.total;
|
|
||||||
})
|
|
||||||
};
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
pcode: "",
|
|
||||||
scode: ""
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//重置表单
|
|
||||||
function formReset() {
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
function addLoad() {
|
|
||||||
formReset();
|
|
||||||
chackadd.value = false;
|
|
||||||
diaTitle.value = "新增装备分类";
|
|
||||||
dialog.value = true;
|
|
||||||
}
|
|
||||||
const addDict = (row) => {
|
|
||||||
isEdit.value = false;
|
|
||||||
dialogForm.value = {};
|
|
||||||
dialog.value = true;
|
|
||||||
};
|
|
||||||
function update(row) {
|
|
||||||
form.value.sname = row.sname;
|
|
||||||
form.value.pname = row.pname;
|
|
||||||
form.value.id = row.id;
|
|
||||||
dialog.value = true;
|
|
||||||
chackadd.value = true;
|
|
||||||
diaTitle.value = "装备分类修改";
|
|
||||||
// infoZbfl(id).then((res) => {
|
|
||||||
// dialog.value = true;
|
|
||||||
// chackadd.value = true;
|
|
||||||
// diaTitle.value = "装备分类修改";
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
btnLoading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
btnLoading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
let data = {};
|
|
||||||
const keys = Object.keys(form.value);
|
|
||||||
keys.map((item) => {
|
|
||||||
if (form.value[item] != null) {
|
|
||||||
data[item] = form.value[item];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (chackadd.value) {
|
|
||||||
upZbfl(data).then(() => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
dialog.value = false;
|
|
||||||
getListData();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addTpjcglzbfl(data).then(() => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
dialog.value = false;
|
|
||||||
getListData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//删除
|
|
||||||
function delDictItem(id) {
|
|
||||||
const ids = [id];
|
|
||||||
delZbfl(ids).then(() => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "删除成功"
|
|
||||||
});
|
|
||||||
getListData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* size 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageNo = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
</style>
|
|
||||||
@ -1,209 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">巡防装备到期提醒</div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="所属部门">
|
|
||||||
<MOSTY.Department
|
|
||||||
width="100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.ssbmdm"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="装备类型">
|
|
||||||
<el-select v-model="zbLx" @change="checkZblx">
|
|
||||||
<el-option value="1" label="智能装备"></el-option>
|
|
||||||
<el-option value="2" label="常用装备"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:height="tableHeight"
|
|
||||||
:key="keyCount"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
type="index"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
width="60px"
|
|
||||||
label="序号"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
sortable
|
|
||||||
prop="ssbm"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
label="所属部门"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
sortable
|
|
||||||
prop="sbmc"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
label="装备名称"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div>
|
|
||||||
{{ row.sbmc || row.qxMc }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
sortable
|
|
||||||
prop="cgrq"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
label="生产日期"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
sortable
|
|
||||||
prop="dqsj"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
label="到期时间"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { getZnzbTx, getJyqxTx } from "@/api/basicsmanage/watchmanZbtx.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 20
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off("mittFn");
|
|
||||||
});
|
|
||||||
const searchBox = ref(null); // 搜索盒子
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const loadingTable = ref(true);
|
|
||||||
const tableData = ref([]); //表单数据
|
|
||||||
|
|
||||||
const zbLx = ref("1");
|
|
||||||
const total = ref(0); //总数据
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
//获取数据
|
|
||||||
const getListData = () => {
|
|
||||||
loadingTable.value = true;
|
|
||||||
if (zbLx.value == 1) {
|
|
||||||
let prams = {
|
|
||||||
pageCurrent: listQuery.value.pageCurrent,
|
|
||||||
pageSize: listQuery.value.pageSize,
|
|
||||||
ssbmid: listQuery.value.ssbmdm || "",
|
|
||||||
sbmc: listQuery.value.sbmc || ""
|
|
||||||
};
|
|
||||||
getZnzbTx(prams).then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
let prams = {
|
|
||||||
pageCurrent: listQuery.value.pageCurrent,
|
|
||||||
pageSize: listQuery.value.pageSize,
|
|
||||||
ssbmid: listQuery.value.ssbmdm || "",
|
|
||||||
qxMc: listQuery.value.sbmc || ""
|
|
||||||
};
|
|
||||||
getJyqxTx(prams).then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
}).catch(()=>{
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
function checkZblx() {
|
|
||||||
getListData();
|
|
||||||
}
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 20
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
const addDict = (row) => {
|
|
||||||
isEdit.value = false;
|
|
||||||
dialogForm.value = {};
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* size 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,247 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="mm-box" v-if="props.modelValue">
|
|
||||||
<div class="head_box_ii">
|
|
||||||
<div class="timeBox">
|
|
||||||
<div class="time-map">{{ times[0] }}</div>
|
|
||||||
<el-slider
|
|
||||||
v-model="playTime"
|
|
||||||
id="playtimeSlider"
|
|
||||||
:range="true"
|
|
||||||
:min="sliderMIn"
|
|
||||||
:max="sliderMax"
|
|
||||||
:format-tooltip="playTimeFormat"
|
|
||||||
@change="playTimeChange"
|
|
||||||
:key="videoTndex">
|
|
||||||
</el-slider>
|
|
||||||
<div class="time-map">{{ times[1] }}</div>
|
|
||||||
<div style="display:flex;" v-if="props.lxtype == 'gjhf'">
|
|
||||||
<el-button size="small" @click="chooseTime">搜索</el-button>
|
|
||||||
<el-button size="small" @click="getGjDare">轨迹回放</el-button>
|
|
||||||
<el-button size="small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区 </el-button>
|
|
||||||
<el-button size="small" v-else-if="props.data.xffwlx == 2" @click="getKfdData">快反点</el-button>
|
|
||||||
</div>
|
|
||||||
<div v-else class="hphmBox">
|
|
||||||
<div style="width:160px;">
|
|
||||||
<el-select v-model="hphm" placeholder="请选择号牌号码" >
|
|
||||||
<el-option v-for="item in props.data.clList" :key="item.id" :label="item.jdchphm" :value="item.jdchphm"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div style="width:110px;margin-left: 10px;">里程：{{lc}} km</div>
|
|
||||||
|
|
||||||
<el-button size="small" class="btn" @click="getClDare">车辆回放</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="map"><GdMap /></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid } from "@/api/dpApi/home.js";
|
|
||||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
|
||||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import { ref, watch, getCurrentInstance } from "vue";
|
|
||||||
import { timeValidate } from "@/utils/time.js";
|
|
||||||
const emits = defineEmits(["update:modelValue"]);
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const playTime = ref(null); //时间
|
|
||||||
const detailFiles = ref([]); //时间范围
|
|
||||||
const sliderMIn = ref(0);
|
|
||||||
const sliderMax = ref(0);
|
|
||||||
const videoTndex = ref(1);
|
|
||||||
const lc = ref(0);
|
|
||||||
const hphm = ref("");
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
default: {}
|
|
||||||
},
|
|
||||||
lxtype: String
|
|
||||||
});
|
|
||||||
|
|
||||||
const isClearn = ref(true);
|
|
||||||
const times = ref([1, 1]);
|
|
||||||
watch(() => props.data,(val) => {
|
|
||||||
hphm.value = ''
|
|
||||||
lc.value = 0
|
|
||||||
let ks = val.bbkssj;
|
|
||||||
let js = val.bbjssj ? val.bbjssj : timeValidate(new Date());
|
|
||||||
times.value = [ks, js];
|
|
||||||
let start = new Date(ks).getTime();
|
|
||||||
let end = new Date(js).getTime();
|
|
||||||
sliderMIn.value = Number(start);
|
|
||||||
sliderMax.value = Number(end);
|
|
||||||
playTime.value = [start, end];
|
|
||||||
if (props.lxtype == "gjhf") { getGjDare(); }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 滑块提示
|
|
||||||
function playTimeFormat(val) {
|
|
||||||
let time = new Date(val);
|
|
||||||
return timeValidate(time);
|
|
||||||
}
|
|
||||||
//选中时间
|
|
||||||
function playTimeChange(val) {
|
|
||||||
let kssj = timeValidate(val[0]);
|
|
||||||
let jssj = timeValidate(val[1]);
|
|
||||||
times.value = [kssj, jssj];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据时间来画轨迹
|
|
||||||
function chooseTime() {
|
|
||||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1] };
|
|
||||||
emitter.emit("deletePointArea", "route");
|
|
||||||
qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
|
|
||||||
let arr = res || [];
|
|
||||||
handleRoute(arr)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取轨迹
|
|
||||||
function getGjDare(bbId) {
|
|
||||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1]};
|
|
||||||
emitter.emit("deletePointArea", "route");
|
|
||||||
qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
|
|
||||||
let arr = res || [];
|
|
||||||
handleRoute(arr)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 画轨迹
|
|
||||||
function handleRoute(arr){
|
|
||||||
let points = arr.map(item=>{return [item.jd, item.wd]});
|
|
||||||
if (points.length > 0) {
|
|
||||||
emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
|
|
||||||
} else {
|
|
||||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取车辆轨迹
|
|
||||||
function getClDare() {
|
|
||||||
emitter.emit("deletePointArea", "route");
|
|
||||||
if (hphm.value == "") return proxy.$message({ type: "warning", message: `请选择车辆` });
|
|
||||||
let list = props.data.clList;
|
|
||||||
let obj = list.find(item=>{
|
|
||||||
return item.jdchphm == hphm.value
|
|
||||||
})
|
|
||||||
if(obj && obj.gpsId){
|
|
||||||
let params = { gpsId:obj.gpsId, kssj: times.value[0], jssj: times.value[1] , islx:"1"};
|
|
||||||
qcckPost(params,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
|
|
||||||
let arr = res.list || []
|
|
||||||
lc.value= res.lc / 1000
|
|
||||||
handleRoute(arr)
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
proxy.$message({ type: "warning", message: `该车辆暂时没有轨迹` });
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
//获取巡防区数据
|
|
||||||
function getXfqData() {
|
|
||||||
isClearn.value = !isClearn.value;
|
|
||||||
emitter.emit("deletePointArea", "xfq");
|
|
||||||
emitter.emit("deletePointArea", "kfd");
|
|
||||||
let ids = props.data.xffwid.split(",");
|
|
||||||
if (ids.length > 0) {
|
|
||||||
ids.forEach((el) => {
|
|
||||||
getTbJcglXfqySelectById({id: el }).then((res) => {
|
|
||||||
if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
|
||||||
if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
|
||||||
if (res.pgis.length <= 0) return;
|
|
||||||
let obj = { position:[res.pgis], text:res.xfqMc, id: res.id}
|
|
||||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: true });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取快反点数据
|
|
||||||
function getKfdData() {
|
|
||||||
isClearn.value = !isClearn.value;
|
|
||||||
if (isClearn.value) {
|
|
||||||
emitter.emit("deletePointArea", "kfd");
|
|
||||||
emitter.emit("deletePointArea", "kfdArea");
|
|
||||||
} else {
|
|
||||||
getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
|
|
||||||
if (res) {
|
|
||||||
//点位数据
|
|
||||||
if (!res.jd || !res.wd) return;
|
|
||||||
//一分钟范围
|
|
||||||
if (res.yfzfw.length > 0) {
|
|
||||||
let obj = { position:[res.yfzfw], text:'', id: '11'}
|
|
||||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
|
|
||||||
}
|
|
||||||
//三分钟范围
|
|
||||||
if (res.sfzfw.length > 0) {
|
|
||||||
let obj1 = { position:[res.sfzfw], text:'', id: '211'}
|
|
||||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
|
|
||||||
}
|
|
||||||
//五分钟范围
|
|
||||||
if (res.wfzfw.length > 0) {
|
|
||||||
let obj2 = { position:[res.wfzfw], text:'', id: '131'}
|
|
||||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
|
|
||||||
}
|
|
||||||
let icon = require("@/assets/point/kfd.png");
|
|
||||||
emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
|
|
||||||
emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
|
||||||
} else {
|
|
||||||
ElMessage({ message: "暂无快反点数据", type: "warning" });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 取消新增模板
|
|
||||||
const closeAddModel = () => {
|
|
||||||
emitter.emit("deletePointArea", "route");
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.mm-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.head_box_ii {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
height: 60px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.timeBox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.time-map {
|
|
||||||
width: 212px;
|
|
||||||
margin: 0 10px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.map {
|
|
||||||
width: 100%;
|
|
||||||
height: 60vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hphmBox {
|
|
||||||
display: flex;
|
|
||||||
height: 60px;
|
|
||||||
align-items: center;
|
|
||||||
.btn {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">预案等级</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
|
||||||
<template #jwd>
|
|
||||||
<div class="flex align-center ww100">
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
|
||||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</FormMessage>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
|
||||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
|
||||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
|
||||||
const emit = defineEmits(["refresh"]);
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const props = defineProps({
|
|
||||||
dic: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const title = ref('');
|
|
||||||
const FormRef = ref();
|
|
||||||
const loading = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const openType = ref("")
|
|
||||||
const rules = reactive({
|
|
||||||
zsdMc: [{ required: true, message: "请选择预案等级", trigger: "blur" }],
|
|
||||||
});
|
|
||||||
const formList = reactive([
|
|
||||||
[
|
|
||||||
{ label: "预案等级", prop: "yadj", type: "select",options:props.dic.D_BZ_KFDLX },
|
|
||||||
],
|
|
||||||
])
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
onMounted(()=>{
|
|
||||||
emitter.on("coordString", (res => {
|
|
||||||
if(res.type == 'point') {
|
|
||||||
listQuery.value.jd = res.coord[0];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
let icon = require('@/assets/point/zsd1.png');
|
|
||||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, id,) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
openType.value = type;
|
|
||||||
title.value = type == "add" ? "新增" : "编辑";
|
|
||||||
if(id) getDateById(id)
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据id获取数据
|
|
||||||
const getDateById = (id) =>{
|
|
||||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
|
||||||
listQuery.value = res || {};
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择点位
|
|
||||||
const changePoint = () =>{
|
|
||||||
listQuery.value.jd = ''
|
|
||||||
listQuery.value.wd = ''
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
|
||||||
}
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
FormRef.value.submit(()=>{
|
|
||||||
loading.value = true;
|
|
||||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
|
||||||
qcckPost(listQuery.value, url).then(() => {
|
|
||||||
loading.value = false;
|
|
||||||
proxy.$message.success("保存成功");
|
|
||||||
emit("refresh");
|
|
||||||
close();
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
FormRef.value.reset()
|
|
||||||
};;
|
|
||||||
|
|
||||||
defineExpose({init})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
.mapBox{
|
|
||||||
width: 100%;
|
|
||||||
height:500px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="预案等级管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', null)">
|
|
||||||
<el-icon>
|
|
||||||
<CirclePlus />
|
|
||||||
</el-icon><span>新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
</Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
||||||
<template #yadj="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_KFDLX" :value="row.yadj" :tag="false" />
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" @updateData="getList" :dic="{D_BZ_KFDLX}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "预案等级",
|
|
||||||
prop: "yadj",
|
|
||||||
placeholder: "预案等级",
|
|
||||||
showType: "select",
|
|
||||||
options: []
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "编码", prop: "bm" },
|
|
||||||
{ label: "预定等级", prop: "yadj", showSolt: true },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
})
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) => {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
|
||||||
.then(() => {
|
|
||||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
|
||||||
proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => { });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").then((res) => {
|
|
||||||
pageData.tableData = res.records || [];
|
|
||||||
pageData.total = res.total;
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
}).catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">预案类型</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
|
||||||
</FormMessage>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
|
||||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
|
||||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
|
||||||
const emit = defineEmits(["refresh"]);
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const props = defineProps({
|
|
||||||
dic: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const title = ref('');
|
|
||||||
const FormRef = ref();
|
|
||||||
const loading = ref(false);
|
|
||||||
const listQuery = ref({});
|
|
||||||
const openType = ref("")
|
|
||||||
const rules = reactive({
|
|
||||||
zsdMc: [{ required: true, message: "请选择预案类型", trigger: "blur" }],
|
|
||||||
});
|
|
||||||
const formList = reactive([
|
|
||||||
[
|
|
||||||
{ label: "预案类型", prop: "yalx", type: "select",options:props.dic.D_BZ_KFDLX },
|
|
||||||
],
|
|
||||||
])
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
onMounted(()=>{
|
|
||||||
emitter.on("coordString", (res => {
|
|
||||||
if(res.type == 'point') {
|
|
||||||
listQuery.value.jd = res.coord[0];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
let icon = require('@/assets/point/zsd1.png');
|
|
||||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, id,) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
openType.value = type;
|
|
||||||
title.value = type == "add" ? "新增" : "编辑";
|
|
||||||
if(id) getDateById(id)
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据id获取数据
|
|
||||||
const getDateById = (id) =>{
|
|
||||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
|
||||||
listQuery.value = res || {};
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择点位
|
|
||||||
const changePoint = () =>{
|
|
||||||
listQuery.value.jd = ''
|
|
||||||
listQuery.value.wd = ''
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
|
||||||
}
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
FormRef.value.submit(()=>{
|
|
||||||
loading.value = true;
|
|
||||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
|
||||||
qcckPost(listQuery.value, url).then(() => {
|
|
||||||
loading.value = false;
|
|
||||||
proxy.$message.success("保存成功");
|
|
||||||
emit("refresh");
|
|
||||||
close();
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
FormRef.value.reset()
|
|
||||||
};;
|
|
||||||
|
|
||||||
defineExpose({init})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
.mapBox{
|
|
||||||
width: 100%;
|
|
||||||
height:500px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="预案类型管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', null)">
|
|
||||||
<el-icon>
|
|
||||||
<CirclePlus />
|
|
||||||
</el-icon><span>新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
</Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
||||||
<template #yadj="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_KFDLX" :value="row.yadj" :tag="false" />
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" @updateData="getList" :dic="{D_BZ_KFDLX}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "预案类型",
|
|
||||||
prop: "yalx",
|
|
||||||
placeholder: "预案类型",
|
|
||||||
showType: "select",
|
|
||||||
options: []
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "编码", prop: "bm" },
|
|
||||||
{ label: "预案类型", prop: "yalx", showSolt: true },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
})
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) => {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
|
||||||
.then(() => {
|
|
||||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
|
||||||
proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => { });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").then((res) => {
|
|
||||||
pageData.tableData = res.records || [];
|
|
||||||
pageData.total = res.total;
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
}).catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,309 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">预案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary"
|
|
||||||
:loading="loading">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cntinfo">
|
|
||||||
<el-form :model="listQuery" ref="FormRef" :rules="rules" class="mosty-from-wrap" :inline="true">
|
|
||||||
<el-form-item label="所属部门" style="width:48%">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="预案名称" style="width:48%">
|
|
||||||
<el-input placeholder="请输入预案名称" v-model="listQuery.yamc" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="预案代号" style="width:48%">
|
|
||||||
<el-input placeholder="请输入预案代号" v-model="listQuery.yadh" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="案发地址" style="width:48%">
|
|
||||||
<el-input placeholder="请输入案发地址" v-model="listQuery.afdz" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="预案等级" style="width:48%">
|
|
||||||
<el-select filterable v-model="listQuery.yadj" class="m-2" placeholder="请选择预案等级">
|
|
||||||
<el-option v-for="item in dic.D_BZ_CLPP" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="预案类型" style="width:48%">
|
|
||||||
<el-select filterable v-model="listQuery.yalx" class="m-2" placeholder="请选择预案类型">
|
|
||||||
<el-option v-for="item in dic.D_BZ_CLPP" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="案发坐标" style="width:100%">
|
|
||||||
<div class="flex align-center ww100">
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
|
|
||||||
<el-button type="primary" @click="openJwdDialog">选择点位</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="主题" style="width:100%">
|
|
||||||
<el-input placeholder="请输入主题" type="textarea" v-model="listQuery.zt" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<div style="width: 100%;">
|
|
||||||
<el-button type="primary" style="margin: 10px 0;">关联线索、情报</el-button>
|
|
||||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
|
||||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
|
||||||
:controlsWidth="pageData.controlsWidth">
|
|
||||||
<template #ewm="{ row }">
|
|
||||||
<el-image :src="`${baseUrl}${row.ewm}`" preview-teleported>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
<template #bxdLx="{ row }">
|
|
||||||
<DictTag :value="row.bxdLx" :tag="false" :options="dic.D_BZ_BXDLX" />
|
|
||||||
</template>
|
|
||||||
<template #controls="{ row, index }">
|
|
||||||
<el-link type="danger" @click="deleteRow(row, index)">删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
</div>
|
|
||||||
<div style="width: 100%;">
|
|
||||||
<el-button type="primary" style="margin: 10px 0;" @click="addYabk">添加预案板块</el-button>
|
|
||||||
<ul v-if="listQuery.yabkList && listQuery.yabkList.length > 0">
|
|
||||||
<li v-for="(el, idx) in listQuery.yabkList">
|
|
||||||
<div class="title flex just-between align-center mb10">
|
|
||||||
|
|
||||||
<div style="color: #000;">板块{{ idx + 1 }}</div>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" @click="addDwll(el)">选择点位力量</el-button>
|
|
||||||
<el-button type="delete" @click="reduceDwll(el)">删除</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form-item label="名称" prop="mc" style="width:100%"
|
|
||||||
:rules='[{ required: true, message: "请输入名称", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请输入名称" v-model="el.mc" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="内容" prop="nr" style="width:100%"
|
|
||||||
:rules='[{ required: true, message: "请输入内容", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请输入内容" type="textarea" v-model="el.nr" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<div v-if="el.dwll">
|
|
||||||
<el-form-item label="别名" style="width:48%"
|
|
||||||
:rules='[{ required: true, message: "请输入别名", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请输入别名" v-model="el.dwll.bm" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="带队领导" style="width:48%"
|
|
||||||
:rules='[{ required: true, message: "请输入别名", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请选择带队领导" v-model="el.dwll.fzr" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话" style="width:48%">
|
|
||||||
<el-input placeholder="请输入联系电话" v-model="el.dwll.lxdh" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="职责" style="width:100%">
|
|
||||||
<el-input placeholder="请输入职责" type="textarea" v-model="el.dwll.ze" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-button type="primary" class="mb10" @click="addPs(el.dwll)">新增配属</el-button>
|
|
||||||
<div v-for="(item, index) in el.dwll.ps" :key="item">
|
|
||||||
<el-form-item label="配属" style="width:48%">
|
|
||||||
<el-input placeholder="请选择配属" v-model="item.xm" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话" style="width:48%">
|
|
||||||
<el-input placeholder="请选择联系电话" v-model="item.lxdh" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="职责" style="width:100%">
|
|
||||||
<el-input placeholder="请输入职责" type="textarea" v-model="item.ze" clearabl></el-input>
|
|
||||||
<el-icon size="32px" color="#000" @click="reducePs(el.dwll.ps, index)">
|
|
||||||
<Minus />
|
|
||||||
</el-icon>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<el-form-item label="责任单位" style="width:48%">
|
|
||||||
<MOSTY.Department width="100%" :multiple="true" clearable v-model="el.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="选择点位" style="width:48%">
|
|
||||||
<el-button type="primary" @click="pointDialogShow = true">选择点位</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<el-divider content-position="left">分隔</el-divider>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ChooseJwd v-model="jwdDialogShow" v-if="jwdDialogShow" @submitFn="submitFn" />
|
|
||||||
<AddPoint v-model="pointDialogShow" v-if="pointDialogShow" @submitFn="submitPointFn" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import ChooseJwd from '../../components/chooseJwd.vue'
|
|
||||||
import AddPoint from '../../components/addPoint.vue'
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
||||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance, onMounted } from 'vue';
|
|
||||||
const emit = defineEmits(["refresh"]);
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const props = defineProps({
|
|
||||||
dic: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const pointDialogShow = ref(false);
|
|
||||||
const jwdDialogShow = ref(false)
|
|
||||||
const dialogForm = ref(false);
|
|
||||||
const title = ref('');
|
|
||||||
const FormRef = ref();
|
|
||||||
const loading = ref(false);
|
|
||||||
const listQuery = ref({
|
|
||||||
yabkList: []
|
|
||||||
});
|
|
||||||
const openType = ref("")
|
|
||||||
const pageData = reactive({
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
},
|
|
||||||
tableData: [],
|
|
||||||
tableHeight: 400,
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "类型", prop: "bxdMc", showSolt: true },
|
|
||||||
{ label: "名称", prop: "jd" },
|
|
||||||
{ label: "内容", prop: "wd" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
const rules = reactive({
|
|
||||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
|
||||||
});
|
|
||||||
const bkformList = reactive([
|
|
||||||
[
|
|
||||||
{ label: "名称", prop: "mc", type: "input" },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: "内容", prop: "nr", type: "input", lx: 'textarea' },
|
|
||||||
],
|
|
||||||
])
|
|
||||||
const formList = reactive([
|
|
||||||
[
|
|
||||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
|
||||||
{ label: "预案名称", prop: "yamc", type: "input" },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: "预案代号", prop: "yadm", type: "input" },
|
|
||||||
{ label: "案发地址", prop: "afdz", type: "input" },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: "预案等级", prop: "yadj", type: "select", options: [] },
|
|
||||||
{ label: "预案类型", prop: "yalx", type: "select", options: [] },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: "案发坐标", prop: "jwd", type: "slot" },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: "主题", prop: "zt", type: "input", lx: 'textarea' },
|
|
||||||
],
|
|
||||||
])
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
onMounted(() => {
|
|
||||||
})
|
|
||||||
|
|
||||||
// 新增预案板块
|
|
||||||
const addYabk = () => {
|
|
||||||
listQuery.value.yabkList.push({
|
|
||||||
mc: '',
|
|
||||||
nr: ""
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 新增点位
|
|
||||||
const addDwll = (el) => {
|
|
||||||
el.dwll = {
|
|
||||||
bm: "", fzr: "", lxdh: "", ze: "", ps: [{
|
|
||||||
xm: "",
|
|
||||||
lxdh: "",
|
|
||||||
ze: ""
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 新增配属
|
|
||||||
const addPs = (item) => {
|
|
||||||
console.log(item, 'item');
|
|
||||||
|
|
||||||
item.ps.push({
|
|
||||||
xm: "",
|
|
||||||
lxdh: "",
|
|
||||||
ze: ""
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 删除点位力量
|
|
||||||
const reduceDwll = (el) => {
|
|
||||||
console.log(el, 'el');
|
|
||||||
el.dwll = null
|
|
||||||
}
|
|
||||||
// 删除配属
|
|
||||||
const reducePs = (arr, idx) => {
|
|
||||||
arr.splice(idx, 1)
|
|
||||||
}
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, id,) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
openType.value = type;
|
|
||||||
title.value = type == "add" ? "新增" : "编辑";
|
|
||||||
if (id) getDateById(id)
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据id获取数据
|
|
||||||
const getDateById = (id) => {
|
|
||||||
qcckGet({ id }, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
|
||||||
listQuery.value = res || {};
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择点位
|
|
||||||
const openJwdDialog = () => {
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
|
||||||
jwdDialogShow.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
FormRef.value.submit(() => {
|
|
||||||
loading.value = true;
|
|
||||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
|
||||||
qcckPost(listQuery.value, url).then(() => {
|
|
||||||
loading.value = false;
|
|
||||||
proxy.$message.success("保存成功");
|
|
||||||
emit("refresh");
|
|
||||||
close();
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const submitFn = (val) => {
|
|
||||||
listQuery.value.jd = val.jd
|
|
||||||
listQuery.value.wd = val.wd
|
|
||||||
}
|
|
||||||
const submitPointFn = (val) => {
|
|
||||||
console.log(val, 'val');
|
|
||||||
|
|
||||||
}
|
|
||||||
const deleteRow = (row, idx) => {
|
|
||||||
pageData.tableData.splice(idx, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
dialogForm.value = false;
|
|
||||||
FormRef.value.reset()
|
|
||||||
};;
|
|
||||||
|
|
||||||
defineExpose({ init })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
|
|
||||||
.mapBox {
|
|
||||||
width: 70%;
|
|
||||||
height: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<PageTitle title="预案管理（市局）">
|
|
||||||
<el-button type="primary" @click="addEdit('add', null)">
|
|
||||||
<el-icon>
|
|
||||||
<CirclePlus />
|
|
||||||
</el-icon><span>新增</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
</Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
|
||||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<DetailForm ref="detailDiloag" @updateData="getList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import DetailForm from "./components/detailForm.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const detailDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{
|
|
||||||
label: "预案名称",
|
|
||||||
prop: "yamc",
|
|
||||||
placeholder: "预案名称",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "预案代号",
|
|
||||||
prop: "yadh",
|
|
||||||
placeholder: "预案代号",
|
|
||||||
showType: "input"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "预案等级",
|
|
||||||
prop: "yadj",
|
|
||||||
placeholder: "预案等级",
|
|
||||||
showType: "select",
|
|
||||||
options:[]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "预案类型",
|
|
||||||
prop: "yalx",
|
|
||||||
placeholder: "预案类型",
|
|
||||||
showType: "select",
|
|
||||||
options:[]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "启动状态",
|
|
||||||
prop: "qdzt",
|
|
||||||
placeholder: "启动状态",
|
|
||||||
showType: "select",
|
|
||||||
options:[]
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const queryFrom = ref({});
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [],
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
total: 5,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
},
|
|
||||||
controlsWidth: 200,
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "预案代号", prop: "yadh" },
|
|
||||||
{ label: "预案名称", prop: "yamc" },
|
|
||||||
{ label: "预案等级", prop: "yadj" },
|
|
||||||
{ label: "预案类型", prop: "yalx" },
|
|
||||||
{ label: "启动状态", prop: "qdzt" },
|
|
||||||
{ label: "执行次数（次）", prop: "wpdw" },
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList();
|
|
||||||
tabHeightFn();
|
|
||||||
})
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
queryFrom.value = { ...val };
|
|
||||||
pageData.pageConfiger.pageCurrent = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const delDictItem = (id) => {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
|
||||||
.then(() => {
|
|
||||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
|
||||||
proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => { });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getList = (val) => {
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
|
||||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").then((res) => {
|
|
||||||
pageData.tableData = res.records || [];
|
|
||||||
pageData.total = res.total;
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
}).catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
const addEdit = (type, row) => {
|
|
||||||
detailDiloag.value.init(type, row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,136 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
|
|
||||||
<div class="flex just-between">
|
|
||||||
<el-form :model="listQuery" style="width: 30%;height: 60vh;overflow: auto;" ref="FormRef" :rules="rules" label-width="80px"
|
|
||||||
class="mosty-from-wrap" :inline="true">
|
|
||||||
<div class="flex just-between align-center">
|
|
||||||
<div>点位坐标</div>
|
|
||||||
<div><el-button @click="addFn('add')">添加</el-button></div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, idx) in dwList" :key="idx">
|
|
||||||
<el-form-item label="点位名称" prop="dwmc" style="width:100%"
|
|
||||||
:rules='[{ required: true, message: "请输入点位名称", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请输入点位名称" v-model="item.dwmc" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="坐标" prop="jd" style="width:100%"
|
|
||||||
:rules='[{ required: true, message: "请选择经纬度", trigger: "blur" }]'>
|
|
||||||
<el-input style="width: 100%;" v-model="item.jd" placeholder="请选择经度" />
|
|
||||||
<el-input style="width: 100%;" v-model="item.wd" placeholder="请选择纬度" />
|
|
||||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="地址" prop="dz" style="width:100%"
|
|
||||||
:rules='[{ required: true, message: "请输入名称", trigger: "blur" }]'>
|
|
||||||
<el-input placeholder="请输入地址" v-model="item.dz" clearabl></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<div>
|
|
||||||
<el-button type="danger" @click="delFn(item, idx)">删除点位</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
<div class="mapBox relative">
|
|
||||||
<GdMap v-if="mapShow"></GdMap>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="closed">取消</el-button>
|
|
||||||
<el-button type="primary" @click="submit">确定</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
tabOption: {
|
|
||||||
type: Array,
|
|
||||||
require: []
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
required: []
|
|
||||||
},
|
|
||||||
myId: {
|
|
||||||
type: String,
|
|
||||||
require: ""
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
require: ""
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const FormRef = ref()
|
|
||||||
const listQuery = ref({})
|
|
||||||
const mapShow = ref(false)
|
|
||||||
const dwList = ref([{ dwmc: "", jd: "", wd: "", dz: "" }])
|
|
||||||
const emits = defineEmits(["update:modelValue"]);
|
|
||||||
const closed = () => {
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
// 获取数据
|
|
||||||
onMounted(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
mapShow.value = true
|
|
||||||
}, 100);
|
|
||||||
emitter.on("coordString", (res => {
|
|
||||||
if (res.type == 'point') {
|
|
||||||
dwList.value[dwList.value.length - 1].jd = res.coord[0];
|
|
||||||
dwList.value[dwList.value.length - 1].wd = res.coord[1];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
let icon = require('@/assets/point/zsd1.png');
|
|
||||||
emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
// 选择点位
|
|
||||||
const changePoint = () => {
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
|
||||||
}
|
|
||||||
function submit() {
|
|
||||||
emits("submitFn", listQuery.value)
|
|
||||||
closed()
|
|
||||||
}
|
|
||||||
const delFn = (item, i) => {
|
|
||||||
dwList.value.splice(i, 1);
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
}
|
|
||||||
const addFn = (item) => {
|
|
||||||
listQuery.value.jd = dwList.value[dwList.value.length - 1].jd
|
|
||||||
listQuery.value.wd = dwList.value[dwList.value.length - 1].wd
|
|
||||||
listQuery.value.dz = dwList.value[dwList.value.length - 1].dz
|
|
||||||
listQuery.value.dwmc = dwList.value[dwList.value.length - 1].dwmc
|
|
||||||
FormRef.value.validate((vaild) => {
|
|
||||||
if (!vaild) return
|
|
||||||
dwList.value.push({ dwmc: "", jd: "", wd: "", dz: "" })
|
|
||||||
listQuery.value = {
|
|
||||||
jd: "",
|
|
||||||
wd: "",
|
|
||||||
dwmc: "",
|
|
||||||
dz: ""
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
|
|
||||||
.mapBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 500px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
|
|
||||||
<div class="flex align-center ww100">
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
|
|
||||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
|
|
||||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="mapBox relative">
|
|
||||||
<GdMap mapid="mapId" v-if="mapShow"></GdMap>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="closed">取消</el-button>
|
|
||||||
<el-button type="primary" @click="submit">确定</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
tabOption: {
|
|
||||||
type: Array,
|
|
||||||
require: []
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
required: []
|
|
||||||
},
|
|
||||||
myId: {
|
|
||||||
type: String,
|
|
||||||
require: ""
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
require: ""
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const mapShow = ref(false)
|
|
||||||
const listQuery = ref({})
|
|
||||||
const emits = defineEmits(["update:modelValue"]);
|
|
||||||
const closed = () => {
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
// 获取数据
|
|
||||||
onMounted(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
mapShow.value = true
|
|
||||||
}, 100);
|
|
||||||
emitter.on("coordString", (res => {
|
|
||||||
if (res.type == 'point') {
|
|
||||||
listQuery.value.jd = res.coord[0];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
let icon = require('@/assets/point/zsd1.png');
|
|
||||||
emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
// 选择点位
|
|
||||||
const changePoint = () => {
|
|
||||||
listQuery.value.jd = ''
|
|
||||||
listQuery.value.wd = ''
|
|
||||||
emitter.emit("removePlot", 'point');
|
|
||||||
emitter.emit("deletePointArea", 'bxd');
|
|
||||||
emitter.emit("drawShape", { type: 'point', flag: 'point' });
|
|
||||||
}
|
|
||||||
function submit() {
|
|
||||||
emits("submitFn", listQuery.value)
|
|
||||||
closed()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
|
|
||||||
.mapBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 500px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,261 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="contmin">
|
|
||||||
<div class="head-tab">
|
|
||||||
<span :class="active == 'USER' ? 'active' : ''" @click="active = 'USER'">个人中心</span>
|
|
||||||
<span :class="active == 'USER' ? '' : 'active'" @click="active = 'INFO',getListData()">消息中心</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="active == 'USER'" class="userinfo">
|
|
||||||
<div>
|
|
||||||
<div class="toux"><img src="@/assets/images/tx.png" />头像</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>姓名：</span>
|
|
||||||
<el-input readonly v-model="params.userName"></el-input>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>性别：</span>
|
|
||||||
<el-input readonly v-model="params.sex"></el-input>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>手机号：</span>
|
|
||||||
<el-input readonly v-model="params.mobile"></el-input>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>身份证号码：</span>
|
|
||||||
<el-input readonly v-model="params.idEntityCard"></el-input>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>警号：</span>
|
|
||||||
<el-input readonly v-model="params.inDustRialId"></el-input>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>所属部门：</span>
|
|
||||||
<el-input readonly v-model="params.ssbm"></el-input>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="xiaoxi">
|
|
||||||
<ul v-loading="loading">
|
|
||||||
<li v-for="(item, index) in tableData" :key="index">
|
|
||||||
<img v-show="item.xtLrrid !== 'admin'" class="icon" src="@/assets/images/top-message.png"/>
|
|
||||||
<img v-show="item.xtLrrid === 'admin'" class="xxx" src="@/assets/images/top_message_xt.png"/>
|
|
||||||
<div class="item-head">
|
|
||||||
<span>{{ item.xtLrrid == "admin" ? "来自系统的通知" : `来自${item.xtLrrxm}的信息`}}</span>
|
|
||||||
<div>
|
|
||||||
<el-icon class="icon" size="16px" color="#206bcf"><Clock /></el-icon>{{ item.xtLrsj }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p> {{ item.xxnr }} </p>
|
|
||||||
<div class="btn">
|
|
||||||
<span v-if="item.xtLrrid != 'admin'">
|
|
||||||
<el-icon class="icon" size="16px" color="#e88e2a"><Edit /></el-icon>回复
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<el-empty
|
|
||||||
description="没有数据"
|
|
||||||
:image-size="150"
|
|
||||||
v-if="!loading && tableData.length <= 0"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
<el-pagination
|
|
||||||
class="pagination"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="listQuery.pageNum"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="listQuery.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="total"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { getUserInfoToId } from "@/api/user-manage";
|
|
||||||
import { ref, watch, onMounted } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { getItem } from "@/utils/storage";
|
|
||||||
import { getPageList, sendMsg } from "@/api/editPassword.js";
|
|
||||||
const router = useRouter();
|
|
||||||
const active = ref("USER");
|
|
||||||
const total = ref(0);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20
|
|
||||||
});
|
|
||||||
const params = ref({});
|
|
||||||
const loading = ref(false)
|
|
||||||
function getUserInfo() {
|
|
||||||
let id = getItem("USERID");
|
|
||||||
let dept = getItem("deptId");
|
|
||||||
getUserInfoToId(id).then((res) => {
|
|
||||||
params.value = res;
|
|
||||||
params.value.sex = res.sex == "1" ? "男" : "女";
|
|
||||||
params.value.ssbm = dept[dept.length - 1].deptName;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
loading.value = true
|
|
||||||
getPageList(listQuery.value).then((res) => {
|
|
||||||
loading.value = false
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
}).catch(()=>{
|
|
||||||
loading.value = false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const tableData = ref([]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageNum = 1;
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageNum = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => { getUserInfo(); });
|
|
||||||
watch(() => router.currentRoute.value.fullPath,
|
|
||||||
(val) => {
|
|
||||||
active.value = val === "/editPassword" ? 'USER':'INFO'
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.contmin {
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 2%;
|
|
||||||
background: url("~@/assets/images/user_info.png")no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.head-tab {
|
|
||||||
padding: 2%;
|
|
||||||
color: #fff;
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #02296a;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
span.active {
|
|
||||||
background: #0d59b2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.userinfo {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
> div {
|
|
||||||
width: 40%;
|
|
||||||
height: 40%;
|
|
||||||
.toux {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 100px;
|
|
||||||
img {
|
|
||||||
border: 1px solid rgb(58, 73, 235);
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 24px 0;
|
|
||||||
> span {
|
|
||||||
width: 150px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.xiaoxi {
|
|
||||||
ul {
|
|
||||||
height: calc(100vh - 300px);
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
border: 1px solid rgb(1, 124, 255);
|
|
||||||
padding: 12px 12px 12px 36px;
|
|
||||||
margin: 12px 12px 0 0;
|
|
||||||
position: relative;
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 12px;
|
|
||||||
}
|
|
||||||
.xxx{
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
.item-head {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
div {
|
|
||||||
position: relative;
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: #aeaeae;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
> span {
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 32px;
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
left: -10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> span:hover {
|
|
||||||
color: #0d59b2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .el-input__inner {
|
|
||||||
background-color: #053390;
|
|
||||||
border: 1px solid #00BFFF;
|
|
||||||
}
|
|
||||||
::v-deep .el-empty{
|
|
||||||
margin-top: 10vw;
|
|
||||||
}
|
|
||||||
::v-deep .el-loading-mask{
|
|
||||||
background: rgba(0,0,0,.5);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,391 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2024-01-25 16:21:46
|
|
||||||
* @LastEditTime: 2024-01-26 10:10:33
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: In User Settings Edit
|
|
||||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
:loading="loading"
|
|
||||||
@click="submit"
|
|
||||||
v-show="!disabledFoem"
|
|
||||||
>保存</el-button
|
|
||||||
>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="listQuery"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
:disabled="disabledFoem"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item prop="ssbmdm" label="所属部门">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="ssxqid" label="所属巡区">
|
|
||||||
<el-select v-model="listQuery.ssxqid">
|
|
||||||
<el-option
|
|
||||||
v-for="item in props.dic.D_XFTZ_XQLX"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item prop="xfbmmc" label="走访对象">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.xfbmmc"
|
|
||||||
placeholder="请填写走访对象"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xzqhdm" label="行政辖区">
|
|
||||||
<el-select v-model="listQuery.xzqhdm">
|
|
||||||
<el-option
|
|
||||||
v-for="item in props.dic.D_XFTZ_XZXQ"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="ssjdb" label="街道办">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.ssjdb"
|
|
||||||
placeholder="请填写街道办"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="sssq" label="社区">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.sssq"
|
|
||||||
placeholder="请填写社区"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwxz" label="走访对象类型">
|
|
||||||
<el-select v-model="listQuery.dwxz">
|
|
||||||
<el-option
|
|
||||||
v-for="item in props.dic.D_XFTZ_DWXZ"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwfzrxm" label="负责人姓名">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.dwfzrxm"
|
|
||||||
placeholder="请填写负责人姓名"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwfzrlxdh" label="负责人联系电话">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.dwfzrlxdh"
|
|
||||||
placeholder="请填写负责人联系电话"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="zbfwly" label="安保服务来源">
|
|
||||||
<el-select v-model="listQuery.zbfwly">
|
|
||||||
<el-option
|
|
||||||
v-for="item in props.dic.D_DWGL_ABFWLY"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="abfzrzxm" label="安保负责人姓名">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.abfzrzxm"
|
|
||||||
placeholder="请填写安保负责人姓名"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="abfzrzdh" label="安保负责人电话">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.abfzrzdh"
|
|
||||||
placeholder="请填写安保负责人电话"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="bars" label="网格员/保安人数">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
type="number"
|
|
||||||
v-model="listQuery.bars"
|
|
||||||
placeholder="请填写网格员/保安人数"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwdz" label="地址">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
v-model="listQuery.dwdz"
|
|
||||||
placeholder="请填写详细地址：区、街道、路、门牌号"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="jd" label="经度">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
type="number"
|
|
||||||
v-model="listQuery.jd"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="wd" label="纬度">
|
|
||||||
<el-input
|
|
||||||
style="width: 100%"
|
|
||||||
clearable
|
|
||||||
type="number"
|
|
||||||
v-model="listQuery.wd"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 100%">
|
|
||||||
<template #label>
|
|
||||||
经纬度
|
|
||||||
<el-button type="pramary" @click="chackLat">坐标</el-button></template
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<div style="width: 35%; height: 360px"><GdMap /></div>
|
|
||||||
<el-form-item label="走访照片" style="width: 100%">
|
|
||||||
<MOSTY.Upload
|
|
||||||
width="800px"
|
|
||||||
:limit="3"
|
|
||||||
v-model="listQuery.xfzp"
|
|
||||||
></MOSTY.Upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<ChooseUser
|
|
||||||
v-if="chooseUserVisible"
|
|
||||||
v-model="chooseUserVisible"
|
|
||||||
titleValue="选择负责人"
|
|
||||||
:roleIds="hasChooseFzr"
|
|
||||||
@choosedUsers="hanlderChoose"
|
|
||||||
></ChooseUser>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import { IdCard } from "@/utils/validate.js";
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
defineExpose,
|
|
||||||
reactive,
|
|
||||||
onMounted,
|
|
||||||
defineProps,
|
|
||||||
getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const emits = defineEmits(["updateChange"]);
|
|
||||||
const imgList = ref([]);
|
|
||||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
|
||||||
const props = defineProps({
|
|
||||||
dic: { type: Object, default: {} }
|
|
||||||
});
|
|
||||||
const fileList = ref([]);
|
|
||||||
const xflxList = ref([
|
|
||||||
{ label: "巡访类型1", value: "01" },
|
|
||||||
{ label: "巡访类型2", value: "02" }
|
|
||||||
]);
|
|
||||||
const chooseUserVisible = ref(false); //负责人弹窗
|
|
||||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
|
||||||
const hasChooseMj = ref([]); //已经选胡民警
|
|
||||||
|
|
||||||
const title = ref("新增巡访台账");
|
|
||||||
const disabledFoem = ref(false); //表单禁用
|
|
||||||
const dialogForm = ref(false); //弹窗
|
|
||||||
const xfzy = ref([]);
|
|
||||||
const listQuery = ref({}); //表单
|
|
||||||
const loading = ref(false);
|
|
||||||
const elform = ref();
|
|
||||||
const rules = reactive({
|
|
||||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
|
||||||
dwxz: [{ required: true, message: "请选择单位性质", trigger: "change" }],
|
|
||||||
dwfzrxm: [{ required: true, message: "请输入负责人姓名", trigger: "change" }],
|
|
||||||
dwfzrlxdh: [
|
|
||||||
{ required: true, message: "请输入负责人联系电话", trigger: "change" }
|
|
||||||
],
|
|
||||||
abfzrzxm: [
|
|
||||||
{ required: true, message: "请输入安保负责人姓名", trigger: "change" }
|
|
||||||
],
|
|
||||||
abfzrzdh: [
|
|
||||||
{ required: true, message: "请输入安保负责人电话", trigger: "change" }
|
|
||||||
],
|
|
||||||
bars: [
|
|
||||||
{ required: true, message: "请输入网格员/保安人数", trigger: "change" }
|
|
||||||
],
|
|
||||||
ssxqid: [{ required: true, message: "请输入所属巡区", trigger: "change" }],
|
|
||||||
xfbmmc: [{ required: true, message: "请输入巡防部门", trigger: "change" }],
|
|
||||||
xzqhdm: [{ required: true, message: "请选择行政辖区", trigger: "change" }],
|
|
||||||
dwdz: [{ required: true, message: "请输入地址", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
//选择用户负责人
|
|
||||||
const hanlderChoose = (users) => {
|
|
||||||
const user = users[0];
|
|
||||||
hasChooseFzr.value = [user.id];
|
|
||||||
listQuery.value.xfzz = user.userName;
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
emitter.on("coordString", (res) => {
|
|
||||||
if (res.type === "point") {
|
|
||||||
listQuery.value.jd = res.coord[0];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, id) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
listQuery.value.xfzp = [];
|
|
||||||
if (type == "add") {
|
|
||||||
disabledFoem.value = false;
|
|
||||||
title.value = "新增巡访台账";
|
|
||||||
} else if (type == "edit") {
|
|
||||||
disabledFoem.value = false;
|
|
||||||
title.value = "修改巡访台账";
|
|
||||||
} else {
|
|
||||||
disabledFoem.value = true;
|
|
||||||
title.value = "巡访台账详情";
|
|
||||||
}
|
|
||||||
if (id) {
|
|
||||||
getDataById(id); //根据id查询详情
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 根据id查询详情
|
|
||||||
const getDataById = (id) => {
|
|
||||||
qcckGet({ id }, "/mosty-jmxf/xftz/selectById").then((res) => {
|
|
||||||
listQuery.value = JSON.parse(JSON.stringify(res));
|
|
||||||
listQuery.value.xfzp = listQuery.value.xfzp
|
|
||||||
? listQuery.value.xfzp.split(",")
|
|
||||||
: [];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//获取经纬度
|
|
||||||
function chackLat(type) {
|
|
||||||
emitter.emit("drawShape", { type: "point", flag: "point", isclear: true });
|
|
||||||
listQuery.value.jd = "";
|
|
||||||
listQuery.value.wd = "";
|
|
||||||
}
|
|
||||||
// 提交
|
|
||||||
const submit = () => {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (!valid) return false;
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
if (listQuery.value.xfzp && Array.isArray(listQuery.value.xfzp))
|
|
||||||
listQuery.value.xfzp = listQuery.value.xfzp.join(",");
|
|
||||||
if (listQuery.value.id) {
|
|
||||||
qcckPost(listQuery.value, "/mosty-jmxf/xftz/updateEntity")
|
|
||||||
.then((res) => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
dialogForm.value = false;
|
|
||||||
emits("updateChange");
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
qcckPost(listQuery.value, "/mosty-jmxf/xftz/addEntity")
|
|
||||||
.then((res) => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
dialogForm.value = false;
|
|
||||||
emits("updateChange");
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 关闭
|
|
||||||
const close = () => {
|
|
||||||
listQuery.value = { sfzh: "" };
|
|
||||||
dialogForm.value = false;
|
|
||||||
};
|
|
||||||
defineExpose({ init });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.photosBox {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.photosItem {
|
|
||||||
width: 98px;
|
|
||||||
height: 130px;
|
|
||||||
margin-right: 10px;
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dzBox {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.dzItem {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.text {
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mapBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
.ipt {
|
|
||||||
border: 1px solid rgb(7, 85, 188);
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
min-height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
background: #001238;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,298 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<!-- 头部 -->
|
|
||||||
<PageTitle title="走访单位管理">
|
|
||||||
<el-button type="primary" @click="lookDetail('add','')">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<!-- <el-button type="primary" @click="upDate" :loading='loading'>
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">批量导入</span>
|
|
||||||
</el-button> -->
|
|
||||||
<el-button type="info" plain icon="Upload" @click="isImport = true">
|
|
||||||
<span style="vertical-align: middle">批量导入</span>
|
|
||||||
</el-button>
|
|
||||||
<!-- <el-button type="primary" @click="exportDate">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">导出报表</span>
|
|
||||||
</el-button> -->
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable
|
|
||||||
:tableData="pageData.tableData"
|
|
||||||
:tableColumn="pageData.tableColumn"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount"
|
|
||||||
:tableConfiger="pageData.tableConfiger"
|
|
||||||
:controlsWidth="pageData.controlsWidth"
|
|
||||||
>
|
|
||||||
|
|
||||||
<template #ssxqid="{ row }">
|
|
||||||
<dict-tag :value="row.ssxqid" :options="D_XFTZ_XQLX" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
<template #dwxz="{ row }">
|
|
||||||
<dict-tag :value="row.dwxz" :options="D_XFTZ_DWXZ" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-button size="small" @click="lookDetail('edit', row)">修改</el-button>
|
|
||||||
<el-button size="small" @click="lookDetail('detail', row)">详情</el-button>
|
|
||||||
<el-button size="small" type="danger" @click="detelrow(row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<EditAddForm ref="editInfo" @updateChange='getDataList' :dic="{'D_XFTZ_XQLX':D_XFTZ_XQLX,'D_XFTZ_XZXQ':D_XFTZ_XZXQ,'D_XFTZ_DWXZ':D_XFTZ_DWXZ,'D_DWGL_ABFWLY':D_DWGL_ABFWLY}"></EditAddForm>
|
|
||||||
<!-- 导入 -->
|
|
||||||
<Export
|
|
||||||
:show="isImport"
|
|
||||||
lx="xfdwbb"
|
|
||||||
@closeImport="isImport = false"
|
|
||||||
@handleImport="getDataList"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import Export from "@/components/export/index.vue";
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
import EditAddForm from './components/editAddForm.vue'
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const {D_XFTZ_XQLX,D_XFTZ_XZXQ,D_XFTZ_DWXZ,D_DWGL_ABFWLY } = proxy.$dict("D_XFTZ_XQLX","D_XFTZ_XZXQ","D_XFTZ_DWXZ","D_DWGL_ABFWLY");
|
|
||||||
const ids = ref([]);//多选
|
|
||||||
const isImport = ref(false);
|
|
||||||
const searchBox = ref() //搜索框
|
|
||||||
const listQuery = ref({})
|
|
||||||
const editInfo = ref()
|
|
||||||
const queryForm = ref()
|
|
||||||
const loading=ref(false)
|
|
||||||
const searchConfiger = reactive([
|
|
||||||
{
|
|
||||||
showType: "defaultSlot",
|
|
||||||
prop: "ssbmdm",
|
|
||||||
options: [],
|
|
||||||
placeholder: "请选择所属部门",
|
|
||||||
label: "所属部门"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "xfbmmc",
|
|
||||||
placeholder: "请输入走访对象名称",
|
|
||||||
label: "走访对象",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "xqldxm",
|
|
||||||
placeholder: "请输入巡区领导姓名",
|
|
||||||
label: "巡区领导姓名",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "ssxqmc",
|
|
||||||
placeholder: "请输入所属巡区名称",
|
|
||||||
label: "所属巡区名称",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// showType: "select",
|
|
||||||
// prop: "ssxqid",
|
|
||||||
// placeholder: "请选择所属巡区",
|
|
||||||
// label: "所属巡区",
|
|
||||||
// options:D_XFTZ_XQLX
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// showType: "select",
|
|
||||||
// prop: "dwxz",
|
|
||||||
// placeholder: "请选择走访对象类型",
|
|
||||||
// label: "走访对象类型",
|
|
||||||
// options:D_XFTZ_DWXZ
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// showType: "select",
|
|
||||||
// prop: "xzqhdm",
|
|
||||||
// placeholder: "请选择行政辖区",
|
|
||||||
// label: "行政辖区",
|
|
||||||
// options:D_XFTZ_XZXQ
|
|
||||||
// },
|
|
||||||
|
|
||||||
])
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
loading: false,
|
|
||||||
rowHieght: 61
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 210, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{
|
|
||||||
label: "所属部门",
|
|
||||||
prop: "ssbm"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "所属巡区",
|
|
||||||
prop: "ssxqid",
|
|
||||||
showSolt:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "走访对象",
|
|
||||||
prop: "xfbmmc"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "巡防年份",
|
|
||||||
prop: "xfnf"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "走访对象类型",
|
|
||||||
prop: "dwxz",
|
|
||||||
showSolt:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "负责人姓名",
|
|
||||||
prop: "dwfzrxm"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "安保负责人姓名",
|
|
||||||
prop: "abfzrzxm",
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
pageData.keyCount = data;
|
|
||||||
});
|
|
||||||
tabHeightFn();
|
|
||||||
getDataList()
|
|
||||||
});
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val)=>{
|
|
||||||
delete val.ssbmdm
|
|
||||||
listQuery.value = {...listQuery.value,...val}
|
|
||||||
if(val.cz) listQuery.value.ssbmdm = '';
|
|
||||||
delete listQuery.value.cz;
|
|
||||||
pageData.pageConfiger.pageNum=1
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
const getDataList = ()=>{
|
|
||||||
let pramas = {
|
|
||||||
pageSize:pageData.pageConfiger.pageSize,
|
|
||||||
pageCurrent:pageData.pageConfiger.pageNum,
|
|
||||||
...listQuery.value
|
|
||||||
}
|
|
||||||
delete pramas.daterange
|
|
||||||
pageData.tableConfiger.loading = true
|
|
||||||
qcckGet(pramas,'/mosty-jmxf/xftz/selectPageList').then(res=>{
|
|
||||||
pageData.tableData = res.records || []
|
|
||||||
pageData.tableConfiger.loading = false
|
|
||||||
pageData.total = res.total
|
|
||||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeNo = (val) =>{
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
const changeSize = (val) =>{
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
//删除
|
|
||||||
function detelrow(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
qcckPost([row.id],'/mosty-jmxf/xftz/deleteById').then(() => {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "删除成功"
|
|
||||||
});
|
|
||||||
getDataList()
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 导出报表
|
|
||||||
const exportDate = ()=>{}
|
|
||||||
// 详情
|
|
||||||
const lookDetail = (type,row)=>{
|
|
||||||
editInfo.value.init(type,row.id)
|
|
||||||
}
|
|
||||||
//批量导入
|
|
||||||
function upDate(file) {
|
|
||||||
loading.value=true
|
|
||||||
let formData=new FormData()
|
|
||||||
formData.append('file',file.raw)
|
|
||||||
qcckPost(formData,'/mosty-jmxf/xftz/batchExport').then(res=>{
|
|
||||||
pageData.pageConfiger.pageNum=1
|
|
||||||
getDataList()
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "导入成功"
|
|
||||||
});
|
|
||||||
}).finally(()=>{
|
|
||||||
loading.value=false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
|
||||||
window.onresize = function () { tabHeightFn(); };
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.green{
|
|
||||||
color: #00FF89;
|
|
||||||
}
|
|
||||||
.orange{
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
.red{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.el-loading-mask{
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
|
||||||
<el-form-item prop="xm" label="姓名">
|
|
||||||
<el-input v-model="listQuery.xm" placeholder="请填写姓名"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="sfzh" label="身份证号">
|
|
||||||
<el-input v-model="listQuery.sfzh" placeholder="请填写身份证号"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xb" label="性别">
|
|
||||||
<el-select readonly v-model="listQuery.xb">
|
|
||||||
<el-option v-for="item in props.dic.D_BZ_XB" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="lxdh" label="联系电话">
|
|
||||||
<el-input v-model="listQuery.lxdh" placeholder="请填写联系电话"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="csrq" label="出生日期">
|
|
||||||
<el-input readonly v-model="listQuery.csrq" placeholder="请填写出生日期"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="jg" label="籍贯">
|
|
||||||
<el-input v-model="listQuery.jg" placeholder="请填写籍贯"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xxdz" label="现住址" style="width:100%;">
|
|
||||||
<el-input v-model="listQuery.xxdz" placeholder="请填写现住址"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="bz" label="备注" style="width:100%;">
|
|
||||||
<el-input v-model="listQuery.bz" placeholder="请填写备注"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import { IdCard } from "@/utils/validate.js";
|
|
||||||
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits} from 'vue';
|
|
||||||
const props = defineProps({
|
|
||||||
dic:{ type:Object, default:{} }
|
|
||||||
})
|
|
||||||
const emits = defineEmits(['updateDate'])
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const validateIdentity = () => {
|
|
||||||
return (rule, value, callback) => {
|
|
||||||
if (!value) {
|
|
||||||
return callback(new Error('身份证号不能为空'));
|
|
||||||
} else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
|
|
||||||
callback(new Error("输入的身份证长度或格式错误"));
|
|
||||||
}
|
|
||||||
//身份证城市
|
|
||||||
var aCity = {
|
|
||||||
11: "北京",
|
|
||||||
12: "天津",
|
|
||||||
13: "河北",
|
|
||||||
14: "山西",
|
|
||||||
15: "内蒙古",
|
|
||||||
21: "辽宁",
|
|
||||||
22: "吉林",
|
|
||||||
23: "黑龙江",
|
|
||||||
31: "上海",
|
|
||||||
32: "江苏",
|
|
||||||
33: "浙江",
|
|
||||||
34: "安徽",
|
|
||||||
35: "福建",
|
|
||||||
36: "江西",
|
|
||||||
37: "山东",
|
|
||||||
41: "河南",
|
|
||||||
42: "湖北",
|
|
||||||
43: "湖南",
|
|
||||||
44: "广东",
|
|
||||||
45: "广西",
|
|
||||||
46: "海南",
|
|
||||||
50: "重庆",
|
|
||||||
51: "四川",
|
|
||||||
52: "贵州",
|
|
||||||
53: "云南",
|
|
||||||
54: "西藏",
|
|
||||||
61: "陕西",
|
|
||||||
62: "甘肃",
|
|
||||||
63: "青海",
|
|
||||||
64: "宁夏",
|
|
||||||
65: "新疆",
|
|
||||||
71: "台湾",
|
|
||||||
81: "香港",
|
|
||||||
82: "澳门",
|
|
||||||
91: "国外"
|
|
||||||
};
|
|
||||||
if (!aCity[parseInt(value?.substr(0, 2))]) {
|
|
||||||
callback(new Error("身份证地区非法"));
|
|
||||||
}
|
|
||||||
// 出生日期验证
|
|
||||||
var sBirthday = ( value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" + Number(value.substr(12, 2))).replace(/-/g, "-"),
|
|
||||||
d = new Date(sBirthday);
|
|
||||||
let yyyy = d.getFullYear();
|
|
||||||
let mm = d.getMonth() + 1;
|
|
||||||
let dd = d.getDate();
|
|
||||||
if (sBirthday !== yyyy + "-" + mm + "-" + dd) {
|
|
||||||
listQuery.value.csrq= "";
|
|
||||||
callback(new Error("身份证上的出生日期非法"));
|
|
||||||
} else {
|
|
||||||
let month = mm < 10 ? "0" + mm : mm;
|
|
||||||
listQuery.value.csrq= yyyy + "-" + month + "-" + dd;
|
|
||||||
}
|
|
||||||
// 身份证号码校验
|
|
||||||
var sum = 0,
|
|
||||||
weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
|
|
||||||
codes = "10X98765432";
|
|
||||||
for (var i = 0; i < value.length - 1; i++) {
|
|
||||||
sum += value[i] * weights[i];
|
|
||||||
}
|
|
||||||
var last = codes[sum % 11]; //计算出来的最后一位身份证号码
|
|
||||||
if (value[value.length - 1] !== last) {
|
|
||||||
listQuery.value.xb = ''
|
|
||||||
callback(new Error("输入的身份证号非法"));
|
|
||||||
} else {
|
|
||||||
listQuery.value.csrq= IdCard(listQuery.value.sfzh,1)
|
|
||||||
if (parseInt(value.substr(16, 1)) % 2 === 1) {
|
|
||||||
listQuery.value.xb = "1";
|
|
||||||
} else {
|
|
||||||
listQuery.value.xb = "2";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
callback();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const title = ref('新增从业人员管理');
|
|
||||||
const disabledFoem = ref(false) //表单禁用
|
|
||||||
const dialogForm = ref(false) //弹窗
|
|
||||||
const listQuery = ref({ sfzh:''}) //表单
|
|
||||||
const loading = ref(false)
|
|
||||||
const elform = ref()
|
|
||||||
const rules = reactive({
|
|
||||||
sfzh: [
|
|
||||||
{ required: true, message: "请输入身份证", trigger: "blur" },
|
|
||||||
{ trigger: "change", validator: validateIdentity()}
|
|
||||||
],
|
|
||||||
xm: [{ required: true, message: "请输入姓名", trigger: "blur"}],
|
|
||||||
...rule.phoneRule({ validator: false }, "lxdh"), // 是否必填 是否进行校验
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type,id)=> {
|
|
||||||
dialogForm.value = true
|
|
||||||
disabledFoem.value = type == 'detail' ? true :false
|
|
||||||
if(id){
|
|
||||||
title.value = type == 'edit'?'修改从业人员管理':'从业人员管理详情'
|
|
||||||
getDataById(id) //根据id查询详情
|
|
||||||
}else{
|
|
||||||
title.value = '新增从业人员管理'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 根据id查询详情
|
|
||||||
const getDataById = (id)=>{
|
|
||||||
qcckGet({},'/mosty-jmxf/tbJcglXfCyry/'+id).then(res=>{
|
|
||||||
listQuery.value = JSON.parse(JSON.stringify(res))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 提交
|
|
||||||
const submit = ()=>{
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (!valid) return false;
|
|
||||||
loading.value = true;
|
|
||||||
if(title.value == '新增从业人员管理'){
|
|
||||||
qcckPost(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
|
||||||
proxy.$message({type: "success", message: "新增成功"});
|
|
||||||
close()
|
|
||||||
emits('updateDate')
|
|
||||||
loading.value = false;
|
|
||||||
}).catch(()=>{ loading.value = false; })
|
|
||||||
}else{
|
|
||||||
qcckPut(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
|
||||||
proxy.$message({type: "success", message: "编辑成功"});
|
|
||||||
close()
|
|
||||||
loading.value = false;
|
|
||||||
emits('updateDate')
|
|
||||||
}).catch(()=>{ loading.value = false; })
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 关闭
|
|
||||||
const close = ()=>{
|
|
||||||
listQuery.value = { sfzh :''}
|
|
||||||
dialogForm.value = false
|
|
||||||
}
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,208 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<!-- 头部 -->
|
|
||||||
<PageTitle title="从业人员管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
|
|
||||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">批量删除</span>
|
|
||||||
</el-button>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<template #xb="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_XB" :value="row.xb" :tag="false" />
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-button size="small" @click="addEdit('edit', row.id)">修改</el-button>
|
|
||||||
<el-button size="small" @click="addEdit('detail', row.id)">详情</el-button>
|
|
||||||
<el-button size="small" @click="delDictItem([row.id])">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 编辑详情 -->
|
|
||||||
<EditAddForm ref="addEditDialog" :dic="{D_BZ_XB}" @updateDate="getData"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import EditAddForm from './editAddForm.vue'
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
|
||||||
const addEditDialog = ref();
|
|
||||||
const ids = ref([]);//多选
|
|
||||||
const searchBox = ref() //搜索框
|
|
||||||
const searchConfiger = reactive([
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "xm",
|
|
||||||
placeholder: "请输入姓名",
|
|
||||||
label: "姓名"
|
|
||||||
},{
|
|
||||||
showType: "input",
|
|
||||||
prop: "sfzh",
|
|
||||||
placeholder: "请输入身份证号",
|
|
||||||
label: "身份证号",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "jg",
|
|
||||||
placeholder: "请输入籍贯",
|
|
||||||
label: "籍贯",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
const queryFrom = ref({})
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType:'checkBox',
|
|
||||||
loading:false
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 210, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "xm"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "身份证号",
|
|
||||||
prop: "sfzh"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "手机号",
|
|
||||||
prop: "lxdh"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "性别",
|
|
||||||
prop: "xb",
|
|
||||||
showSolt :true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "籍贯",
|
|
||||||
prop: "jg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "最后修改时间",
|
|
||||||
prop: "xtZhgxsj",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
getData() //获取数据
|
|
||||||
tabHeightFn();
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
pageData.keyCount = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val)=>{
|
|
||||||
for (let key in val) {
|
|
||||||
if(!val[key]) delete val[key];
|
|
||||||
if(val.cz) delete val.cz
|
|
||||||
}
|
|
||||||
queryFrom.value = {...val}
|
|
||||||
pageData.pageConfiger.pageNum = 1
|
|
||||||
getData() //获取数据
|
|
||||||
}
|
|
||||||
// 获取数据
|
|
||||||
const getData = ()=>{
|
|
||||||
let pramas = {
|
|
||||||
pageSize:pageData.pageConfiger.pageSize,
|
|
||||||
pageCurrent:pageData.pageConfiger.pageNum,
|
|
||||||
...queryFrom.value
|
|
||||||
}
|
|
||||||
pageData.tableConfiger.loading = true
|
|
||||||
qcckGet(pramas,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
|
||||||
pageData.tableData = res.records || []
|
|
||||||
pageData.tableConfiger.loading = false
|
|
||||||
pageData.total = res.total
|
|
||||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeNo = (val) =>{
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
const changeSize = (val) =>{
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增
|
|
||||||
const addEdit = (type,id)=>{
|
|
||||||
addEditDialog.value.init(type,id)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 多选
|
|
||||||
const chooseData = (val)=>{
|
|
||||||
if(!val) return false;
|
|
||||||
ids.value = val.map(v=>{ return v.id })
|
|
||||||
}
|
|
||||||
// 批量删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
qcckPost(row,'/mosty-jmxf/tbJcglXfCyry/bacth').then(() => {
|
|
||||||
proxy.$message({type: "success", message: "删除成功" });
|
|
||||||
pageData.pageConfiger.pageNum = 1
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
|
||||||
window.onresize = function () { tabHeightFn(); };
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask{
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,637 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2022-11-01 14:39:19
|
|
||||||
* @LastEditTime: 2022-11-01 16:48:26
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: In User Settings Edit
|
|
||||||
* @FilePath: \rsga\src\views\service\shifTscheduling\index\downXlsx.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
title="导出"
|
|
||||||
width="800px"
|
|
||||||
:model-value="modelValue"
|
|
||||||
@close="closed"
|
|
||||||
>
|
|
||||||
<el-form ref="elform" :model="listQuery" :inline="true">
|
|
||||||
<el-form-item prop="ssbmdm" label="单位归属">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="走访民警">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xfmj"
|
|
||||||
placeholder="请输入走访民警"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="起止时间">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="listQuery.time"
|
|
||||||
type="daterange"
|
|
||||||
unlink-panels
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:shortcuts="shortcuts"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="closed">关闭</el-button>
|
|
||||||
<el-button type="primary" @click="onSearch">导出</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import * as XLSX from "xlsx";
|
|
||||||
import { defineProps, ref, onMounted, reactive, getCurrentInstance } from "vue";
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import * as Exceljs from "exceljs";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_XFLX, D_BZ_RWZT, D_ZFNR_MBLX, D_XFTZ_DWXZ } = proxy.$dict(
|
|
||||||
"D_BZ_XFLX",
|
|
||||||
"D_BZ_RWZT",
|
|
||||||
"D_ZFNR_MBLX",
|
|
||||||
"D_XFTZ_DWXZ"
|
|
||||||
);
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
dic: { type: Object, default: {} }
|
|
||||||
});
|
|
||||||
|
|
||||||
const listQuery = ref({
|
|
||||||
ssbmdm: "",
|
|
||||||
xflx: "",
|
|
||||||
zdmc: "",
|
|
||||||
xfdw: "",
|
|
||||||
xfmj: "",
|
|
||||||
rwzt: "",
|
|
||||||
time: []
|
|
||||||
});
|
|
||||||
const onSearch = (val) => {
|
|
||||||
seletListDC();
|
|
||||||
};
|
|
||||||
const emits = defineEmits(["update:modelValue"]);
|
|
||||||
const closed = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
ssbmdm: "",
|
|
||||||
xflx: "",
|
|
||||||
zdmc: "",
|
|
||||||
xfdw: "",
|
|
||||||
xfmj: "",
|
|
||||||
rwzt: "",
|
|
||||||
time: []
|
|
||||||
};
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
const loading = ref(false);
|
|
||||||
const seletListDC = () => {
|
|
||||||
console.log(listQuery.value.time);
|
|
||||||
proxy.$confirm("确定要导出列表数据", "警告", { type: "warning" }).then(() => {
|
|
||||||
let pramas = {
|
|
||||||
ssbmdm: listQuery.value.ssbmdm,
|
|
||||||
xflx: listQuery.value.xflx,
|
|
||||||
zdmc: listQuery.value.zdmc,
|
|
||||||
xfdw: listQuery.value.xfdw,
|
|
||||||
xfmj: listQuery.value.xfmj,
|
|
||||||
rwzt: listQuery.value.rwzt,
|
|
||||||
kssj: listQuery.value.time ? listQuery.value.time[0] : "",
|
|
||||||
jssj: listQuery.value.time ? listQuery.value.time[1] : ""
|
|
||||||
};
|
|
||||||
loading.value = true;
|
|
||||||
pramas.xflx = pramas.xflx ? pramas.xflx[1] : "";
|
|
||||||
delete pramas.daterange;
|
|
||||||
|
|
||||||
ams(pramas);
|
|
||||||
// qcckGet(pramas, "/mosty-jmxf/tbJcglXf/seletList")
|
|
||||||
// .then((res) => {
|
|
||||||
|
|
||||||
// proxy.$message({ type: "success", message: "导出成功" });
|
|
||||||
// closed();
|
|
||||||
// })
|
|
||||||
// .catch((err) => {
|
|
||||||
// console.log(err);
|
|
||||||
// })
|
|
||||||
// .finally(() => {
|
|
||||||
// loading.value = false;
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const ams = async (pramas) => {
|
|
||||||
try {
|
|
||||||
const res = await qcckGet(pramas, "/mosty-jmxf/tbJcglXf/seletList");
|
|
||||||
await Dc(res);
|
|
||||||
} catch {
|
|
||||||
} finally {
|
|
||||||
proxy.$message({ type: "success", message: "导出成功" });
|
|
||||||
closed();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
|
||||||
const showMc = (val, vale) => {
|
|
||||||
const stack = [...val];
|
|
||||||
while (stack.length) {
|
|
||||||
const item = stack.pop();
|
|
||||||
if (item.dm == vale) {
|
|
||||||
return item.label;
|
|
||||||
} else {
|
|
||||||
stack.push(...item.children);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
const Dc = async (arr) => {
|
|
||||||
try {
|
|
||||||
const workbook = new Exceljs.Workbook();
|
|
||||||
const sheeh = workbook.addWorksheet("警务协同工作统计表");
|
|
||||||
const ddjb = workbook.addWorksheet("“大队级”巡访工作统计表");
|
|
||||||
const zdjb = workbook.addWorksheet("“中队级、巡组级”巡访工作统计表");
|
|
||||||
|
|
||||||
let tableTitle = [
|
|
||||||
{
|
|
||||||
header: "时间",
|
|
||||||
key: "time",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "大队名称",
|
|
||||||
key: "ddmc",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访领导",
|
|
||||||
key: "zfld",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "职务",
|
|
||||||
key: "ldzw",
|
|
||||||
width: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "行政辖区",
|
|
||||||
key: "xzxq",
|
|
||||||
width: 25
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "巡区网格",
|
|
||||||
key: "xqwg",
|
|
||||||
width: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "无警巡访类型",
|
|
||||||
key: "wjxflx",
|
|
||||||
width: 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "工作对接单位",
|
|
||||||
key: "gzdjdw",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "地址",
|
|
||||||
key: "xfdz",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "隶属单位",
|
|
||||||
key: "lsdw",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "对接工作领导",
|
|
||||||
key: "djld",
|
|
||||||
width: 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "职务",
|
|
||||||
key: "djldzw",
|
|
||||||
width: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "座谈交流内容",
|
|
||||||
key: "ztjlnr",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "落实情况和取得成效",
|
|
||||||
key: "qkcx",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "下步工作计划",
|
|
||||||
key: "xbgzjh",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "其他",
|
|
||||||
key: "qt",
|
|
||||||
width: 60
|
|
||||||
}
|
|
||||||
];
|
|
||||||
let ddtableTitle = [
|
|
||||||
{
|
|
||||||
header: "时间",
|
|
||||||
key: "time",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "大队",
|
|
||||||
key: "ddmc",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访领导",
|
|
||||||
key: "zfld",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "职务",
|
|
||||||
key: "ldzw",
|
|
||||||
width: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "行政辖区",
|
|
||||||
key: "xzxq",
|
|
||||||
width: 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "巡区网格",
|
|
||||||
key: "xqwg",
|
|
||||||
width: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访对象",
|
|
||||||
key: "zfdx",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "地址",
|
|
||||||
key: "xfdz",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访对象类别",
|
|
||||||
key: "zfdxlb",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "负责人",
|
|
||||||
key: "fzr",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "联系电话",
|
|
||||||
key: "lxdh",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "座谈交流内容",
|
|
||||||
key: "ztjlnr",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "落实情况和取得成效",
|
|
||||||
key: "qkcx",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "下步工作计划",
|
|
||||||
key: "xbgzjh",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "其他",
|
|
||||||
key: "qt",
|
|
||||||
width: 60
|
|
||||||
}
|
|
||||||
];
|
|
||||||
let zdtableTitle = [
|
|
||||||
{
|
|
||||||
header: "时间",
|
|
||||||
key: "time",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "大队",
|
|
||||||
key: "ddmc",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "巡访民警",
|
|
||||||
key: "xfmj",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "行政辖区",
|
|
||||||
key: "xzxq",
|
|
||||||
width: 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "巡区网格",
|
|
||||||
key: "xqwg",
|
|
||||||
width: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访对象",
|
|
||||||
key: "zfdx",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访对象类别",
|
|
||||||
key: "zfdxlb",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "地址",
|
|
||||||
key: "xfdz",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "负责人",
|
|
||||||
key: "fzr",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "联系电话",
|
|
||||||
key: "lxdh",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "安保负责人",
|
|
||||||
key: "abfzr",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "联系电话",
|
|
||||||
key: "abfzrlxdh",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "安保服务来源",
|
|
||||||
key: "abfwly",
|
|
||||||
width: 30
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
header: "网格员数量/安保数量",
|
|
||||||
key: "absl",
|
|
||||||
width: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "走访工作内容",
|
|
||||||
key: "zfnr",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "社情（风险隐患线索信息）",
|
|
||||||
key: "sq",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "民意（人民群众意见建议）",
|
|
||||||
key: "my",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "工作措施",
|
|
||||||
key: "gzcs",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "工作成效",
|
|
||||||
key: "gzcx",
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: "回访情况",
|
|
||||||
key: "hfqk",
|
|
||||||
width: 60
|
|
||||||
}
|
|
||||||
];
|
|
||||||
sheeh.columns = tableTitle;
|
|
||||||
ddjb.columns = ddtableTitle;
|
|
||||||
zdjb.columns = zdtableTitle;
|
|
||||||
|
|
||||||
for (const prodec of arr) {
|
|
||||||
let xflxmc = showMc(D_BZ_XFLX.value, prodec.xflx);
|
|
||||||
let listZf = JSON.parse(prodec.xfdw).map((item) => item);
|
|
||||||
let xfzy = JSON.parse(prodec.xfzy).map((item) => item.xm);
|
|
||||||
if (prodec.zfxl && prodec.zfxl.slice(0, 1) == 1) {
|
|
||||||
const row = sheeh.addRow({
|
|
||||||
time: prodec.xfsj,
|
|
||||||
ddmc: prodec.ssbm,
|
|
||||||
zfld: prodec.xfzzXm,
|
|
||||||
ldzw: "",
|
|
||||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
|
||||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
|
||||||
wjxflx: xflxmc,
|
|
||||||
gzdjdw: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
|
||||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
|
||||||
lsdw: listZf.length > 0 ? listZf[0].ssbm : "",
|
|
||||||
djld: listZf.length > 0 ? listZf[0].dwfzrxm : "",
|
|
||||||
djldzw: "",
|
|
||||||
ztjlnr: prodec.xtjlnr ? prodec.xtjlnr : prodec.xfgznr,
|
|
||||||
qkcx: prodec.xtqdcx ? prodec.xtqdcx : prodec.sq,
|
|
||||||
xbgzjh: prodec.xbgzjh ? prodec.xbgzjh : prodec.my,
|
|
||||||
qt: prodec.qt ? prodec.qt : prodec.gzcs
|
|
||||||
});
|
|
||||||
// if (img) {
|
|
||||||
// await addImg(workbook, sheeh, urlImg.value + img[0], row.number, 19);
|
|
||||||
// }
|
|
||||||
} else if (prodec.zfxl && prodec.zfxl.slice(0, 2) == 21) {
|
|
||||||
console.log(prodec.zfxl.slice(0, 2));
|
|
||||||
const row = ddjb.addRow({
|
|
||||||
time: prodec.xfsj,
|
|
||||||
ddmc: prodec.ssbm,
|
|
||||||
zfld: prodec.xfzzXm,
|
|
||||||
ldzw: "",
|
|
||||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
|
||||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
|
||||||
zfdx: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
|
||||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
|
||||||
zfdxlb: xflxmc,
|
|
||||||
fzr: listZf.length > 0 ? listZf.map((item) => item.dwfzrxm).toString():"",
|
|
||||||
|
|
||||||
lxdh: listZf.length > 0 ? listZf[0].dwfzrlxdh : "",
|
|
||||||
ztjlnr: prodec.xtjlnr ? prodec.xtjlnr : prodec.xfgznr,
|
|
||||||
qkcx: prodec.xtqdcx ? prodec.xtqdcx : prodec.sq,
|
|
||||||
xbgzjh: prodec.xbgzjh ? prodec.xbgzjh : prodec.my,
|
|
||||||
qt: prodec.qt ? prodec.qt : prodec.gzcs
|
|
||||||
});
|
|
||||||
|
|
||||||
// if (img) {
|
|
||||||
// await addImg(workbook, ddjb, urlImg.value + img[0], row.number, 19);
|
|
||||||
// }
|
|
||||||
} else {
|
|
||||||
const row = zdjb.addRow({
|
|
||||||
time: prodec.xfsj,
|
|
||||||
ddmc: prodec.ssbm,
|
|
||||||
xfmj: xfzy.length > 0 ? xfzy.toString() : "",
|
|
||||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
|
||||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
|
||||||
zfdx: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
|
||||||
zfdxlb: xflxmc,
|
|
||||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
|
||||||
fzr: prodec.fzrxm,
|
|
||||||
lxdh: prodec.fzrdh,
|
|
||||||
abfzr: prodec.abfzrxm,
|
|
||||||
abfzrlxdh: prodec.abfzrdh,
|
|
||||||
abfwly: prodec.abfwly,
|
|
||||||
absl: listZf.length > 0 ? listZf[0].bars : 0,
|
|
||||||
zfnr: prodec.xfgznr,
|
|
||||||
sq: prodec.sq,
|
|
||||||
my: prodec.my,
|
|
||||||
gzcs: prodec.gzcs,
|
|
||||||
gzcx: "",
|
|
||||||
hfqk: ""
|
|
||||||
});
|
|
||||||
// if (img) {
|
|
||||||
// await addImg(workbook, zdjb, urlImg.value + img[0], row.number, 21);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
styles(sheeh);
|
|
||||||
styles(ddjb);
|
|
||||||
styles(zdjb);
|
|
||||||
const buffer = await workbook.xlsx.writeBuffer();
|
|
||||||
const blob = new Blob([buffer], {
|
|
||||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
||||||
});
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = URL.createObjectURL(blob);
|
|
||||||
link.download = "巡访任务管理.xlsx";
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
setTimeout(()=>{
|
|
||||||
document.body.removeChild(link)
|
|
||||||
URL.revokeObjectURL(link.href)
|
|
||||||
},100)
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const styles = (sheeh) => {
|
|
||||||
const headerRow = sheeh.getRow(1);
|
|
||||||
sheeh.eachRow((row, rowNumbr) => {
|
|
||||||
console.log(row, rowNumbr);
|
|
||||||
row.font = { size: 16 };
|
|
||||||
row.alignment = { vertical: "middle", horizontal: "center" };
|
|
||||||
row.height=50
|
|
||||||
});
|
|
||||||
headerRow.eachCell((cell) => {
|
|
||||||
(cell.fill = {
|
|
||||||
type: "pattern"
|
|
||||||
}),
|
|
||||||
(cell.font = {
|
|
||||||
bold: true,
|
|
||||||
size: 16
|
|
||||||
}),
|
|
||||||
(cell.alignment = { vertical: "middle", horizontal: "center" });
|
|
||||||
});
|
|
||||||
sheeh.eachRow((row) => {
|
|
||||||
if (row.number > 1) {
|
|
||||||
row.height = 150;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const shortcuts = [
|
|
||||||
{
|
|
||||||
text: "今天",
|
|
||||||
value: () => {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "昨天",
|
|
||||||
value: () => {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
|
||||||
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "最近7天",
|
|
||||||
value: () => {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "最近30天",
|
|
||||||
value: () => {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "最近90天",
|
|
||||||
value: () => {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
||||||
return [start, end];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 下载图片
|
|
||||||
const addImg = async (wokbook, woksheet, imageUrl, rowNumbr, colNumber) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(imageUrl);
|
|
||||||
const blob = await response.blob();
|
|
||||||
const arrayBuffer = await new Response(blob).arrayBuffer();
|
|
||||||
|
|
||||||
const imageId = wokbook.addImage({
|
|
||||||
buffer: arrayBuffer,
|
|
||||||
extension: extensions(blob.type)
|
|
||||||
});
|
|
||||||
woksheet.addImage(imageId, {
|
|
||||||
tl: { col: colNumber - 1, row: rowNumbr - 1, offset: 2 },
|
|
||||||
br: { col: colNumber, row: rowNumbr, offset: -2 },
|
|
||||||
editAs: "onCell"
|
|
||||||
});
|
|
||||||
// console.log(response);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const extensions = (mime) => {
|
|
||||||
const extensName = {
|
|
||||||
"/image/jpeg": "jpeg",
|
|
||||||
"/image/png": "png",
|
|
||||||
"/image/gif": "gif",
|
|
||||||
"/image/bmp": "bmp"
|
|
||||||
};
|
|
||||||
return extensName[mime] || "jpeg";
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/assets/css/layout.scss";
|
|
||||||
@import "@/assets/css/element-plus.scss";
|
|
||||||
</style>
|
|
||||||
@ -1,691 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2024-01-25 16:21:46
|
|
||||||
* @LastEditTime: 2024-01-26 10:10:33
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: In User Settings Edit
|
|
||||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
:loading="loading"
|
|
||||||
@click="submit"
|
|
||||||
v-show="!disabledFoem"
|
|
||||||
>保存</el-button
|
|
||||||
>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- -->
|
|
||||||
<el-form
|
|
||||||
:inline="true"
|
|
||||||
ref="elform"
|
|
||||||
:model="listQuery"
|
|
||||||
:rules="rules"
|
|
||||||
:disabled="disabledFoem"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item prop="ssbmdm" label="单位归属">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xflx" label="走访类型">
|
|
||||||
<el-cascader
|
|
||||||
v-model="listQuery.xflx"
|
|
||||||
@change="changeca"
|
|
||||||
:props="xflxprops"
|
|
||||||
:show-all-levels="false"
|
|
||||||
:options="props.dic.D_BZ_XFLX"
|
|
||||||
:placeholder="'请选择走访类型'"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item prop="xfzzXm" label="巡访组长">
|
|
||||||
<el-input
|
|
||||||
@click="chooseUserVisible = true"
|
|
||||||
v-model="listQuery.xfzzXm"
|
|
||||||
placeholder="请选择组长"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfzzSfzh" label="巡访组长身份证号">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xfzzSfzh"
|
|
||||||
placeholder="请选择巡访组长身份证号"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="lxdh" label="巡访时间">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="listQuery.xfsj"
|
|
||||||
type="datetime"
|
|
||||||
placeholder="请选择巡访时间"
|
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-show="disabledFoem" label="寻访对象">
|
|
||||||
<el-input v-model="xfdx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 商铺 -->
|
|
||||||
<div
|
|
||||||
style="width: 100%"
|
|
||||||
class="formline"
|
|
||||||
v-if="listQuery.xflx == '2201000'"
|
|
||||||
>
|
|
||||||
<el-form-item prop="fzrxm" label="商铺负责人" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.fzrxm"
|
|
||||||
placeholder="请输入商铺负责人"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.fzrdh"
|
|
||||||
placeholder="请输入负责人联系方式"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 群众 -->
|
|
||||||
<div
|
|
||||||
style="width: 100%"
|
|
||||||
class="formline"
|
|
||||||
v-if="listQuery.xflx == '2203000'"
|
|
||||||
>
|
|
||||||
<el-form-item prop="qzxm" label="姓名" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.qzxm"
|
|
||||||
placeholder="请输入姓名"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="qzlxfs" label="联系方式" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.qzlxfs"
|
|
||||||
placeholder="请输入联系方式"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfdz" label="地址" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xfdz"
|
|
||||||
placeholder="请输入地址"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<!-- 小区 -->
|
|
||||||
<div
|
|
||||||
style="width: 100%"
|
|
||||||
class="formline"
|
|
||||||
v-if="listQuery.xflx == '2202000' || abshow"
|
|
||||||
>
|
|
||||||
<el-form-item prop="fzrxm" label="小区物业负责人" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.fzrxm"
|
|
||||||
placeholder="请输入小区物业负责人"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.fzrdh"
|
|
||||||
placeholder="请输入负责人联系方式"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="abfwly" label="安保服务来源" class="iptwidth">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.abfwly"
|
|
||||||
placeholder="请输入安保服务来源"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="abfzrxm" label="安保负责人姓名" class="abfzrxm">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.abfzrxm"
|
|
||||||
placeholder="请输入安保负责人姓名"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
prop="abfzrdh"
|
|
||||||
label="安保负责人联系方式"
|
|
||||||
class="iptwidth"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.abfzrdh"
|
|
||||||
placeholder="请输入安保负责人联系方式"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="abrs" label="保安人数" class="iptwidth">
|
|
||||||
<el-input-number
|
|
||||||
v-model="listQuery.abrs"
|
|
||||||
:min="0"
|
|
||||||
placeholder="请输入保安人数"
|
|
||||||
></el-input-number>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<el-form-item prop="xfzy" label="巡访组员" style="width: 100%">
|
|
||||||
<div class="ipt" @click="chooseZY">
|
|
||||||
<span
|
|
||||||
v-show="listQuery.xfzy.length == 0"
|
|
||||||
style="color: #e5e5e5; padding-left: 10px"
|
|
||||||
>请选择组员</span
|
|
||||||
>
|
|
||||||
<el-tag
|
|
||||||
v-for="(tag, index) in listQuery.xfzy"
|
|
||||||
:key="tag.id"
|
|
||||||
:closable="!disabledFoem"
|
|
||||||
:type="tag.type"
|
|
||||||
@close.stop="handleClose(index)"
|
|
||||||
>
|
|
||||||
{{ tag.xm }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<div
|
|
||||||
v-if="listQuery.xflx && (show || listQuery.xflx == '1200000')"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-form-item prop="xfgznr" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>巡访工作内容
|
|
||||||
<el-button type="pramary" @click="openMb('05')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xfgznr"
|
|
||||||
placeholder="请输入巡访工作内容"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="sq" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>社情（风险隐患线索信息）
|
|
||||||
<el-button type="pramary" @click="openMb('06')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.sq"
|
|
||||||
placeholder="请输入社情（风险隐患线索信息）"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="my" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>民意（人民群众意见建议）
|
|
||||||
<el-button type="pramary" @click="openMb('07')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.my"
|
|
||||||
placeholder="请输入民意（人民群众意见建议）"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="gzcs" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>工作措施或落实情况
|
|
||||||
<el-button type="pramary" @click="openMb('08')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.gzcs"
|
|
||||||
placeholder="请输入工作措施或落实情况"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else style="width: 100%">
|
|
||||||
<el-form-item prop="xtjlnr" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>座谈交流内容
|
|
||||||
<el-button type="pramary" @click="openMb('01')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xtjlnr"
|
|
||||||
placeholder="请输入座谈交流内容"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xtqdcx" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>座谈情况和取得成效
|
|
||||||
<el-button type="pramary" @click="openMb('02')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xtqdcx"
|
|
||||||
placeholder="请输入座谈情况和取得成效"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xbgzjh" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>下步工作计划
|
|
||||||
<el-button type="pramary" @click="openMb('03')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xbgzjh"
|
|
||||||
placeholder="请输入下步工作计划"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="qt" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>其它<el-button type="pramary" @click="openMb('04')"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.qt"
|
|
||||||
placeholder="请输入其它"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-form-item prop="xfdw" style="width: 100%">
|
|
||||||
<template #label
|
|
||||||
>走访单位
|
|
||||||
<el-button type="pramary" @click="showDialog = true"
|
|
||||||
>选择模板</el-button
|
|
||||||
></template
|
|
||||||
>
|
|
||||||
<el-table :data="listQuery.xfdw" border style="width: 100%">
|
|
||||||
<el-table-column
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="60px"
|
|
||||||
label="序号"
|
|
||||||
/>
|
|
||||||
<el-table-column prop="ssbm" align="center" label="单位名称" />
|
|
||||||
<el-table-column prop="dwfzrxm" align="center" label="负责人姓名" />
|
|
||||||
<el-table-column prop="xqldzw" align="center" label="负责人职务" />
|
|
||||||
<el-table-column
|
|
||||||
prop="dwdz"
|
|
||||||
align="center"
|
|
||||||
label="地址"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
</el-table>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡访照片" style="width: 100%">
|
|
||||||
<el-upload
|
|
||||||
action="/mosty-base/minio/image/upload/id"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
list-type="picture-card"
|
|
||||||
:on-remove="handleRemove"
|
|
||||||
:on-success="upImg"
|
|
||||||
>
|
|
||||||
<el-icon><Plus></Plus></el-icon>
|
|
||||||
</el-upload>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡访地址" style="width: 100%">
|
|
||||||
<div class="mapBox"><GdMap /></div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<ChooseUser
|
|
||||||
v-if="chooseUserVisible"
|
|
||||||
v-model="chooseUserVisible"
|
|
||||||
titleValue="选择负责人"
|
|
||||||
:roleIds="hasChooseFzr"
|
|
||||||
@choosedUsers="hanlderChoose"
|
|
||||||
></ChooseUser>
|
|
||||||
<!-- 下发单位 -->
|
|
||||||
<XfdwDialog
|
|
||||||
v-if="showDialog"
|
|
||||||
v-model="showDialog"
|
|
||||||
@choosedList="choosedList"
|
|
||||||
:roleIds="chooseIds"
|
|
||||||
/>
|
|
||||||
<!-- 走访内容 -->
|
|
||||||
<XfnrDialog
|
|
||||||
v-if="showNrDialog"
|
|
||||||
:Single="true"
|
|
||||||
v-model="showNrDialog"
|
|
||||||
@choosedList="choosedNrList"
|
|
||||||
:roleIds="chooseIds"
|
|
||||||
:type="mblx"
|
|
||||||
/>
|
|
||||||
<!-- 选择人员 -->
|
|
||||||
<Ryload
|
|
||||||
v-if="peoDialog"
|
|
||||||
v-model:modelValue="peoDialog"
|
|
||||||
@choosedUsers="hanlderChooseRy"
|
|
||||||
:roleIds="roleIdsPeo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
|
||||||
import XfdwDialog from "./xfdwDialog.vue";
|
|
||||||
import XfnrDialog from "./xfnrDialog.vue";
|
|
||||||
import Ryload from "@/components/MyComponents/ChooseJz/ryload.vue";
|
|
||||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import { IdCard } from "@/utils/validate.js";
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
defineExpose,
|
|
||||||
reactive,
|
|
||||||
defineProps,
|
|
||||||
defineEmits,
|
|
||||||
getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
dic: { type: Object, default: {} }
|
|
||||||
});
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const emits = defineEmits(["updateDate"]);
|
|
||||||
const peoDialog = ref(false);
|
|
||||||
const mblx = ref("");
|
|
||||||
const showDialog = ref(false); //弹窗
|
|
||||||
const chooseIds = ref([]); //ids
|
|
||||||
const showNrDialog = ref(false);
|
|
||||||
const chooseNrIds = ref([]); //ids
|
|
||||||
const xflxprops = ref({
|
|
||||||
label: "zdmc",
|
|
||||||
value: "dm",
|
|
||||||
children: "itemList"
|
|
||||||
});
|
|
||||||
const chooseUserVisible = ref(false); //负责人弹窗
|
|
||||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
|
||||||
const hasChooseMj = ref([]); //已经选胡民警
|
|
||||||
import people from "@/assets/images/peo.png";
|
|
||||||
const title = ref("新增巡访任务管理");
|
|
||||||
const disabledFoem = ref(false); //表单禁用
|
|
||||||
const dialogForm = ref(false); //弹窗
|
|
||||||
const listQuery = ref({
|
|
||||||
sfzh: "",
|
|
||||||
xfdw: [],
|
|
||||||
xfzy: []
|
|
||||||
}); //表单
|
|
||||||
const loading = ref(false);
|
|
||||||
const elform = ref();
|
|
||||||
const rules = reactive({
|
|
||||||
ssbmdm: [{ required: true, message: "请选择单位归属", trigger: "change" }],
|
|
||||||
xflx: [{ required: true, message: "请选择走访类型", trigger: "change" }],
|
|
||||||
xfzzXm: [
|
|
||||||
{ required: true, message: "请选择组长", trigger: ["change", "blur"] }
|
|
||||||
],
|
|
||||||
xfzy: [{ required: true, message: "请选择组员", trigger: ["change", "blur"] }]
|
|
||||||
});
|
|
||||||
const roleIdsPeo = ref([]);
|
|
||||||
|
|
||||||
const imgList = ref([]);
|
|
||||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
|
||||||
const fileList = ref([]);
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type, id) => {
|
|
||||||
dialogForm.value = true;
|
|
||||||
disabledFoem.value = type == "detail" ? true : false;
|
|
||||||
if (id) {
|
|
||||||
title.value = type == "edit" ? "修改巡访任务管理" : "巡访任务管理详情";
|
|
||||||
getDataById(id); //根据id查询详情
|
|
||||||
} else {
|
|
||||||
title.value = "新增巡访任务管理";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 根据id查询详情
|
|
||||||
const xfdx = ref();
|
|
||||||
const getDataById = (id) => {
|
|
||||||
qcckGet({}, "/mosty-jmxf/tbJcglXf/" + id).then((res) => {
|
|
||||||
listQuery.value = res;
|
|
||||||
listQuery.value.xfdw = res.xfdw ? JSON.parse(res.xfdw) : [];
|
|
||||||
console.log( listQuery.value.xfdw);
|
|
||||||
if (listQuery.value.xfdw.length > 0) {
|
|
||||||
xfdx.value = listQuery.value.xfdw[0].xfbmmc;
|
|
||||||
}
|
|
||||||
listQuery.value.xfzy = res.xfzy ? JSON.parse(res.xfzy) : [];
|
|
||||||
roleIdsPeo.value = listQuery.value.xfzy.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
emitter.emit("deletePointArea", "zfry");
|
|
||||||
let ids = res.xfzp.split(",");
|
|
||||||
fileList.value = [];
|
|
||||||
ids.forEach((element) => {
|
|
||||||
let obj = { name: element, url: urlImg.value + element };
|
|
||||||
fileList.value.push(obj);
|
|
||||||
});
|
|
||||||
if (listQuery.value.xfdw.length == 0) return false;
|
|
||||||
let list = listQuery.value.xfdw;
|
|
||||||
emitter.emit("setMapCenter", {
|
|
||||||
location: [list[0].jd, list[0].wd],
|
|
||||||
zoomLevel: 10
|
|
||||||
});
|
|
||||||
emitter.emit("addPointArea", {
|
|
||||||
coords: list,
|
|
||||||
icon: require("@/assets/point/jz.png"),
|
|
||||||
flag: "zfry"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const show = ref(true);
|
|
||||||
const abshow = ref(false);
|
|
||||||
function changeca(val) {
|
|
||||||
console.log(val);
|
|
||||||
if (val.length > 2) {
|
|
||||||
console.log();
|
|
||||||
const str = val[2].slice(0, 2);
|
|
||||||
if (str == 22) {
|
|
||||||
show.value = true;
|
|
||||||
abshow.value = false;
|
|
||||||
} else {
|
|
||||||
show.value = false;
|
|
||||||
abshow.value = true;
|
|
||||||
}
|
|
||||||
listQuery.value.xflx = val[2];
|
|
||||||
} else {
|
|
||||||
abshow.value = false;
|
|
||||||
if (val[1] == "1200000") {
|
|
||||||
show.value = true;
|
|
||||||
} else {
|
|
||||||
show.value = false;
|
|
||||||
}
|
|
||||||
listQuery.value.xflx = val[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//打开内容模板
|
|
||||||
function openMb(type) {
|
|
||||||
mblx.value = type;
|
|
||||||
showNrDialog.value = true;
|
|
||||||
}
|
|
||||||
// 移除
|
|
||||||
function handleRemove(val) {
|
|
||||||
imgList.value = imgList.value.filter((item) => {
|
|
||||||
return item.uuid != val.uuid;
|
|
||||||
});
|
|
||||||
fileList.value = fileList.value.filter((item) => {
|
|
||||||
return item.name != val.name;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 上传
|
|
||||||
function upImg(row, file) {
|
|
||||||
file.data = row.data;
|
|
||||||
imgList.value.push(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择人员
|
|
||||||
const hanlderChooseRy = (val) => {
|
|
||||||
listQuery.value.xfzy = val;
|
|
||||||
roleIdsPeo.value = val.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 删除
|
|
||||||
const handleClose = (index) => {
|
|
||||||
listQuery.value.xfzy.splice(index, 1);
|
|
||||||
roleIdsPeo.value.splice(index, 1);
|
|
||||||
};
|
|
||||||
// 选择组员
|
|
||||||
const chooseZY = () => {
|
|
||||||
if (disabledFoem.value) return false;
|
|
||||||
peoDialog.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
//选择用户负责人
|
|
||||||
const hanlderChoose = (users) => {
|
|
||||||
const user = users[0];
|
|
||||||
hasChooseFzr.value = [user.id];
|
|
||||||
listQuery.value.xfzzXm = user.userName;
|
|
||||||
listQuery.value.xfzzSfzh = user.idEntityCard;
|
|
||||||
};
|
|
||||||
// 选择人员
|
|
||||||
const choosedList = (val) => {
|
|
||||||
emitter.emit("deletePointArea", "zfry");
|
|
||||||
listQuery.value.xfdw = val;
|
|
||||||
chooseIds.value = val.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
showDialog.value = false;
|
|
||||||
let list = val.filter((item) => {
|
|
||||||
return item.jd && item.wd;
|
|
||||||
});
|
|
||||||
if (list.length == 0) return false;
|
|
||||||
emitter.emit("setMapCenter", {
|
|
||||||
location: [list[0].jd, list[0].wd],
|
|
||||||
zoomLevel: 10
|
|
||||||
});
|
|
||||||
emitter.emit("addPointArea", {
|
|
||||||
coords: list,
|
|
||||||
icon: require("@/assets/point/jz.png"),
|
|
||||||
flag: "zfry"
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 选择内容
|
|
||||||
const choosedNrList = (val) => {
|
|
||||||
showNrDialog.value = false;
|
|
||||||
chooseNrIds.value = val.map((item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
switch (mblx.value) {
|
|
||||||
case "01":
|
|
||||||
listQuery.value.xtjlnr = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "02":
|
|
||||||
listQuery.value.xtqdcx = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "03":
|
|
||||||
listQuery.value.xbgzjh = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "04":
|
|
||||||
listQuery.value.qt = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "05":
|
|
||||||
listQuery.value.xfgznr = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "06":
|
|
||||||
listQuery.value.sq = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "07":
|
|
||||||
listQuery.value.my = val[0].nr;
|
|
||||||
break;
|
|
||||||
case "08":
|
|
||||||
listQuery.value.gzcs = val[0].nr;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提交
|
|
||||||
const submit = () => {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (!valid) return false;
|
|
||||||
loading.value = true;
|
|
||||||
let pramas = { ...listQuery.value };
|
|
||||||
pramas.xfzy = JSON.stringify(pramas.xfzy);
|
|
||||||
pramas.xfdw = JSON.stringify(pramas.xfdw);
|
|
||||||
pramas.zfxl = pramas.xflx;
|
|
||||||
let ids1 = imgList.value.map((item) => {
|
|
||||||
return item.data;
|
|
||||||
});
|
|
||||||
let ids2 = fileList.value.map((item) => {
|
|
||||||
return item.name;
|
|
||||||
});
|
|
||||||
let ids = [...ids1, ...ids2];
|
|
||||||
pramas.xfzp = ids.join(",");
|
|
||||||
if (title.value == "新增巡访任务管理") {
|
|
||||||
qcckPost(pramas, "/mosty-jmxf/tbJcglXf")
|
|
||||||
.then((res) => {
|
|
||||||
proxy.$message({ type: "success", message: "新增成功" });
|
|
||||||
close();
|
|
||||||
emits("updateDate");
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
qcckPut(pramas, "/mosty-jmxf/tbJcglXf")
|
|
||||||
.then((res) => {
|
|
||||||
proxy.$message({ type: "success", message: "新增成功" });
|
|
||||||
close();
|
|
||||||
emits("updateDate");
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 关闭
|
|
||||||
const close = () => {
|
|
||||||
listQuery.value = { xfdw: [], xfzy: [] };
|
|
||||||
dialogForm.value = false;
|
|
||||||
imgList.value = [];
|
|
||||||
fileList.value = [];
|
|
||||||
};
|
|
||||||
defineExpose({ init });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
|
|
||||||
.mapBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
.ipt {
|
|
||||||
border: 1px solid rgb(7, 85, 188);
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
min-height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
background: #001238;
|
|
||||||
}
|
|
||||||
.iptwidth {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.formline {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
display: flex;
|
|
||||||
// justify-content: space-around;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog title="巡防部门" width="1400px" v-model="modelValue" append-to-body @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.xfbmmc" placeholder="请输入巡防部门" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡区领导姓名">
|
|
||||||
<el-input v-model="listQuery.xqldxm" placeholder="请输入巡区领导姓名" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属巡区名称">
|
|
||||||
<el-input v-model="listQuery.ssxqmc" 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" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
|
|
||||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" :row-key="keyid" border style="width: 100%" height="450">
|
|
||||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80"/>
|
|
||||||
<el-table-column prop="ssbm" align="center" label="所属部门"/>
|
|
||||||
<el-table-column prop="ssxqid" align="center" label="所属巡区">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :value="row.ssxqid" :options="D_XFTZ_XQLX" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="xqldxm" align="center" label="巡区领导姓名"/>
|
|
||||||
<el-table-column prop="dwfzrxm" align="center" label="负责人姓名"/>
|
|
||||||
<el-table-column prop="xqldzw" align="center" label="负责人职务"/>
|
|
||||||
<el-table-column prop="dwdz" align="center" label="单位地址"/>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<div class="fenye" >
|
|
||||||
<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 { defineProps, watch, ref, onMounted, nextTick,getCurrentInstance } from "vue";
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const {D_XFTZ_XQLX,D_XFTZ_XZXQ,D_XFTZ_DWXZ } = proxy.$dict("D_XFTZ_XQLX","D_XFTZ_XZXQ","D_XFTZ_DWXZ");
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
roleIds: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},// 回显
|
|
||||||
//是否单选
|
|
||||||
Single: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const total = ref(0);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
});
|
|
||||||
const keyid = (row) => {
|
|
||||||
return row.id;
|
|
||||||
};
|
|
||||||
const form = ref({});
|
|
||||||
const tableData = ref([]);
|
|
||||||
const multipleUserRef = ref(null);
|
|
||||||
const multipleSelectionUser = ref([]);
|
|
||||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
|
||||||
const closed = () => {
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
onMounted(()=>{
|
|
||||||
handleFilter();
|
|
||||||
})
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getListData = async () => {
|
|
||||||
const params = listQuery.value;
|
|
||||||
qcckGet(params,'/mosty-jmxf/xftz/selectPageList').then(res=>{
|
|
||||||
tableData.value = res?.records;
|
|
||||||
total.value = res.total
|
|
||||||
multipleUser()
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
//列表回显
|
|
||||||
function multipleUser() {
|
|
||||||
tableData.value.forEach(item=>{
|
|
||||||
if(props.roleIds.some(id=>id == item.id)){
|
|
||||||
multipleUserRef.value.toggleRowSelection(item, true);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
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 reset = () => {
|
|
||||||
listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "02" };
|
|
||||||
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("choosedList", list);
|
|
||||||
closed();
|
|
||||||
};
|
|
||||||
// pageSize 改变触发
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页码改变触发
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
</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>
|
|
||||||
@ -1,280 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-dialog title="巡防内容" width="1400px" v-model="modelValue" append-to-body @close="closed">
|
|
||||||
<div v-if="modelValue">
|
|
||||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
|
||||||
<el-form-item label="搜索关键字">
|
|
||||||
<el-input v-model="listQuery.key" placeholder="请输入关键字" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
|
||||||
<el-button type="info" @click="resetModel"> 重置 </el-button>
|
|
||||||
<el-button type="success" @click="modelValueAdd = true">新增模板</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"
|
|
||||||
:row-key="keyid"
|
|
||||||
border
|
|
||||||
style="width: 100%"
|
|
||||||
height="450"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
|
||||||
<el-table-column prop="nr" label="内容" />
|
|
||||||
<el-table-column label="操作" width="70">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-icon style="margin:0 4px;" @click="editForm(row)"><Document/></el-icon>
|
|
||||||
<el-icon @click="deleteForm([row.id])"><Delete/></el-icon>
|
|
||||||
</template>
|
|
||||||
</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="[10, 20, 50, 100]"
|
|
||||||
:page-size="listQuery.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="total"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div style="text-align:center;">
|
|
||||||
<el-button @click="closed">取消</el-button>
|
|
||||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- 新增模板 -->
|
|
||||||
<el-dialog
|
|
||||||
:title="mbTitle"
|
|
||||||
width="500px"
|
|
||||||
:destroy-on-close="true"
|
|
||||||
v-model="modelValueAdd"
|
|
||||||
append-to-body
|
|
||||||
@close="closeAddModel">
|
|
||||||
<el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
|
|
||||||
<el-form-item prop="type" label="模板类型" style="width:100%">
|
|
||||||
<el-select v-model="addForm.type" style="width:100%">
|
|
||||||
<el-option
|
|
||||||
v-for="item in D_ZFNR_MBLX"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="内容" style="width:100%" prop="nr">
|
|
||||||
<el-input v-model="addForm.nr" style="width:100%" type="textarea" placeholder="请输入内容" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<el-button @click="closeAddModel">取消</el-button>
|
|
||||||
<el-button type="primary" @click="onComfirmAdd">确认</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import { defineProps, watch, ref, onMounted, getCurrentInstance, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_ZFNR_MBLX } = proxy.$dict("D_ZFNR_MBLX");
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
roleIds: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},// 回显
|
|
||||||
//是否单选
|
|
||||||
Single: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
//模板类型
|
|
||||||
type:{
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const mbTitle =ref('新增模板')
|
|
||||||
const modelValueAdd = ref(false)
|
|
||||||
const total = ref(0);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
});
|
|
||||||
const keyid = (row) => {
|
|
||||||
return row.id;
|
|
||||||
};
|
|
||||||
const form = ref({});
|
|
||||||
const tableData = ref([]); //数据
|
|
||||||
const multipleUserRef = ref(null);
|
|
||||||
const multipleSelectionUser = ref([]);
|
|
||||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
|
||||||
const closed = () => {
|
|
||||||
emits("update:modelValue", false);
|
|
||||||
};
|
|
||||||
const elformAdd = ref()
|
|
||||||
const addForm = ref({ nr:''})
|
|
||||||
const rules = reactive({
|
|
||||||
type: [{ required: true, message: "请选择模板类型", trigger: "blur" }],
|
|
||||||
nr: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
|
||||||
})
|
|
||||||
onMounted(()=>{
|
|
||||||
handleFilter();
|
|
||||||
})
|
|
||||||
|
|
||||||
// 取消新增模板
|
|
||||||
const closeAddModel = ()=>{
|
|
||||||
modelValueAdd.value = false;
|
|
||||||
addForm.value.nr = '';
|
|
||||||
mbTitle.value = '新增模板'
|
|
||||||
}
|
|
||||||
// 编辑
|
|
||||||
const editForm = (row)=>{
|
|
||||||
modelValueAdd.value = true
|
|
||||||
mbTitle.value = '编辑模板'
|
|
||||||
addForm.value = {...row}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除模板
|
|
||||||
const deleteForm = (row)=>{
|
|
||||||
proxy.$confirm("确定要删除模板", "警告", {type: "warning"}).then(() => {
|
|
||||||
qcckPost(row,'/mosty-jmxf/tbJcglXfNrmb/bacth').then(() => {
|
|
||||||
proxy.$message({type: "success", message: "删除成功" });
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
handleFilter();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提交新增模板
|
|
||||||
const onComfirmAdd = ()=>{
|
|
||||||
elformAdd.value.validate((valid)=>{
|
|
||||||
if(!valid) return false;
|
|
||||||
if(mbTitle.value == '新增模板'){
|
|
||||||
qcckPost(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
|
||||||
closeAddModel()
|
|
||||||
handleFilter();
|
|
||||||
proxy.$message({type: "success", message: "新增成功"});
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
qcckPut(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
|
||||||
closeAddModel()
|
|
||||||
handleFilter();
|
|
||||||
proxy.$message({type: "success", message: "编辑成功"});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
const getListData = async () => {
|
|
||||||
let params = {
|
|
||||||
pageCurrent:listQuery.value.pageCurrent,
|
|
||||||
pageSize:listQuery.value.pageSize,
|
|
||||||
nr:listQuery.value.key,
|
|
||||||
type:props.type
|
|
||||||
}
|
|
||||||
qcckGet(params,'/mosty-jmxf/tbJcglXfNrmb').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 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 resetModel = () => {
|
|
||||||
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("choosedList", list);
|
|
||||||
closed();
|
|
||||||
};
|
|
||||||
// pageSize 改变触发
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页码改变触发
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
</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>
|
|
||||||
@ -1,448 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<!-- 头部 -->
|
|
||||||
<PageTitle title="巡访任务管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<!-- seletListDC -->
|
|
||||||
<el-button type="primary" @click="Activedown=true">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">导出</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
@click="delDictItem(ids)"
|
|
||||||
:disabled="ids.length == 0"
|
|
||||||
typeof="danger"
|
|
||||||
>
|
|
||||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">批量删除</span>
|
|
||||||
</el-button>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<template #xfdw="{ row }">
|
|
||||||
<el-tag v-for="it in row.xfdw" :key="it.id" style="margin: 0 4px">{{
|
|
||||||
it.xfbmmc
|
|
||||||
}}</el-tag>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-button size="small" @click="addEdit('edit', row.id)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-button size="small" @click="addEdit('detail', row.id)"
|
|
||||||
>详情</el-button
|
|
||||||
>
|
|
||||||
<el-button size="small" @click="delDictItem([row.id])"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 编辑-新增弹窗 -->
|
|
||||||
<EditAddForm
|
|
||||||
ref="addEditDiloag"
|
|
||||||
:dic="{ D_BZ_XFLX, D_ZFNR_MBLX }"
|
|
||||||
@updateDate="getData"
|
|
||||||
/>
|
|
||||||
<DownLoad v-model="Activedown" :dic="{D_BZ_RWZT,D_BZ_XFLX, D_ZFNR_MBLX}"/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import * as XLSX from "xlsx";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import EditAddForm from "./components/editAddForm.vue";
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
||||||
import DownLoad from './components/downXlsx.vue'
|
|
||||||
const Activedown=ref(false)
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_XFLX, D_BZ_RWZT, D_ZFNR_MBLX, D_XFTZ_DWXZ } = proxy.$dict(
|
|
||||||
"D_BZ_XFLX",
|
|
||||||
"D_BZ_RWZT",
|
|
||||||
"D_ZFNR_MBLX",
|
|
||||||
"D_XFTZ_DWXZ"
|
|
||||||
);
|
|
||||||
const ids = ref([]); //多选
|
|
||||||
const addEditDiloag = ref();
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
const searchConfiger = reactive([
|
|
||||||
{
|
|
||||||
showType: "department",
|
|
||||||
prop: "ssbmdm",
|
|
||||||
options: [],
|
|
||||||
placeholder: "请选择单位",
|
|
||||||
label: "归属单位"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "cascader",
|
|
||||||
prop: "xflx",
|
|
||||||
options: D_BZ_XFLX,
|
|
||||||
props: {
|
|
||||||
label: "zdmc",
|
|
||||||
value: "dm",
|
|
||||||
children: "itemList"
|
|
||||||
},
|
|
||||||
lazy: false,
|
|
||||||
placeholder: "请选择无警巡访类型",
|
|
||||||
label: "无警巡访类型"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "xfdw",
|
|
||||||
placeholder: "请输入走访对象",
|
|
||||||
label: "走访对象"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "xfmj",
|
|
||||||
placeholder: "请输入走访民警",
|
|
||||||
label: "走访民警"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "select",
|
|
||||||
prop: "rwzt",
|
|
||||||
placeholder: "请选择任务状态",
|
|
||||||
label: "任务状态",
|
|
||||||
options: D_BZ_RWZT
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "daterange",
|
|
||||||
prop: "time",
|
|
||||||
label: "起止时间"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const loading = ref(false);
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
loading: false,
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "checkBox"
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 210, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{
|
|
||||||
label: "巡访时间",
|
|
||||||
prop: "xfsj"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "走访主责人",
|
|
||||||
prop: "xfzzXm"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "走访对象",
|
|
||||||
prop: "xfdw",
|
|
||||||
showSolt: true
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
label: "走访对象类型",
|
|
||||||
prop: "xflxmc"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
const listQuery = ref({ ssbmdm: "" });
|
|
||||||
onMounted(() => {
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
pageData.keyCount = data;
|
|
||||||
});
|
|
||||||
tabHeightFn();
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val) => {
|
|
||||||
console.log(val.xflx);
|
|
||||||
let xflx
|
|
||||||
if(val.xflx){
|
|
||||||
console.log("xx");
|
|
||||||
xflx=val.xflx[val.xflx.length-1]
|
|
||||||
}
|
|
||||||
console.log(xflx);
|
|
||||||
// = { ...listQuery.value, ...val };
|
|
||||||
listQuery.value = {
|
|
||||||
...listQuery.value,
|
|
||||||
ssbmdm: val.ssbmdm,
|
|
||||||
xflx:xflx,
|
|
||||||
zdmc: val.zdmc,
|
|
||||||
xfdw: val.xfdw,
|
|
||||||
xfmj: val.xfmj,
|
|
||||||
rwzt: val.rwzt,
|
|
||||||
kssj:val.time? val.time[0]:"",
|
|
||||||
jssj: val.time? val.time[1]:""
|
|
||||||
};
|
|
||||||
getData();
|
|
||||||
};
|
|
||||||
// 获取数据
|
|
||||||
const getData = () => {
|
|
||||||
let pramas = {
|
|
||||||
pageSize: pageData.pageConfiger.pageSize,
|
|
||||||
pageCurrent: pageData.pageConfiger.pageNum,
|
|
||||||
...listQuery.value
|
|
||||||
};
|
|
||||||
// pramas.xflx = pramas.xflx ? pramas.xflx[1] : "";
|
|
||||||
// delete pramas.daterange;
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
qcckGet(pramas, "/mosty-jmxf/tbJcglXf")
|
|
||||||
.then((res) => {
|
|
||||||
console.log(res, "xxxx");
|
|
||||||
pageData.tableData = res.records || [];
|
|
||||||
pageData.tableData.forEach((item) => {
|
|
||||||
item.xfdw = JSON.parse(item.xfdw);
|
|
||||||
item.xfzy = JSON.parse(item.xfzy);
|
|
||||||
|
|
||||||
item.xflxmc = showMc(D_BZ_XFLX.value, item.xflx);
|
|
||||||
|
|
||||||
// D_BZ_XFLX.value.forEach((el) => {
|
|
||||||
// if ([item.xflx].includes(el.dm)) {
|
|
||||||
// item.xflxmc = el.zdmc;
|
|
||||||
// } else {
|
|
||||||
// if (item.xflx.substring(0, 1) == el.dm.substring(0, 1)) {
|
|
||||||
// el.itemList.forEach((it) => {
|
|
||||||
// if ([item.xflx].includes(it.dm)) {
|
|
||||||
// item.xflxmc = it.zdmc;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
pageData.total = res.total;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getData();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 多选
|
|
||||||
const chooseData = (val) => {
|
|
||||||
if (!val) return false;
|
|
||||||
ids.value = val.map((v) => {
|
|
||||||
return v.id;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 批量删除
|
|
||||||
const delDictItem = (row) => {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
|
||||||
.then(() => {
|
|
||||||
qcckPost(row, "/mosty-jmxf/tbJcglXf/bacth").then(() => {
|
|
||||||
proxy.$message({ type: "success", message: "删除成功" });
|
|
||||||
pageData.pageConfiger.pageNum = 1;
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 导出
|
|
||||||
const seletListDC = () => {
|
|
||||||
|
|
||||||
proxy.$confirm("确定要导出列表数据", "警告", { type: "warning" }).then(() => {
|
|
||||||
let pramas = {
|
|
||||||
...listQuery.value
|
|
||||||
};
|
|
||||||
loading.value = true;
|
|
||||||
pramas.xflx = pramas.xflx ? pramas.xflx[1] : "";
|
|
||||||
delete pramas.daterange;
|
|
||||||
qcckGet(pramas, "/mosty-jmxf/tbJcglXf/seletList")
|
|
||||||
.then((res) => {
|
|
||||||
Dc(res);
|
|
||||||
proxy.$message({ type: "success", message: "导出成功" });
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const Dc = (arr) => {
|
|
||||||
let tableTitle = [
|
|
||||||
[
|
|
||||||
"所属大队",
|
|
||||||
"所属巡区",
|
|
||||||
"巡区责任领导姓名",
|
|
||||||
"巡区责任领导职务",
|
|
||||||
"巡访类型",
|
|
||||||
"巡访对象",
|
|
||||||
"行政辖区",
|
|
||||||
"单位性质",
|
|
||||||
"负责人姓名",
|
|
||||||
"负责人电话",
|
|
||||||
"治保会主任/安保负责人",
|
|
||||||
"治保会主任/安保负责人电话",
|
|
||||||
"安保服务来源",
|
|
||||||
"网格员/保安人数",
|
|
||||||
"群众姓名",
|
|
||||||
"联系方式",
|
|
||||||
"走访地址"
|
|
||||||
]
|
|
||||||
];
|
|
||||||
|
|
||||||
arr.forEach((item, index) => {
|
|
||||||
let rowData = [];
|
|
||||||
let xflxmc = showMc(D_BZ_XFLX.value, item.xflx);
|
|
||||||
// let listCy = JSON.parse(item.xfzy).map((item) => item);
|
|
||||||
let listZf = JSON.parse(item.xfdw).map((item) => item);
|
|
||||||
|
|
||||||
let dwxz = [];
|
|
||||||
if (listZf.length > 0) {
|
|
||||||
dwxz = D_XFTZ_DWXZ.value.filter((item) => item.dm == listZf[0].dwxz);
|
|
||||||
rowData = [
|
|
||||||
item.ssbm,
|
|
||||||
listZf.map((item) => item.ssxqmc).toString(),
|
|
||||||
item.xfzzXm,
|
|
||||||
listZf[0].xqldzw,
|
|
||||||
xflxmc,
|
|
||||||
listZf[0].xfbmmc,
|
|
||||||
listZf[0].xzqh,
|
|
||||||
dwxz.length > 0 ? dwxz[0].label : "",
|
|
||||||
listZf.map((item) => item.dwfzrxm).toString(),
|
|
||||||
listZf[0].dwfzrlxdh,
|
|
||||||
listZf[0].abfzrzxm,
|
|
||||||
listZf[0].abfzrzdh,
|
|
||||||
listZf[0].abfwly,
|
|
||||||
listZf[0].bars,
|
|
||||||
item.qzxm,
|
|
||||||
item.qzlxfs,
|
|
||||||
item.xfdz
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
rowData = [
|
|
||||||
item.ssbm,
|
|
||||||
"",
|
|
||||||
item.xfzzXm,
|
|
||||||
"",
|
|
||||||
xflxmc,
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
dwxz.length > 0 ? dwxz[0].label : "",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
item.qzxm,
|
|
||||||
item.qzlxfs,
|
|
||||||
item.xfdz
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
tableTitle.push(rowData);
|
|
||||||
});
|
|
||||||
|
|
||||||
let workSheet = XLSX.utils.aoa_to_sheet(tableTitle);
|
|
||||||
workSheet["!rows"] = [{ hpx: 30 }];
|
|
||||||
workSheet["!cols"] = [
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 100 },
|
|
||||||
{ wpx: 120 },
|
|
||||||
{ wpx: 120 },
|
|
||||||
{ wpx: 100 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 },
|
|
||||||
{ wpx: 150 }
|
|
||||||
];
|
|
||||||
let bookNew = XLSX.utils.book_new();
|
|
||||||
XLSX.utils.book_append_sheet(bookNew, workSheet, "巡访任务管理");
|
|
||||||
let name = "巡访任务管理.xlsx";
|
|
||||||
XLSX.writeFile(bookNew, name);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增
|
|
||||||
const addEdit = (type, id) => {
|
|
||||||
addEditDiloag.value.init(type, id);
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight =
|
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 244;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const showMc = (val, vale) => {
|
|
||||||
const stack = [...val];
|
|
||||||
while (stack.length) {
|
|
||||||
const item = stack.pop();
|
|
||||||
if (item.dm == vale) {
|
|
||||||
return item.label;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
stack.push(...item.children);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
// onMounted(())
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-dialog title="新增人员" width="1000px" :destroy-on-close="true" v-model="props.showAdd" append-to-body @close="closeAddModel">
|
|
||||||
<el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
|
|
||||||
<el-form-item label="姓名" prop="xm">
|
|
||||||
<el-input v-model="addForm.xm" placeholder="请输入姓名" clearable/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证号" prop="sfzh">
|
|
||||||
<el-input v-model="addForm.sfzh" placeholder="请输入身份证号" clearable/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="籍贯" prop="jg">
|
|
||||||
<el-input v-model="addForm.jg" placeholder="请输入籍贯" clearable/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div style="text-align: center">
|
|
||||||
<el-button @click="closeAddModel">取消</el-button>
|
|
||||||
<el-button type="primary" @click="onComfirmAdd">确认</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { watch, ref, onMounted, defineEmits, reactive, nextTick } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
showAdd: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
})
|
|
||||||
const emits = defineEmits(["update:showAdd",'addDate'])
|
|
||||||
const addForm = ref({});
|
|
||||||
const rules = reactive({
|
|
||||||
xm: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
|
||||||
sfzh: [{ required: true, message: "请输入身份证号", trigger: ['change','blur']}],
|
|
||||||
jg: [{ required: true, message: "请输入籍贯", trigger: ['change','blur']}],
|
|
||||||
})
|
|
||||||
const elformAdd = ref()
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeAddModel = ()=>{
|
|
||||||
addForm.value.xm = ''
|
|
||||||
addForm.value.sfzh = ''
|
|
||||||
addForm.value.jg = ''
|
|
||||||
emits('update:showAdd',false)
|
|
||||||
};
|
|
||||||
// 提交表单
|
|
||||||
const onComfirmAdd = ()=>{
|
|
||||||
elformAdd.value.validate((valid)=>{
|
|
||||||
if(!valid) return false;
|
|
||||||
let params = { ...addForm.value }
|
|
||||||
emits('addDate',params)
|
|
||||||
closeAddModel()
|
|
||||||
})
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,340 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
|
||||||
<el-form-item prop="ssbmdm" label="单位归属">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwmc" label="单位名称">
|
|
||||||
<el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwfl" label="单位分类">
|
|
||||||
<el-select v-model="listQuery.dwfl">
|
|
||||||
<el-option v-for="item in props.dic.D_BZ_DWFL" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dws" label="单位地址数">
|
|
||||||
<el-input-number v-model="listQuery.dws" :min="0" style="width:100%;" placeholder="请输入单位地址数"></el-input-number>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dwlx" label="单位类型">
|
|
||||||
<el-select v-model="listQuery.dwlx">
|
|
||||||
<el-option v-for="item in props.dic.D_BZ_DWLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="lxdh" label="联系电话">
|
|
||||||
<el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dz" label="第一地址" style="width:100%;">
|
|
||||||
<el-input v-model="listQuery.dz" placeholder="请输入第一地址"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="dz1" label="第二地址" style="width:100%;">
|
|
||||||
<el-input v-model="listQuery.dz1" placeholder="请输入第二地址"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width:100%;">
|
|
||||||
<template #label> 经纬度 <el-button type="pramary" @click="chackLat">坐标</el-button></template>
|
|
||||||
<ul class="dzBox">
|
|
||||||
<li class="dzItem">
|
|
||||||
<div class="text">经度 ：<el-input placeholder="请选择经度" style="width:90%" v-model="listQuery.jd"></el-input></div>
|
|
||||||
<div class="text">纬度 ：<el-input placeholder="请选择纬度" style="width:90%" v-model="listQuery.wd"></el-input></div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="mapBox">
|
|
||||||
<div style="width:35%;height:360px"> <GdMap /></div>
|
|
||||||
<div style="width:65%">
|
|
||||||
<el-form-item prop="xzry" style="width:100%;">
|
|
||||||
<template #label>选择人员</template>
|
|
||||||
<div class="searchBox1">
|
|
||||||
<div>姓名: <el-input v-model="searchForm.xm" placeholder="请输入姓名" style="width:72%"></el-input> </div>
|
|
||||||
<div>身份证号: <el-input v-model="searchForm.sfzh" placeholder="请输入身份证号" style="width:72%"></el-input> </div>
|
|
||||||
<el-button @click="serchDate">查询</el-button>
|
|
||||||
<el-button @click="resetDate">重置</el-button>
|
|
||||||
<el-button :disabled="chooseList.length == 0" @click="saveDate">保存</el-button>
|
|
||||||
</div>
|
|
||||||
<div style="width:100%;">
|
|
||||||
<div style="width:100%;height:260px;">
|
|
||||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%;height:100%;">
|
|
||||||
<el-table-column type="selection" width="55" />
|
|
||||||
<el-table-column type="index" align="center" width="60px" label="序号"/>
|
|
||||||
<el-table-column prop="xm" label="姓名" align="center"/>
|
|
||||||
<el-table-column prop="sfzh" label="身份证号" align="center"/>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<div style="width:100%;border-top:1px solid rgb(34,61,148);">
|
|
||||||
<el-pagination
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="searchForm.pageCurrent"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="searchForm.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="searchForm.total"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="cyry" style="width:100%;">
|
|
||||||
<template #label>
|
|
||||||
从业人员 <el-button type="pramary" @click="showAdd = true">添加人员</el-button>
|
|
||||||
</template>
|
|
||||||
</el-form-item>
|
|
||||||
<el-table :data="tableDataCnt" border>
|
|
||||||
<el-table-column type="index" align="center" width="60px" label="序号" />
|
|
||||||
<el-table-column prop="xm" align="center" label="姓名" />
|
|
||||||
<el-table-column prop="sfzh" align="center" label="身份证号" />
|
|
||||||
<el-table-column prop="jg" align="center" label="籍贯" />
|
|
||||||
<el-table-column label="操作" align="center" width="180px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="delDictItem(row)" type="danger" size="small" >删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-form-item prop="bz" label="备注" style="width:100%;">
|
|
||||||
<el-input v-model="listQuery.bz" type="textarea" placeholder="请输入备注"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<ChooseUser
|
|
||||||
v-if="chooseUserVisible"
|
|
||||||
v-model="chooseUserVisible"
|
|
||||||
titleValue="选择负责人"
|
|
||||||
:roleIds="hasChooseFzr"
|
|
||||||
@choosedUsers="hanlderChoose"
|
|
||||||
></ChooseUser>
|
|
||||||
<!-- 添加人员 -->
|
|
||||||
<AddPerson v-model:showAdd="showAdd" @addDate="addDate"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
|
||||||
import AddPerson from "./addPerson.vue";
|
|
||||||
import emitter from "@/utils/eventBus.js";
|
|
||||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import { IdCard } from "@/utils/validate.js";
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import { ref,defineExpose, reactive,defineProps,defineEmits, onMounted ,getCurrentInstance} from 'vue';
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const props = defineProps({
|
|
||||||
dic:{ type:Object, default:{} }
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const emits = defineEmits(['updateDate'])
|
|
||||||
const showAdd = ref(false);//添加人员
|
|
||||||
const chooseList = ref([]) //选择的成员
|
|
||||||
const multipleUserRef = ref(false)
|
|
||||||
|
|
||||||
const chooseUserVisible = ref(false) //负责人弹窗
|
|
||||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
|
||||||
const hasChooseMj = ref([]); //已经选胡民警
|
|
||||||
const searchForm = ref({
|
|
||||||
sfzh:'',
|
|
||||||
xm:'',
|
|
||||||
pageCurrent:1,
|
|
||||||
pageSize:10,
|
|
||||||
total:0
|
|
||||||
})
|
|
||||||
|
|
||||||
const title = ref('新增巡访任务管理');
|
|
||||||
const disabledFoem = ref(false) //表单禁用
|
|
||||||
const dialogForm = ref(false) //弹窗
|
|
||||||
const xfzy = ref([])
|
|
||||||
const listQuery = ref({ dws :0}) //表单
|
|
||||||
const tableData = ref([])
|
|
||||||
const tableDataCnt = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const elform = ref()
|
|
||||||
const rules = reactive({
|
|
||||||
ssbmdm: [{ required: true, message: "请选择单位归属", trigger: "change" }],
|
|
||||||
xfzz: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
|
|
||||||
})
|
|
||||||
onMounted(()=>{
|
|
||||||
getRyList() //获取人员数据
|
|
||||||
emitter.on("coordString", (res) => {
|
|
||||||
if (res.type === "point") {
|
|
||||||
listQuery.value.jd = res.coord[0];
|
|
||||||
listQuery.value.wd = res.coord[1];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
//选择用户负责人
|
|
||||||
const hanlderChoose = (users) => {
|
|
||||||
const user = users[0];
|
|
||||||
hasChooseFzr.value = [user.id];
|
|
||||||
listQuery.value.xfzz = user.userName
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查询数据
|
|
||||||
const serchDate = ()=>{
|
|
||||||
searchForm.value.pageCurrent = 1;
|
|
||||||
getRyList()
|
|
||||||
}
|
|
||||||
// 重置数据
|
|
||||||
const resetDate = ()=>{
|
|
||||||
searchForm.value.xm = ''
|
|
||||||
searchForm.value.sfzh = ''
|
|
||||||
serchDate()
|
|
||||||
}
|
|
||||||
// 新增数据
|
|
||||||
const addDate = (val)=>{
|
|
||||||
tableDataCnt.value.unshift(val)
|
|
||||||
}
|
|
||||||
// 保存数据
|
|
||||||
const saveDate= ()=>{
|
|
||||||
tableDataCnt.value = chooseList.value.concat(tableDataCnt.value)
|
|
||||||
chooseList.value = [];
|
|
||||||
multipleUserRef.value.clearSelection()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除数据
|
|
||||||
const delDictItem = (row)=>{
|
|
||||||
tableDataCnt.value = tableDataCnt.value.splice(row,1)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取人员数据
|
|
||||||
const getRyList = ()=>{
|
|
||||||
let pramas = {...searchForm.value }
|
|
||||||
delete pramas.total;
|
|
||||||
qcckGet(pramas,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
|
||||||
tableData.value = res.records?res.records:[]
|
|
||||||
searchForm.value.total = res.total
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 多选数据
|
|
||||||
const handleSelectionChange = (val)=>{
|
|
||||||
chooseList.value = val
|
|
||||||
}
|
|
||||||
|
|
||||||
// 人员分页
|
|
||||||
const handleSizeChange = (val)=>{
|
|
||||||
searchForm.value.pageSize = val
|
|
||||||
getRyList()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 人员页数
|
|
||||||
const handleCurrentChange = (val)=>{
|
|
||||||
searchForm.value.pageCurrent = val
|
|
||||||
getRyList()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type,id)=> {
|
|
||||||
dialogForm.value = true
|
|
||||||
disabledFoem.value = type == 'detail'? true :false
|
|
||||||
if(id){
|
|
||||||
title.value = type == 'detail'? '单位管理详情' :'单位管理编辑'
|
|
||||||
getDataById(id) //根据id查询详情
|
|
||||||
}else{
|
|
||||||
title.value = '新增单位管理'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 根据id查询详情
|
|
||||||
const getDataById = (id)=>{
|
|
||||||
qcckGet({},'/mosty-jmxf/tbJcglXfDwgl/'+id).then(res=>{
|
|
||||||
res.cyry = res.cyry ? JSON.parse(res.cyry): []
|
|
||||||
listQuery.value = JSON.parse(JSON.stringify(res))
|
|
||||||
tableDataCnt.value = res.cyry
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取经纬度
|
|
||||||
function chackLat(type) {
|
|
||||||
emitter.emit("drawShape", { type: "point", flag: "point" ,isclear:true});
|
|
||||||
listQuery.value.jd = "";
|
|
||||||
listQuery.value.wd = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提交
|
|
||||||
const submit = ()=>{
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (!valid) return false;
|
|
||||||
loading.value = true;
|
|
||||||
let pramas = { ...listQuery.value }
|
|
||||||
pramas.cyry = JSON.stringify(tableDataCnt.value)
|
|
||||||
if(title.value == '新增单位管理'){
|
|
||||||
qcckPost(pramas,'/mosty-jmxf/tbJcglXfDwgl').then(res=>{
|
|
||||||
proxy.$message({type: "success", message: "新增成功"});
|
|
||||||
loading.value = false;
|
|
||||||
close()
|
|
||||||
emits('updateDate')
|
|
||||||
}).catch(()=>{ loading.value = false; })
|
|
||||||
}else{
|
|
||||||
qcckPut(pramas,'/mosty-jmxf/tbJcglXfDwgl').then(res=>{
|
|
||||||
proxy.$message({type: "success", message: "编辑成功"});
|
|
||||||
loading.value = false;
|
|
||||||
close()
|
|
||||||
emits('updateDate')
|
|
||||||
}).catch(()=>{ loading.value = false; })
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
// 关闭
|
|
||||||
const close = ()=>{
|
|
||||||
listQuery.value = { sfzh :''}
|
|
||||||
dialogForm.value = false
|
|
||||||
}
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.photosBox{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.photosItem{
|
|
||||||
width: 98px;
|
|
||||||
height: 130px;
|
|
||||||
margin-right: 10px;
|
|
||||||
.el-image{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dzBox{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.dzItem{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.text{
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.searchBox1{
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.mapBox{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.ipt {
|
|
||||||
border: 1px solid rgb(7, 85, 188);
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
min-height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
background: #001238;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<!-- 头部 -->
|
|
||||||
<PageTitle title="单位管理">
|
|
||||||
<el-button type="primary" @click="addEdit('add', '')">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
|
|
||||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">批量删除</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<template #dwlx="{row}">
|
|
||||||
<dict-tag :value="row.dwlx" :options="D_BZ_DWLX" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
<template #dwfl="{row}">
|
|
||||||
<dict-tag :value="row.dwfl" :options="D_BZ_DWFL" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-button size="small" @click="addEdit('edit', row.id)">编辑</el-button>
|
|
||||||
<el-button size="small" @click="addEdit('detail', row.id)">详情</el-button>
|
|
||||||
<el-button size="small" @click="delDictItem([row.id])">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<EditAddForm :dic="{ D_BZ_DWFL , D_BZ_DWLX}" ref="editInfo" @updateDate="getData"></EditAddForm>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
import EditAddForm from './components/editAddForm.vue'
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import { reactive, ref ,onMounted,getCurrentInstance, nextTick } from 'vue';
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_DWFL,D_BZ_DWLX } = proxy.$dict("D_BZ_DWFL","D_BZ_DWLX");
|
|
||||||
const editInfo = ref()
|
|
||||||
const ids = ref([]);//多选
|
|
||||||
const searchBox = ref() //搜索框
|
|
||||||
const searchConfiger = reactive([
|
|
||||||
{
|
|
||||||
showType: "defaultSlot",
|
|
||||||
prop: "ssbmdm",
|
|
||||||
options: [],
|
|
||||||
placeholder: "请选择单位",
|
|
||||||
label: "归属单位"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "input",
|
|
||||||
prop: "dwmc",
|
|
||||||
placeholder: "请输入单位名称",
|
|
||||||
label: "单位名称"
|
|
||||||
},{
|
|
||||||
showType: "select",
|
|
||||||
prop: "dwfl",
|
|
||||||
placeholder: "请选择单位分类",
|
|
||||||
label: "单位分类",
|
|
||||||
options:D_BZ_DWFL
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "select",
|
|
||||||
prop: "dwlx",
|
|
||||||
placeholder: "请选择单位类型",
|
|
||||||
label: "单位类型",
|
|
||||||
options:D_BZ_DWLX
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
loading: false,
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType:'checkBox'
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 210, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{
|
|
||||||
label: "归属单位",
|
|
||||||
prop: "ssbm"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单位名称",
|
|
||||||
prop: "dwmc"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单位类型",
|
|
||||||
prop: "dwlx",
|
|
||||||
showSolt:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单位分类",
|
|
||||||
prop: "dwfl",
|
|
||||||
showSolt:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单位地址",
|
|
||||||
prop: "dz"
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
});
|
|
||||||
const listQuery = ref({ssbmsm:''})
|
|
||||||
onMounted(() => {
|
|
||||||
tabHeightFn();
|
|
||||||
proxy.mittBus.on("mittFn", (data) => { pageData.keyCount = data; });
|
|
||||||
getData()
|
|
||||||
});
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val)=>{
|
|
||||||
delete val.ssbmdm;
|
|
||||||
listQuery.value = {...listQuery.value,...val}
|
|
||||||
if(val.cz) listQuery.value.ssbmdm = '';
|
|
||||||
delete listQuery.value.cz;
|
|
||||||
pageData.pageConfiger.pageNum = 1 ;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
const getData = ()=>{
|
|
||||||
let pramas = {
|
|
||||||
pageSize:pageData.pageConfiger.pageSize,
|
|
||||||
pageCurrent:pageData.pageConfiger.pageNum,
|
|
||||||
...listQuery.value
|
|
||||||
}
|
|
||||||
pageData.tableConfiger.loading = true
|
|
||||||
qcckGet(pramas,'/mosty-jmxf/tbJcglXfDwgl').then(res=>{
|
|
||||||
pageData.tableData = res.records || []
|
|
||||||
pageData.tableConfiger.loading = false
|
|
||||||
pageData.total = res.total
|
|
||||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeNo = (val) =>{
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
const changeSize = (val) =>{
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情 - 新增
|
|
||||||
const addEdit = (type,id)=>{
|
|
||||||
nextTick(()=>{ editInfo.value.init(type,id) })
|
|
||||||
}
|
|
||||||
// 多选
|
|
||||||
const chooseData = (val)=>{
|
|
||||||
if(!val) return false;
|
|
||||||
ids.value = val.map(v=>{ return v.id })
|
|
||||||
}
|
|
||||||
// 批量删除
|
|
||||||
const delDictItem = (row)=> {
|
|
||||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
|
||||||
qcckPost(row,'/mosty-jmxf/tbJcglXfDwgl/bacth').then(() => {
|
|
||||||
proxy.$message({type: "success", message: "删除成功" });
|
|
||||||
pageData.pageConfiger.pageNum = 1
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
|
||||||
window.onresize = function () { tabHeightFn(); };
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-loading-mask{
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2024-01-25 16:21:46
|
|
||||||
* @LastEditTime: 2024-01-26 10:10:33
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: In User Settings Edit
|
|
||||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="dialog" v-if="dialogForm">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
|
||||||
<el-form-item prop="ssbmdm" label="单位归属">
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xflx" label="巡访类型">
|
|
||||||
<el-select v-model="listQuery.xflx">
|
|
||||||
<el-option v-for="item in xflxList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfzz" label="巡访组长">
|
|
||||||
<el-input @click="chooseUserVisible = true" v-model="listQuery.xfzz" placeholder="请选择组长"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="lxdh" label="巡访时间">
|
|
||||||
<el-date-picker v-model="listQuery.xfsj" type="datetime" placeholder="请选择巡访时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfzy" label="巡访组员" style="width:100%;">
|
|
||||||
<div class="ipt">
|
|
||||||
<span v-show=" xfzy.length == 0" style="color:#e5e5e5;padding-left:10px;">请选择组员</span>
|
|
||||||
<el-tag v-for="tag in xfzy" :key="tag.id" closable :type="tag.type" @close.stop="handleClose(tag, 'MJ')">
|
|
||||||
{{ tag.jlxm }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfnr" style="width:100%;">
|
|
||||||
<template #label>巡访内容 </template>
|
|
||||||
<el-input v-model="listQuery.xfnr" placeholder="请输入巡访内容" show-word-limit type="textarea" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="xfdw" style="width:100%;">
|
|
||||||
<template #label>巡访单位 </template>
|
|
||||||
<el-table :data="listQuery.tableData" border>
|
|
||||||
<el-table-column type="index" align="center" width="60px" label="序号" />
|
|
||||||
<el-table-column prop="dwmc" align="center" label="单位名称" />
|
|
||||||
<el-table-column prop="xxdz" align="center" label="地址" show-overflow-tooltip />
|
|
||||||
<el-table-column prop="lxdh" align="center" label="联系电话" />
|
|
||||||
</el-table>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="走访照片" style="width:100%;">
|
|
||||||
<ul class="photosBox">
|
|
||||||
<li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
|
|
||||||
<li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
|
|
||||||
<li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
|
|
||||||
<li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
|
|
||||||
</ul>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="巡访地址" style="width:100%;">
|
|
||||||
<ul class="dzBox">
|
|
||||||
<li class="dzItem">
|
|
||||||
<div class="text">经度 ：<el-input placeholder="请选择经度" style="width:70%"></el-input></div>
|
|
||||||
<div class="text">纬度 ：<el-input placeholder="请选择纬度" style="width:70%"></el-input></div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="mapBox"> <GdMap /> </div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<ChooseUser
|
|
||||||
v-if="chooseUserVisible"
|
|
||||||
v-model="chooseUserVisible"
|
|
||||||
titleValue="选择负责人"
|
|
||||||
:roleIds="hasChooseFzr"
|
|
||||||
@choosedUsers="hanlderChoose"
|
|
||||||
></ChooseUser>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import * as rule from "@/utils/rules.js";
|
|
||||||
import { IdCard } from "@/utils/validate.js";
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
|
||||||
import { ref,defineExpose, reactive,defineProps } from 'vue';
|
|
||||||
const props = defineProps({
|
|
||||||
dic:{ type:Object, default:{} }
|
|
||||||
})
|
|
||||||
|
|
||||||
const xflxList = ref([
|
|
||||||
{label:'巡访类型1',value:'01'},
|
|
||||||
{label:'巡访类型2',value:'02'},
|
|
||||||
])
|
|
||||||
const chooseUserVisible = ref(false) //负责人弹窗
|
|
||||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
|
||||||
const hasChooseMj = ref([]); //已经选胡民警
|
|
||||||
|
|
||||||
const title = ref('新增巡访战果');
|
|
||||||
const disabledFoem = ref(false) //表单禁用
|
|
||||||
const dialogForm = ref(false) //弹窗
|
|
||||||
const xfzy = ref([])
|
|
||||||
const listQuery = ref({
|
|
||||||
sfzh:'',
|
|
||||||
|
|
||||||
tableData:[
|
|
||||||
{ dwmc:'人民医院',xxdz:'xxx街道',lxdh:'12345678900'}
|
|
||||||
]
|
|
||||||
}) //表单
|
|
||||||
const loading = ref(false)
|
|
||||||
const elform = ref()
|
|
||||||
const rules = reactive({
|
|
||||||
ssbmdm: [{ required: true, message: "请选择单位归属", trigger: "change" }],
|
|
||||||
xfzz: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
|
|
||||||
})
|
|
||||||
|
|
||||||
//选择用户负责人
|
|
||||||
const hanlderChoose = (users) => {
|
|
||||||
const user = users[0];
|
|
||||||
hasChooseFzr.value = [user.id];
|
|
||||||
listQuery.value.xfzz = user.userName
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
const init = (type,id)=> {
|
|
||||||
dialogForm.value = true
|
|
||||||
disabledFoem.value = true
|
|
||||||
title.value = '巡访战果详情'
|
|
||||||
getDataById(id) //根据id查询详情
|
|
||||||
}
|
|
||||||
// 根据id查询详情
|
|
||||||
const getDataById = (id)=>{
|
|
||||||
// qcckGet({},'/mosty-jmxf/tbJcglXfZg/'+id).then(res=>{
|
|
||||||
// listQuery.value = JSON.parse(JSON.stringify(res))
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
// 提交
|
|
||||||
const submit = ()=>{
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (!valid) return false;
|
|
||||||
loading.value = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
// 关闭
|
|
||||||
const close = ()=>{
|
|
||||||
listQuery.value = { sfzh :''}
|
|
||||||
dialogForm.value = false
|
|
||||||
}
|
|
||||||
defineExpose({init});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.photosBox{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.photosItem{
|
|
||||||
width: 98px;
|
|
||||||
height: 130px;
|
|
||||||
margin-right: 10px;
|
|
||||||
.el-image{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dzBox{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.dzItem{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
.text{
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mapBox{
|
|
||||||
width: 100%;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
.ipt {
|
|
||||||
border: 1px solid rgb(7, 85, 188);
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
min-height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
background: #001238;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,264 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<!-- 头部 -->
|
|
||||||
<PageTitle title="巡防战果管理">
|
|
||||||
<el-button type="primary" @click="exportDate">
|
|
||||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
|
||||||
<span style="vertical-align: middle">导出报表</span>
|
|
||||||
</el-button>
|
|
||||||
</PageTitle>
|
|
||||||
</div>
|
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
|
||||||
<template #defaultSlot>
|
|
||||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
||||||
</template>
|
|
||||||
</Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable
|
|
||||||
:tableData="pageData.tableData"
|
|
||||||
:tableColumn="pageData.tableColumn"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount"
|
|
||||||
:tableConfiger="pageData.tableConfiger"
|
|
||||||
:controlsWidth="pageData.controlsWidth"
|
|
||||||
>
|
|
||||||
<template #sbzt="{ row }">
|
|
||||||
<span :class="row.sbzt == '03'? 'green':row.sbzt == '02'?'orange':'red'">
|
|
||||||
<dict-tag :value="row.sbzt" :options="D_SB_SBZT" :tag="false"></dict-tag>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template #sblx="{ row }">
|
|
||||||
<dict-tag :value="row.sblx" :options="D_SB_SBLX" :tag="false"></dict-tag>
|
|
||||||
</template>
|
|
||||||
<!-- 操作 -->
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-popover placement="left" :width="400" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<el-button size="small" @click="aggrenInfo('edit', row)">同意</el-button>
|
|
||||||
</template>
|
|
||||||
<el-form v-model="aggrenSubmt">
|
|
||||||
<div style="fontSize:20px;margin-bottom:8px;">同意</div>
|
|
||||||
<el-form-item prop="cnt" label="同意意见">
|
|
||||||
<el-input v-model="aggrenSubmt.cnt" type="textarea" placeholder="请填同意意见"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<el-button>同意</el-button>
|
|
||||||
<el-button>取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</el-popover>
|
|
||||||
|
|
||||||
<el-button size="small" @click="lookDetail('detail', row)">详情</el-button>
|
|
||||||
|
|
||||||
<el-popover placement="left" :width="400" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<el-button size="small" @click="deleteRow(row)">驳回</el-button>
|
|
||||||
</template>
|
|
||||||
<el-form v-model="aggrenSubmt">
|
|
||||||
<div style="fontSize:20px;margin-bottom:8px;">驳回</div>
|
|
||||||
<el-form-item prop="cnt" label="驳回原因">
|
|
||||||
<el-input v-model="aggrenSubmt.cnt" type="textarea" placeholder="请填同意意见"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="附件上传" style="width: 100%" prop="fjmc">
|
|
||||||
<el-input v-model="aggrenSubmt.fjmc" placeholder="请选择上传文件" style="width: 80%"/>
|
|
||||||
<el-upload action="/mosty-base/minio/image/upload/id" :on-change="upImgFile" :on-success="upImg" :show-file-list="false">
|
|
||||||
<el-button type="primary" style="padding: 0 14px">上传</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<el-button>同意</el-button>
|
|
||||||
<el-button>取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages
|
|
||||||
@changeNo="changeNo"
|
|
||||||
@changeSize="changeSize"
|
|
||||||
:tableHeight="pageData.tableHeight"
|
|
||||||
:pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"
|
|
||||||
></Pages>
|
|
||||||
</div>
|
|
||||||
<!-- 详情 -->
|
|
||||||
<EditAddForm ref="editInfo"></EditAddForm>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
|
||||||
import EditAddForm from './components/editAddForm.vue'
|
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_SB_SBLX,D_SB_SBZT } = proxy.$dict("D_SB_SBLX","D_SB_SBZT");
|
|
||||||
const ids = ref([]);//多选
|
|
||||||
const searchBox = ref() //搜索框
|
|
||||||
const listQuery = ref({})
|
|
||||||
const aggrenSubmt = ref({}) //同意表单
|
|
||||||
const editInfo = ref()
|
|
||||||
const queryForm = ref()
|
|
||||||
const searchConfiger = reactive([
|
|
||||||
{
|
|
||||||
showType: "defaultSlot",
|
|
||||||
prop: "ssbmdm",
|
|
||||||
options: [],
|
|
||||||
placeholder: "请选择单位",
|
|
||||||
label: "归属单位"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "select",
|
|
||||||
prop: "sblx",
|
|
||||||
placeholder: "请选择申报类型",
|
|
||||||
label: "申报类型",
|
|
||||||
options:D_SB_SBLX
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "select",
|
|
||||||
prop: "sbzt",
|
|
||||||
placeholder: "请选择申报状态",
|
|
||||||
label: "申报状态",
|
|
||||||
options:D_SB_SBZT
|
|
||||||
},
|
|
||||||
{
|
|
||||||
showType: "daterange",
|
|
||||||
prop: "daterange",
|
|
||||||
placeholder: "请选择申报时间",
|
|
||||||
label: "申报时间",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
loading: false,
|
|
||||||
rowHieght: 61
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 210, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{
|
|
||||||
label: "申报时间",
|
|
||||||
prop: "sbsj"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申报单位",
|
|
||||||
prop: "sbdw"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申请人",
|
|
||||||
prop: "sqr"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申报类型",
|
|
||||||
prop: "sblx",
|
|
||||||
showSolt:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申报状态",
|
|
||||||
prop: "sbzt",
|
|
||||||
showSolt:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "申报原因",
|
|
||||||
prop: "sbyy"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
pageData.keyCount = data;
|
|
||||||
});
|
|
||||||
tabHeightFn();
|
|
||||||
getDataList()
|
|
||||||
});
|
|
||||||
// 搜索
|
|
||||||
const onSearch = (val)=>{
|
|
||||||
delete val.ssbmdm
|
|
||||||
listQuery.value = {...listQuery.value,...val}
|
|
||||||
listQuery.value.kssj = val.daterange ? val.daterange[0] : '';
|
|
||||||
listQuery.value.jssj = val.daterange ? val.daterange[1] : ''
|
|
||||||
if(val.cz) listQuery.value.ssbmdm = '';
|
|
||||||
delete listQuery.value.cz;
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
const getDataList = ()=>{
|
|
||||||
let pramas = {
|
|
||||||
pageSize:pageData.pageConfiger.pageSize,
|
|
||||||
pageCurrent:pageData.pageConfiger.pageNum,
|
|
||||||
...listQuery.value
|
|
||||||
}
|
|
||||||
delete pramas.daterange
|
|
||||||
pageData.tableConfiger.loading = true
|
|
||||||
qcckGet(pramas,'/mosty-jmxf/tbJcglXfZg').then(res=>{
|
|
||||||
pageData.tableData = res.records || []
|
|
||||||
pageData.tableConfiger.loading = false
|
|
||||||
pageData.total = res.total
|
|
||||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeNo = (val) =>{
|
|
||||||
pageData.pageConfiger.pageNum = val;
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
const changeSize = (val) =>{
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getDataList()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出报表
|
|
||||||
const exportDate = ()=>{}
|
|
||||||
// 详情
|
|
||||||
const lookDetail = (type,id)=>{
|
|
||||||
editInfo.value.init(type,id)
|
|
||||||
}
|
|
||||||
// 同意
|
|
||||||
const aggrenInfo = ()=>{
|
|
||||||
}
|
|
||||||
// 驳回
|
|
||||||
const deleteRow = ()=>{
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
|
||||||
window.onresize = function () { tabHeightFn(); };
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.green{
|
|
||||||
color: #00FF89;
|
|
||||||
}
|
|
||||||
.orange{
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
.red{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.el-loading-mask{
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,537 +0,0 @@
|
|||||||
<!-- 物品战果 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">物品战果</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :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.hphm" placeholder="请输入号牌号码" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期">
|
|
||||||
<el-date-picker v-model="dataRange" type="daterange" unlink-panels placeholder="请选择盘查日期" range-separator="-"
|
|
||||||
start-placeholder="开始日期" end-placeholder="结束日期" :size="size" format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD" />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="盘查时间">
|
|
||||||
<el-time-picker v-model="value1" placeholder="请选择盘查时间" />
|
|
||||||
</el-form-item> -->
|
|
||||||
<!-- <el-form-item label="车辆标签">
|
|
||||||
<el-select
|
|
||||||
v-model="form.jwzLx"
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_CLBQ"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item> -->
|
|
||||||
<el-form-item label="盘查处理结果">
|
|
||||||
<el-select v-model="listQuery.pcclJg" placeholder="请选择" style="width: 100%">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_PCCLJG" :key="index" :label="item.label"
|
|
||||||
:value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table :data="tableData" border row-key="id" :tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%" :key="keyCount" ref="dataTreeList" :height="tableHeight" v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
|
||||||
<el-table-column label="图片" prop="tp" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div v-if="row.tpList?.[0]">
|
|
||||||
<el-image :append-to-body="true" :preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`
|
|
||||||
]" style="width: 75px" :src="`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`"
|
|
||||||
fit="cover" lazy />
|
|
||||||
</div>
|
|
||||||
<el-image style="width: 75px" :append-to-body="true" v-else :src="Person" :preview-src-list="[Person]"
|
|
||||||
fit="cover" lazy />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="盘查人员" prop="pcry" align="center" width="180" />
|
|
||||||
<el-table-column label="物品名称" prop="wpmc" align="center" width="180" />
|
|
||||||
<el-table-column label="物品数量" prop="wpsl" align="center" width="180" />
|
|
||||||
<el-table-column label="所属部门" prop="ssbm" align="center" width="180" />
|
|
||||||
<el-table-column label="盘查民警姓名" prop="xtCjr" align="center" width="180" />
|
|
||||||
<el-table-column label="盘查日期" prop="pcrq" align="center" width="180" />
|
|
||||||
<el-table-column label="盘查时间" prop="pcsj" align="center" width="180" />
|
|
||||||
<el-table-column label="盘查输入类型" prop="pcsrlx" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCSRLX" :value="row.pcsrlx" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="盘查处理结果" prop="pcclJgmc" align="center" width="180" />
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="250px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
<el-button @click="update(row)" size="small">档案管理</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
<div class="dialog" v-if="daglShow">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">人员档案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="daglShow = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="ryform" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="人员姓名">
|
|
||||||
<el-input v-model="ryform.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="ryform.XBDM">
|
|
||||||
<el-option v-for="(dict, index) in D_BZ_XB" :key="index + 'xb'" :value="dict.value"
|
|
||||||
:label="dict.label"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证">
|
|
||||||
<el-input v-model="ryform.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族">
|
|
||||||
<el-select v-model="ryform.MZDM">
|
|
||||||
<el-option v-for="(dict, index) in D_BZ_MZ" :key="index + 'mz'" :value="dict.value"
|
|
||||||
:label="dict.label"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="ryform.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="居住地址">
|
|
||||||
<el-input v-model="ryform.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="户籍地址">
|
|
||||||
<el-input v-model="ryform.HJD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<!-- <el-button
|
|
||||||
:loading="loading"
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="submit"
|
|
||||||
>保存</el-button
|
|
||||||
> -->
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img :src="'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
form.jdcsyrsfzh
|
|
||||||
" width="75" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属部门" prop="name">
|
|
||||||
<el-input v-model="detailList.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品名称" prop="wpmc">
|
|
||||||
<el-input v-model="detailList.wpmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="wpsl">
|
|
||||||
<el-input v-model="detailList.wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查原因" prop="pcyy">
|
|
||||||
<el-input v-model="detailList.pcyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品特征描述" prop="wptzms">
|
|
||||||
<el-input v-model="detailList.wptzms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="机动车所有人身份证号" prop="name">
|
|
||||||
<el-input v-model="detailList.jdcsyrsfzh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期" prop="pcrq">
|
|
||||||
<el-input v-model="detailList.pcrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查时间" prop="pcsj">
|
|
||||||
<el-input v-model="detailList.pcsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查输入类型" prop="pcsrlxmc">
|
|
||||||
<el-input v-model="detailList.pcsrlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果" prop="pcclJgmc">
|
|
||||||
<el-input v-model="detailList.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="detailList.xtCjr"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警警号" prop="name">
|
|
||||||
<el-input v-model="detailList.pcmjJh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交单位" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjdw"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交原因" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查图片</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailList.tpList && detailList.tpList.length > 0">
|
|
||||||
<el-form ref="elform" :model="detailList" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<el-image v-for="(item, index) in detailList.tpList" :key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item.fjid}`" style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
" />
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查物品</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailList.wpVoList && detailList.wpVoList.length > 0">
|
|
||||||
<el-form ref="elform" :model="form" :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 detailList.wpVoList[0]?.wpTpIdList" :key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item}`" style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品描述" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品类型" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wplx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="detailList.ryList && detailList.ryList.length > 0">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">同乘人员</span>
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, index) in detailList.ryList" :key="index">
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img :src="'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
item.sfzh
|
|
||||||
" width="75" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="name">
|
|
||||||
<el-input v-model="item.xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="出生日期" prop="name">
|
|
||||||
<el-input v-model="item.csrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签名称" prop="name">
|
|
||||||
<el-input v-model="item.bqxxsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="居住详址" prop="name">
|
|
||||||
<el-input v-model="item.zzxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查结果" prop="name">
|
|
||||||
<el-input v-model="item.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="item.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警所属部门" prop="name">
|
|
||||||
<el-input v-model="item.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<DDGL :dialogddglVisible="dialogddglVisible" :ddglList="ddglList"></DDGL>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import { getClpcList, getHjyjData } from "@/api/xfzg";
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const ddglList = ref({});
|
|
||||||
const dialogddglVisible = ref(false);
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const dataRange = ref([]);
|
|
||||||
const ryform = ref({});
|
|
||||||
const daglShow = ref(false);
|
|
||||||
// 车辆标签 盘查处理结果 机动车号牌种类代码 盘查输入类型
|
|
||||||
const { D_BZ_CLBQ, D_BZ_PCCLJG, D_BZ_HPZL, D_BZ_PCSRLX, D_BZ_XB } = proxy.$dict(
|
|
||||||
"D_BZ_CLBQ",
|
|
||||||
"D_BZ_PCCLJG",
|
|
||||||
"D_BZ_HPZL",
|
|
||||||
"D_BZ_PCSRLX",
|
|
||||||
"D_BZ_XB"
|
|
||||||
);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: "",
|
|
||||||
isbq: "1"
|
|
||||||
}); //搜索表单
|
|
||||||
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
if (dataRange.value.length > 0) {
|
|
||||||
listQuery.value.kssj = dataRange.value[0];
|
|
||||||
listQuery.value.jssj = dataRange.value[1];
|
|
||||||
}
|
|
||||||
getClpcList(listQuery.value)
|
|
||||||
.then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const detailList = ref({});
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
detailList.value = row;
|
|
||||||
D_BZ_PCCLJG.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcclJg == item.value) {
|
|
||||||
detailList.value.pcclJgmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_HPZL.value.forEach((item) => {
|
|
||||||
if (detailList.value.hpzl == item.value) {
|
|
||||||
detailList.value.hpzlmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_PCSRLX.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcsrlx == item.value) {
|
|
||||||
detailList.value.pcsrlxmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//获取人员档案
|
|
||||||
function update(row) {
|
|
||||||
const data = {
|
|
||||||
// api_userid: '511121197206109395',
|
|
||||||
// zjhm: '511121197206109395'
|
|
||||||
api_userid: row.pcmjSfzh,
|
|
||||||
zjhm: row.jdcsyrsfzh
|
|
||||||
};
|
|
||||||
getHjyjData(data)
|
|
||||||
.then((res) => {
|
|
||||||
const { rows, msg } = res;
|
|
||||||
if (rows && rows.length !== 0) {
|
|
||||||
daglShow.value = true;
|
|
||||||
ryform.value = rows[0];
|
|
||||||
} else if (msg) {
|
|
||||||
proxy.$message.error(msg);
|
|
||||||
} else {
|
|
||||||
proxy.$message.info("非本地人员");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => { });
|
|
||||||
}
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: "",
|
|
||||||
isbq: "1"
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin: 10px 0px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .content.el-col {
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgb(216, 32, 32);
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<div class="dialog" v-if="dialogddglVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">档案管理</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="dialogddglVisible = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="ddglList"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<el-form-item label="姓名" prop="XM">
|
|
||||||
<el-input v-model="ddglList.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别" prop="XBDM">
|
|
||||||
<el-select clearable v-model="ddglList.XBDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_XB"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族" prop="MZDM">
|
|
||||||
<MOSTY.PackageSelect
|
|
||||||
width="100%"
|
|
||||||
v-model="ddglList.MZDM"
|
|
||||||
dictEnum="NATION"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话" prop="LXDH">
|
|
||||||
<el-input v-model="ddglList.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="证件号码" prop="ZJHM">
|
|
||||||
<el-input v-model="ddglList.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="出生日期" prop="CSRQ">
|
|
||||||
<el-input v-model="ddglList.CSRQ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="地址详址" prop="JZD_DZXZ">
|
|
||||||
<el-input v-model="ddglList.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, getCurrentInstance, onMounted,defineProps } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
|
||||||
const props = defineProps({
|
|
||||||
dialogddglVisible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
ddglList: {
|
|
||||||
type: Object,
|
|
||||||
default: {}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,613 +0,0 @@
|
|||||||
<!-- 人员战果 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">人员战果</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="被盘查人姓名">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.xm"
|
|
||||||
placeholder="请输入被盘查人姓名"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人电话号码">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.lxdh"
|
|
||||||
placeholder="请输入被盘查人电话号码"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人身份证号">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.sfzh"
|
|
||||||
placeholder="请输入被盘查人身份证号"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="人员标签">
|
|
||||||
<el-select
|
|
||||||
v-model="form.jwzLx"
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_RYBQ"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item> -->
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
|
||||||
<el-table-column label="照片" prop="tp" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div v-if="row.tpList?.[0]">
|
|
||||||
<el-image
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 75px"
|
|
||||||
:src="`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
style="width: 75px"
|
|
||||||
:append-to-body="true"
|
|
||||||
v-else
|
|
||||||
:src="Person"
|
|
||||||
:preview-src-list="[Person]"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="所属部门"
|
|
||||||
prop="ssbm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查民警姓名"
|
|
||||||
prop="pcmjXm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人姓名"
|
|
||||||
prop="xm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人身份证号"
|
|
||||||
prop="sfzh"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人联系电话"
|
|
||||||
prop="lxdh"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查日期"
|
|
||||||
prop="pcrq"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查时间"
|
|
||||||
prop="pcsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查输入类型"
|
|
||||||
prop="pcsrlx"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCSRLX" :value="row.pcsrlx" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="人员标签"
|
|
||||||
prop="bqxxsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column label="盘查处理结果" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCCLJG" :value="row.pcclJg" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="250px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
<el-button @click="update(row)" size="small">档案管理</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
<div class="dialog" v-if="daglShow">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">人员档案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="daglShow = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="ryform" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="人员姓名">
|
|
||||||
<el-input v-model="ryform.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="ryform.XBDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_XB"
|
|
||||||
:key="index + 'xb'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证">
|
|
||||||
<el-input v-model="ryform.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族">
|
|
||||||
<el-select v-model="ryform.MZDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_MZ"
|
|
||||||
:key="index + 'mz'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="ryform.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="居住地址">
|
|
||||||
<el-input v-model="ryform.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="户籍地址">
|
|
||||||
<el-input v-model="ryform.HJD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img
|
|
||||||
:src="
|
|
||||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
form.sfzh
|
|
||||||
"
|
|
||||||
width="75"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属部门" prop="name">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="form.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警警号" prop="name">
|
|
||||||
<el-input v-model="form.pcmjJh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人姓名" prop="name">
|
|
||||||
<el-input v-model="form.xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人身份证号" prop="name">
|
|
||||||
<el-input v-model="form.sfzh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人性别" prop="name">
|
|
||||||
<el-input v-model="form.sexmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人出生日期" prop="name">
|
|
||||||
<el-input v-model="form.csrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人民族" prop="name">
|
|
||||||
<el-input v-model="form.mzmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人学历" prop="name">
|
|
||||||
<el-input v-model="form.whcdmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人籍贯" prop="name">
|
|
||||||
<el-input v-model="form.jgdm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人住址详址" prop="name">
|
|
||||||
<el-input v-model="form.zzxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人联系电话" prop="name">
|
|
||||||
<el-input v-model="form.lxdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期" prop="name">
|
|
||||||
<el-input v-model="form.pcrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查时间" prop="name">
|
|
||||||
<el-input v-model="form.pcsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查输入类型" prop="name">
|
|
||||||
<el-input v-model="form.pcsrlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="人员标签" prop="name">
|
|
||||||
<el-input v-model="form.bqxxsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果" prop="name">
|
|
||||||
<el-input v-model="form.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交单位" prop="name">
|
|
||||||
<el-input v-model="form.pcclYjdw"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交原因" prop="name">
|
|
||||||
<el-input v-model="form.pcclYjyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查图片</span>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<div v-if="form.tpList && form.tpList.length > 0">
|
|
||||||
<el-image
|
|
||||||
v-for="(item, index) in form.tpList"
|
|
||||||
:key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item.fjid}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查物品</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="form.wpVoList && form.wpVoList.length > 0">
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
: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 form.wpVoList[0]?.wpTpIdList"
|
|
||||||
:key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品描述" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wpms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品类型" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wplx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<DDGL :dialogddglVisible="dialogddglVisible" :ddglList="ddglList"></DDGL>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import { getRypcList, getHjyjData } from "@/api/xfzg";
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("详情"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const ryform = ref({});
|
|
||||||
const daglShow = ref(false);
|
|
||||||
// 人员标签
|
|
||||||
const { D_BZ_RYBQ } = proxy.$dict("D_BZ_RYBQ");
|
|
||||||
// 盘查处理结果
|
|
||||||
const { D_BZ_PCCLJG, D_BZ_PCSRLX, D_BZ_MZ, D_BZ_WHCD, D_BZ_XB } = proxy.$dict(
|
|
||||||
"D_BZ_PCCLJG",
|
|
||||||
"D_BZ_PCSRLX",
|
|
||||||
"D_BZ_MZ",
|
|
||||||
"D_BZ_WHCD",
|
|
||||||
"D_BZ_XB"
|
|
||||||
);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
lxdh: "",
|
|
||||||
xm: "",
|
|
||||||
isbq: "1",
|
|
||||||
sfzh: ""
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
getRypcList(listQuery.value)
|
|
||||||
.then((res) => {
|
|
||||||
tableData.value = res.records
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
form.value.sexmc = form.value.xbdm == "1" ? "男" : "女";
|
|
||||||
D_BZ_PCSRLX.value.forEach((item) => {
|
|
||||||
if (form.value.pcsrlx == item.value) {
|
|
||||||
form.value.pcsrlxmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_MZ.value.forEach((item) => {
|
|
||||||
if (form.value.mzdm == item.value) {
|
|
||||||
form.value.mzmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_WHCD.value.forEach((item) => {
|
|
||||||
if (form.value.whcddm == item.value) {
|
|
||||||
form.value.whcdmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//获取人员档案
|
|
||||||
function update(row) {
|
|
||||||
const data = {
|
|
||||||
// api_userid: '511121197206109395',
|
|
||||||
// zjhm: '511121197206109395'
|
|
||||||
api_userid: row.pcmjSfzh,
|
|
||||||
zjhm: row.sfzh
|
|
||||||
};
|
|
||||||
getHjyjData(data)
|
|
||||||
.then((res) => {
|
|
||||||
const { rows, msg } = res;
|
|
||||||
if (rows && rows.length !== 0) {
|
|
||||||
daglShow.value = true;
|
|
||||||
ryform.value = rows[0];
|
|
||||||
} else if (msg) {
|
|
||||||
proxy.$message.error(msg);
|
|
||||||
} else {
|
|
||||||
proxy.$message.info("非本地人员");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {});
|
|
||||||
}
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
lxdh: "",
|
|
||||||
isbq: "1",
|
|
||||||
xm: "",
|
|
||||||
sfzh: ""
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,699 +0,0 @@
|
|||||||
<!-- 车辆战果 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">车辆战果</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :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.hphm"
|
|
||||||
placeholder="请输入号牌号码"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="dataRange"
|
|
||||||
type="daterange"
|
|
||||||
unlink-panels
|
|
||||||
placeholder="请选择盘查日期"
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:size="size"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="盘查时间">
|
|
||||||
<el-time-picker v-model="value1" placeholder="请选择盘查时间" />
|
|
||||||
</el-form-item> -->
|
|
||||||
<!-- <el-form-item label="车辆标签">
|
|
||||||
<el-select
|
|
||||||
v-model="form.jwzLx"
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_CLBQ"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item> -->
|
|
||||||
<el-form-item label="盘查处理结果">
|
|
||||||
<el-select
|
|
||||||
v-model="listQuery.pcclJg"
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_PCCLJG"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
ref="dataTreeList"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
|
||||||
<el-table-column label="图片" prop="tp" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div v-if="row.tpList?.[0]">
|
|
||||||
<el-image
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 75px"
|
|
||||||
:src="`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
style="width: 75px"
|
|
||||||
:append-to-body="true"
|
|
||||||
v-else
|
|
||||||
:src="Person"
|
|
||||||
:preview-src-list="[Person]"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="所属部门"
|
|
||||||
prop="ssbm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查民警姓名"
|
|
||||||
prop="pcmjXm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="号牌号码"
|
|
||||||
prop="hphm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="号牌种类"
|
|
||||||
prop="hpzl"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_HPZL" :value="row.hpzl" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="机动车所有人"
|
|
||||||
prop="jdcsyr"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查日期"
|
|
||||||
prop="pcrq"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查时间"
|
|
||||||
prop="pcsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查输入类型"
|
|
||||||
prop="pcsrlx"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCSRLX" :value="row.pcsrlx" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="车辆标签"
|
|
||||||
prop="bqmc"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查处理结果"
|
|
||||||
prop="pcclJgmc"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="250px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
<el-button @click="update(row)" size="small">档案管理</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
<div class="dialog" v-if="daglShow">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">人员档案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="daglShow = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="ryform" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="人员姓名">
|
|
||||||
<el-input v-model="ryform.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="ryform.XBDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_XB"
|
|
||||||
:key="index + 'xb'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证">
|
|
||||||
<el-input v-model="ryform.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族">
|
|
||||||
<el-select v-model="ryform.MZDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_MZ"
|
|
||||||
:key="index + 'mz'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="ryform.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="居住地址">
|
|
||||||
<el-input v-model="ryform.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="户籍地址">
|
|
||||||
<el-input v-model="ryform.HJD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<!-- <el-button
|
|
||||||
:loading="loading"
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="submit"
|
|
||||||
>保存</el-button
|
|
||||||
> -->
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img
|
|
||||||
:src="
|
|
||||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
form.jdcsyrsfzh
|
|
||||||
"
|
|
||||||
width="75"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属部门" prop="name">
|
|
||||||
<el-input v-model="detailList.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="号牌号码" prop="name">
|
|
||||||
<el-input v-model="detailList.hphm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="号牌种类" prop="name">
|
|
||||||
<el-input v-model="detailList.hpzlmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车架号" prop="name">
|
|
||||||
<el-input v-model="detailList.clsbdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="机动车所有人" prop="name">
|
|
||||||
<el-input v-model="detailList.jdcsyr"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="机动车所有人身份证号" prop="name">
|
|
||||||
<el-input v-model="detailList.jdcsyrsfzh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期" prop="name">
|
|
||||||
<el-input v-model="detailList.pcrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查时间" prop="name">
|
|
||||||
<el-input v-model="detailList.pcsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查输入类型" prop="name">
|
|
||||||
<el-input v-model="detailList.pcsrlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车辆标签" prop="name">
|
|
||||||
<el-input v-model="detailList.bqmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="detailList.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警警号" prop="name">
|
|
||||||
<el-input v-model="detailList.pcmjJh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交单位" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjdw"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交原因" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查图片</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailList.tpList && detailList.tpList.length > 0">
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="detailList"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-image
|
|
||||||
v-for="(item, index) in detailList.tpList"
|
|
||||||
:key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item.fjid}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查物品</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailList.wpVoList && detailList.wpVoList.length > 0">
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
: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 detailList.wpVoList[0]?.wpTpIdList"
|
|
||||||
:key="index"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品描述" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品类型" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wplx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="detailList.ryList && detailList.ryList.length > 0">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">同乘人员</span>
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, index) in detailList.ryList" :key="index">
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img
|
|
||||||
:src="
|
|
||||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
item.sfzh
|
|
||||||
"
|
|
||||||
width="75"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="name">
|
|
||||||
<el-input v-model="item.xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="出生日期" prop="name">
|
|
||||||
<el-input v-model="item.csrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签名称" prop="name">
|
|
||||||
<el-input v-model="item.bqxxsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="居住详址" prop="name">
|
|
||||||
<el-input v-model="item.zzxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查结果" prop="name">
|
|
||||||
<el-input v-model="item.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="item.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警所属部门" prop="name">
|
|
||||||
<el-input v-model="item.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<DDGL :dialogddglVisible="dialogddglVisible" :ddglList="ddglList"></DDGL>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import { getClpcList, getHjyjData } from "@/api/xfzg";
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const ddglList = ref({});
|
|
||||||
const dialogddglVisible = ref(false);
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const dataRange = ref([]);
|
|
||||||
const ryform = ref({});
|
|
||||||
const daglShow = ref(false);
|
|
||||||
// 车辆标签 盘查处理结果 机动车号牌种类代码 盘查输入类型
|
|
||||||
const { D_BZ_CLBQ, D_BZ_PCCLJG, D_BZ_HPZL, D_BZ_PCSRLX, D_BZ_XB } = proxy.$dict(
|
|
||||||
"D_BZ_CLBQ",
|
|
||||||
"D_BZ_PCCLJG",
|
|
||||||
"D_BZ_HPZL",
|
|
||||||
"D_BZ_PCSRLX",
|
|
||||||
"D_BZ_XB"
|
|
||||||
);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: "",
|
|
||||||
isbq: "1"
|
|
||||||
}); //搜索表单
|
|
||||||
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
if (dataRange.value.length > 0) {
|
|
||||||
listQuery.value.kssj = dataRange.value[0];
|
|
||||||
listQuery.value.jssj = dataRange.value[1];
|
|
||||||
}
|
|
||||||
getClpcList(listQuery.value)
|
|
||||||
.then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const detailList = ref({});
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
detailList.value = row;
|
|
||||||
D_BZ_PCCLJG.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcclJg == item.value) {
|
|
||||||
detailList.value.pcclJgmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_HPZL.value.forEach((item) => {
|
|
||||||
if (detailList.value.hpzl == item.value) {
|
|
||||||
detailList.value.hpzlmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_PCSRLX.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcsrlx == item.value) {
|
|
||||||
detailList.value.pcsrlxmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//获取人员档案
|
|
||||||
function update(row) {
|
|
||||||
const data = {
|
|
||||||
// api_userid: '511121197206109395',
|
|
||||||
// zjhm: '511121197206109395'
|
|
||||||
api_userid: row.pcmjSfzh,
|
|
||||||
zjhm: row.jdcsyrsfzh
|
|
||||||
};
|
|
||||||
getHjyjData(data)
|
|
||||||
.then((res) => {
|
|
||||||
const { rows, msg } = res;
|
|
||||||
if (rows && rows.length !== 0) {
|
|
||||||
daglShow.value = true;
|
|
||||||
ryform.value = rows[0];
|
|
||||||
} else if (msg) {
|
|
||||||
proxy.$message.error(msg);
|
|
||||||
} else {
|
|
||||||
proxy.$message.info("非本地人员");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {});
|
|
||||||
}
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: "",
|
|
||||||
isbq: "1"
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin: 10px 0px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
::v-deep .content.el-col {
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgb(216, 32, 32);
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,669 +0,0 @@
|
|||||||
<!-- 人员核查日志 -->
|
|
||||||
<!-- 人员核查 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">人员核查日志</div>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button type="primary" @click="add">
|
|
||||||
<el-icon style="vertical-align: middle">
|
|
||||||
<CirclePlus />
|
|
||||||
</el-icon>
|
|
||||||
<span style="vertical-align: middle">新增</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
@click="batchDelete"
|
|
||||||
:disabled="ids.length == 0"
|
|
||||||
typeof="danger"
|
|
||||||
>
|
|
||||||
<el-icon style="vertical-align: middle">
|
|
||||||
<Delete />
|
|
||||||
</el-icon>
|
|
||||||
<span style="vertical-align: middle">批量删除</span>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :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.xm"
|
|
||||||
placeholder="请输入被盘查人姓名"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人电话号码">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.lxdh"
|
|
||||||
placeholder="请输入被盘查人电话号码"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人身份证号">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.sfzh"
|
|
||||||
placeholder="请输入被盘查人身份证号"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="dataRange"
|
|
||||||
type="daterange"
|
|
||||||
placeholder="请选择盘查日期"
|
|
||||||
unlink-panels
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:size="size"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.pcmjXm"
|
|
||||||
placeholder="请输入盘查民警姓名"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="人员标签">
|
|
||||||
<el-input
|
|
||||||
v-model="listQuery.bqmc"
|
|
||||||
placeholder="请输入人员标签"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
|
||||||
<el-table-column label="照片" prop="tp" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div v-if="row.tpList?.[0]">
|
|
||||||
<el-image
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 75px"
|
|
||||||
:src="`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
style="width: 75px"
|
|
||||||
:append-to-body="true"
|
|
||||||
v-else
|
|
||||||
:src="`http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${row.sfzh}`"
|
|
||||||
:preview-src-list="`http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${row.sfzh}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="所属部门"
|
|
||||||
prop="ssbm"
|
|
||||||
align="center"
|
|
||||||
show-overflow-tooltip
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查民警姓名"
|
|
||||||
prop="pcmjXm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人姓名"
|
|
||||||
prop="xm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人身份证号"
|
|
||||||
prop="sfzh"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="被盘查人联系电话"
|
|
||||||
prop="lxdh"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查日期"
|
|
||||||
prop="pcrq"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查时间"
|
|
||||||
prop="pcsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查输入类型"
|
|
||||||
prop="pcsrlx"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCSRLX" :value="row.pcsrlx" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="人员标签"
|
|
||||||
prop="bqxxsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column label="盘查处理结果" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_PCCLJG" :value="row.pcclJg" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="来源系统"
|
|
||||||
prop="bz"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="250px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="batchDelete(row)" size="small">删除</el-button>
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
<el-button @click="update(row)" size="small">档案管理</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
<div class="dialog" v-if="daglShow">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">人员档案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="daglShow = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="ryform" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="人员姓名">
|
|
||||||
<el-input v-model="ryform.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="ryform.XBDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_XB"
|
|
||||||
:key="index + 'xb'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证">
|
|
||||||
<el-input v-model="ryform.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族">
|
|
||||||
<el-select v-model="ryform.MZDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_MZ"
|
|
||||||
:key="index + 'mz'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="ryform.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="居住地址">
|
|
||||||
<el-input v-model="ryform.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="户籍地址">
|
|
||||||
<el-input v-model="ryform.HJD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div><el-button size="small" @click="close">关闭</el-button></div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<div v-if="form.tpList?.[0]">
|
|
||||||
<el-image
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 100px"
|
|
||||||
:append-to-body="true"
|
|
||||||
:src="`/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
v-else
|
|
||||||
:append-to-body="true"
|
|
||||||
:src="Person"
|
|
||||||
:preview-src-list="[Person]"
|
|
||||||
style="width: 75px"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属部门" prop="name">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="form.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警警号" prop="name">
|
|
||||||
<el-input v-model="form.pcmjJh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人姓名" prop="name">
|
|
||||||
<el-input v-model="form.xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人身份证号" prop="name">
|
|
||||||
<el-input v-model="form.sfzh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人性别" prop="name">
|
|
||||||
<el-input v-model="form.sexmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人出生日期" prop="name">
|
|
||||||
<el-input v-model="form.csrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人民族" prop="name">
|
|
||||||
<el-input v-model="form.mzmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人学历" prop="name">
|
|
||||||
<el-input v-model="form.whcdmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人籍贯" prop="name">
|
|
||||||
<el-input v-model="form.jgdm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人住址详址" prop="name">
|
|
||||||
<el-input v-model="form.zzxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="被盘查人联系电话" prop="name">
|
|
||||||
<el-input v-model="form.lxdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期" prop="name">
|
|
||||||
<el-input v-model="form.pcrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查时间" prop="name">
|
|
||||||
<el-input v-model="form.pcsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查输入类型" prop="name">
|
|
||||||
<el-input v-model="form.pcsrlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="人员标签" prop="name">
|
|
||||||
<el-input v-model="form.bqxxsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果" prop="name">
|
|
||||||
<el-input v-model="form.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交单位" prop="name">
|
|
||||||
<el-input v-model="form.pcclYjdw"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交原因" prop="name">
|
|
||||||
<el-input v-model="form.pcclYjyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="head_box"><span class="title">盘查图片</span></div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
v-if="form.tpList && form.tpList.length > 0"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-image
|
|
||||||
v-for="(item, index) in form.tpList"
|
|
||||||
:key="index"
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${item.fjid}`
|
|
||||||
]"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item.fjid}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-form>
|
|
||||||
<div
|
|
||||||
style="color: #878787; padding: 10px 100px"
|
|
||||||
v-if="!form.tpList || form.tpList.length == 0"
|
|
||||||
>
|
|
||||||
暂无数据
|
|
||||||
</div>
|
|
||||||
<div class="head_box"><span class="title">盘查物品 </span></div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
v-if="form.wpVoList && form.wpVoList.length > 0"
|
|
||||||
:model="form"
|
|
||||||
: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 form.wpVoList[0]?.wpTpIdList"
|
|
||||||
:key="index"
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${item}`
|
|
||||||
]"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品描述" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wpms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品类型" prop="name">
|
|
||||||
<el-input v-model="form.wpVoList[0].wplx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div
|
|
||||||
style="color: #878787; padding: 10px 100px"
|
|
||||||
v-if="!form.wpVoList || form.wpVoList.length == 0"
|
|
||||||
>
|
|
||||||
暂无数据
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<DDGL :dialogddglVisible="dialogddglVisible" :ddglList="ddglList"></DDGL>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import { getRypcList, getHjyjData } from "@/api/xfzg";
|
|
||||||
import { getInfo } from "@/utils/document";
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
const baseUrl =
|
|
||||||
"http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("详情"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const ryform = ref({});
|
|
||||||
const daglShow = ref(false);
|
|
||||||
const dataRange = ref([]);
|
|
||||||
|
|
||||||
// 盘查处理结果
|
|
||||||
const { D_BZ_PCCLJG, D_BZ_PCSRLX, D_BZ_MZ, D_BZ_WHCD, D_BZ_XB, D_BZ_RYBQ } =
|
|
||||||
proxy.$dict(
|
|
||||||
"D_BZ_PCCLJG",
|
|
||||||
"D_BZ_PCSRLX",
|
|
||||||
"D_BZ_MZ",
|
|
||||||
"D_BZ_WHCD",
|
|
||||||
"D_BZ_XB",
|
|
||||||
"D_BZ_RYBQ"
|
|
||||||
);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
lxdh: "",
|
|
||||||
xm: "",
|
|
||||||
sfzh: "",
|
|
||||||
ssbmdm: ""
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
|
|
||||||
const rules = ref({
|
|
||||||
// name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
//获取人员档案
|
|
||||||
function update(row) {
|
|
||||||
const data = {
|
|
||||||
// api_userid: '511121197206109395',
|
|
||||||
// zjhm: '511121197206109395'
|
|
||||||
api_userid: row.pcmjSfzh,
|
|
||||||
zjhm: row.sfzh
|
|
||||||
};
|
|
||||||
getHjyjData(data)
|
|
||||||
.then((res) => {
|
|
||||||
const { rows, msg } = res;
|
|
||||||
if (rows && rows.length !== 0) {
|
|
||||||
daglShow.value = true;
|
|
||||||
ryform.value = rows[0];
|
|
||||||
} else if (msg) {
|
|
||||||
proxy.$message.error(msg);
|
|
||||||
} else {
|
|
||||||
proxy.$message.info("非本地人员");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {});
|
|
||||||
}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
if (dataRange.value.length > 0) {
|
|
||||||
listQuery.value.kssj = dataRange.value[0];
|
|
||||||
listQuery.value.jssj = dataRange.value[1];
|
|
||||||
}
|
|
||||||
getRypcList(listQuery.value)
|
|
||||||
.then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
form.value.sexmc = form.value.xbdm == "1" ? "男" : "女";
|
|
||||||
D_BZ_PCSRLX.value.forEach((item) => {
|
|
||||||
if (form.value.pcsrlx == item.value) {
|
|
||||||
form.value.pcsrlxmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_MZ.value.forEach((item) => {
|
|
||||||
if (form.value.mzdm == item.value) {
|
|
||||||
form.value.mzmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_WHCD.value.forEach((item) => {
|
|
||||||
if (form.value.whcddm == item.value) {
|
|
||||||
form.value.whcdmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
lxdh: "",
|
|
||||||
xm: "",
|
|
||||||
sfzh: "",
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
ssbmdm: ""
|
|
||||||
};
|
|
||||||
dataRange.value = [];
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,714 +0,0 @@
|
|||||||
<!-- 车辆核查 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">车辆核查日志</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :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.hphm"
|
|
||||||
placeholder="请输入号牌号码"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="dataRange"
|
|
||||||
type="daterange"
|
|
||||||
placeholder="请选择盘查日期"
|
|
||||||
unlink-panels
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:size="size"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果">
|
|
||||||
<el-select
|
|
||||||
v-model="listQuery.pcclJg"
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in D_BZ_PCCLJG"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
ref="dataTreeList"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80" />
|
|
||||||
<el-table-column label="图片" prop="tp" align="center" width="180">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div v-if="row.tpList?.[0]">
|
|
||||||
<el-image
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 75px"
|
|
||||||
:src="`/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
style="width: 75px"
|
|
||||||
:append-to-body="true"
|
|
||||||
v-else
|
|
||||||
:src="Person"
|
|
||||||
:preview-src-list="[Person]"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="所属部门"
|
|
||||||
prop="ssbm"
|
|
||||||
show-overflow-tooltip
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查民警姓名"
|
|
||||||
prop="pcmjXm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="号牌号码"
|
|
||||||
prop="hphm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="号牌种类"
|
|
||||||
prop="hpzl"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag :options="D_BZ_HPZL" :value="row.hpzl" :tag="false" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="机动车所有人"
|
|
||||||
prop="jdcsyr"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查日期"
|
|
||||||
prop="pcrq"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查时间"
|
|
||||||
prop="pcsj"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查输入类型"
|
|
||||||
prop="pcsrlx"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<dict-tag
|
|
||||||
:options="D_YDJW_PCCLYJYY_CL"
|
|
||||||
:value="row.pcsrlx"
|
|
||||||
:tag="false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="车辆标签"
|
|
||||||
prop="bqmc"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="盘查处理结果"
|
|
||||||
prop="pcclJgmc"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="来源系统"
|
|
||||||
prop="bz"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="250px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
<el-button @click="update(row)" size="small">档案管理</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
<div class="dialog" v-if="daglShow">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">人员档案</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="daglShow = false">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="ryform" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="人员姓名">
|
|
||||||
<el-input v-model="ryform.XM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="ryform.XBDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_XB"
|
|
||||||
:key="index + 'xb'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证">
|
|
||||||
<el-input v-model="ryform.ZJHM"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民族">
|
|
||||||
<el-select v-model="ryform.MZDM">
|
|
||||||
<el-option
|
|
||||||
v-for="(dict, index) in D_BZ_MZ"
|
|
||||||
:key="index + 'mz'"
|
|
||||||
:value="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="ryform.LXDH"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="居住地址">
|
|
||||||
<el-input v-model="ryform.JZD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item style="width: 48%" label="户籍地址">
|
|
||||||
<el-input v-model="ryform.HJD_DZXZ"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<div v-if="form.tpList && form.tpList.length > 0">
|
|
||||||
<el-image
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`
|
|
||||||
]"
|
|
||||||
style="width: 100px"
|
|
||||||
:append-to-body="true"
|
|
||||||
:src="`/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
v-else
|
|
||||||
:append-to-body="true"
|
|
||||||
:src=" `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${form.jdcsyrsfzh}`"
|
|
||||||
:preview-src-list=" `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${form.jdcsyrsfzh}`"
|
|
||||||
style="width: 75px"
|
|
||||||
fit="cover"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属部门" prop="name">
|
|
||||||
<el-input v-model="detailList.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="号牌号码" prop="name">
|
|
||||||
<el-input v-model="detailList.hphm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="号牌种类" prop="name">
|
|
||||||
<el-input v-model="detailList.hpzlmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车架号" prop="name">
|
|
||||||
<el-input v-model="detailList.clsbdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="机动车所有人" prop="name">
|
|
||||||
<el-input v-model="detailList.jdcsyr"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="机动车所有人身份证号" prop="name">
|
|
||||||
<el-input v-model="detailList.jdcsyrsfzh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查日期" prop="name">
|
|
||||||
<el-input v-model="detailList.pcrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查时间" prop="name">
|
|
||||||
<el-input v-model="detailList.pcsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查输入类型" prop="name">
|
|
||||||
<el-input v-model="detailList.pcsrlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车辆标签" prop="name">
|
|
||||||
<el-input v-model="detailList.bqmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查处理结果" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="detailList.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警警号" prop="name">
|
|
||||||
<el-input v-model="detailList.pcmjJh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交单位" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjdw"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移交原因" prop="name">
|
|
||||||
<el-input v-model="detailList.pcclYjyy"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查图片</span>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="detailList"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<div v-if="detailList.tpList && detailList.tpList.length > 0">
|
|
||||||
<el-image
|
|
||||||
v-for="(item, index) in detailList.tpList"
|
|
||||||
:key="index"
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${item.fjid}`
|
|
||||||
]"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item.fjid}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
<div
|
|
||||||
style="color: #878787; padding: 10px 100px"
|
|
||||||
v-if="!detailList.tpList || detailList.tpList.length == 0"
|
|
||||||
>
|
|
||||||
暂无数据
|
|
||||||
</div>
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">盘查物品</span>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
v-if="detailList.wpVoList.length > 0"
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
: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 detailList.wpVoList[0]?.wpTpIdList"
|
|
||||||
:key="index"
|
|
||||||
:append-to-body="true"
|
|
||||||
:preview-src-list="[
|
|
||||||
`/mosty-base/minio/image/download/${item}`
|
|
||||||
]"
|
|
||||||
:src="`/mosty-base/minio/image/download/${item}`"
|
|
||||||
style="
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 10px 0 10px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品描述" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpms"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品数量" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wpsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="物品类型" prop="name">
|
|
||||||
<el-input v-model="detailList.wpVoList[0].wplx"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div
|
|
||||||
style="color: #878787; padding: 10px 100px"
|
|
||||||
v-if="!detailList.wpVoList || detailList.wpVoList.length == 0"
|
|
||||||
>
|
|
||||||
暂无数据
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">同乘人员</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="detailList.ryList && detailList.ryList.length > 0">
|
|
||||||
<div v-for="(item, index) in detailList.ryList" :key="index">
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="图片" prop="name">
|
|
||||||
<img
|
|
||||||
:src="
|
|
||||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
|
||||||
item.sfzh
|
|
||||||
"
|
|
||||||
width="75"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="name">
|
|
||||||
<el-input v-model="item.xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="出生日期" prop="name">
|
|
||||||
<el-input v-model="item.csrq"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签名称" prop="name">
|
|
||||||
<el-input v-model="item.bqxxsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="居住详址" prop="name">
|
|
||||||
<el-input v-model="item.zzxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查结果" prop="name">
|
|
||||||
<el-input v-model="item.pcclJgmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警姓名" prop="name">
|
|
||||||
<el-input v-model="item.pcmjXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查民警所属部门" prop="name">
|
|
||||||
<el-input v-model="item.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 档案管理 -->
|
|
||||||
<DDGL :dialogddglVisible="dialogddglVisible" :ddglList="ddglList"></DDGL>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import Person from "@/assets/images/default_male.png";
|
|
||||||
import { getClpcList, getHjyjData } from "@/api/xfzg";
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const dataRange = ref([]);
|
|
||||||
const ddglList = ref({});
|
|
||||||
const dialogddglVisible = ref(false);
|
|
||||||
// 车辆标签 盘查处理结果 机动车号牌种类代码 盘查输入类型
|
|
||||||
const { D_BZ_CLBQ, D_BZ_PCCLJG, D_BZ_HPZL, D_YDJW_PCCLYJYY_CL, D_BZ_XB } =
|
|
||||||
proxy.$dict(
|
|
||||||
"D_BZ_CLBQ",
|
|
||||||
"D_BZ_PCCLJG",
|
|
||||||
"D_BZ_HPZL",
|
|
||||||
"D_YDJW_PCCLYJYY_CL",
|
|
||||||
"D_BZ_XB"
|
|
||||||
);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: ""
|
|
||||||
}); //搜索表单
|
|
||||||
const ryform = ref({});
|
|
||||||
const daglShow = ref(false);
|
|
||||||
//获取人员档案
|
|
||||||
function update(row) {
|
|
||||||
const data = {
|
|
||||||
// api_userid: '511121197206109395',
|
|
||||||
// zjhm: '511121197206109395'
|
|
||||||
api_userid: row.pcmjSfzh,
|
|
||||||
zjhm: row.jdcsyrsfzh
|
|
||||||
};
|
|
||||||
getHjyjData(data)
|
|
||||||
.then((res) => {
|
|
||||||
const { rows, msg } = res;
|
|
||||||
if (rows && rows.length !== 0) {
|
|
||||||
daglShow.value = true;
|
|
||||||
ryform.value = rows[0];
|
|
||||||
} else if (msg) {
|
|
||||||
proxy.$message.error(msg);
|
|
||||||
} else {
|
|
||||||
proxy.$message.info("非本地人员");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {});
|
|
||||||
}
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
if (dataRange.value.length > 0) {
|
|
||||||
listQuery.value.kssj = dataRange.value[0];
|
|
||||||
listQuery.value.jssj = dataRange.value[1];
|
|
||||||
}
|
|
||||||
getClpcList(listQuery.value)
|
|
||||||
.then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const detailList = ref({});
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
detailList.value = row;
|
|
||||||
D_BZ_PCCLJG.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcclJg == item.value) {
|
|
||||||
detailList.value.pcclJgmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_BZ_HPZL.value.forEach((item) => {
|
|
||||||
if (detailList.value.hpzl == item.value) {
|
|
||||||
detailList.value.hpzlmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
D_YDJW_PCCLYJYY_CL.value.forEach((item) => {
|
|
||||||
if (detailList.value.pcsrlx == item.value) {
|
|
||||||
detailList.value.pcsrlxmc = item.label;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
kssj: "",
|
|
||||||
jssj: "",
|
|
||||||
hphm: "",
|
|
||||||
ssbmdm: "",
|
|
||||||
pcclJg: ""
|
|
||||||
};
|
|
||||||
dataRange.value = [];
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
::v-deep .el-row {
|
|
||||||
margin: 10px 0px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
::v-deep .content.el-col {
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgb(216, 32, 32);
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="ech">
|
|
||||||
<div id="linezs" style="width: 100%; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, defineProps, watch } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
chartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function chartFn() {
|
|
||||||
var chartDom = document.getElementById("linezs");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
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",
|
|
||||||
data: props.data.time,
|
|
||||||
boundaryGap: false,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: ["#034079"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: ["#034079"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
minInterval: 1,
|
|
||||||
min: 0,
|
|
||||||
max: function (value) {
|
|
||||||
return value.max + 5;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "line",
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "top"
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
symbol: "circle",
|
|
||||||
symbolSize: 6,
|
|
||||||
data: props.data.count,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgb(4, 145, 216)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
width: 3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("linezs").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
chartFn();
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
chartFn();
|
|
||||||
});
|
|
||||||
window.onresize = function () {
|
|
||||||
chartFn();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.aaa {
|
|
||||||
color: rgb(238, 6, 6);
|
|
||||||
}
|
|
||||||
.ech {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="ech">
|
|
||||||
<div id="circlecz" style="width: 100%; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, defineProps, watch } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = props.data
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: "center",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: "#49dff0",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
left: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情处置分析图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["32%", "50%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: [
|
|
||||||
"#c487ee",
|
|
||||||
"#deb140",
|
|
||||||
"#49dff0",
|
|
||||||
"#034079",
|
|
||||||
"#6f81da",
|
|
||||||
"#00ffb4"
|
|
||||||
],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function (value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1) != NaN ? ((params.value / total) * 100).toFixed(1):0;
|
|
||||||
return (
|
|
||||||
"{white|" +
|
|
||||||
params.name +
|
|
||||||
"}\n{yellow|" +
|
|
||||||
params.value +
|
|
||||||
"}\n{blue|" +
|
|
||||||
percent +
|
|
||||||
"%}"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
window.onresize = function () {
|
|
||||||
lineChartFn();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ech {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="ech">
|
|
||||||
<div id="circlecz2" style="width: 100%; height: 390px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, defineProps,watch } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz2");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = props.data;
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 12 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 12 * scale,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: "center",
|
|
||||||
fontSize: 12 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: "#49dff0",
|
|
||||||
fontSize: 12 * scale,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
option = {
|
|
||||||
grid: {
|
|
||||||
// show: true,
|
|
||||||
top: "20%",
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: "10%"
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: "horizontal",
|
|
||||||
textStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
}
|
|
||||||
// left: 0,
|
|
||||||
// top: 5
|
|
||||||
// bottom: 5
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情类型统计图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["22%", "40%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: [
|
|
||||||
"#c487ee",
|
|
||||||
"#deb140",
|
|
||||||
"#49dff0",
|
|
||||||
"#034079",
|
|
||||||
"#6f81da",
|
|
||||||
"#00ffb4"
|
|
||||||
],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function (value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return (
|
|
||||||
"{white|" +
|
|
||||||
params.name +
|
|
||||||
"}\n{yellow|" +
|
|
||||||
params.value +
|
|
||||||
"}\n{blue|" +
|
|
||||||
percent +
|
|
||||||
"%}"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("circlecz2").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
lineChartFn();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ech{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="ech">
|
|
||||||
<div id="fxp" style="width: 100%; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, defineProps, watch } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Object }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data.value,
|
|
||||||
() => {
|
|
||||||
chartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function chartFn() {
|
|
||||||
var chartDom = document.getElementById("fxp");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
grid: {
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "gauge",
|
|
||||||
radius: "100%",
|
|
||||||
center: ["50%", "65%"],
|
|
||||||
startAngle: 180,
|
|
||||||
endAngle: 0,
|
|
||||||
min: 0,
|
|
||||||
max: 1,
|
|
||||||
splitNumber: 8,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 6,
|
|
||||||
color: [
|
|
||||||
[0.75, "#58D9F9"],
|
|
||||||
[1, "rgb(238, 6, 6)"]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
itemStyle: {
|
|
||||||
color: "auto"
|
|
||||||
},
|
|
||||||
showAbove: true
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
length: 12,
|
|
||||||
lineStyle: {
|
|
||||||
color: "auto",
|
|
||||||
width: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
length: 20,
|
|
||||||
lineStyle: {
|
|
||||||
color: "auto",
|
|
||||||
width: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
offsetCenter: [0, "-20%"],
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#ddd"
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
fontSize: 20,
|
|
||||||
offsetCenter: [0, "35%"],
|
|
||||||
valueAnimation: true,
|
|
||||||
formatter: function (value) {
|
|
||||||
return Math.round(value * props.data.total) + "个";
|
|
||||||
},
|
|
||||||
color: "auto"
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: (props.data.value / props.data.total).toFixed(2),
|
|
||||||
name: "警情数量"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("fxp").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
chartFn();
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
chartFn();
|
|
||||||
});
|
|
||||||
window.onresize = function () {
|
|
||||||
chartFn();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ech {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,426 +0,0 @@
|
|||||||
<!-- 界面警情统计 -->
|
|
||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<div class="titleBox">
|
|
||||||
<div class="title">街面警情统计</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="min_box">
|
|
||||||
<div class="treeBox" :style="{ height: treeHeight }">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="280px"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex_e">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox single-chart-box">
|
|
||||||
<div>今日警情处置分析</div>
|
|
||||||
<div style="position: relative">
|
|
||||||
<pie1 :data="jrjqCzfxData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox single-chart-box">
|
|
||||||
<div>今日警情数量走势图</div>
|
|
||||||
<div style="position: relative">
|
|
||||||
<linechart :data="jrjqSlzsData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="searchBox single-chart-box">
|
|
||||||
<div>今日警情数量预警图</div>
|
|
||||||
<div style="position: relative">
|
|
||||||
<ybp :data="jrjqYjData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chartAndTable-box">
|
|
||||||
<div class="searchBox tab" :style="{ height: tableHeight+ 100 + 'px' }">
|
|
||||||
<div class="mysearch" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="listQuery.name"
|
|
||||||
type="daterange"
|
|
||||||
unlink-panels
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div :style="{ height: tableHeight-10 + 'px' }" style="position:absolute;width:98%;">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
height="100%"
|
|
||||||
:key="keyCount"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="警情总数" prop="jqfskszs" align="center" />
|
|
||||||
<el-table-column label="刑事警情" prop="jqfsksxs" align="center" />
|
|
||||||
<el-table-column label="治安警情" prop="jqfsksyf" align="center" />
|
|
||||||
<el-table-column label="交通警情" prop="jqjb" align="center" />
|
|
||||||
<el-table-column label="消防救援" prop="xt_scbz" align="center" />
|
|
||||||
<el-table-column label="群众求助" prop="xt_sjly" align="center" />
|
|
||||||
<el-table-column label="应急联动" prop="xt_sjzt" align="center" />
|
|
||||||
|
|
||||||
<el-table-column label="操作" align="center" fixed="right">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="update(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button
|
|
||||||
:loading="loading"
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="submit"
|
|
||||||
>保存</el-button
|
|
||||||
>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="名称" prop="name">
|
|
||||||
<el-input v-model="form.name" placeholder="请输入"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
|
||||||
<el-input
|
|
||||||
v-model="form.bz"
|
|
||||||
placeholder="请输入关键字"
|
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
getJmjq,
|
|
||||||
getJqlxTj,
|
|
||||||
getJrjqTj,
|
|
||||||
getJrjqSlzs,
|
|
||||||
getJrjqYj
|
|
||||||
} from "@/api/patrolStatistics/interfaceAlarm.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { getTime } from "@/utils/time.js";
|
|
||||||
import pie1 from "./components/pie1.vue";
|
|
||||||
import pie2 from "./components/pie2.vue";
|
|
||||||
import linechart from "./components/line.vue";
|
|
||||||
import ybp from "./components/ybp.vue";
|
|
||||||
const treeHeight = ref(""); // 树高度
|
|
||||||
const treeHeightFn = () => {
|
|
||||||
treeHeight.value = window.innerHeight - 192+ "px";
|
|
||||||
};
|
|
||||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { D_BZ_CZZT } = proxy.$dict("D_BZ_CZZT");
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const jrjqCzfxData = ref([]);
|
|
||||||
const jrjqLxData = ref([]);
|
|
||||||
const jrjqSlzsData = ref([
|
|
||||||
{ x: 2, y: 0 },
|
|
||||||
{ x: 4, y: 0 },
|
|
||||||
{ x: 6, y: 0 },
|
|
||||||
{ x: 8, y: 0 },
|
|
||||||
{ x: 10, y: 0 },
|
|
||||||
{ x: 12, y: 0 },
|
|
||||||
{ x: 14, y: 0 },
|
|
||||||
{ x: 16, y: 0 },
|
|
||||||
{ x: 18, y: 0 },
|
|
||||||
{ x: 20, y: 0 },
|
|
||||||
{ x: 22, y: 0 },
|
|
||||||
{ x: 24, y: 0 }
|
|
||||||
]);
|
|
||||||
const jrjqYjData = ref({
|
|
||||||
total: 200,
|
|
||||||
value: 0.0
|
|
||||||
});
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
loadingTable.value = true;
|
|
||||||
getJmjq(listQuery.value).then((res) => {
|
|
||||||
tableData.value = res.records;
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
}).catch(()=>{
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 获取图表数据
|
|
||||||
function getEchData() {
|
|
||||||
getJqlxTj().then((res) => {
|
|
||||||
jrjqLxData.value = res.map((item) => {
|
|
||||||
return {
|
|
||||||
name: item.bjlx,
|
|
||||||
value: item.sl
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
getJrjqTj().then((res) => {
|
|
||||||
jrjqCzfxData.value = res.map((item) => {
|
|
||||||
return {
|
|
||||||
name: D_BZ_CZZT.value.filter((e) => {
|
|
||||||
return e.value == item.type;
|
|
||||||
})[0].label,
|
|
||||||
value: item.data
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
getJrjqSlzs().then((res) => {
|
|
||||||
jrjqSlzsData.value = res
|
|
||||||
});
|
|
||||||
getJrjqYj({
|
|
||||||
kssj: getTime(0) + " " + "00:00:00",
|
|
||||||
jssj: getTime(0) + " " + "23:59:00"
|
|
||||||
}).then((res) => {
|
|
||||||
jrjqYjData.value.value = res[0].sl;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function update(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "修改";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.page = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
page: 1,
|
|
||||||
size: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 538;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* size 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.size = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.page = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
treeHeightFn();
|
|
||||||
getEchData();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
treeHeightFn();
|
|
||||||
keyCount.value = 1;
|
|
||||||
setTimeout(() => {
|
|
||||||
keyCount.value = 0;
|
|
||||||
}, 100);
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.tab {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.single-chart-box {
|
|
||||||
height: 280px;
|
|
||||||
width: 30%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.chartAndTable-box {
|
|
||||||
margin-top: 15px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.left-box {
|
|
||||||
width: 32%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.right-table {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.min_box {
|
|
||||||
display: flex;
|
|
||||||
.flex_e {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .container{
|
|
||||||
// width: 1639px;
|
|
||||||
// }
|
|
||||||
.mysearch {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width:1000px; height:100%;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '25%',
|
|
||||||
right: '3%',
|
|
||||||
left: '5%',
|
|
||||||
bottom: '12%'
|
|
||||||
},
|
|
||||||
xAxis: [{
|
|
||||||
type: 'category',
|
|
||||||
data: ['党政机关', '娱乐场所', '旅店', '网吧', '医院', '学校', '银行', '宗教'],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.12)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
color: '#e2e9ff',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}],
|
|
||||||
yAxis: [{
|
|
||||||
// name: '单位：万元',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value}',
|
|
||||||
color: '#e2e9ff',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255,255,255,1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.12)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
series: [{
|
|
||||||
type: 'bar',
|
|
||||||
data: [1280, 2200, 1400, 2420, 3710, 2945, 1377, 1737],
|
|
||||||
barWidth: '20px',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(0,244,255,1)' // 0% 处的颜色
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(0,77,167,1)' // 100% 处的颜色
|
|
||||||
}], false),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: 'rgba(0,160,221,1)',
|
|
||||||
shadowBlur: 4,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
lineHeight: 30,
|
|
||||||
width: 80,
|
|
||||||
height: 30,
|
|
||||||
backgroundColor: 'rgba(0,160,221,0.1)',
|
|
||||||
borderRadius: 200,
|
|
||||||
position: ['-8', '-60'],
|
|
||||||
distance: 1,
|
|
||||||
formatter: [
|
|
||||||
' {d|●}',
|
|
||||||
' {a|{c}} \n',
|
|
||||||
' {b|}'
|
|
||||||
].join(','),
|
|
||||||
rich: {
|
|
||||||
d: {
|
|
||||||
color: '#3CDDCF',
|
|
||||||
},
|
|
||||||
a: {
|
|
||||||
color: '#fff',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
width: 1,
|
|
||||||
height: 30,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: '#234e6c',
|
|
||||||
align: 'left'
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("circlecz").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,347 +0,0 @@
|
|||||||
<!-- 重要场所统计 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">重要场所统计</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<!-- <div class="org-search-box">
|
|
||||||
<el-input v-model="input" placeholder="请输入关键字搜索" />
|
|
||||||
<el-button>搜索</el-button>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<pie />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
ref="dataTreeList"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="80"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="name" align="center" />
|
|
||||||
<el-table-column label="党政机关" prop="bz1" align="center" />
|
|
||||||
<el-table-column label="娱乐场所" prop="bz2" align="center" />
|
|
||||||
<el-table-column label="旅店" prop="bz3" align="center" />
|
|
||||||
<el-table-column label="网吧" prop="bz4" align="center" />
|
|
||||||
<el-table-column label="医院" prop="bz5" align="center" />
|
|
||||||
<el-table-column label="学校" prop="bz6" align="center" />
|
|
||||||
<el-table-column label="银行" prop="bz7" align="center" />
|
|
||||||
<el-table-column label="宗教" prop="bz8" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="单位部门" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="党政机关" prop="bz1">
|
|
||||||
<el-input v-model="form.bz1"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="娱乐场所" prop="bz2">
|
|
||||||
<el-input v-model="form.bz2"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="旅店" prop="bz3">
|
|
||||||
<el-input v-model="form.bz3"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="网吧" prop="bz4">
|
|
||||||
<el-input v-model="form.bz4"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="医院" prop="bz5">
|
|
||||||
<el-input v-model="form.bz5"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="学校" prop="bz6">
|
|
||||||
<el-input v-model="form.bz6"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="银行" prop="bz7">
|
|
||||||
<el-input v-model="form.bz7"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="宗教" prop="bz8">
|
|
||||||
<el-input v-model="form.bz8"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{
|
|
||||||
name: "高新分局",
|
|
||||||
bz1: "1280",
|
|
||||||
bz2: "2200",
|
|
||||||
bz3: "1400",
|
|
||||||
bz4: "2420",
|
|
||||||
bz5: "3710",
|
|
||||||
bz6: "2945",
|
|
||||||
bz7: "1377",
|
|
||||||
bz8: "1737"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 520
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 120,
|
|
||||||
name: 'MAC布控'
|
|
||||||
}, {
|
|
||||||
value: 200,
|
|
||||||
name: 'RFID布控'
|
|
||||||
}, {
|
|
||||||
value: 100,
|
|
||||||
name: '身份证号'
|
|
||||||
}, {
|
|
||||||
value: 220,
|
|
||||||
name: '手机号码'
|
|
||||||
}, {
|
|
||||||
value: 310,
|
|
||||||
name: 'IMSI码'
|
|
||||||
}, {
|
|
||||||
value: 245,
|
|
||||||
name: 'IMEI码'
|
|
||||||
},{
|
|
||||||
value: 177,
|
|
||||||
name: '人脸布控'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("circlecz").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,381 +0,0 @@
|
|||||||
<!-- 重点人员统计 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">重点人员统计</div>
|
|
||||||
<div class="btnBox">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable v-model="listQuery.deptId"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="text-box">
|
|
||||||
<div class="text-item">
|
|
||||||
<span>MAC布控:</span>
|
|
||||||
<span class="text-color">120</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>RFID布控:</span>
|
|
||||||
<span class="text-color">200</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>身份证号:</span>
|
|
||||||
<span class="text-color">100</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>手机号码:</span>
|
|
||||||
<span class="text-color">220</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>IMSI码:</span>
|
|
||||||
<span class="text-color">310</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>IMEI码:</span>
|
|
||||||
<span class="text-color">245</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>人脸布控:</span>
|
|
||||||
<span class="text-color">177</span>个
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pie />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<!-- <div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div> -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
ref="dataTreeList"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="80"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="单位部门"
|
|
||||||
prop="name"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column label="MAC布控" prop="bz1" align="center" />
|
|
||||||
<el-table-column label="RFID布控" prop="bz2" align="center" />
|
|
||||||
<el-table-column label="身份证号" prop="bz3" align="center" />
|
|
||||||
<el-table-column label="手机号码" prop="bz4" align="center" />
|
|
||||||
<el-table-column label="IMSI码" prop="bz5" align="center" />
|
|
||||||
<el-table-column label="IMEI码" prop="bz6" align="center" />
|
|
||||||
<el-table-column label="人脸布控" prop="bz7" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<el-form-item label="单位部门" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="MAC布控" prop="bz1">
|
|
||||||
<el-input v-model="form.bz1"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="RFID布控" prop="bz2">
|
|
||||||
<el-input v-model="form.bz2"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="身份证号" prop="bz3">
|
|
||||||
<el-input v-model="form.bz3"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码" prop="bz4">
|
|
||||||
<el-input v-model="form.bz4"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IMSI码" prop="bz5">
|
|
||||||
<el-input v-model="form.bz5"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IMEI码" prop="bz6">
|
|
||||||
<el-input v-model="form.bz6"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="人脸布控" prop="bz7">
|
|
||||||
<el-input v-model="form.bz7"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie from './components/pie.vue'
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: 'childDeptList',
|
|
||||||
label: 'orgName',
|
|
||||||
}
|
|
||||||
const orgList = ref([])
|
|
||||||
|
|
||||||
function handleNodeClick(val){
|
|
||||||
|
|
||||||
}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{ name: "高新分局", bz1: "120",
|
|
||||||
bz2: "200",
|
|
||||||
bz3: "100",
|
|
||||||
bz4: "220",
|
|
||||||
bz5: "310",
|
|
||||||
bz6: "245",
|
|
||||||
bz7: "177", },
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref()
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 520;
|
|
||||||
orgHeight.value = window.innerHeight -192;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box{
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.text-box{
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item{
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color{
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,389 +0,0 @@
|
|||||||
<!-- 1/3/5分钟处置统计 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">1/3/5分钟处置统计</div>
|
|
||||||
<div class="btnBox">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="80"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="部门名称"
|
|
||||||
prop="name"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="快反点名称"
|
|
||||||
prop="bz13"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column label="巡组名称" width='150' prop="bz1" align="center" />
|
|
||||||
<el-table-column label="巡逻时间" width='150' prop="bz2" align="center" />
|
|
||||||
<el-table-column label="巡逻车辆" width='150' prop="bz3" align="center" />
|
|
||||||
<el-table-column label="负责人" width='150' prop="bz4" align="center" />
|
|
||||||
<el-table-column label="巡逻时长" width='150' prop="bz5" align="center" />
|
|
||||||
<el-table-column label="巡逻里程" width='150' prop="bz6" align="center" />
|
|
||||||
<el-table-column label="接收警情数" width='150' prop="bz7" align="center" />
|
|
||||||
<el-table-column label="处置警情数" width='150' prop="bz8" align="center" />
|
|
||||||
<el-table-column label="处置率" width='150' prop="czl" align="center" />
|
|
||||||
<el-table-column label="接收指令数" width='150' prop="bz9" align="center" />
|
|
||||||
<el-table-column label="执行指令数" width='150' prop="bz10" align="center" />
|
|
||||||
<el-table-column label="盘查人员数" width='150' prop="bz11" align="center" />
|
|
||||||
<el-table-column label="盘查车辆数" width='150' prop="bz12" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="部门名称" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="快反点名称" prop="bz13">
|
|
||||||
<el-input v-model="form.bz13"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻时间" prop="bz1">
|
|
||||||
<el-input v-model="form.bz1"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻车辆" prop="bz2">
|
|
||||||
<el-input v-model="form.bz2"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="bz3">
|
|
||||||
<el-input v-model="form.bz3"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻时长" prop="bz4">
|
|
||||||
<el-input v-model="form.bz4"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻里程" prop="bz5">
|
|
||||||
<el-input v-model="form.bz5"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接收警情数" prop="bz6">
|
|
||||||
<el-input v-model="form.bz6"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="处置警情数" prop="bz7">
|
|
||||||
<el-input v-model="form.bz7"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接收指令数" prop="bz8">
|
|
||||||
<el-input v-model="form.bz8"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="执行指令数" prop="bz10">
|
|
||||||
<el-input v-model="form.bz10"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查人员数" prop="bz11">
|
|
||||||
<el-input v-model="form.bz11"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查车辆数" prop="bz12">
|
|
||||||
<el-input v-model="form.bz12"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: 'childDeptList',
|
|
||||||
label: 'orgName',
|
|
||||||
}
|
|
||||||
const orgList = ref([])
|
|
||||||
|
|
||||||
function handleNodeClick(val){
|
|
||||||
|
|
||||||
}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{ name: "林芝市",
|
|
||||||
bz1: "今日巡组01",
|
|
||||||
bz2: "677",
|
|
||||||
bz3: "110",
|
|
||||||
bz4: "张三丰",
|
|
||||||
bz5: "12",
|
|
||||||
bz6: "123",
|
|
||||||
bz7: "89",
|
|
||||||
bz8: "88",
|
|
||||||
bz9: "12",
|
|
||||||
bz10: "10",
|
|
||||||
bz11: "25",
|
|
||||||
bz12: "44",
|
|
||||||
bz13: "今日过高快返点",
|
|
||||||
czl:'10%' },
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref()
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box{
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.text-box{
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item{
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color{
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width: 1000px; height: 100%"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
legend: {
|
|
||||||
type: "plain",
|
|
||||||
show: true,
|
|
||||||
right: 0,
|
|
||||||
textStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: "对讲机"
|
|
||||||
},
|
|
||||||
{ name: "警务终端" },
|
|
||||||
{ name: "执法记录仪" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "25%",
|
|
||||||
right: "3%",
|
|
||||||
left: "5%",
|
|
||||||
bottom: "12%"
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
data: props.data.map((item) => item.ssbm),
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
color: "#e2e9ff",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
// name: '单位：万元',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: "{value}",
|
|
||||||
color: "#e2e9ff"
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,1)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "对讲机",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map((item) => item.djj),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(0,244,255,1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(0,77,167,1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "警务终端",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map((item) => item.jwzd),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(121, 88, 238, 1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(79, 2, 135, 1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "执法记录仪",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map((item) => item.zfjly),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
position: "top"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dd {
|
|
||||||
color: rgba(79, 2, 135, 0.326);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,334 +0,0 @@
|
|||||||
<!-- 重要场所统计 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">移动装备</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<pie :data="tableData" />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="60"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="对讲机" prop="djj" align="center" />
|
|
||||||
<el-table-column label="警务终端" prop="jwzd" align="center" />
|
|
||||||
<el-table-column label="执法记录仪" prop="zfjly" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<el-form-item label="单位部门" prop="ssbm">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="对讲机" prop="djj">
|
|
||||||
<el-input v-model="form.djj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="警务终端" prop="jwzd">
|
|
||||||
<el-input v-model="form.jwzd"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="执法记录仪" prop="zfjly">
|
|
||||||
<el-input v-model="form.zfjly"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="总计" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item> -->
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import pie from "./components/pie.vue";
|
|
||||||
import { getItem } from "@/utils/storage";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { getYdzbList } from "@/api/patrolStatistics/mobileEquipment.js";
|
|
||||||
import { ref, watch, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const deptId = ref(null);
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
// name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
const getSysMenuTree = () => {
|
|
||||||
const params = {
|
|
||||||
menuName: "",
|
|
||||||
current: 1,
|
|
||||||
size: 100
|
|
||||||
};
|
|
||||||
selectDeptPage(params).then((res) => {
|
|
||||||
orgList.value = res.records;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
watch(
|
|
||||||
() => deptId.value,
|
|
||||||
() => {
|
|
||||||
getListData();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
try {
|
|
||||||
const params = {
|
|
||||||
ssbmdm: deptId.value,
|
|
||||||
permissions: getItem("PermissionsInfo").permissionsSqlNoAlias
|
|
||||||
};
|
|
||||||
loadingTable.value = true;
|
|
||||||
getYdzbList(params).then((res) => {
|
|
||||||
tableData.value = res.list || [];
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
loadingTable.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 520;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
// getSysMenuTree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,147 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width: 1000px; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
var salvProName = props.data.map((item) => item.name);
|
|
||||||
var salvProValue = props.data.map((item) => item.sl);
|
|
||||||
|
|
||||||
option = {
|
|
||||||
grid: {
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
bottom: "10%",
|
|
||||||
top: "10%",
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "none"
|
|
||||||
},
|
|
||||||
formatter: function (params) {
|
|
||||||
return params[0].name + " : " + params[0].value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
show: true,
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
// type: "dashed"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
// type: "dashed"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
color: "#ddd",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: "value"
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
inverse: true,
|
|
||||||
boundaryGap: true,
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: "#ddd",
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: salvProName
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// name: '值',
|
|
||||||
type: "bar",
|
|
||||||
zlevel: 1,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
barBorderRadius: [0, 10, 10, 0],
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: "rgb(57,89,255,1)"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: "rgb(46,200,207,1)"
|
|
||||||
// }
|
|
||||||
// ])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
position: "right"
|
|
||||||
},
|
|
||||||
barWidth: 10,
|
|
||||||
data: salvProValue
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,374 +0,0 @@
|
|||||||
<!-- 巡防力量 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">巡防力量</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box">
|
|
||||||
<MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable v-model="deptId" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<pie :data="barData" />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<!-- <div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div> -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table :data="tableData" border row-key="id" style="width: 100%" :key="keyCount" :height="tableHeight"
|
|
||||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange">
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="60" />
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="民警数量" prop="mj" align="center" />
|
|
||||||
<el-table-column label="辅警数量" prop="fj" align="center" />
|
|
||||||
<el-table-column label="警车数量" prop="car" align="center" />
|
|
||||||
<!-- <el-table-column label="350M终端" prop="bz" align="center" />
|
|
||||||
<el-table-column label="820终端" prop="bz" align="center" />
|
|
||||||
<el-table-column label="移动警务通" prop="bz" align="center" /> -->
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top" disabled>
|
|
||||||
<el-form-item label="单位部门" prop="ssbm">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="民警数量" prop="mj">
|
|
||||||
<el-input v-model="form.mj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="辅警数量" prop="fj">
|
|
||||||
<el-input v-model="form.fj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="警车数量" prop="car">
|
|
||||||
<el-input v-model="form.car"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import {
|
|
||||||
getCarTj,
|
|
||||||
getFjTj,
|
|
||||||
getMjTj,
|
|
||||||
getBarTj
|
|
||||||
} from "@/api/patrolStatistics/patrolForce.js";
|
|
||||||
import { getItem } from "@/utils/storage";
|
|
||||||
import { ref, watch, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const deptId = ref(null);
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
watch(
|
|
||||||
() => deptId.value,
|
|
||||||
() => {
|
|
||||||
getListData();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
// name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
const getSysMenuTree = () => {
|
|
||||||
const params = {
|
|
||||||
menuName: "",
|
|
||||||
current: 1,
|
|
||||||
size: 100
|
|
||||||
};
|
|
||||||
selectDeptPage(params).then((res) => {
|
|
||||||
orgList.value = res.records;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
function handleNodeClick(val) { }
|
|
||||||
const barData = ref([]);
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
try {
|
|
||||||
const params = {
|
|
||||||
ssbmdm: deptId.value,
|
|
||||||
permissions: getItem("PermissionsInfo").permissionsSqlNoAlias
|
|
||||||
};
|
|
||||||
loadingTable.value = true;
|
|
||||||
Promise.all([
|
|
||||||
getCarTj(params),
|
|
||||||
getFjTj(params),
|
|
||||||
getMjTj(params),
|
|
||||||
getBarTj(params)
|
|
||||||
]).then(([car, fj, mj, tj]) => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
barData.value = [
|
|
||||||
{ sl: tj[0].fjsl, name: "辅警数量" },
|
|
||||||
{ sl: tj[0].mjsl, name: "民警数量" },
|
|
||||||
{ sl: tj[0].clsl, name: "警车数量" }
|
|
||||||
];
|
|
||||||
var tabListArr = car.map((item) => item.ssbmdm);
|
|
||||||
fj.forEach((v) => {
|
|
||||||
if (tabListArr.indexOf(v.ssbmdm) == -1) {
|
|
||||||
tabListArr.push(v.ssbmdm);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
mj.forEach((v) => {
|
|
||||||
if (tabListArr.indexOf(v.ssbmdm) == -1) {
|
|
||||||
tabListArr.push(v.ssbmdm);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log(tabListArr, 'tabListArr');
|
|
||||||
|
|
||||||
tableData.value = tabListArr.map((item) => {
|
|
||||||
const fjObj = fj.filter((itemq) => item === itemq.ssbmdm);
|
|
||||||
const mjObj = mj.filter((itemq) => item === itemq.ssbmdm);
|
|
||||||
const carbj = car.filter((itemq) => item === itemq.ssbmdm);
|
|
||||||
let str;
|
|
||||||
if (carbj.length > 0) {
|
|
||||||
str = carbj[0].ssbm
|
|
||||||
} else if (fjObj.length > 0) {
|
|
||||||
str = fjObj[0].ssbm
|
|
||||||
} else if (mjObj.length > 0) {
|
|
||||||
str = mjObj[0].ssbm
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
car: carbj && carbj.length > 0 ? carbj[0].sl : 0,
|
|
||||||
mj: mjObj && mjObj.length > 0 ? mjObj[0].sl : 0,
|
|
||||||
fj: fjObj && fjObj.length > 0 ? fjObj[0].sl : 0,
|
|
||||||
ssbm: str
|
|
||||||
};
|
|
||||||
});
|
|
||||||
console.log(tableData.value, 'tableData.value');
|
|
||||||
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
loadingTable.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 518;
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
// getSysMenuTree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width: 500px; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array },
|
|
||||||
dict: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => props.dict,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = props.data.map((item) => {
|
|
||||||
return {
|
|
||||||
value: item.sl,
|
|
||||||
name: props.dict.filter((e) => e.value == item.sblx)[0]?.label || item.sblx
|
|
||||||
};
|
|
||||||
});
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: "center",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: "#49dff0",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情处置分析图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["32%", "50%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: [
|
|
||||||
"#c487ee",
|
|
||||||
"#deb140",
|
|
||||||
"#49dff0",
|
|
||||||
"#034079",
|
|
||||||
"#6f81da",
|
|
||||||
"#00ffb4"
|
|
||||||
],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function (value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return (
|
|
||||||
"{white|" +
|
|
||||||
params.name +
|
|
||||||
"}\n{yellow|" +
|
|
||||||
params.value +
|
|
||||||
"}\n{blue|" +
|
|
||||||
percent +
|
|
||||||
"%}"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,441 +0,0 @@
|
|||||||
<!-- 感知源 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">感知源</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="text-box">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in sbLxData"
|
|
||||||
:key="index + 'sblx'"
|
|
||||||
class="text-item"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<dict-tag
|
|
||||||
:value="item.sblx"
|
|
||||||
:options="D_BZ_SBLX"
|
|
||||||
:tag="false"
|
|
||||||
></dict-tag>
|
|
||||||
</span>
|
|
||||||
<span class="text-color">{{ item.sl }}</span
|
|
||||||
>个
|
|
||||||
</div>
|
|
||||||
<!-- <div class="text-item">
|
|
||||||
<span>视频监控:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>人卡:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>车卡:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>卡口:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>交警视频:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div>
|
|
||||||
<div class="text-item">
|
|
||||||
<span>制高点视频:</span>
|
|
||||||
<span class="text-color">313</span>个
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<pie :dict="D_BZ_SBLX" :data="sbLxData" />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="60"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="视频监控" prop="spjk" align="center" />
|
|
||||||
<el-table-column label="人卡" prop="bz" align="center" />
|
|
||||||
<el-table-column label="车卡" prop="bz" align="center" />
|
|
||||||
<el-table-column label="卡口" prop="jtkk" align="center" />
|
|
||||||
<el-table-column label="交警视频" prop="bz" align="center" />
|
|
||||||
<el-table-column label="制高点视频" prop="bz" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<el-form-item label="单位部门" prop="name">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="视频监控" prop="name">
|
|
||||||
<el-input v-model="form.spjk"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="人卡" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车卡" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="卡口" prop="jtkk">
|
|
||||||
<el-input v-model="form.jtkk"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="交警视频" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="制高点视频" prop="name">
|
|
||||||
<el-input v-model="form.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { getSblist, getSbLx } from "@/api/patrolStatistics/perceptualSource.js";
|
|
||||||
import { ref, watch, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
// const { D_BZ_SBLX } = proxy.$dict("D_BZ_SBLX");
|
|
||||||
import { getItem } from "@/utils/storage";
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
// 01-视频监控 02-交通卡 03-人卡 04-车卡 05-电子围栏 06-WIFI探针 07-IMSI、IMEI
|
|
||||||
const D_BZ_SBLX = ref([
|
|
||||||
{
|
|
||||||
label: '视频监控',
|
|
||||||
value: '01',
|
|
||||||
dm: '01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '交通卡',
|
|
||||||
value: '02',
|
|
||||||
dm: '02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '人卡',
|
|
||||||
value: '03',
|
|
||||||
dm: '03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '车卡',
|
|
||||||
value: '04',
|
|
||||||
dm: '04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '电子围栏',
|
|
||||||
value: '05',
|
|
||||||
dm: '05'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'WIFI探针',
|
|
||||||
value: '06',
|
|
||||||
dm: '06'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'IMSI、IMEI',
|
|
||||||
value: '07',
|
|
||||||
dm: '07'
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const sbLxData = ref([])
|
|
||||||
//获取设备类型统计
|
|
||||||
function getSbtj() {
|
|
||||||
try {
|
|
||||||
const params = {
|
|
||||||
ssbmdm: deptId.value,
|
|
||||||
permissions: getItem("PermissionsInfo").permissionsSqlNoAlias
|
|
||||||
};
|
|
||||||
getSbLx(params).then((res) => {
|
|
||||||
sbLxData.value = res.map((item) => {
|
|
||||||
return {
|
|
||||||
sblx: item.sblx,
|
|
||||||
sl: item.sl
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {}
|
|
||||||
}
|
|
||||||
const deptId = ref(null);
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
watch(
|
|
||||||
() => deptId.value,
|
|
||||||
() => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
listQuery.value.pageSize = 10;
|
|
||||||
getListData();
|
|
||||||
getSbtj();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
try {
|
|
||||||
loadingTable.value = true;
|
|
||||||
const data = {
|
|
||||||
page: listQuery.value.pageCurrent,
|
|
||||||
size: listQuery.value.pageSize,
|
|
||||||
ssbmdm: deptId.value,
|
|
||||||
permissions: getItem("PermissionsInfo").permissionsSqlNoAlias
|
|
||||||
};
|
|
||||||
getSblist(data).then((res) => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = res.total;
|
|
||||||
tableData.value = res || [];
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
loadingTable.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 520;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getSbtj();
|
|
||||||
// getSysMenuTree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="circlecz" style="width: 1000px; height: 100%"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, defineProps } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Array }
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
lineChartFn();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
legend: {
|
|
||||||
type: "plain",
|
|
||||||
show: true,
|
|
||||||
right: 0,
|
|
||||||
textStyle: {
|
|
||||||
color: "#ddd"
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: "街面警务站"
|
|
||||||
},
|
|
||||||
{ name: "移动警务车" },
|
|
||||||
{ name: "综合治安亭" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "25%",
|
|
||||||
right: "3%",
|
|
||||||
left: "5%",
|
|
||||||
bottom: "12%"
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
data: props.data.map(item=>item.ssbm),
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 10,
|
|
||||||
color: "#e2e9ff",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
// name: '单位：万元',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: "{value}",
|
|
||||||
color: "#e2e9ff"
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,1)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255,255,255,0.12)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "综合治安亭",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map(item=>item.zhzagt),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(0,244,255,1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(0,77,167,1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "街面警务站",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map(item=>item.jmjwz),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "移动警务车",
|
|
||||||
type: "bar",
|
|
||||||
data: props.data.map(item=>item.ydjwc),
|
|
||||||
barWidth: "30px",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(230, 10, 241, 1)" // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(124, 2, 107, 1)" // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
barBorderRadius: [30, 30, 30, 30],
|
|
||||||
shadowColor: "rgba(0,160,221,1)",
|
|
||||||
shadowBlur: 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
position: "top"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dd {
|
|
||||||
color: rgba(124, 2, 107, 0.326);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,343 +0,0 @@
|
|||||||
<!-- 街面警务站 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">街面警务站</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<pie :data="tableData" />
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="60"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="街面警务站" prop="jmjwz" align="center" />
|
|
||||||
<el-table-column label="移动警务车" prop="ydjwc" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="综合治安亭"
|
|
||||||
prop="zhzagt"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<el-form-item label="单位部门" prop="ssbm">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="街面警务站" prop="jmjwz">
|
|
||||||
<el-input v-model="form.jmjwz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="移动警务车" prop="ydjwc">
|
|
||||||
<el-input v-model="form.ydjwc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="综合治安亭" prop="zhzagt">
|
|
||||||
<el-input v-model="form.zhzagt"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import {
|
|
||||||
getJwzTj,
|
|
||||||
getBmJwzlist
|
|
||||||
} from "@/api/patrolStatistics/streetPoliceStation.js";
|
|
||||||
import { ref, watch, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const deptId = ref(null);
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
import { getItem } from "@/utils/storage";
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
// name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
watch(
|
|
||||||
() => deptId.value,
|
|
||||||
() => {
|
|
||||||
getListData();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const orgList = ref([]);
|
|
||||||
const getSysMenuTree = () => {
|
|
||||||
const params = {
|
|
||||||
menuName: "",
|
|
||||||
current: 1,
|
|
||||||
size: 100
|
|
||||||
};
|
|
||||||
selectDeptPage(params).then((res) => {
|
|
||||||
orgList.value = res.records;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleNodeClick(val) {
|
|
||||||
}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
try {
|
|
||||||
loadingTable.value = true;
|
|
||||||
const params = {
|
|
||||||
page: listQuery.value.pageCurrent,
|
|
||||||
size: listQuery.value.pageSize,
|
|
||||||
ssbmdm: deptId.value,
|
|
||||||
permissions: getItem("PermissionsInfo").permissionsSqlNoAlias
|
|
||||||
};
|
|
||||||
getBmJwzlist(params).then((res) => {
|
|
||||||
tableData.value = res.list || [];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = res.total;
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
loadingTable.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 520;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
// getTjData();
|
|
||||||
getSysMenuTree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart1" style="width: 100%; height: 260px"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [
|
|
||||||
{
|
|
||||||
value: 2154,
|
|
||||||
name: "橡胶塑料"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 3854,
|
|
||||||
name: "交通工具"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 3515,
|
|
||||||
name: "渔牧产品"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 3515,
|
|
||||||
name: "电子设备"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2154,
|
|
||||||
name: "其他"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: "center",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: "#49dff0",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情处置分析图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["10%", "50%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: [
|
|
||||||
"#c487ee",
|
|
||||||
"#deb140",
|
|
||||||
"#49dff0",
|
|
||||||
"#034079",
|
|
||||||
"#6f81da",
|
|
||||||
"#00ffb4"
|
|
||||||
],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function (value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return (
|
|
||||||
"{white|" +
|
|
||||||
params.name +
|
|
||||||
"}\n{yellow|" +
|
|
||||||
params.value +
|
|
||||||
"}\n{blue|" +
|
|
||||||
percent +
|
|
||||||
"%}"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart1").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart2" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '交通违法继续盘查'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他原因继续盘查-正常'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '其他原因继续盘查-有无违法行为'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '其他原因继续盘查-巡逻盘查'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他原因继续盘查-正常盘查'
|
|
||||||
}, {
|
|
||||||
value: 2154,
|
|
||||||
name: '其他原因继续盘查-正常检查'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '其他原因继续盘查-例行检查'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '其他原因继续盘查-放行'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '其他'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['10%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,373 +0,0 @@
|
|||||||
<!-- 盘查物品分析 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">盘查物品分析</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<!-- <div class="org-search-box">
|
|
||||||
<el-input v-model="input" placeholder="请输入关键字搜索" />
|
|
||||||
<el-button>搜索</el-button>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<!-- <el-tree
|
|
||||||
:data="orgList"
|
|
||||||
node-key="id"
|
|
||||||
:default-expanded-keys="[7]"
|
|
||||||
:props="defaultProps"
|
|
||||||
accordion
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
/> -->
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox chart-pie-box">
|
|
||||||
<div>盘查物品统计 总数: 3405个</div>
|
|
||||||
<pie1 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="80"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="name" align="center" />
|
|
||||||
<el-table-column label="橡胶塑料" prop="bz" align="center" />
|
|
||||||
<el-table-column label="交通工具" prop="bz" align="center" />
|
|
||||||
<el-table-column label="渔牧产品" prop="bz" align="center" />
|
|
||||||
<el-table-column label="电子设备" prop="bz" align="center" />
|
|
||||||
<el-table-column label="其他" prop="bz" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="橡胶塑料" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="交通工具" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="渔牧产品" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="电子设备" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="其他" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
|
||||||
<el-input v-model="form.bz" show-word-limit type="textarea" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie1 from "./components/pie1.vue";
|
|
||||||
import pie2 from "./components/pie2.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 切换按钮
|
|
||||||
const signTable = ref(1);
|
|
||||||
const checkedBtn1 = ref("primary");
|
|
||||||
const checkedBtn2 = ref("default");
|
|
||||||
function getTab(val) {
|
|
||||||
if (val === 1) {
|
|
||||||
checkedBtn1.value = "primary";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
signTable.value = 1;
|
|
||||||
} else if (val === 2) {
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "primary";
|
|
||||||
signTable.value = 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{ name: "林芝市", bz: "12" },
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 57 - 37 - 470;
|
|
||||||
orgHeight.value = window.innerHeight - 57 - 37 - 100;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.chart-pie-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart1" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '怀疑涉毒'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '冲动急躁'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '酗酒闹事'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '猥亵他人'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '闲散人员'
|
|
||||||
}, {
|
|
||||||
value: 2154,
|
|
||||||
name: '异装癖'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '思维跳跃'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '其他'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart1").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart2" style="width:100%; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '红'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '青'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '紫'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '蓝'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '绿'
|
|
||||||
}, {
|
|
||||||
value: 2154,
|
|
||||||
name: '黄'
|
|
||||||
},{
|
|
||||||
value: 2154,
|
|
||||||
name: '橙'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,405 +0,0 @@
|
|||||||
<!-- 盘查车辆分析 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">盘查车辆分析</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<!-- <div class="org-search-box">
|
|
||||||
<el-input v-model="input" placeholder="请输入关键字搜索" />
|
|
||||||
<el-button>搜索</el-button>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<!-- <el-tree
|
|
||||||
:data="orgList"
|
|
||||||
node-key="id"
|
|
||||||
:default-expanded-keys="[7]"
|
|
||||||
:props="defaultProps"
|
|
||||||
accordion
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
/> -->
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox chart-pie-box">
|
|
||||||
<div>盘查车辆特征统计</div>
|
|
||||||
<pie2 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="80"
|
|
||||||
/>
|
|
||||||
<el-table-column label="单位部门" prop="name" align="center" />
|
|
||||||
<el-table-column label="红" prop="bz" align="center" />
|
|
||||||
<el-table-column label="青" prop="bz" align="center" />
|
|
||||||
<el-table-column label="紫" prop="bz" align="center" />
|
|
||||||
<el-table-column label="蓝" prop="bz" align="center" />
|
|
||||||
<el-table-column label="绿" prop="bz" align="center" />
|
|
||||||
<el-table-column label="黄" prop="bz" align="center" />
|
|
||||||
<el-table-column label="橙" prop="bz" align="center" />
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="红" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="青" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="紫" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="蓝" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="绿" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="黄" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="橙" prop="bz">
|
|
||||||
<el-input v-model="form.bz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="bz" label="备注" style="width: 100%">
|
|
||||||
<el-input v-model="form.bz" show-word-limit type="textarea" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie1 from "./components/pie1.vue";
|
|
||||||
import pie2 from "./components/pie2.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 切换按钮
|
|
||||||
const signTable = ref(1);
|
|
||||||
const checkedBtn1 = ref("primary");
|
|
||||||
const checkedBtn2 = ref("default");
|
|
||||||
const checkedBtn3 = ref("default");
|
|
||||||
const checkedBtn4 = ref("default");
|
|
||||||
function getTab(val) {
|
|
||||||
switch (val) {
|
|
||||||
case 1:
|
|
||||||
checkedBtn1.value = "primary";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 1;
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "primary";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 2;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "primary";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 3;
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "primary";
|
|
||||||
signTable.value = 4;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{ name: "林芝市", bz: "12" },
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 57 - 37 - 470;
|
|
||||||
orgHeight.value = window.innerHeight - 57 - 37 - 100;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.chart-pie-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cdzClassify3" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cdzClassify3");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '电子设备分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '电子设备分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cdzClassify3").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cwClassify1" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cwClassify1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '交通工具类'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '农副渔牧产品及野生动物'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '橡胶塑料制品'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cwClassify1").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cwjClassify2" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cwjClassify2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '违禁物品分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '违禁物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cwjClassify2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pdzClassify3" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pdzClassify3");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '电子设备分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '电子设备分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pdzClassify3").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart2" style="width:100%; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 12,
|
|
||||||
name: '已派警'
|
|
||||||
}, {
|
|
||||||
value: 30,
|
|
||||||
name: '处置完毕'
|
|
||||||
}, {
|
|
||||||
value: 20,
|
|
||||||
name: '开始处置'
|
|
||||||
}, {
|
|
||||||
value: 14,
|
|
||||||
name: '已反馈'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pwClassify1" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pwClassify1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '交通工具类'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '农副渔牧产品及野生动物'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '橡胶塑料制品'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pwClassify1").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pwjClassify2" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pwjClassify2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '违禁品分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '违禁物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pwjClassify2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,507 +0,0 @@
|
|||||||
<!-- 处置警情分析 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">处置警情分析</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<!-- <div class="org-search-box">
|
|
||||||
<el-input v-model="input" placeholder="请输入关键字搜索" />
|
|
||||||
<el-button>搜索</el-button>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<!-- <el-tree
|
|
||||||
:data="orgList"
|
|
||||||
node-key="id"
|
|
||||||
:default-expanded-keys="[7]"
|
|
||||||
:props="defaultProps"
|
|
||||||
accordion
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
/> -->
|
|
||||||
<MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable v-model="listQuery.deptId" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox chart-pie-box">
|
|
||||||
<div>警情处置统计</div>
|
|
||||||
<pie2 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker v-model="value1" type="date" placeholder="请选择" :size="size" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table :data="tableData" border row-key="id" style="width: 100%" :key="keyCount" :height="tableHeight"
|
|
||||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="60" />
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
|
||||||
<el-table-column label="处警人姓名" prop="cjrXm" align="center" />
|
|
||||||
<el-table-column label="处警人身份证号" width="180" prop="cjrSfzh" align="center" />
|
|
||||||
<el-table-column label="处警人联系电话" width="180" prop="cjrLxdh" align="center" />
|
|
||||||
<el-table-column label="处警员编号" prop="cjyBh" align="center" />
|
|
||||||
<el-table-column label="反馈内容" prop="fknr" align="center" />
|
|
||||||
<el-table-column label="状态" prop="cjzt" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-tag v-show="row.cjzt == 1">已派警</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 2">处置完毕</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 3">开始处置</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 4">已反馈</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" disabled :inline="true" label-position="top">
|
|
||||||
<el-divider content-position="left"><i class="el-icon-timer">报警信息</i></el-divider>
|
|
||||||
<el-form-item label="报警时间">
|
|
||||||
<el-input v-model="form.bjsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警电话">
|
|
||||||
<el-input v-model="form.bjdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警电话用户姓名">
|
|
||||||
<el-input v-model="form.bjdh_yhxm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警电话用户地址">
|
|
||||||
<el-input v-model="form.bjdh_yhdz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警人姓名">
|
|
||||||
<el-input v-model="form.bjr_xm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警人性别">
|
|
||||||
<!-- <el-input v-model="form.bjr_xb" ></el-input> -->
|
|
||||||
<el-select clearable v-model="form.bjr_xb" placeholder="请选择性别">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_XB" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话">
|
|
||||||
<el-input v-model="form.bjdh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-divider content-position="left"><i class="el-icon-timer">报警内容</i></el-divider>
|
|
||||||
<el-form-item label="事发地址" style="width: 48%">
|
|
||||||
<el-input v-model="form.sfdz" type="textarea"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警内容" style="width: 48%">
|
|
||||||
<el-input v-model="form.bjnr" type="textarea"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="管辖单位">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警类别">
|
|
||||||
<el-input v-model="form.bjlbmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警类型">
|
|
||||||
<el-input v-model="form.bjlxmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警细类">
|
|
||||||
<el-input v-model="form.bjxlmc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="路灯杆编号">
|
|
||||||
<el-input v-model="form.ldgbh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="有无危险物质">
|
|
||||||
<!-- <el-input v-model="form.ywwxwz" ></el-input> -->
|
|
||||||
<el-select clearable v-model="form.ywwxwz">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="有无爆炸、泄露">
|
|
||||||
<!-- <el-input v-model="form.ywbzxl" placeholder="请输入有无爆炸、泄露"></el-input> -->
|
|
||||||
<el-select clearable v-model="form.ywbzxl">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="有无被困人员">
|
|
||||||
<!-- <el-input v-model="form.ywbkry" placeholder="请输入有无被困人员"></el-input> -->
|
|
||||||
<el-select clearable v-model="form.ywbkry">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否涉外">
|
|
||||||
<!-- <el-input v-model="form.sfsw" placeholder="请输入是否涉外"></el-input> -->
|
|
||||||
<el-select clearable v-model="form.sfsw">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否外语报警">
|
|
||||||
<!-- <el-input v-model="form.sfswybj" placeholder="请输入是否外语报警"></el-input> -->
|
|
||||||
<el-select clearable v-model="form.sfswybj">
|
|
||||||
<el-option v-for="(item, index) in D_BZ_SF" :key="index" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警方式">
|
|
||||||
<el-input v-model="form.bjfsbh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-divider content-position="left"><i class="el-icon-timer">接警信息</i></el-divider>
|
|
||||||
|
|
||||||
<el-form-item label="接警员编号">
|
|
||||||
<el-input v-model="form.jjybh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接警员姓名">
|
|
||||||
<el-input v-model="form.jjyxm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="接警时间">
|
|
||||||
<el-input v-model="form.jjsj"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie2 from "./components/pie2.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 切换按钮
|
|
||||||
const signTable = ref(1);
|
|
||||||
const checkedBtn1 = ref("primary");
|
|
||||||
const checkedBtn2 = ref("default");
|
|
||||||
const checkedBtn3 = ref("default");
|
|
||||||
const checkedBtn4 = ref("default");
|
|
||||||
function getTab(val) {
|
|
||||||
switch (val) {
|
|
||||||
case 1:
|
|
||||||
checkedBtn1.value = "primary";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 1;
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "primary";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 2;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "primary";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 3;
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "primary";
|
|
||||||
signTable.value = 4;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
const getSysMenuTree = () => {
|
|
||||||
const params = {
|
|
||||||
menuName: "",
|
|
||||||
current: 1,
|
|
||||||
size: 100
|
|
||||||
};
|
|
||||||
selectDeptPage(params).then((res) => {
|
|
||||||
orgList.value = res.records;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
function handleNodeClick(val) { }
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
cjrXm: "曾海峰",
|
|
||||||
cjrSfzh: "511**********1316",
|
|
||||||
cjrLxdh: "138******12",
|
|
||||||
cjyBh: "123651",
|
|
||||||
cjDwbh: "22264984",
|
|
||||||
fknr: "暂无",
|
|
||||||
cjzt: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
cjrXm: "邓林",
|
|
||||||
cjrSfzh: "511**********1316",
|
|
||||||
cjrLxdh: "138******12",
|
|
||||||
cjyBh: "134651",
|
|
||||||
cjDwbh: "23454984",
|
|
||||||
fknr: "暂无",
|
|
||||||
cjzt: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
cjrXm: "邓伟",
|
|
||||||
cjrSfzh: "511**********1316",
|
|
||||||
cjrLxdh: "138******12",
|
|
||||||
cjyBh: "312651",
|
|
||||||
cjDwbh: "65454984",
|
|
||||||
fknr: "暂无",
|
|
||||||
cjzt: "3"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
cjrXm: "胖大白",
|
|
||||||
cjrSfzh: "511**********1316",
|
|
||||||
cjrLxdh: "138******12",
|
|
||||||
cjyBh: "112651",
|
|
||||||
cjDwbh: "23454984",
|
|
||||||
fknr: "暂无",
|
|
||||||
cjzt: "4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
cjrXm: "孙江燕",
|
|
||||||
cjrSfzh: "511**********1316",
|
|
||||||
cjrLxdh: "138******12",
|
|
||||||
cjyBh: "134231",
|
|
||||||
cjDwbh: "62344984",
|
|
||||||
fknr: "暂无",
|
|
||||||
cjzt: "2"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 57 - 37 - 470;
|
|
||||||
orgHeight.value = window.innerHeight - 57 - 37 - 100;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getSysMenuTree();
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-pie-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width: 100%; height: 100%">
|
|
||||||
<div id="circlecz" style="width: 100%; height: 100%"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, nextTick } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: Array
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
(val) => {
|
|
||||||
nextTick(()=>{
|
|
||||||
lineChartFn(val);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function lineChartFn(val) {
|
|
||||||
let num = val.map(item=>{ return item.value})
|
|
||||||
let total = num.reduce((value1,value2)=>{
|
|
||||||
return parseInt(value1) + parseInt(value2)
|
|
||||||
},0)
|
|
||||||
var chartDom = document.getElementById("circlecz");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var echartData = val;
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 ,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: "center",
|
|
||||||
fontSize: 14 ,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: "#49dff0",
|
|
||||||
fontSize: 14 ,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var option = {
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情处置分析图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["32%", "50%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params) {
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
if(total > 0) percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return ( "{white|" + params.name + "}{yellow|" + params.value + "}\n{blue|" + percent + "%}");
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">盘查统计分析</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.ssbmdm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox chart-pie-box">
|
|
||||||
<div>盘查统计特征统计</div>
|
|
||||||
<Pie :data="countAll" :key="keyCount" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="时间段">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="timeRange"
|
|
||||||
@change="handleTime"
|
|
||||||
unlink-panels
|
|
||||||
type="daterange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="YYYY-M-D HH:mm:ss"
|
|
||||||
format="YYYY-M-D HH:mm:ss"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="50"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="单位部门"
|
|
||||||
prop="ssbm"
|
|
||||||
align="center"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
<el-table-column label="盘查人" prop="pcry" align="center" />
|
|
||||||
<el-table-column label="盘查车" prop="pccl" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">详情</span>
|
|
||||||
<div><el-button size="small" @click="close">关闭</el-button></div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="单位部门">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查人">
|
|
||||||
<el-input v-model="form.pcry"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="盘查车">
|
|
||||||
<el-input v-model="form.pccl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import Pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
getCurrentInstance,
|
|
||||||
onMounted,
|
|
||||||
reactive,
|
|
||||||
watch,
|
|
||||||
watchEffect
|
|
||||||
} from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const timeRange = ref([]); //
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const orgHeight = ref(); // 表格高度计算
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const countAllDefault = ref([]);
|
|
||||||
const countAll = ref([
|
|
||||||
{ name: "盘查人", type: "rysl", value: 0 },
|
|
||||||
{ name: "盘查车", type: "clsl", value: 0 }
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
countAllDefault.value = JSON.parse(JSON.stringify(countAll.value));
|
|
||||||
getDate(); //获取全部
|
|
||||||
tabHeightFn();
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取全部数据
|
|
||||||
function getDate() {
|
|
||||||
console.log(timeRange.value);
|
|
||||||
let params = {
|
|
||||||
ssbmdm: listQuery.value.ssbmdm,
|
|
||||||
pageSize: listQuery.value.pageSize,
|
|
||||||
pageCurrent: listQuery.value.pageCurrent,
|
|
||||||
kssj: timeRange.value.length > 0 ? timeRange.value[0] : "",
|
|
||||||
jssj: timeRange.value.length > 0 ? timeRange.value[1] : ""
|
|
||||||
};
|
|
||||||
loadingTable.value = true;
|
|
||||||
qcckPost(params, "/mosty-jmxf/tbHcBpccl/getPctj")
|
|
||||||
.then((res) => {
|
|
||||||
countAll.value = JSON.parse(JSON.stringify(countAllDefault.value));
|
|
||||||
loadingTable.value = false;
|
|
||||||
if (!res) return;
|
|
||||||
countAll.value.forEach((item) => {
|
|
||||||
for (let key in res) {
|
|
||||||
if (key == item.type) item.value = parseInt(res[key]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tableData.value = res.pageList.records || [];
|
|
||||||
total.value = res.pageList.total;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
loadingTable.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//处理时间
|
|
||||||
function handleTime(val) {
|
|
||||||
listQuery.value.kssj = val ? val[0] : "";
|
|
||||||
listQuery.value.jssj = val ? val[1] : "";
|
|
||||||
}
|
|
||||||
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getDate();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = { pageCurrent: 1, pageSize: 10 };
|
|
||||||
timeRange.value = [];
|
|
||||||
getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
// pageSize 改变触发
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页码改变触发
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 590;
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
if (listQuery.value.ssbmdm) {
|
|
||||||
getDate(); //获取全部
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
form.value = JSON.parse(JSON.stringify(row));
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.table-box {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.searchBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 180px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.title {
|
|
||||||
width: 75px;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.dw {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cdzClassify3" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cdzClassify3");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '电子设备分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '电子设备分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cdzClassify3").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cwClassify1" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cwClassify1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '交通工具类'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '农副渔牧产品及野生动物'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '橡胶塑料制品'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cwClassify1").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="cwjClassify2" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("cwjClassify2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '违禁物品分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '违禁物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("cwjClassify2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pdzClassify3" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pdzClassify3");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '电子设备分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '电子设备分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pdzClassify3").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="chart2" style="width:100%; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("chart2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 12,
|
|
||||||
name: '已派警'
|
|
||||||
}, {
|
|
||||||
value: 30,
|
|
||||||
name: '处置完毕'
|
|
||||||
}, {
|
|
||||||
value: 20,
|
|
||||||
name: '开始处置'
|
|
||||||
}, {
|
|
||||||
value: 14,
|
|
||||||
name: '已反馈'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 0,
|
|
||||||
top: 5
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("chart2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pwClassify1" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pwClassify1");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '交通工具类'
|
|
||||||
}, {
|
|
||||||
value: 3854,
|
|
||||||
name: '其他'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '农副渔牧产品及野生动物'
|
|
||||||
}, {
|
|
||||||
value: 3515,
|
|
||||||
name: '橡胶塑料制品'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pwClassify1").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div id="pwjClassify2" style="width:500px; height:260px;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
function lineChartFn() {
|
|
||||||
var chartDom = document.getElementById("pwjClassify2");
|
|
||||||
var myChart = echarts.init(chartDom, "dark");
|
|
||||||
var option;
|
|
||||||
var scale = 1;
|
|
||||||
var echartData = [{
|
|
||||||
value: 2154,
|
|
||||||
name: '违禁品分类'
|
|
||||||
}]
|
|
||||||
var rich = {
|
|
||||||
yellow: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [5, 4],
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
color: "#ffc72b",
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
white: {
|
|
||||||
color: "#fff",
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
padding: [0, 0]
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
color: '#49dff0',
|
|
||||||
fontSize: 14 * scale,
|
|
||||||
align: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
option = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,0)',
|
|
||||||
title: {
|
|
||||||
text: '违禁物品分类',
|
|
||||||
textAlign: 'auto',
|
|
||||||
left: "center",
|
|
||||||
top: "top",
|
|
||||||
padding: [20, 0,0,0],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ddd'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
top: 'top',
|
|
||||||
left: '75%',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '今日警情处置分析图',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function(params, ticket, callback) {
|
|
||||||
var total = 0; //考生总数量
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
echartData.forEach(function(value, index, array) {
|
|
||||||
total += value.value;
|
|
||||||
});
|
|
||||||
percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return '{white|' + params.name + '}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
|
|
||||||
},
|
|
||||||
rich: rich
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: echartData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
document.getElementById("pwjClassify2").setAttribute('_echarts_instance_', '')
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
lineChartFn();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,443 +0,0 @@
|
|||||||
<!-- 事件分析 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">事件分析</div>
|
|
||||||
<div class="btnBox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<!-- <div class="org-search-box">
|
|
||||||
<el-input v-model="input" placeholder="请输入关键字搜索" />
|
|
||||||
<el-button>搜索</el-button>
|
|
||||||
</div> -->
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<!-- <el-tree
|
|
||||||
:data="orgList"
|
|
||||||
node-key="id"
|
|
||||||
:default-expanded-keys="[7]"
|
|
||||||
:props="defaultProps"
|
|
||||||
accordion
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
/> -->
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.deptId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="searchBox chart-pie-box">
|
|
||||||
<div>事件处置统计</div>
|
|
||||||
<pie2 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="根据时间查询">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="value1"
|
|
||||||
type="date"
|
|
||||||
placeholder="请选择"
|
|
||||||
:size="size"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset()"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="40" align="center" />
|
|
||||||
<el-table-column
|
|
||||||
label="序号"
|
|
||||||
type="index"
|
|
||||||
align="center"
|
|
||||||
width="60"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="单位部门"
|
|
||||||
prop="ssbm"
|
|
||||||
align="center"
|
|
||||||
width="180"
|
|
||||||
/>
|
|
||||||
<el-table-column label="事件标题" prop="sjbt" align="center" />
|
|
||||||
<el-table-column label="事件内容" prop="sjnr" align="center" />
|
|
||||||
<el-table-column label="报警人" prop="bjrXm" align="center" />
|
|
||||||
<el-table-column label="报警电话" prop="bjrDh" align="center" />
|
|
||||||
<el-table-column label="事件地址" prop="sjdz" align="center" />
|
|
||||||
<el-table-column label="状态" prop="cjzt" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-tag v-show="row.cjzt == 1">已派警</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 2">处置完毕</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 3">开始处置</el-tag>
|
|
||||||
<el-tag v-show="row.cjzt == 4">已反馈</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
align="center"
|
|
||||||
fixed="right"
|
|
||||||
width="150px"
|
|
||||||
>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">{{ title }}</span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-form
|
|
||||||
ref="elform"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
disabled
|
|
||||||
:inline="true"
|
|
||||||
label-position="top"
|
|
||||||
>
|
|
||||||
<el-form-item label="事件标题">
|
|
||||||
<el-input v-model="form.sjbt"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="事件内容">
|
|
||||||
<el-input v-model="form.sjnr"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警人">
|
|
||||||
<el-input v-model="form.bjrXm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报警电话">
|
|
||||||
<el-input v-model="form.bjrDh"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="事件地址">
|
|
||||||
<el-input v-model="form.sjdz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import pie2 from "./components/pie2.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const chackAdd = ref(false); //新增修改切换
|
|
||||||
const loading = ref(false); //新增保存按钮截流
|
|
||||||
const ids = ref([]); //表格选中id集合
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const title = ref("新增"); //弹窗标题
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
// 切换按钮
|
|
||||||
const signTable = ref(1);
|
|
||||||
const checkedBtn1 = ref("primary");
|
|
||||||
const checkedBtn2 = ref("default");
|
|
||||||
const checkedBtn3 = ref("default");
|
|
||||||
const checkedBtn4 = ref("default");
|
|
||||||
function getTab(val) {
|
|
||||||
switch (val) {
|
|
||||||
case 1:
|
|
||||||
checkedBtn1.value = "primary";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 1;
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "primary";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 2;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "primary";
|
|
||||||
checkedBtn4.value = "default";
|
|
||||||
signTable.value = 3;
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
checkedBtn1.value = "default";
|
|
||||||
checkedBtn2.value = "default";
|
|
||||||
checkedBtn3.value = "default";
|
|
||||||
checkedBtn4.value = "primary";
|
|
||||||
signTable.value = 4;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 部门树
|
|
||||||
const defaultProps = {
|
|
||||||
children: "childDeptList",
|
|
||||||
label: "orgName"
|
|
||||||
};
|
|
||||||
const orgList = ref([]);
|
|
||||||
|
|
||||||
function handleNodeClick(val) {}
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
tableData.value = [];
|
|
||||||
loadingTable.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = [
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
sjbt: "斗殴",
|
|
||||||
sjnr: "邓伟在打邓林",
|
|
||||||
bjrXm: "胖大白",
|
|
||||||
bjrDh: "138****4567",
|
|
||||||
sjdz: "林芝市",
|
|
||||||
cjzt: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
sjbt: "斗殴",
|
|
||||||
sjnr: "邓伟在曾海峰",
|
|
||||||
bjrXm: "孙江燕",
|
|
||||||
bjrDh: "138****4567",
|
|
||||||
sjdz: "林芝市",
|
|
||||||
cjzt: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
sjbt: "斗殴",
|
|
||||||
sjnr: "邓林在打邓伟",
|
|
||||||
bjrXm: "邓林",
|
|
||||||
bjrDh: "138****4567",
|
|
||||||
sjdz: "林芝市",
|
|
||||||
cjzt: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ssbm: "林芝市公安局",
|
|
||||||
sjbt: "斗殴",
|
|
||||||
sjnr: "邓伟在打邓林",
|
|
||||||
bjrXm: "胖大白",
|
|
||||||
bjrDh: "138****4567",
|
|
||||||
sjdz: "林芝市",
|
|
||||||
cjzt: "1"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
loadingTable.value = false;
|
|
||||||
total.value = tableData.value.length;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
//打开新增弹窗
|
|
||||||
function add() {
|
|
||||||
chackAdd.value = true;
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
//提交
|
|
||||||
function submit() {
|
|
||||||
elform.value.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
}, 1500);
|
|
||||||
if (chackAdd.value) {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "新增成功"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "修改成功"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
// API(row.id).then((res) => {
|
|
||||||
// form.value = res;
|
|
||||||
// });
|
|
||||||
chackAdd.value = false;
|
|
||||||
form.value = row;
|
|
||||||
title.value = "详情";
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
//批量数据
|
|
||||||
const handleSelectionChange = (val) => {
|
|
||||||
ids.value = [];
|
|
||||||
if (val) {
|
|
||||||
val.forEach((item) => {
|
|
||||||
ids.value.push(item.id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//删除
|
|
||||||
function delDictItem(row) {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE([row.id]).then(() => {
|
|
||||||
// proxy.$message({
|
|
||||||
// type: "success",
|
|
||||||
// message: "删除成功"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//批量删除
|
|
||||||
function batchDelete() {
|
|
||||||
proxy
|
|
||||||
.$confirm("确定要删除", "警告", {
|
|
||||||
type: "warning"
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// DELETE(ids.value).then((res) => {
|
|
||||||
// proxy.$message({
|
|
||||||
// message: "删除成功",
|
|
||||||
// type: "success"
|
|
||||||
// });
|
|
||||||
// getListData();
|
|
||||||
// });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
proxy.$message.info("已取消");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 57 - 37 - 470;
|
|
||||||
orgHeight.value = window.innerHeight - 57 - 37 - 100;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.chart-pie-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="circlecz" style="width: 100%; height: 100%"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { ref, onMounted, watch, nextTick } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
data: Array
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(() => props.data,(val) => {
|
|
||||||
nextTick(()=>{
|
|
||||||
console.log(val,'val--------------监听');
|
|
||||||
if(val.length > 0) lineChartFn();
|
|
||||||
})
|
|
||||||
},{immediate: true,deep: true });
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
console.log(props.data,'props.data------onMounted');
|
|
||||||
if(props.data.length >0) lineChartFn()
|
|
||||||
})
|
|
||||||
const lineChartFn = () => {
|
|
||||||
let num = props.data.map(item=>{ return item.value})
|
|
||||||
let total = num.reduce((value1,value2)=>{ return parseInt(value1) + parseInt(value2) },0)
|
|
||||||
var myChart = echarts.init(document.getElementById("circlecz"));
|
|
||||||
var option = {
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
right: 0,
|
|
||||||
top: 5,
|
|
||||||
textStyle:{
|
|
||||||
color:'#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "今日警情处置分析图",
|
|
||||||
type: "pie",
|
|
||||||
radius: ["32%", "50%"],
|
|
||||||
hoverAnimation: false,
|
|
||||||
color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params) {
|
|
||||||
var percent = 0; //考生占比
|
|
||||||
if(total > 0) percent = ((params.value / total) * 100).toFixed(1);
|
|
||||||
return ( "{white|" + params.name + "}{yellow|" + params.value + "}\n{blue|" + percent + "%}");
|
|
||||||
},
|
|
||||||
rich: {
|
|
||||||
yellow: { color: "#ffc72b", fontSize: 14, padding: [5, 4], align: "center"},
|
|
||||||
total: { color: "#ffc72b", fontSize: 14 , align: "center"},
|
|
||||||
white: { color: "#fff", align: "center", fontSize: 14 , padding: [0, 0]},
|
|
||||||
blue: { color: "#49dff0", fontSize: 14 , align: "center"}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: props.data
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
window.onresize = function () {
|
|
||||||
myChart.resize();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,328 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">部门统计</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable v-model="listQuery.ssbmdm" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="chart-box">
|
|
||||||
<div class="text-box">
|
|
||||||
<div class="text-item" v-for="item in countAllLE" :key="item.name">
|
|
||||||
<span class="title">{{item.name}}:</span>
|
|
||||||
<span class="text-color">{{item.value}}</span>
|
|
||||||
<span class="dw">{{item.dw}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="charesBox">
|
|
||||||
<Pie :data="countAll"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格盒子 -->
|
|
||||||
<div class="table-box">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item label="时间段">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="timeRange"
|
|
||||||
@change="handleTime"
|
|
||||||
unlink-panels
|
|
||||||
type="daterange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
format="YYYY-M-D HH:mm:ss"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="50"/>
|
|
||||||
<el-table-column label="单位部门" prop="ssbm" align="center" show-overflow-tooltip />
|
|
||||||
<el-table-column label="巡逻小组" prop="xfxz" align="center"/>
|
|
||||||
<el-table-column label="巡逻人员" align="center" >
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{parseInt(row.fjsl+row.mjsl)}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="巡逻车辆" prop="jcsl" align="center" />
|
|
||||||
<el-table-column label="巡逻里程" prop="xflc" align="center" />
|
|
||||||
<el-table-column label="巡逻时长" prop="xfsc" align="center" show-overflow-tooltip />
|
|
||||||
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">详情</span>
|
|
||||||
<div><el-button size="small" @click="close">关闭</el-button></div>
|
|
||||||
</div>
|
|
||||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
|
||||||
<el-form-item label="单位部门" prop="name">
|
|
||||||
<el-input v-model="form.ssbm"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻小组" prop="bz1">
|
|
||||||
<el-input v-model="form.xfxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻民警" prop="bz2">
|
|
||||||
<el-input v-model="form.mjsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻辅警" prop="bz2">
|
|
||||||
<el-input v-model="form.fjsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻车辆" prop="bz3">
|
|
||||||
<el-input v-model="form.jcsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻里程" prop="bz4">
|
|
||||||
<el-input v-model="form.xflc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻时长（小时）" prop="bz5">
|
|
||||||
<el-input v-model="form.xfsc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import Pie from "./components/pie.vue";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted, reactive, watch } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const timeRange = ref([]) //
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
|
|
||||||
}); //搜索表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const orgHeight = ref();// 表格高度计算
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const elform = ref(null); //新增表单容器
|
|
||||||
//表单验证
|
|
||||||
const rules = ref({
|
|
||||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
|
||||||
});
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const countAllDefaultL = ref([])
|
|
||||||
const countAllLE = ref([
|
|
||||||
{name:'巡逻小组',type:'xfxz',value:0,dw:'个'},
|
|
||||||
{name:'巡逻民警',type:'mjsl',value:0,dw:'人'},
|
|
||||||
{name:'巡逻辅警',type:'fjsl',value:0,dw:'人'},
|
|
||||||
{name:'巡逻车辆',type:'jcsl',value:0,dw:'辆'},
|
|
||||||
{name:'巡逻里程',type:'xflc',value:0,dw:'KM'},
|
|
||||||
{name:'巡逻时长',type:'xfsc',value:0,dw:'小时'},
|
|
||||||
])
|
|
||||||
|
|
||||||
const countAllDefault = ref([])
|
|
||||||
const countAll = ref([
|
|
||||||
{name:'巡逻小组',type:'xfxz',value:0,dw:'个'},
|
|
||||||
{name:'巡逻民警',type:'mjsl',value:0,dw:'人'},
|
|
||||||
{name:'巡逻辅警',type:'fjsl',value:0,dw:'人'},
|
|
||||||
{name:'巡逻车辆',type:'jcsl',value:0,dw:'辆'},
|
|
||||||
{name:'巡逻里程',type:'xflc',value:0,dw:'KM'},
|
|
||||||
{name:'巡逻时长',type:'xfsc',value:0,dw:'小时'},
|
|
||||||
])
|
|
||||||
watch(
|
|
||||||
() => listQuery.value.ssbmdm,
|
|
||||||
(val) => {
|
|
||||||
if(val) {
|
|
||||||
getListData();
|
|
||||||
getDate() //获取全部
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
countAllDefault.value = JSON.parse(JSON.stringify(countAll.value))
|
|
||||||
countAllDefaultL.value = JSON.parse(JSON.stringify(countAllLE.value))
|
|
||||||
getListData();
|
|
||||||
getDate() //获取全部
|
|
||||||
tabHeightFn();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取全部数据
|
|
||||||
function getDate(){
|
|
||||||
let params = { ...listQuery.value,ssbmdm:listQuery.value.ssbmdm}
|
|
||||||
keyCount.value++
|
|
||||||
qcckPost(params,'/mosty-jmxf/tbQwXfbb/bmtjAll').then(res=>{
|
|
||||||
countAll.value = JSON.parse(JSON.stringify(countAllDefault.value))
|
|
||||||
countAllLE.value = JSON.parse(JSON.stringify(countAllDefaultL.value))
|
|
||||||
if(res){
|
|
||||||
let obj = JSON.parse(JSON.stringify(res))
|
|
||||||
countAllLE.value.forEach(item=>{
|
|
||||||
for(let key in obj){
|
|
||||||
if(key == item.type) {
|
|
||||||
item.value = obj[key];
|
|
||||||
if(key == 'xflc') item.value = (item.value/1000).toFixed(2);
|
|
||||||
if(key == 'xfsc') item.value = (item.value/3600).toFixed(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
countAll.value.forEach(item=>{
|
|
||||||
for(let key in res){
|
|
||||||
if(key == item.type) {
|
|
||||||
item.value = Number(res[key])
|
|
||||||
if(key == 'xflc') item.value = Number((item.value/1000).toFixed(2))
|
|
||||||
if(key == 'xfsc') item.value = Number((item.value/3600).toFixed(2))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//处理时间
|
|
||||||
function handleTime(val){
|
|
||||||
listQuery.value.kssj = val ? val[0] : '';
|
|
||||||
listQuery.value.jssj = val ? val[1] : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
getDate()
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = {pageCurrent: 1,pageSize: 10};
|
|
||||||
timeRange.value = []
|
|
||||||
getListData();
|
|
||||||
getDate()
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
loadingTable.value = true;
|
|
||||||
qcckPost(listQuery.value,'/mosty-jmxf/tbQwXfbb/bmtj').then(res=>{
|
|
||||||
tableData.value = res.records;
|
|
||||||
tableData.value.forEach(item=>{
|
|
||||||
item.xflc = item.xflc ? (parseInt(item.xflc)/1000).toFixed(2) : 0
|
|
||||||
item.xfsc = item.xfsc ? (parseInt(item.xfsc)/3600).toFixed(2) : 0
|
|
||||||
})
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
}).catch(()=>{ loadingTable.value = false; })
|
|
||||||
}
|
|
||||||
|
|
||||||
// pageSize 改变触发
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页码改变触发
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - 590;
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
window.onresize = function () { tabHeightFn(); };
|
|
||||||
};
|
|
||||||
|
|
||||||
//关闭弹窗
|
|
||||||
function close() {
|
|
||||||
dialogFormVisible.value = false;
|
|
||||||
form.value = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
form.value = JSON.parse(JSON.stringify(row));
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.charesBox{
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 180px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.title{
|
|
||||||
width: 75px;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.dw{
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,248 +0,0 @@
|
|||||||
<!-- 巡区统计 -->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="titleBoxs">
|
|
||||||
<div class="title">巡区统计</div>
|
|
||||||
<div class="btnBox">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-box-sun">
|
|
||||||
<!-- 组织机构盒子 -->
|
|
||||||
<div class="org-box">
|
|
||||||
<div class="org-content-box">
|
|
||||||
<div class="tree-box" :style="{ height: orgHeight + 'px' }">
|
|
||||||
<MOSTY.DepartmentTree
|
|
||||||
width="100%"
|
|
||||||
placeholder="管理部门ID"
|
|
||||||
clearable
|
|
||||||
filterable
|
|
||||||
v-model="listQuery.ssbmdm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-sun">
|
|
||||||
<div class="searchBox" ref="searchBox">
|
|
||||||
<el-form :model="listQuery" :inline="true">
|
|
||||||
<el-form-item>
|
|
||||||
<el-form-item label="时间段">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="timeRange"
|
|
||||||
@change="handleTime"
|
|
||||||
unlink-panels
|
|
||||||
type="daterange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="YYYY-M-D HH:mm:ss"
|
|
||||||
format="YYYY-M-D HH:mm:ss"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleFilter"> 查询 </el-button>
|
|
||||||
<el-button @click="reset"> 重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="tabBox">
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
row-key="id"
|
|
||||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
|
||||||
style="width: 100%"
|
|
||||||
:key="keyCount"
|
|
||||||
ref="dataTreeList"
|
|
||||||
:height="tableHeight"
|
|
||||||
v-loading="loadingTable"
|
|
||||||
element-loading-background="rgba(0,0,0,0.3)"
|
|
||||||
element-loading-text="数据加载中。。"
|
|
||||||
>
|
|
||||||
<el-table-column label="序号" type="index" align="center" width="80"/>
|
|
||||||
<el-table-column label="巡区名称" prop="fw_mc" align="center" show-overflow-tooltip />
|
|
||||||
<el-table-column label="下辖巡组" prop="xfxz" align="center" />
|
|
||||||
<el-table-column label="巡逻民警" prop="mjsl" align="center" />
|
|
||||||
<el-table-column label="巡逻辅警" prop="fjsl" align="center" />
|
|
||||||
<el-table-column label="巡逻车辆" prop="jcsl" align="center" />
|
|
||||||
<el-table-column label="巡逻里程(KM)" prop="xflc" align="center" />
|
|
||||||
<el-table-column label="巡逻时长(小时)" prop="xfsc" align="center" />
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="150px" >
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button @click="detail(row)" size="small">详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog" v-if="dialogFormVisible">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">详情</span>
|
|
||||||
<div> <el-button size="small" @click=" dialogFormVisible = false">关闭</el-button></div>
|
|
||||||
</div>
|
|
||||||
<el-form :model="form" :inline="true" label-position="top">
|
|
||||||
|
|
||||||
<el-form-item label="巡区名称" prop="bz1">
|
|
||||||
<el-input v-model="form.fw_mc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="下辖巡组" prop="bz2">
|
|
||||||
<el-input v-model="form.xfxz"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻民警" prop="bz3">
|
|
||||||
<el-input v-model="form.mjsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻辅警" prop="bz3">
|
|
||||||
<el-input v-model="form.fjsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻车辆" prop="bz4">
|
|
||||||
<el-input v-model="form.jcsl"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻里程（KM）" prop="bz5">
|
|
||||||
<el-input v-model="form.xflc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="巡逻时长（小时）" prop="bz6">
|
|
||||||
<el-input v-model="form.xfsc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { qcckPost, qcckGet, qcckFlvGet } from "@/api/qcckApi.js";
|
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
|
||||||
import { selectDeptPage } from "@/api/user-manage";
|
|
||||||
import { ref, getCurrentInstance, onMounted,watch } from "vue";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const timeRange = ref([])
|
|
||||||
const keyCount = ref(0); //tabel组件刷新值
|
|
||||||
const tableHeight = ref(); // 表格高度
|
|
||||||
const dialogFormVisible = ref(false);
|
|
||||||
const searchBox = ref(null); //搜索盒子
|
|
||||||
const form = ref({}); //新增表单
|
|
||||||
const tableData = ref([]); //表格数据
|
|
||||||
const total = ref(0);
|
|
||||||
const loadingTable = ref(true); //表格加载状态
|
|
||||||
const listQuery = ref({
|
|
||||||
pageCurrent: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}); //搜索表单
|
|
||||||
watch(
|
|
||||||
() => listQuery.value.ssbmdm,
|
|
||||||
(val) => {
|
|
||||||
if(val) getListData();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
onMounted(() => {
|
|
||||||
getListData();
|
|
||||||
tabHeightFn();
|
|
||||||
proxy.mittBus.on("mittFn", (data) => {
|
|
||||||
keyCount.value = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
//处理时间
|
|
||||||
function handleTime(val){
|
|
||||||
listQuery.value.kssj = val ? val[0] : '';
|
|
||||||
listQuery.value.jssj = val ? val[1] : '';
|
|
||||||
}
|
|
||||||
//点击查询
|
|
||||||
const handleFilter = () => {
|
|
||||||
listQuery.value.pageCurrent = 1;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
//点击重置
|
|
||||||
const reset = () => {
|
|
||||||
listQuery.value = { pageCurrent: 1, pageSize: 10 };
|
|
||||||
timeRange.value = []
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取列表
|
|
||||||
function getListData() {
|
|
||||||
loadingTable.value = true;
|
|
||||||
qcckPost(listQuery.value,'/mosty-jmxf/tbQwXfbb/xqtj').then(res=>{
|
|
||||||
tableData.value = res.records;
|
|
||||||
tableData.value.forEach(item=>{
|
|
||||||
item.xflc = item.xflc ? (item.xflc/1000).toFixed(2) : 0
|
|
||||||
item.xfsc = item.xfsc ? (item.xfsc/3600).toFixed(2) : 0
|
|
||||||
})
|
|
||||||
total.value = res.total;
|
|
||||||
loadingTable.value = false;
|
|
||||||
}).catch(()=>{ loadingTable.value = false; })
|
|
||||||
}
|
|
||||||
|
|
||||||
//修改
|
|
||||||
function detail(row) {
|
|
||||||
form.value = JSON.parse(JSON.stringify(row))
|
|
||||||
dialogFormVisible.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const orgHeight = ref();
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
|
||||||
orgHeight.value = window.innerHeight - 192;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* pageSize 改变触发
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (currentSize) => {
|
|
||||||
listQuery.value.pageSize = currentSize;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页码改变触发
|
|
||||||
*/
|
|
||||||
const handleCurrentChange = (currentPage) => {
|
|
||||||
listQuery.value.pageCurrent = currentPage;
|
|
||||||
getListData();
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "~@/assets/css/layout.scss";
|
|
||||||
@import "~@/assets/css/element-plus.scss";
|
|
||||||
.chart-box {
|
|
||||||
height: 280px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
height: 160px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-item {
|
|
||||||
width: 140px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.text-color {
|
|
||||||
color: rgb(181, 1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user