初始提交
This commit is contained in:
556
src/views/backOfficeSystem/basicsmanage/expertBase/index.vue
Normal file
556
src/views/backOfficeSystem/basicsmanage/expertBase/index.vue
Normal file
@ -0,0 +1,556 @@
|
||||
<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="专家姓名">
|
||||
<el-input
|
||||
v-model="listQuery.zjxm"
|
||||
placeholder="请输入专家姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="专家级别">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="listQuery.zjjb"
|
||||
placeholder="请选择专家级别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJJB"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家类型">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择专家类型"
|
||||
v-model="listQuery.zjlx"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.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="60" />
|
||||
<el-table-column
|
||||
sortable
|
||||
label="专家姓名"
|
||||
prop="zjxm"
|
||||
align="center"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column label="工作单位" prop="gzdw" align="center" />
|
||||
<el-table-column label="联系电话" prop="lxdh" align="center" />
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="当前职位"
|
||||
prop="dqzw"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="专家级别"
|
||||
prop="zjjb"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<dict-tag
|
||||
:options="D_ZDY_ZJJB"
|
||||
:value="row.zjjb"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="专家类型"
|
||||
prop="zjlx"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.zjlx">
|
||||
<dict-tag
|
||||
:options="D_ZDY_ZJLX"
|
||||
:value="JSON.parse(row.zjlx)"
|
||||
:tag="true"
|
||||
></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="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="zjly">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="form.zjly"
|
||||
placeholder="请选择专家来源"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJGL"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家姓名" prop="zjxm">
|
||||
<el-input
|
||||
@click="openUser"
|
||||
v-model="form.zjxm"
|
||||
placeholder="请输入专家姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家身份证号" prop="zjsfzh">
|
||||
<el-input
|
||||
@change="getBirthdayFromIdCard(form.zjsfzh)"
|
||||
v-model="form.zjsfzh"
|
||||
placeholder="请输入身份证号"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="csrq">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.csrq"
|
||||
type="date"
|
||||
placeholder="请选择出生日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="mzdm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model="form.mzdm"
|
||||
placeholder="请选择民族"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="籍贯" prop="jgdm">
|
||||
<el-input v-model="form.jg" placeholder="请输入籍贯"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="家庭住址" prop="jtzz">
|
||||
<el-input
|
||||
v-model="form.jtzz"
|
||||
placeholder="请输入家庭住址"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input
|
||||
v-model="form.lxdh"
|
||||
placeholder="请输入联系电话"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作单位" prop="gzdw">
|
||||
<el-input
|
||||
v-model="form.gzdw"
|
||||
placeholder="请输入工作单位"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前职位" prop="dqzw">
|
||||
<el-input
|
||||
v-model="form.dqzw"
|
||||
placeholder="请输入当前职位"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家级别" prop="zjjb">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="form.zjjb"
|
||||
placeholder="请选择专家级别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJJB"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专家类型" prop="zjlx">
|
||||
<el-select
|
||||
multiple
|
||||
style="width: 100%"
|
||||
placeholder="请选择专家类型"
|
||||
v-model="form.zjlx"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ZJLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="专家简介" prop="zjjc">
|
||||
<el-input
|
||||
v-model="form.zjjc"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="荣誉墙" prop="fjdz">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="form.fjdz" />
|
||||
</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>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisible"
|
||||
@choosedUsers="hanlderChoose"
|
||||
></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 专家库管理 -->
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import {
|
||||
getTbJcglZjk,
|
||||
addTbJcglZjk,
|
||||
putTbJcglZjk,
|
||||
infoTbJcglZjk,
|
||||
delTbJcglZjk
|
||||
} from "@/api/basicsmanage/expertBase.js";
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
import { get } from "ol/proj";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_ZJGL, D_ZDY_ZJJB, D_ZDY_ZJLX } = proxy.$dict(
|
||||
"D_ZDY_ZJGL",
|
||||
"D_ZDY_ZJJB",
|
||||
"D_ZDY_ZJLX"
|
||||
);
|
||||
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 chooseUserVisible = ref(false); //用户弹窗
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
zjly: [{ required: true, message: "请选择专家来源", trigger: "change" }],
|
||||
zjxm: [{ required: true, message: "请输入专家姓名", trigger: "change" }],
|
||||
...rule.identityCardRule(
|
||||
{
|
||||
require: true,
|
||||
validator: true
|
||||
},
|
||||
"zjsfzh"
|
||||
) //身份证校验
|
||||
});
|
||||
//身份证号计算出生日期
|
||||
function getBirthdayFromIdCard(idCard) {
|
||||
var birthday = "";
|
||||
if (idCard != null && idCard != "") {
|
||||
if (idCard.length == 15) {
|
||||
birthday = "19" + idCard.substr(6, 6);
|
||||
} else if (idCard.length == 18) {
|
||||
birthday = idCard.substr(6, 8);
|
||||
}
|
||||
|
||||
birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
|
||||
}
|
||||
form.value.csrq = birthday;
|
||||
form.value.jgdm = idCard.substr(0, 6);
|
||||
// return birthday;
|
||||
}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getTbJcglZjk(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//打开用户弹窗
|
||||
function openUser() {
|
||||
if (form.value.zjly == "1") {
|
||||
chooseUserVisible.value = true;
|
||||
}
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.zjxm = user.userName;
|
||||
form.value.zjsfzh = user.idEntityCard;
|
||||
form.value.lxdh = user.mobile;
|
||||
form.value.gzdw = user.deptName;
|
||||
form.value.dqzw = user.positionName;
|
||||
form.value.mzdm = user.nation;
|
||||
getBirthdayFromIdCard(user.idEntityCard);
|
||||
};
|
||||
//打开新增弹窗
|
||||
function add() {
|
||||
title.value = '新增专家'
|
||||
chackAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(form.value));
|
||||
params.zjlx = JSON.stringify(params.zjlx);
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addTbJcglZjk(params).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putTbJcglZjk(params).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
chackAdd.value = false;
|
||||
title.value = "修改专家信息";
|
||||
infoTbJcglZjk(row.id).then((res) => {
|
||||
form.value = res;
|
||||
form.value.zjlx = JSON.parse(res.zjlx);
|
||||
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(() => {
|
||||
delTbJcglZjk([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglZjk(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 - 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";
|
||||
</style>
|
||||
46
src/views/backOfficeSystem/basicsmanage/fzyc/index.vue
Normal file
46
src/views/backOfficeSystem/basicsmanage/fzyc/index.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="titleBox">
|
||||
<div class="title">犯罪预测管理</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<!-- 附件： -->
|
||||
<!-- <el-button type="primary" @click="DownloadFn">下载</el-button> -->
|
||||
<el-upload class="avatar-uploader" :headers="headers" action="/mosty-api/mosty-yjzl/tbFzyc/importData"
|
||||
:show-file-list="false" :file-list="fileList" :on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload" list-type="picture-card">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Axios from 'axios';
|
||||
import { download } from "@/utils/request";
|
||||
import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
let token = localStorage.getItem('token') // 要保证取到
|
||||
const fileList = ref([]);
|
||||
const headers = ref({ token })
|
||||
const beforeAvatarUpload = (file) => {
|
||||
}
|
||||
const DownloadFn = () => {
|
||||
download(
|
||||
"/mosty-api/mosty-yjzl/tbFzyc/exportData",
|
||||
{},
|
||||
`犯罪预测网格导出.xlsx`,
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
text-align: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
378
src/views/backOfficeSystem/basicsmanage/patrol-area/index.vue
Normal file
378
src/views/backOfficeSystem/basicsmanage/patrol-area/index.vue
Normal file
@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防区管理</div>
|
||||
<div class="btnBox">
|
||||
<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="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="巡防区名称">
|
||||
<el-input v-model="listQuery.xfqMc" placeholder="请输入巡防区名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</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" @selection-change="handleSelectionChange"
|
||||
: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="selection" width="40" align="center" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="xfqMc" show-overflow-tooltip align="center" label="巡防区名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip label="所属部门" align="center"></el-table-column>
|
||||
<el-table-column prop="xfqDj" label="巡防区等级" align="center" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XFQDJ" :value="row.xfqDj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="xfqLx" label="巡防区类型" align="center" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XQLX" :value="row.xfqLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="140px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="addEdit('edit', row.id)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" 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 v-if="dialogFormVisible" class="dialog">
|
||||
<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 style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable :placeholder="form.ssbm" filterable v-model="form.ssbmdm"
|
||||
@getDepValue="getDepValue" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqMc" label="巡防区名称">
|
||||
<el-input v-model="form.xfqMc" placeholder="请输入巡防区名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqLx" label="巡防区类型">
|
||||
<el-select v-model="form.xfqLx" placeholder="请选择巡防区类型">
|
||||
<el-option v-for="dict in D_BZ_XQLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqSx" label="巡防区属性">
|
||||
<el-select v-model="form.xfqSx" placeholder="请选择巡防区属性">
|
||||
<el-option v-for="dict in D_BZ_XFQSX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqDJ" label="巡防区等级">
|
||||
<el-select v-model="form.xfqDj" placeholder="请选择巡防区等级">
|
||||
<el-option v-for="dict in D_BZ_XFQDJ" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqFzr" label="巡防区负责人">
|
||||
<el-input @click="choosePoliceVisible = true" v-model="form.xfqFzr" placeholder="请选择巡防区负责人"
|
||||
style="width: 100%" :suffix-icon="ArrowDown" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xfqFzrSfz" label="负责人身份证号">
|
||||
<el-input v-model="form.xfqFzrSfz" placeholder="请输入负责人身份证号" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="pgis" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.pgis" @change="xfqChange" clearable style="width: 90%" />
|
||||
<el-button @click="chackLat">绘制区域</el-button>
|
||||
<el-color-picker v-model="form.color"></el-color-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ChoosePolice v-model="choosePoliceVisible" PoliceType="MJ" :Single="true" @choosedPolice="choosedPolice" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from "vue";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { getXfqy, addXfqy, putXfqy, infoXfqy, delXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import { spliceArray, spliceString } from '@/utils/auth.js'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChoosePolice from "@/components/MyComponents/choosePolice";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XFQDJ, D_BZ_XQLX,D_BZ_XFQSX } = proxy.$dict("D_BZ_XFQDJ", "D_BZ_XQLX","D_BZ_XFQSX");
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: '',
|
||||
xfqMc: ''
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const loadingTable = ref(true);
|
||||
const choosePoliceVisible = ref(false); //民警辅警弹窗
|
||||
const loading = ref(false);
|
||||
const title = ref("新增巡防区");
|
||||
const drawData = reactive({
|
||||
pgis: null
|
||||
});
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const formDefault = ref({})
|
||||
//表单数据
|
||||
const form = ref({
|
||||
xfqMc: "",
|
||||
gljg: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
hzfw: "",
|
||||
color: '#409eff'
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
xfqMc: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }]
|
||||
});
|
||||
const elform = ref(null);
|
||||
const listQueryDefault = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value))
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "polygon") form.value.pgis = res.coord[0];
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString")
|
||||
});
|
||||
|
||||
// 查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getXfqy(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 新增巡防区域 - 编辑
|
||||
function addEdit(type, id) {
|
||||
dialogFormVisible.value = true;
|
||||
if (id) {
|
||||
title.value = "修改巡防区";
|
||||
drawData.pgis = [];
|
||||
infoXfqy(id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.pgis.length > 0) {
|
||||
setTimeout(() => {
|
||||
let obj = { position: [res.pgis], text: res.xfqMc, id: res.id }
|
||||
emitter.emit("echoPlane", { coords: [obj], color: res.color, linecolor: res.color, flag: "qclk", type: 'polygon' });
|
||||
emitter.emit("setMapCenter", { location: res.pgis[0], zoomLevel: 12 });
|
||||
}, 500)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
title.value = "新增巡防区";
|
||||
drawData.pgis = null;
|
||||
}
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map(v => { return v.id });
|
||||
};
|
||||
|
||||
// 获取部门类型
|
||||
function getDepValue(val) {
|
||||
form.value.xfbmlx = val ? val.orgBizType : ''
|
||||
}
|
||||
|
||||
// 单个删除
|
||||
function delDictItem(id) {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
delXfqy([id]).then((res) => {
|
||||
proxy.$message({ message: "删除成功", type: "success" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
delXfqy(ids.value).then((res) => {
|
||||
proxy.$message({ message: "删除成功", type: "success" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false
|
||||
loading.value = true;
|
||||
if (title.value == "新增巡防区") {
|
||||
addXfqy(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
close()
|
||||
loading.value = false;
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
} else {
|
||||
putXfqy(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
close()
|
||||
loading.value = false;
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value))
|
||||
}
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//负责人
|
||||
function choosedPolice(police) {
|
||||
form.value.xfqFzrId = police[0].ryid;
|
||||
form.value.xfqFzrSfz = police[0].sfzh;
|
||||
form.value.xfqFzr = police[0].xm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
emitter.emit("deletePointArea", 'qclk');
|
||||
emitter.emit("drawShape", { type: "polygon", flag: "qc", isclear: true });
|
||||
form.value.pgis = "";
|
||||
}
|
||||
// 输入框地图回显
|
||||
function xfqChange() {
|
||||
if (form.value.pgis) {
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
let arr = form.value.pgis.split(",");
|
||||
form.value.pgis = spliceArray(arr);
|
||||
let xfq = spliceString(form.value.pgis);
|
||||
setTimeout(() => {
|
||||
emitter.emit("polygonFigure", {
|
||||
coords: [xfq],
|
||||
flag: "xfq",
|
||||
isclear: true
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: form.value.pgis[0],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,633 @@
|
||||
<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.ssbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="必巡点名称">
|
||||
<el-input v-model="listQuery.bxdMc" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属巡防区域">
|
||||
<el-select style="width: 100%" v-model="listQuery.ssXfqyId">
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="必巡点类型">
|
||||
<el-select v-model="listQuery.bxdLx" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="必巡点来源">
|
||||
<el-select v-model="listQuery.bxdlydm" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLYDM"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="listQuery.xtSjzt" placeholder="请选择" clearable>
|
||||
<el-option label="注销" value="0"></el-option>
|
||||
<el-option label="正常" value="1"></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"
|
||||
@selection-change="handleSelectionChange"
|
||||
: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
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="bxdMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="必巡点名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxdlydm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="必巡点来源"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLYDM" :value="row.bxdlydm" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="bxdLx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="必巡点类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLX" :value="row.bxdLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssXfqyId"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属巡防区域"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="xfqyList" :value="row.ssXfqyId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtSjzt"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="数据状态"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.xtSjzt == 0" style="background:red;padding:2px 4px;border-radius:2px;">注销</span>
|
||||
<span v-if="row.xtSjzt == 1" style="background:green;padding:2px 4px;border-radius:2px;">正常</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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 v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
:loading="btnLoading"
|
||||
>保存</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 style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdMc" label="必巡点名称">
|
||||
<el-input
|
||||
v-model="form.bxdMc"
|
||||
placeholder="请填写必巡点名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdLx" label="必巡点类型">
|
||||
<el-select v-model="form.bxdLx" filterable style="width: 100%" placeholder="请选择必巡点类型">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxdLx" label="必巡点来源">
|
||||
<el-select v-model="form.bxdlydm" filterable style="width: 100%" placeholder="请选择必巡点来源">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLYDM"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
prop="ssXfqyId"
|
||||
label="必巡点所属巡防区域"
|
||||
>
|
||||
<el-select style="width: 100%" v-model="form.ssXfqyId" placeholder="请选择必巡点所属巡防区域">
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jd" label="选择必巡点" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.jd" @change="jdChange" clearable style="width: 45%" placeholder="经度" />
|
||||
<el-input v-model="form.wd" @change="wdChange" clearable style="width: 45%" placeholder="纬度" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getBxd,
|
||||
addBxd,
|
||||
putBxd,
|
||||
infoBxd,
|
||||
delBxd
|
||||
} from "@/api/basicsmanage/mandatoryPatrol.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getJzList } from "@/api/basicsmanage/servicejz.js";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BXDLX, D_BZ_PBLX,D_BZ_BXDLYDM } = proxy.$dict("D_BZ_BXDLX", "D_BZ_PBLX",'D_BZ_BXDLYDM');
|
||||
const cascader = ref(null);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const loadingTable = ref(true);
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const mapRef = ref(null);
|
||||
const depList = ref([]); //部门数据
|
||||
const xfqyList = ref([]);
|
||||
const checkAdd = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增必巡点");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bxdMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输必巡点名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bxdLx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择必巡点类型",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择或填写必巡点",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//执勤时长验证
|
||||
function checkZqsc(rule, value, callback) {
|
||||
if (value <= 0 || value >= 1000) {
|
||||
return callback(new Error("请选择正确的时间范围"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
form.value.jd = "";
|
||||
form.value.wd = "";
|
||||
emitter.emit("drawShape", { type: "point", flag: "bxd_ht" ,isclear:true});
|
||||
}
|
||||
|
||||
function getLngLat(coordinates) {
|
||||
form.value.jd = coordinates[0];
|
||||
form.value.wd = coordinates[1];
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function wdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZqsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let a = new Date(form.value.jssj).getTime();
|
||||
let b = new Date(form.value.kssj).getTime();
|
||||
form.value.zqsc = Math.floor((a - b) / 60000);
|
||||
}
|
||||
}
|
||||
//新增选择部门
|
||||
function addHandleChange(e) {
|
||||
const info = cascader.value.getCheckedNodes()[0];
|
||||
form.value.ssbm = info.label;
|
||||
form.value.ssbmdm = info.value;
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxd(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
resetForm();
|
||||
checkAdd.value = true;
|
||||
title.value = "新增必巡点";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoBxd(row.id).then((res) => {
|
||||
checkAdd.value = false;
|
||||
form.value = res;
|
||||
title.value = "修改必巡点";
|
||||
dialogFormVisible.value = true;
|
||||
if (row.jd && row.wd) {
|
||||
setTimeout(()=>{
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [res],
|
||||
icon: require("@/assets/point/xfq.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
emitter.emit("setMapCenter", { location: [res.jd,res.wd], zoomLevel: 13 });
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxd([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getBxd(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.ssbmid = form.value.ssbmdm
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
if (!checkAdd.value) {
|
||||
putBxd(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
let params = form.value;
|
||||
params.yxq = "2099-12-31";
|
||||
addBxd(params).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
xfqyList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.xfqMc };
|
||||
});
|
||||
});
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,631 @@
|
||||
<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.bxxMc" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属巡防区域">
|
||||
<el-select style="width: 100%" v-model="listQuery.ssXfqyId">
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="必巡线类型">
|
||||
<el-select v-model="listQuery.bxxLx" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.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"
|
||||
@selection-change="handleSelectionChange"
|
||||
: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="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxxMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="必巡线名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jzId"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="责任警组"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="jzList" :value="row.jzId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssXfqyId"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属巡防区域"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="xfqyList" :value="row.ssXfqyId" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxxLx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="必巡线类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXDLX" :value="row.bxxLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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 v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
:loading="btnLoading"
|
||||
>保存</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 style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxxMc" label="必巡线名称">
|
||||
<el-input
|
||||
v-model="form.bxxMc"
|
||||
placeholder="请填写必巡线名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="bxxLx" label="必巡线类型">
|
||||
<el-select
|
||||
v-model="form.bxxLx"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
placeholder="请选择必巡线类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_BXDLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="jzId" label="必巡线责任警组">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="form.jzId"
|
||||
placeholder="请选择必巡线责任警组"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in jzList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 48%"
|
||||
prop="ssXfqyId"
|
||||
label="必巡线所属巡防区域"
|
||||
>
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="form.ssXfqyId"
|
||||
placeholder="请选择必巡线所属巡防区域"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in xfqyList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zb" label="选择必巡线" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input
|
||||
v-model="form.zb"
|
||||
@change="bxxChange"
|
||||
clearable
|
||||
style="flex: 1"
|
||||
/>
|
||||
<el-button @click="chackLat">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getBxx,
|
||||
addBxx,
|
||||
putBxx,
|
||||
infoBxx,
|
||||
delBxx
|
||||
} from "@/api/basicsmanage/patrolLine.js";
|
||||
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
|
||||
import { getJzList } from "@/api/basicsmanage/servicejz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
inject
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_BXDLX, D_BZ_PBLX } = proxy.$dict("D_BZ_BXDLX", "D_BZ_PBLX");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const xfqyList = ref([]);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const depList = ref([]); //部门数据
|
||||
const tableData = ref([{ bcname: "123", kssj: "2022-05-22 18:00:00" }]); //表格数据
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const drawData = reactive({
|
||||
zb: null
|
||||
});
|
||||
const title = ref("新增必巡线");
|
||||
const loadingTable = ref(true);
|
||||
const jzList = ref([]); // 警组下拉数据
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const mapRef = ref(null);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const checkAdd = ref(false);
|
||||
const cascader = ref(null);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const reload = inject("reload");
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bcName: ""
|
||||
});
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bxxMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输必巡线名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
jzId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择必巡线责任警组",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
ssXfqyId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择必巡线所属巡防区域",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
bxxLx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择必巡线类型",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
zb: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择或填写必巡线",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 必巡线回显
|
||||
function bxxChange() {
|
||||
if (form.value.zb) {
|
||||
let arr = form.value.zb.split(",");
|
||||
form.value.zb = spliceArray(arr);
|
||||
setTimeout(() => {
|
||||
let arrStr = form.value.zb.join(',')
|
||||
emitter.emit("drawLine", arrStr);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//执勤时长验证
|
||||
function checkZqsc(rule, value, callback) {
|
||||
if (value <= 0 || value >= 1000) {
|
||||
return callback(new Error("请选择正确的时间范围"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
function getLngLat(coordinates) {
|
||||
form.value.zb = coordinates.overlay.getPath().map((item) => {
|
||||
return [item.lng, item.lat];
|
||||
});
|
||||
}
|
||||
|
||||
//搜 索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
function chackLat() {
|
||||
emitter.emit("drawShape", {type: "line",flag: "xl-route",isclear:true });
|
||||
form.value.zb = "";
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZqsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let a = new Date(form.value.jssj).getTime();
|
||||
let b = new Date(form.value.kssj).getTime();
|
||||
form.value.zqsc = Math.floor((a - b) / 60000);
|
||||
}
|
||||
}
|
||||
//新增选择部门
|
||||
function addHandleChange(e) {
|
||||
const info = cascader.value.getCheckedNodes()[0];
|
||||
form.value.ssbm = info.label;
|
||||
form.value.ssbmdm = info.value;
|
||||
}
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxx(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
drawData.zb = null;
|
||||
resetForm();
|
||||
checkAdd.value = true;
|
||||
title.value = "新增必巡线";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
drawData.zb = [];
|
||||
infoBxx(row.id).then((res) => {
|
||||
form.value = res;
|
||||
checkAdd.value = false;
|
||||
title.value = "修改必巡线";
|
||||
dialogFormVisible.value = true;
|
||||
if (res.zb.length > 0) {
|
||||
setTimeout(() => {
|
||||
let obj = { coords:[res.zb], text:res.bxxMc }
|
||||
console.log(obj);
|
||||
emitter.emit("echoLine", { coords: [obj], flag: "xl-route", type:'solid', isclear: true });
|
||||
let len = parseInt(res.zb.length/2)
|
||||
emitter.emit("setMapCenter", { location: res.zb[len], zoomLevel: 10 });
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delBxx([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getBxx(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
// formReset();
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.ssbmdm = form.value.ssbmdm;
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
if (!checkAdd.value) {
|
||||
putBxx(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addBxx(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getJzList({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
jzList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.jzMc };
|
||||
});
|
||||
});
|
||||
getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
|
||||
xfqyList.value = res.records.map((item) => {
|
||||
return { value: item.id, label: item.xfqMc };
|
||||
});
|
||||
});
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
|
||||
emitter.on("coordString", (res) => {
|
||||
if(res.type == 'line') form.value.zb = res.coord
|
||||
});
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
268
src/views/backOfficeSystem/basicsmanage/patrols/index.vue
Normal file
268
src/views/backOfficeSystem/basicsmanage/patrols/index.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡访管理</div>
|
||||
<div class="btnBox">
|
||||
<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 :disabled="ids.length == 0" @click="handleDelete('')" 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-input v-model="listQuery.shm" placeholder="请输入商户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访人姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入巡访人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</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"
|
||||
@selection-change="handleSelectionChange"
|
||||
: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="数据加载中。。"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号"/>
|
||||
<el-table-column prop="shm" align="center" label="商户名" />
|
||||
<el-table-column prop="xm" align="center" label="巡访人姓名" />
|
||||
<el-table-column prop="sfzh" align="center" label="巡访人身份证" />
|
||||
<el-table-column prop="ssbm" align="center" label="所属部门" />
|
||||
<el-table-column prop="type" align="center" label="巡访类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_XFLX"
|
||||
:value="row.type"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lxxl" align="center" label="商户细类">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_SHLX"
|
||||
:value="row.lxxl"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="addEdit('edit',row.id)" size="small">修改</el-button>
|
||||
<el-button @click="handleDelete(row.id)" type="danger" 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 v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="btnLoading" >保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="shm" label="商户名">
|
||||
<el-input v-model="form.shm" placeholder="请输入商户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="巡访部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xm" label="巡访人姓名">
|
||||
<el-input v-model="form.xm" placeholder="请输入巡访人姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfzh" label="巡访人身份证">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入巡访人身份证"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="type" label="类型">
|
||||
<el-select v-model="form.type" placeholder="请选择类型" clearable>
|
||||
<el-option v-for="item in D_BZ_XFLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxxl" label="商户细类">
|
||||
<el-select v-model="form.lxxl" placeholder="请选择商户细类" clearable>
|
||||
<el-option v-for="item in D_BZ_SHLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" style="width: 94%">
|
||||
<el-input v-model="form.xxdz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet,qcckPut,qcckDelete } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SHLX, D_BZ_XFLX } = proxy.$dict("D_BZ_SHLX", "D_BZ_XFLX");
|
||||
const tableData = ref([]); //表格数据
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增必巡线");
|
||||
const loadingTable = ref(false);
|
||||
const listQuery = ref({ pageCurrent: 1, pageSize: 20 }); //搜索数据
|
||||
const elform = ref(null);
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const form = ref({}); //表单数据
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
shm: [{ required: true, message: "请输请输入商户名", trigger: "blur" }],
|
||||
ssbmdm: [{ required: true, message: "请选择巡访部门", trigger: "change" }],
|
||||
xm: [{ required: true, message: "请输入巡访人姓名", trigger: "blur" }],
|
||||
type: [{ required: true, message: "请选择商户类型", trigger: "change" }],
|
||||
lxxl: [{ required: true, message: "请选择商户细类", trigger: "change" }],
|
||||
...rule.identityCardRule( {require: true,trigger: ['blur','change'], message: "请输入身份证号",validator: true},"sfzh"), //身份证校验
|
||||
});
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => { keyCount.value = data; });
|
||||
tabHeightFn();
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
});
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
}
|
||||
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value,'/mosty-jcgl/tbJcglXf').then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
//新增
|
||||
function addEdit(type, id) {
|
||||
dialogFormVisible.value = true;
|
||||
if (type == "add") {
|
||||
title.value = "新增巡访管理";
|
||||
} else {
|
||||
title.value = "修改巡访管理";
|
||||
qcckGet({},'/mosty-jcgl//tbJcglXf/'+id).then((res) => {
|
||||
form.value = JSON.parse(JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//批量数据选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
let list = val || [];
|
||||
ids.value = list.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
};
|
||||
|
||||
//批量删除-单个删除
|
||||
function handleDelete(id) {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
let delIds = id ? [id] : ids.value;
|
||||
qcckDelete(delIds,'/mosty-jcgl/tbJcglXf/bacth').then(res=>{
|
||||
proxy.$message({ message: "删除成功", type: "success" });
|
||||
handleFilter();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function closeDialog() {
|
||||
dialogFormVisible.value = false;
|
||||
btnLoading.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
if (title.value == "修改巡访管理") {
|
||||
qcckPut(form.value,'/mosty-jcgl//tbJcglXf').then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(()=>{ btnLoading.value = false; });
|
||||
} else {
|
||||
qcckPost(form.value,'/mosty-jcgl/tbJcglXf').then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(()=>{ btnLoading.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 - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -0,0 +1,240 @@
|
||||
<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 label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzLx" label="检查站类型">
|
||||
<el-select v-model="listQuery.jwzLx" placeholder="请选择检查站类型" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xjSj" label="建立时间">
|
||||
<el-date-picker v-model="listQuery.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzMc" label="检查站名称">
|
||||
<el-input v-model="listQuery.jwzMc" placeholder="请输入检查站名称" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzjgdm" label="检查站机构代码">
|
||||
<el-input v-model="listQuery.jwzjgdm" placeholder="请输入检查站机构代码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jwzDz" label="检查站详细地址">
|
||||
<el-input v-model="listQuery.jwzDz" placeholder="请输入检查站详细地址" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm" label="负责人">
|
||||
<el-input @click="mjVisible = true" v-model="listQuery.fzrXm" placeholder="请选择负责人姓名" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh" label="负责人身份证号码">
|
||||
<el-input v-model="listQuery.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="snwsp" label="室内外视频">
|
||||
<el-input v-model="listQuery.snwsp" placeholder="请输入" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="upload" label="图片上传">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="listQuery.upload" ></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.jd" clearable style="width: 45%"/>
|
||||
<el-input v-model="listQuery.wd" clearable style="width: 45%"/>
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="one">
|
||||
<div class="map"><GdMap v-if="dialogFormVisible" /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits, onMounted} from 'vue';
|
||||
const props = defineProps({
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
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({ fzrSfzh:''}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
fzrSfzh: [
|
||||
{ required: true, message: "请输入身份证", trigger: "blur" },
|
||||
{ trigger: "change", validator: validateIdentity()}
|
||||
],
|
||||
fzrXm: [{required: true, message: "请输入负责人姓名"}],
|
||||
jwzLx: [{ required: true, message: "请选择检查站类型"}],
|
||||
ssbmdm: [{required: true, message: "请选择所属部门" }],
|
||||
xjSj: [{ required: true, message: "请选择建立时间" }],
|
||||
jwzMc: [{ required: true, message: "请输入检查站名称"}]
|
||||
})
|
||||
|
||||
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
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(id){
|
||||
title.value = type == 'edit'?'修改检查站管理':'检查站管理详情'
|
||||
getDataById(id) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增检查站管理'
|
||||
}
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (id)=>{
|
||||
qcckGet({},'/mosty-jcgl/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-jcgl/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(listQuery.value,'/mosty-jcgl/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { fzrSfzh :''}
|
||||
dialogForm.value = false
|
||||
}
|
||||
|
||||
//获取经纬度 - 圈层范围清空
|
||||
function chackLat(type) {
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
emitter.emit("deletePointArea", "jcz_ht");
|
||||
emitter.emit("drawShape", { type: "point", flag: "jcz_ht" ,isclear:true});
|
||||
}
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
</style>
|
||||
443
src/views/backOfficeSystem/basicsmanage/police-station/index.vue
Normal file
443
src/views/backOfficeSystem/basicsmanage/police-station/index.vue
Normal file
@ -0,0 +1,443 @@
|
||||
<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="deletList" :disabled="multipleSelection.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" class="mosty-from-wrap">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检查站类型">
|
||||
<el-select filterable v-model="listQuery.jwzLx" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="listQuery.fzrXm" placeholder="请输入负责人" clearable/>
|
||||
</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 }"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" width="40" />
|
||||
<el-table-column type="index" align="center" width="60" label="序号"/>
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip label="所属部门" align="center"/>
|
||||
<el-table-column prop="jwzLx" align="center" width="300" label="检查站类型" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_JWZLX" :value="row.jwzLx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jwzMc" label="检查站名称" width="200" align="center" />
|
||||
<el-table-column prop="fzrXm" label="负责人" align="center" />
|
||||
<el-table-column prop="xjSj" label="建立时间" align="center"/>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="280">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.jwzId)" type="danger" 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.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="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="loading">保存</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"
|
||||
class="mosty-from-wrap">
|
||||
<el-form-item class="two" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
placeholder="请选择部门"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
clearable
|
||||
filterable
|
||||
:options="depList"
|
||||
:props="props"
|
||||
v-model="form.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzLx" label="检查站类型">
|
||||
<el-select v-model="form.jwzLx" placeholder="请选择检查站类型" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="xjSj" label="建立时间">
|
||||
<el-date-picker v-model="form.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzMc" label="检查站名称">
|
||||
<el-input v-model="form.jwzMc" placeholder="请输入检查站名称" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzjgdm" label="检查站机构代码">
|
||||
<el-input v-model="form.jwzjgdm" placeholder="请输入检查站机构代码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="jwzDz" label="检查站详细地址">
|
||||
<el-input v-model="form.jwzDz" placeholder="请输入检查站详细地址" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="fzrXm" label="负责人">
|
||||
<el-input @click="mjVisible = true" v-model="form.fzrXm" placeholder="请选择负责人姓名" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="fzrSfzh" label="负责人身份证号码">
|
||||
<el-input v-model="form.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="two" prop="snwsp" label="室内外视频">
|
||||
<el-input v-model="form.snwsp" placeholder="请输入" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="upload" label="图片上传">
|
||||
<MOSTY.Upload width="100%" :limit="2" v-model="form.upload" ></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item class="one" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input @change="jdChange" v-model="form.jd" clearable style="width: 45%"/>
|
||||
<el-input @change="wdChange" v-model="form.wd" clearable style="width: 45%"/>
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="one">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import { getPoliceStationList, deletePoliceStation, addPoliceStation, updatePoliceStation } from "@/api/basicsmanage/policeStation.js";
|
||||
//获取字典数据
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JWZLX } = proxy.$dict("D_BZ_JWZLX");
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const map = ref(null);
|
||||
const loadingTable = ref(true);
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const mapRef = ref(null); // 地图
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const chackipt = ref(true);
|
||||
const depList = ref([]); //部门数据
|
||||
const loading = ref(false); //按钮是否为加载状态
|
||||
const modalKey = ref(0);
|
||||
const title = ref("新增检查站");
|
||||
const ssbmIds = ref([]); //级联选择器回显ID
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const cascader = ref(null); //部门选择器
|
||||
//部门组件配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const listQuery = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
jwzLx: "",
|
||||
jwzMc: "",
|
||||
ssbmdm: "",
|
||||
fzrXm: ""
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
xjSj: "",
|
||||
jwzMc: "",
|
||||
jwzLx: "",
|
||||
jwzDz: "",
|
||||
jwzjgdm: "",
|
||||
fzrXm: "",
|
||||
fzrSfzh: "",
|
||||
hzfw: "",
|
||||
ssbmdm: ssbmIds.value[ssbmIds.value - 1],
|
||||
ssbm: ""
|
||||
});
|
||||
const elform = ref(null);
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jd: [{ required: true, message: "请选择经纬度" }],
|
||||
fzrSfzh: [{required: true, message: "请输入负责人身份证号码" }],
|
||||
fzrXm: [{required: true, message: "请输入负责人姓名"}],
|
||||
jwzLx: [{ required: true, message: "请选择检查站类型"}],
|
||||
ssbmdm: [{required: true, message: "请选择所属部门" }],
|
||||
xjSj: [{ required: true, message: "请选择建立时间" }],
|
||||
jwzMc: [{ required: true, message: "请输入检查站名称"}]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
//获取部门信息
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("coordString", (res) => {
|
||||
if(res.type == 'point'){
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
};
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
|
||||
//获取经纬度
|
||||
function chackLat() {
|
||||
emitter.emit("drawShape", { type: "point", flag: "jcz_ht",isclear:true});
|
||||
form.value.jd = "";
|
||||
form.value.wd = "";
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "jwz");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/jwz.png"),
|
||||
flag: "jwz"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function wdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "jwz");
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [form.value],
|
||||
icon: require("@/assets/point/jwz.png"),
|
||||
flag: "jwz"
|
||||
});
|
||||
}, 1000);
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 14
|
||||
});
|
||||
}
|
||||
}
|
||||
function add() {
|
||||
chackipt.value = false;
|
||||
title.value = "新增检查站";
|
||||
dialogFormVisible.value = true;
|
||||
chackadd.value = false;
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
};
|
||||
//选择民警
|
||||
function hanlderChooseMj(arr) {
|
||||
const data = arr[0];
|
||||
form.value.fzrXm = data.xm;
|
||||
form.value.fzrSfzh = data.sfzh;
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getPoliceStationList(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = { pageNo: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.jwzId);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
deletePoliceStation(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => { proxy.$message.info("已取消"); });
|
||||
};
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//详情
|
||||
const update = (row, view = "put") => {
|
||||
chackipt.value = true;
|
||||
chackadd.value = true;
|
||||
title.value = view == "view" ? "检查站详情" : '修改检查站';
|
||||
modalKey.value += 1;
|
||||
ssbmIds.value = [];
|
||||
proxy.$set(row.ssbmdm, depList.value, "childDeptList", (res) => { ssbmIds.value.push(res); });
|
||||
form.value = row;
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
dialogFormVisible.value = true;
|
||||
if (row.jd && row.wd) {
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", { coords: [row], icon: require("@/assets/point/jwz.png"), flag: "jwz" });
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 14 });
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//删除
|
||||
const delDictItem = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning"}).then(() => {
|
||||
const ids = [id];
|
||||
deletePoliceStation(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功"});
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => { proxy.$message.info("已取消"); });
|
||||
};
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = form.value;
|
||||
if (chackadd.value) {
|
||||
updatePoliceStation(params).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: "修改成功"});
|
||||
close();
|
||||
getListData();
|
||||
}).catch(res=>{ loading.value = false; });
|
||||
} else {
|
||||
addPoliceStation(params).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
getListData();
|
||||
close();
|
||||
}).catch(()=>{ loading.value = false; });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 分页
|
||||
function handleCurrentChange(val){
|
||||
listQuery.value.pageNo = 1
|
||||
getListData();
|
||||
|
||||
}
|
||||
|
||||
// 分页数
|
||||
function handleSizeChange(val){
|
||||
listQuery.value.pageSize = 20
|
||||
getListData();
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
473
src/views/backOfficeSystem/basicsmanage/quick-rebate/index.vue
Normal file
473
src/views/backOfficeSystem/basicsmanage/quick-rebate/index.vue
Normal file
@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">快反点管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addKfdList()">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList" :disabled="multipleSelection.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 class="mosty-from-wrap" :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.kfdMc" placeholder="请输入快反点名称" clearable />
|
||||
</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="kfdId" :tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%" @selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount"
|
||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column type="selection" align="center" width="55" />
|
||||
<el-table-column type="index" show-overflow-tooltip align="center" width="60px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="ssbm" label="所属部门" width="200px" align="center"></el-table-column>
|
||||
<el-table-column sortable prop="kfdMc" show-overflow-tooltip align="center" width="300px" label="快反点名称">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="点位类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_KFDLX" :value="row.dwlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="kfdDz" show-overflow-tooltip align="center" label="快反点地址">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="jd" show-overflow-tooltip label="经度" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="wd" show-overflow-tooltip label="纬度" align="center">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="180px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.kfdId)" type="danger" 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.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button v-if="disable" type="primary" :loading="btnLoading" 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" class="mosty-from-wrap">
|
||||
<el-form-item style="width: 31%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department :placeholder="form.ssbm" style="width: 100%" ref="cascader" clearable filterable
|
||||
:options="depList" :props="props" v-model="form.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" prop="kfdMc" label="快反点名称">
|
||||
<el-input v-model="form.kfdMc" placeholder="请输入快反点名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 32%" prop="dwlx" :rules="[
|
||||
{ required: true, message: '请选择点位类型', trigger: 'change' }
|
||||
]" label="点位类型">
|
||||
<el-select @change="lxChange" v-model="form.dwlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="item in D_BZ_KFDLX" :label="item.label" :key="item.value" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="kfdDz" label="快反点地址">
|
||||
<el-input v-model="form.kfdDz" placeholder="请输入快反点地址" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input @change="jwdChange" v-model="form.jd" clearable style="width: 45%" />
|
||||
<el-input @change="jwdChange" v-model="form.wd" clearable style="width: 45%" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="yfzfw" @change="yfzChange" :rules="[
|
||||
{ required: lxFlag, message: '请选择一分钟范围', trigger: 'change' }
|
||||
]" label="一分钟范围">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.yfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('yfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="sfzfw" @change="sfzChange" :rules="[
|
||||
{ required: lxFlag, message: '请选择三分钟范围', trigger: 'change' }
|
||||
]" label="三分钟范围">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.sfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('sfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="wfzfw" @change="wfzChange" :rules="[
|
||||
{ required: lxFlag, message: '请选择五分钟范围', trigger: 'change' }
|
||||
]" label="五分钟范围">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.wfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('wfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map">
|
||||
<GdMap v-if="dialogFormVisible" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted,
|
||||
inject,
|
||||
nextTick
|
||||
} from "vue";
|
||||
import {
|
||||
getKfd,
|
||||
addKfd,
|
||||
deleteKfd,
|
||||
updateKfd
|
||||
} from "@/api/basicsmanage/quick-rebate.js";
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const chackipt = ref(true);
|
||||
const cascader = ref(null);
|
||||
const depList = ref([]); //部门数据
|
||||
const { proxy } = getCurrentInstance();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const mapRef = ref(null);
|
||||
const diaTitle = ref("新增智能装备");
|
||||
const loadingTable = ref(true);
|
||||
const checkList = ref([]);
|
||||
const reload = inject("reload");
|
||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
kfdMc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
form.value.jd = res.coord[0];
|
||||
form.value.wd = res.coord[1];
|
||||
}
|
||||
if (res.type === "polygon") form.value[res.flag] = res.coord[0];
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
emitter.off("coordString");
|
||||
});
|
||||
const disable = ref(false);
|
||||
const btnLoading = ref(false); //按钮加载
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
const params = listQuery.value;
|
||||
params.dwlxs = "01,02";
|
||||
getKfd(params).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
kfdMc: "",
|
||||
ssbmdm: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
reload();
|
||||
};
|
||||
// 选择类型变化
|
||||
const lxFlag = ref(true);
|
||||
function lxChange(val) {
|
||||
lxFlag.value = val === "02" ? false : true
|
||||
}
|
||||
//获取经纬度 - 圈层范围清空
|
||||
function chackLat(type) {
|
||||
form.value.jd = "";
|
||||
form.value.wd = "";
|
||||
form.value.yfzfw = "";
|
||||
form.value.sfzfw = "";
|
||||
form.value.wfzfw = "";
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("removePlot", "yfzfw");
|
||||
emitter.emit("removePlot", "sfzfw");
|
||||
emitter.emit("removePlot", "wfzfw");
|
||||
emitter.emit("drawShape", { type: "point", flag: "kfd_ht", isclear: true });
|
||||
}
|
||||
// 绘制一、三、五分钟圈陈
|
||||
function chackLatY(type) {
|
||||
emitter.emit("drawShape", { type: "polygon", flag: type, isclear: true });
|
||||
form.value[type] = "";
|
||||
}
|
||||
// 经纬度变化回显
|
||||
function jwdChange() {
|
||||
if (form.value.jd && form.value.wd) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd: parseInt(form.value.jd), wd: form.value.wd }],
|
||||
icon: require("@/assets/point/kfd.png"),
|
||||
flag: "kfd"
|
||||
});
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function yfzChange() {
|
||||
if (form.value.yfzfw) {
|
||||
emitter.emit("deletePointArea", "yfzArea");
|
||||
let arr = form.value.yfzfw.split(",");
|
||||
form.value.yfzfw = spliceArray(arr);
|
||||
setTimeout(() => {
|
||||
emitter.emit("polygonFigure", {
|
||||
coords: [spliceString(form.value.yfzfw)],
|
||||
flag: "yfzArea",
|
||||
isclear: true
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
function sfzChange() {
|
||||
if (form.value.sfzfw) {
|
||||
emitter.emit("deletePointArea", "sfzArea");
|
||||
let arr = form.value.sfzfw.split(",");
|
||||
form.value.sfzfw = spliceArray(arr);
|
||||
setTimeout(() => {
|
||||
emitter.emit("polygonFigure", {
|
||||
coords: [spliceString(form.value.sfzfw)],
|
||||
flag: "sfzArea",
|
||||
isclear: true
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
function wfzChange() {
|
||||
if (form.value.wfzfw) {
|
||||
emitter.emit("deletePointArea", "wfzArea");
|
||||
let arr = form.value.wfzfw.split(",");
|
||||
form.value.wfzfw = spliceArray(arr);
|
||||
setTimeout(() => {
|
||||
emitter.emit("polygonFigure", {
|
||||
coords: [spliceString(form.value.wfzfw)],
|
||||
flag: "wfzArea",
|
||||
isclear: true
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.kfdId);
|
||||
});
|
||||
}
|
||||
};
|
||||
//新增
|
||||
function addKfdList() {
|
||||
chackipt.value = false;
|
||||
disable.value = true;
|
||||
diaTitle.value = "新增快反点";
|
||||
chackadd.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//删除
|
||||
const delDictItem = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = [id];
|
||||
deleteKfd(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
deleteKfd(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
//修改
|
||||
const update = (row) => {
|
||||
chackipt.value = true;
|
||||
disable.value = true;
|
||||
diaTitle.value = "修改";
|
||||
form.value = row;
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
if (form.value.dwlx) lxFlag.value = false;
|
||||
chackadd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (row.jd && row.wd) {
|
||||
let icon = require("@/assets/point/kfd.png")
|
||||
emitter.emit("addPointArea", { coords: [row], icon, flag: "kfd" });
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 10 });
|
||||
}
|
||||
if (row.yfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.yfzfw], flag: "yfzfw", type: 'geoJson', isclear: true });
|
||||
}
|
||||
if (row.sfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.sfzfw], flag: "sfzfw", type: 'geoJson', isclear: false });
|
||||
}
|
||||
if (row.wfzfw.length > 0) {
|
||||
emitter.emit("drawShape", { coords: [row.wfzfw], flag: "wfzfw", type: 'geoJson', isclear: false });
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
//表单数据
|
||||
const form = ref({ kfdMc: "", ssbmdm: "", hzfw: "" });
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
kfdMc: [{ required: true, message: "请选择点位类型", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
kfdDz: [{ required: true, message: "请输入快反点地址", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择快反点位置", trigger: "change" }]
|
||||
});
|
||||
const elform = ref(null);
|
||||
|
||||
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
checkList.value = [];
|
||||
form.value = {};
|
||||
getListData();
|
||||
}
|
||||
// 新增-编辑数据
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
btnLoading.value = true;
|
||||
if (chackadd.value) {
|
||||
updateKfd(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
btnLoading.value = false;
|
||||
close()
|
||||
});
|
||||
} else {
|
||||
addKfd(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
btnLoading.value = false;
|
||||
close()
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
816
src/views/backOfficeSystem/basicsmanage/service-jz/index.vue
Normal file
816
src/views/backOfficeSystem/basicsmanage/service-jz/index.vue
Normal file
@ -0,0 +1,816 @@
|
||||
<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.jzMc" placeholder="请输入警组名称" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="listQuery.ddMjxm" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="qwdj" label="是否包含下级">
|
||||
<el-select v-model="listQuery.isChild">
|
||||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.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" style="width: 100%" :key="keyCount"
|
||||
@selection-change="handleSelectionChange" :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 type="index" show-overflow-tooltip align="center" width="60px" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" label="所属部门" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="jzMc" show-overflow-tooltip align="center" label="警组名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ddMjxm" show-overflow-tooltip label="警组负责人" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="jzryList" show-overflow-tooltip align="center" label="警组成员">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.jzryList" :key="index + 'jz'" class="mx-1">
|
||||
{{ item.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="txzbList" show-overflow-tooltip label="智能装备">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.txzbList" :key="index + 'zb'" class="mx-1">
|
||||
{{ item.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="jyqxList" show-overflow-tooltip label="警用器械">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.jyqxList" :key="index + 'qx'" class="mx-1">
|
||||
{{ item.qxmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="clList" show-overflow-tooltip label="警组车辆">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="(item, index) in row.clList" :key="index + 'cl'" class="mx-1">
|
||||
{{ item.jdchphm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" 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 style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department :placeholder="form.ssbm" style="width: 100%" ref="cascader" clearable filterable
|
||||
:options="depList" :props="props" @change="handleChange" v-model="form.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzMc" label="警组名称">
|
||||
<el-input v-model="form.jzMc" placeholder="请输入警组名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddMjxm" label="警组负责人">
|
||||
<el-input @click="chooseUserVisible = true" v-model="form.ddMjxm" placeholder="请选择警组负责人" clearable
|
||||
@change="handelJzfzr" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddMjsfzh" label="负责人身份证号">
|
||||
<el-input v-model="form.ddMjsfzh" clearable placeholder="请输入身份证号" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="ddDh" label="负责人电话">
|
||||
<el-input v-model="form.ddDh" clearable placeholder="请输入负责人电话" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="mjjzcy" label="民警成员" @click.stop="mjVisible = true">
|
||||
<el-input v-model="form.mjData" placeholder="请选择民警成员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="mjData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in mjData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'MJ')">
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="fjjzcy" label="辅警成员" @click.stop="fjVisible = true">
|
||||
<el-input v-model="form.fjData" placeholder="请选择辅警成员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="fjData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'FJ')">
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="移动警务终端" @click.stop="(zblx = '81'), (znzbVisible = true)">
|
||||
<el-input v-model="form.ydjwzdDate" placeholder="请选择移动警务终端" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="ydjwzdDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in ydjwzdDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'YDJWZD')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="对讲机" @click.stop="(zblx = '86'), (znzbVisible = true)">
|
||||
<el-input v-model="form.scdjjDate" placeholder="请选择对讲机" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="scdjjDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in scdjjDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'DJJ')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="执法记录仪" @click.stop="(zblx = '80'), (znzbVisible = true)">
|
||||
<el-input v-model="form.zfjlyDate" placeholder="请选择执法记录仪" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="zfjlyDate.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in zfjlyDate" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'ZFJLY')">
|
||||
{{ tag.sbmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jyqxList" label="警用器械" @click.stop="jyqxVisible = true">
|
||||
<el-input v-model="form.jyqxData" placeholder="请选择警用器械" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="jyqxData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in jyqxData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'JYQX')">
|
||||
{{ tag.qxmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="clList" label="警组车辆" @click.stop="jyclVisible = true">
|
||||
<el-input v-model="form.jyclData" placeholder="请选择警组车辆" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="jyclData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in jyclData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'CAR')">
|
||||
{{ tag.jdchphm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</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>
|
||||
<ChooseUser v-if="chooseUserVisible" v-model="chooseUserVisible" titleValue="选择负责人" :roleIds="hasChooseFzr"
|
||||
@choosedUsers="hanlderChoose"></ChooseUser>
|
||||
<MjLoad v-if="mjVisible" v-model="mjVisible" titleValue="选择民警" :roleIds="hasChooseMj"
|
||||
@choosedUsers="hanlderChooseMj" />
|
||||
|
||||
<FjLoad v-if="fjVisible" v-model="fjVisible" :roleIds="hasChooseFj" @choosedUsers="hanlderChooseFj" />
|
||||
<JyqxLoad v-if="jyqxVisible" :roleIds="hasChooseJyqx" v-model="jyqxVisible" @choosedUsers="hanlderChooseJyqx" />
|
||||
<ZnzbLoad v-model="znzbVisible" v-if="znzbVisible" :roleIds="hasChooseZnzb" :zblx="zblx"
|
||||
@choosedUsers="hanlderChooseZnzb" />
|
||||
<JyclLoad v-if="jyclVisible" :roleIds="hasChooseJycl" v-model="jyclVisible" @choosedUsers="hanlderChooseJycl" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
|
||||
import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
|
||||
import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
|
||||
import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
|
||||
import {
|
||||
getJzList,
|
||||
addJz,
|
||||
deleteJz,
|
||||
getJzInfo,
|
||||
updateJz
|
||||
} from "@/api/basicsmanage/servicejz.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const loadingTable = ref(true);
|
||||
const cascader = ref(null);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
|
||||
const btnLoading = ref(false);
|
||||
const mjVisible = ref(false); //民警弹窗
|
||||
const mjData = ref([]);
|
||||
const fjVisible = ref(false); //辅警弹窗
|
||||
const fjData = ref([]);
|
||||
const jyqxVisible = ref(false); //警用器械弹窗
|
||||
const jyqxData = ref([]);
|
||||
const jyclVisible = ref(false); //警用车辆弹窗
|
||||
const jyclData = ref([]);
|
||||
const znzbVisible = ref(false); //智能装备弹窗
|
||||
const zblx = ref("null"); //智能装备类型
|
||||
const ydjwzdDate = ref([]); //移动警务终端
|
||||
const zfjlyDate = ref([]); //执法记录仪
|
||||
const scdjjDate = ref([]); //手持对讲机
|
||||
const jcData = ref([]);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const chooseUserVisible = ref(false);
|
||||
const totalzq = ref(0);
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const depList = ref([]); //部门数据
|
||||
const chackAdd = ref(false);
|
||||
const chackipt = ref(true);
|
||||
const mapActive = ref(false);
|
||||
const title = ref("新增勤务警组");
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const ids = ref([]); //批量删除的ID
|
||||
|
||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
||||
const hasChooseMj = ref([]); //已经选胡民警
|
||||
const hasChooseFj = ref([]); //已经选胡FU警
|
||||
const hasChooseZnzb = ref([]); //已经选胡智能装备
|
||||
const hasChooseJyqx = ref([]); //已经选警用器械
|
||||
const hasChooseJycl = ref([]); //已经选警用车辆
|
||||
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: "",
|
||||
ddMjxm: "",
|
||||
jzMc: "",
|
||||
isChild: "1",
|
||||
ddMjjh: ""
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
|
||||
//筛选条件参数执勤
|
||||
const listQueryzq = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
function focusF() {
|
||||
chackipt.value = false;
|
||||
}
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "orgCode",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
const tableData = ref([]); //列表数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 处理删除tag
|
||||
function handleClose(tag, type) {
|
||||
switch (type) {
|
||||
case "MJ":
|
||||
mjData.value.splice(mjData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseMj.value.splice(hasChooseMj.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseMj.value.splice(hasChooseMj.value.indexOf(tag.ryId), 1);
|
||||
}
|
||||
break;
|
||||
case "FJ":
|
||||
fjData.value.splice(fjData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseFj.value.splice(hasChooseFj.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseFj.value.splice(hasChooseFj.value.indexOf(tag.ryId), 1);
|
||||
}
|
||||
break;
|
||||
case "CAR":
|
||||
jyclData.value.splice(jyclData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseJycl.value.splice(hasChooseJycl.value.indexOf(tag.cid), 1);
|
||||
} else {
|
||||
hasChooseJycl.value.splice(hasChooseJycl.value.indexOf(tag.clId), 1);
|
||||
}
|
||||
|
||||
break;
|
||||
case "YDJWZD":
|
||||
ydjwzdDate.value.splice(ydjwzdDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
|
||||
break;
|
||||
case "DJJ":
|
||||
scdjjDate.value.splice(scdjjDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
break;
|
||||
case "ZFJLY":
|
||||
zfjlyDate.value.splice(zfjlyDate.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseZnzb.value.splice(hasChooseZnzb.value.indexOf(tag.zbId), 1);
|
||||
}
|
||||
break;
|
||||
case "JYQX":
|
||||
jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseJyqx.value.splice(hasChooseJyqx.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseJyqx.value.splice(hasChooseJyqx.value.indexOf(tag.qxId), 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jcgl/tbJcglJz/queryList").then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = Number(res.total);
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
function handleChange(e) { }
|
||||
const addDict = (row) => {
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.ddMjxm = user.xm;
|
||||
form.value.ddMjsfzh = user.sfzh;
|
||||
form.value.ddDh = user.lxdh;
|
||||
form.value.ddMjid = user.id;
|
||||
form.value.ddMjjh = user.jh;
|
||||
hasChooseFzr.value = [user.id];
|
||||
};
|
||||
//选择民警
|
||||
function hanlderChooseMj(arr) {
|
||||
hasChooseMj.value = arr.map((v) => {
|
||||
return v.ryid;
|
||||
});
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
ryId: item.ryid,
|
||||
jllx: item.fl,
|
||||
jlxm: item.xm,
|
||||
jh: item.jh,
|
||||
sfzh: item.sfzh,
|
||||
lxdh: item.lxdh,
|
||||
xbdm: item.xbdm
|
||||
};
|
||||
});
|
||||
mjData.value = jzryList;
|
||||
}
|
||||
|
||||
//选择辅警
|
||||
function hanlderChooseFj(arr) {
|
||||
hasChooseFj.value = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
const jzryList = arr.map((item) => {
|
||||
return {
|
||||
ryId: item.id,
|
||||
jllx: item.fl,
|
||||
jlxm: item.xm,
|
||||
jh: item.jh,
|
||||
sfzh: item.sfzh,
|
||||
lxdh: item.lxdh,
|
||||
xbdm: item.xbdm
|
||||
};
|
||||
});
|
||||
fjData.value = jzryList;
|
||||
}
|
||||
//选择警用车辆
|
||||
function hanlderChooseJycl(arr) {
|
||||
let brr = [];
|
||||
const clList = arr.map((item) => {
|
||||
brr.push(item.cid);
|
||||
return {
|
||||
clId: item.cid,
|
||||
jdchphm: item.cph,
|
||||
jdchpzldm: item.cplx,
|
||||
gpsId: item.gpsId,
|
||||
};
|
||||
});
|
||||
hasChooseJycl.value = brr;
|
||||
jyclData.value = clList;
|
||||
}
|
||||
//单个删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost([row.id], "/mosty-jcgl/tbJcglJz/deleteJz").then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost(ids.value, "/mosty-jcgl/tbJcglJz/deleteJz").then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//选择警用器械
|
||||
function hanlderChooseJyqx(arr) {
|
||||
let brr = [];
|
||||
const jyqxList = arr.map((item) => {
|
||||
brr.push(item.id);
|
||||
return { qxId: item.id, qxlx: item.scode, qxsl: item.sl, qxmc: item.qxMc };
|
||||
});
|
||||
jyqxData.value = jyqxList;
|
||||
hasChooseJyqx.value = brr;
|
||||
}
|
||||
//选择智能装备
|
||||
function hanlderChooseZnzb(arr) {
|
||||
hasChooseZnzb.value = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
const txzbList = arr.map((item) => {
|
||||
return {
|
||||
txzblx: item.scode,
|
||||
zbId: item.id,
|
||||
sbmc: item.sbmc,
|
||||
hh: item.sbbh,
|
||||
sbbh: item.sbbh,
|
||||
sfrh: item.sfrh,
|
||||
sfzy: item.sfzy,
|
||||
sfxt: item.sfxt,
|
||||
};
|
||||
});
|
||||
switch (zblx.value) {
|
||||
case "81":
|
||||
// 移动警务终端
|
||||
ydjwzdDate.value = txzbList;
|
||||
break;
|
||||
case "86":
|
||||
// 对讲机
|
||||
scdjjDate.value = txzbList;
|
||||
break;
|
||||
case "80":
|
||||
// 执法记录仪
|
||||
zfjlyDate.value = txzbList;
|
||||
break;
|
||||
}
|
||||
//装备
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jzMc: "",
|
||||
ssbm: "",
|
||||
jzfzr: "",
|
||||
fzrsfzh: "",
|
||||
fzrdh: "",
|
||||
mjjzcy: "",
|
||||
fjjzcy: "",
|
||||
jzznzb: "",
|
||||
jyqx: "",
|
||||
jzcl: "",
|
||||
bz: "",
|
||||
jczmc: "",
|
||||
jczid: ""
|
||||
});
|
||||
//新增勤务警组
|
||||
function add() {
|
||||
jyclData.value = [];
|
||||
mjData.value = [];
|
||||
fjData.value = [];
|
||||
jyqxData.value = [];
|
||||
ydjwzdDate.value = [];
|
||||
zfjlyDate.value = [];
|
||||
scdjjDate.value = [];
|
||||
jcData.value = [];
|
||||
title.value = "新增勤务警组";
|
||||
chackAdd.value = true;
|
||||
chackipt.value = false;
|
||||
formReset();
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改勤务警组
|
||||
function update(row) {
|
||||
jyclData.value = [];
|
||||
mjData.value = [];
|
||||
fjData.value = [];
|
||||
jyqxData.value = [];
|
||||
ydjwzdDate.value = [];
|
||||
zfjlyDate.value = [];
|
||||
scdjjDate.value = [];
|
||||
jcData.value = [];
|
||||
qcckGet({ id: row.id }, "/mosty-jcgl/tbJcglJz/selectByid").then((res) => {
|
||||
form.value = res;
|
||||
jcData.value = [res.jczmc];
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
|
||||
let arrCl = [];
|
||||
res.clList.forEach((v) => {
|
||||
arrCl.push(v.clId);
|
||||
jyclData.value.push(v);
|
||||
});
|
||||
|
||||
let arrJyqx = [];
|
||||
res.jyqxList.forEach((v) => {
|
||||
arrJyqx.push(v.qxId);
|
||||
jyqxData.value.push(v);
|
||||
});
|
||||
|
||||
let arrMJ = [];
|
||||
let arrFJ = [];
|
||||
res.jzryList.forEach((v) => {
|
||||
if (v.jllx == "01") {
|
||||
arrMJ.push(v.ryId);
|
||||
mjData.value.push(v);
|
||||
} else {
|
||||
arrFJ.push(v.ryId);
|
||||
fjData.value.push(v);
|
||||
}
|
||||
});
|
||||
|
||||
let arrZb = [];
|
||||
res.txzbList.forEach((v) => {
|
||||
arrZb.push(v.zbId);
|
||||
// 装备
|
||||
switch (v.txzblx) {
|
||||
case "81":
|
||||
//移动警务终端
|
||||
ydjwzdDate.value.push(v);
|
||||
break;
|
||||
case "86":
|
||||
//对讲机
|
||||
scdjjDate.value.push(v);
|
||||
break;
|
||||
case "80":
|
||||
//执法记录仪
|
||||
zfjlyDate.value.push(v);
|
||||
break;
|
||||
}
|
||||
});
|
||||
title.value = "修改勤务警组";
|
||||
chackAdd.value = false;
|
||||
chackipt.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
// 表格回显
|
||||
hasChooseFzr.value = [res.ddMjid]; //负责人
|
||||
hasChooseMj.value = arrMJ; //民警
|
||||
hasChooseFj.value = arrFJ; //辅警
|
||||
hasChooseJyqx.value = arrJyqx; //警用器械
|
||||
hasChooseZnzb.value = arrZb; //智能装备
|
||||
hasChooseJycl.value = arrCl; //警用车辆
|
||||
});
|
||||
}
|
||||
|
||||
function handelJzfzr(val) {
|
||||
if (!val) hasChooseFzr.value = [];
|
||||
}
|
||||
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jzMc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入警组名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddMjxm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入警组负责人",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddMjsfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入负责人身份证号",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ddDh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入负责人电话",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const elform = ref(null);
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
const params = form.value;
|
||||
params.ssbmdm = form.value.ssbmdm;
|
||||
params.jczmc = form.value.jczmc;
|
||||
params.jczid = form.value.jczid;
|
||||
params.jzryList = [...fjData.value, ...mjData.value];
|
||||
params.txzbList = [
|
||||
...ydjwzdDate.value,
|
||||
...zfjlyDate.value,
|
||||
...scdjjDate.value
|
||||
];
|
||||
params.jyqxList = jyqxData.value;
|
||||
params.clList = jyclData.value;
|
||||
if (chackAdd.value) {
|
||||
qcckPost(params, "/mosty-jcgl/tbJcglJz/addJz")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
btnLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPost(form.value, "/mosty-jcgl/tbJcglJz/updateJz")
|
||||
.then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
btnLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChangezq = (currentSize) => {
|
||||
listQueryzq.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChangezq = (currentPage) => {
|
||||
listQueryzq.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 200;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
466
src/views/backOfficeSystem/basicsmanage/socialSecurity/index.vue
Normal file
466
src/views/backOfficeSystem/basicsmanage/socialSecurity/index.vue
Normal file
@ -0,0 +1,466 @@
|
||||
<!-- 社会安保力量 -->
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import {
|
||||
getTbJcglShabll,
|
||||
addTbJcglShabll,
|
||||
putTbJcglShabll,
|
||||
infoTbJcglShabll,
|
||||
delTbJcglShabll
|
||||
} from "@/api/basicsmanage/socialSecurity.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZDY_ABLLLX } = proxy.$dict("D_ZDY_ABLLLX");
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const form = ref({}); //新增表单
|
||||
const tableData = ref([]); //表格数据
|
||||
const cascader = ref(null);
|
||||
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 depList = ref([]); //部门数据
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
xm: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
||||
lxdh: [{ required: true, message: "请输入联系电话", pattern: /^((0\d{2,3}-\d{7,8})|(1[345678]\d{9}))$/, trigger: "change" }],
|
||||
...rule.identityCardRule(
|
||||
{
|
||||
require: true,
|
||||
message: "请输入身份证号",
|
||||
validator: true
|
||||
},
|
||||
"sfzh"
|
||||
) //身份证校验
|
||||
});
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
form.value.ssbm = data[0].text;
|
||||
const ids = JSON.parse(JSON.stringify(e));
|
||||
form.value.ssbmdm = ids;
|
||||
}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getTbJcglShabll(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) {
|
||||
form.value.ssbmid = form.value.ssbmdm
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addTbJcglShabll(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putTbJcglShabll(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoTbJcglShabll(row.id).then((res) => {
|
||||
chackAdd.value = false;
|
||||
title.value = "修改社会安保";
|
||||
dialogFormVisible.value = true;
|
||||
form.value = res;
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglShabll([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delTbJcglShabll(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 - 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();
|
||||
};
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<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.ssbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保人员">
|
||||
<el-input
|
||||
v-model="listQuery.xm"
|
||||
placeholder="请输入安保人员姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保力量类型" prop="ablllx">
|
||||
<el-select
|
||||
v-model="listQuery.ablllx"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ABLLLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.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%"
|
||||
: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
|
||||
sortable
|
||||
show-overflow-tooltip
|
||||
label="姓名"
|
||||
prop="xm"
|
||||
align="center"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="所属辖区"
|
||||
prop="ssbm"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="安保力量类型"
|
||||
prop="ablllx"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
<dict-tag
|
||||
:options="D_ZDY_ABLLLX"
|
||||
:value="row.ablllx"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作单位" prop="gzdw" align="center" />
|
||||
<el-table-column label="联系电话" prop="lxdh" align="center" />
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="140px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="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="ssbmdm">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
:placeholder="form.ssbm"
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="form.xm" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="sfzh">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入身份证号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="xbdm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model="form.xbdm"
|
||||
dictEnum="GENDER"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安保力量类型" prop="ablllx">
|
||||
<el-select
|
||||
v-model="form.ablllx"
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_ZDY_ABLLLX"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:label="dict.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input v-model="form.lxdh" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族" prop="mzdm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model="form.mzdm"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="xldm">
|
||||
<MOSTY.PackageSelect
|
||||
width="100%"
|
||||
v-model:modelValue="form.xldm"
|
||||
dictEnum="EDUCATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="住址详址" prop="zzxz">
|
||||
<el-input v-model="form.zzxz" placeholder="请输入住址详址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="工作单位" prop="gzdw">
|
||||
<el-input v-model="form.gzdw" placeholder="请输入工作单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="所在单位" prop="szdw">
|
||||
<el-input v-model="form.szdw" placeholder="请输入所在单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="工作内容" prop="gznr">
|
||||
<el-input v-model="form.gznr" placeholder="请输入工作内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="掌握技能" prop="zwjn">
|
||||
<el-input v-model="form.zwjn" 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>
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
431
src/views/backOfficeSystem/basicsmanage/thirdParty/index.vue
vendored
Normal file
431
src/views/backOfficeSystem/basicsmanage/thirdParty/index.vue
vendored
Normal file
@ -0,0 +1,431 @@
|
||||
<!-- 增删改查基础模板 -->
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
import {
|
||||
getDsfList,
|
||||
addDsf,
|
||||
putDsf,
|
||||
infoDsf,
|
||||
putDsfZt,
|
||||
delDsf
|
||||
} from "@/api/basicsmanage/thirdParty.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_DSFFWLX, D_BZ_DSFSYZT } = proxy.$dict(
|
||||
"D_BZ_DSFFWLX",
|
||||
"D_BZ_DSFSYZT"
|
||||
);
|
||||
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({
|
||||
xtmc: [{ required: true, message: "请填写系统名称", trigger: "change" }],
|
||||
fwlx: [{ required: true, message: "请选择服务类型", trigger: "change" }],
|
||||
zrrxm: [{ required: true, message: "请填写责任人姓名", trigger: "change" }]
|
||||
});
|
||||
function shFn(row) {
|
||||
proxy
|
||||
.$confirm("是否通过审核", "提示", {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: "通过",
|
||||
cancelButtonText: "不通过"
|
||||
})
|
||||
.then(() => {
|
||||
putDsfZt({ id: row.id, zt: "02" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "审核已通过",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch((action) => {
|
||||
if(action === 'cancel'){
|
||||
putDsfZt({ id: row.id, zt: "03" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "审核未通过",
|
||||
type: "warning"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}else{
|
||||
proxy.$message.info("审核已取消");
|
||||
}
|
||||
});
|
||||
}
|
||||
function tyFn(row) {
|
||||
proxy
|
||||
.$confirm("确定要停用", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
putDsfZt({ id: row.id, zt: "04" }).then(() => {
|
||||
proxy.$message({
|
||||
message: "停用成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
tableData.value = [];
|
||||
loadingTable.value = true;
|
||||
getDsfList(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) {
|
||||
addDsf(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
putDsf(form.value).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
close();
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoDsf(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(() => {
|
||||
delDsf([row.id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
delDsf(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 - 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>
|
||||
|
||||
<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="系统名称">
|
||||
<el-input
|
||||
v-model="listQuery.xtmc"
|
||||
placeholder="请输入系统名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型">
|
||||
<el-select style="width: 100%" v-model="listQuery.fwlx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DSFFWLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人姓名">
|
||||
<el-input
|
||||
v-model="listQuery.zrrxm"
|
||||
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="60" />
|
||||
<el-table-column label="系统名称" prop="xtmc" align="center" />
|
||||
<el-table-column label="服务类型" prop="fwlx" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DSFFWLX" :value="row.fwlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="责任人" prop="zrrxm" align="center" />
|
||||
<el-table-column label="责任人联系电话" prop="zrrlxdh" align="center" />
|
||||
<el-table-column label="使用状态" prop="zt" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DSFSYZT" :value="row.zt" :tag="true" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.zt === '01'">
|
||||
<el-button @click="shFn(row)" size="small">审核</el-button>
|
||||
</template>
|
||||
<template v-if="row.zt === '02'">
|
||||
<el-button @click="tyFn(row)" size="small">停用</el-button>
|
||||
</template>
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="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="xtmc">
|
||||
<el-input v-model="form.xtmc" placeholder="请填写系统名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型" prop="fwlx">
|
||||
<el-select style="width: 100%" v-model="form.fwlx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DSFFWLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" prop="zrrxm">
|
||||
<el-input
|
||||
v-model="form.zrrxm"
|
||||
placeholder="请填写责任人姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="责任人联系电话" prop="zrrlxdh">
|
||||
<el-input
|
||||
v-model="form.zrrlxdh"
|
||||
placeholder="请填写责任人联系电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="gqsj">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.gqsj"
|
||||
type="date"
|
||||
placeholder="请选择过期时间"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
></el-date-picker>
|
||||
</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>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防辅警</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="isShowPolice = false">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">分组管理</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="isShowPolice = true" v-if="!isShowPolice">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">返回</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="addPolice">
|
||||
<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>
|
||||
|
||||
<el-button type="info" v-if="isShowPolice" plain icon="Upload" @click="isImport = true">
|
||||
<span style="vertical-align: middle">导入</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<PoliceF v-if="isShowPolice" ref="policeComponnet" @deleteMore="deleteMore" />
|
||||
<PoliceGroup ref="groupComponnet" v-else @deleteMore="deleteMore" />
|
||||
</div>
|
||||
|
||||
<!-- 导入 -->
|
||||
<Export :show="isImport" lx="policeF" @closeImport="isImport = false" @handleImport="handleImport" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Export from "@/components/export/index.vue";
|
||||
import PoliceF from "./policeF.vue";
|
||||
import PoliceGroup from "./policeGroup.vue";
|
||||
import { nextTick, ref } from "vue";
|
||||
const ids = ref([]);
|
||||
const policeComponnet = ref(null);
|
||||
const groupComponnet = ref(null);
|
||||
const isShowPolice = ref(true);
|
||||
const isImport = ref(false);
|
||||
// 新增
|
||||
function addPolice() {
|
||||
if (isShowPolice.value) {
|
||||
policeComponnet.value.add();
|
||||
} else {
|
||||
groupComponnet.value.init();
|
||||
}
|
||||
}
|
||||
function deleteMore(val) {
|
||||
ids.value = val;
|
||||
}
|
||||
// 批量删除
|
||||
function batchDelete() {
|
||||
if (isShowPolice.value) {
|
||||
policeComponnet.value.batchDelete();
|
||||
} else {
|
||||
groupComponnet.value.batchDelete();
|
||||
}
|
||||
}
|
||||
|
||||
// 确定上传
|
||||
function handleImport(val) {
|
||||
policeComponnet.value.handleFilter();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -0,0 +1,785 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.fjName" placeholder="请输入姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入身份证号码" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否离职">
|
||||
<el-select clearableupdate v-model="form.xtSjzt" placeholder="请选择状态">
|
||||
<el-option v-for="item in D_BZ_SFLZ" :label="item.label" :key="item.value" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
<div class="total">
|
||||
<span> 辅警总数 {{ total }} 人</span>
|
||||
<div class="jnbq">
|
||||
<el-button v-for="item in lxList" :key="item.id" :class="form.bqId === item.id ? 'on' : ''"
|
||||
@click="chackJn(item)" size="small">{{ item.bqmc }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border ref="dataTreeList" row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%"
|
||||
@selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount" 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="80" />
|
||||
<el-table-column width="120" align="center" label="图片">
|
||||
<template #default="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tpid" :src="urlImg + row.tpid" fit="cover" lazy />
|
||||
<el-image v-else :src="Person" fit="cover" lazy />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="xm" show-overflow-tooltip align="center" label="辅警姓名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" label="所属部门" align="center" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="jh" label="警号" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column prop="zyjn" show-overflow-tooltip label="专业技能" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag class="ml-2" v-for="(it, index) in row.sklList" :key="index">{{ it.bqmc }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="370px" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="onClickUpdate(row)" size="small">修改</el-button>
|
||||
<el-button plain @click="chackZqjl(row)" size="small">执勤记录</el-button>
|
||||
<el-button plain size="small" @click="getDocument(row)">人员档案</el-button>
|
||||
|
||||
<el-button v-if="row.xtSjzt != 0" @click="lzList(row)" type="warning" size="small">离职</el-button>
|
||||
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="form.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" v-if="!isDisabled" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="addForm" :rules="rules" :inline="true" label-position="top">
|
||||
<div style=" width: 25%; display: flex; justify-content: center;margin-bottom: 10px;">
|
||||
<div style="position: relative; width: 90px; height: 100px">
|
||||
<el-upload action="/mosty-api/mosty-base/minio/image/upload/id" :on-change="upImgFile" :on-success="upImg"
|
||||
:show-file-list="false">
|
||||
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
|
||||
<el-icon v-else>
|
||||
<Plus></Plus>
|
||||
</el-icon>
|
||||
<span v-if="imgUrl" style="position: absolute; top: -52px; right: -20px">
|
||||
<el-icon size="20" @click.stop="deletImg">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="身份证号码" prop="sfzh">
|
||||
<el-input v-model="addForm.sfzh" placeholder="请输入身份证号码" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="addForm.password" type="password" placeholder="请输入密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="辅警姓名" prop="xm">
|
||||
<el-input v-model="addForm.xm" placeholder="请输入辅警姓名" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="xbdm">
|
||||
<el-select clearable v-model="addForm.xbdm" placeholder="请选择" style="width: 100%">
|
||||
<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">
|
||||
<el-select clearable v-model="addForm.mzdm" placeholder="请选择民族" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_MZ" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌" prop="zzmm">
|
||||
<el-select clearable v-model="addForm.zzmm" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_ZZMM" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状况" prop="hyzk">
|
||||
<el-select clearable v-model="addForm.hyzk" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_HYZK" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="whcddm">
|
||||
<el-select clearable v-model="addForm.whcddm" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="(item, index) in D_BZ_WHCD" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="辅警编号" prop="jh">
|
||||
<el-input v-model="addForm.jh" placeholder="请输入辅警编号" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="lxdh">
|
||||
<el-input v-model="addForm.lxdh" placeholder="请输入联系电话" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="ssbmdm" :rules="{ required: true, message: '请选择部门' }">
|
||||
<MOSTY.Department :placeholder="addForm.ssbm" width="100%" clearable v-model="addForm.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员类别" prop="lx">
|
||||
<el-select clearable v-model="addForm.lx" placeholder="请选择" style="width: 100%" disabled>
|
||||
<el-option value="02" label="辅警"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="专业技能" prop="sklList" @change="selectJnbq">
|
||||
<el-select v-model="addForm.sklList" multiple placeholder="请选择" style="width: 100%" @change="onChangeBQ">
|
||||
<el-option v-for="item in bqList" :key="item.id" :label="item.bqmc" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="addForm.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 执勤记录 -->
|
||||
<div v-if="zqjl" class="dialog">
|
||||
<div class="head_box">
|
||||
<div class="title">巡防辅警————执勤记录</div>
|
||||
<div>
|
||||
<el-button v-if="mapActive" type="primary" size="small" @click="mapActive = false">关闭日历模式</el-button>
|
||||
<el-button v-else type="primary" size="small" @click="mapActive = true">日历模式</el-button>
|
||||
<el-button size="small" @click="zqjl = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mapActive" class="txmap">
|
||||
<ZbCalendar />
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table :data="zqjlData" border ref="dataTreeList" row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%"
|
||||
@selection-change="handleSelectionChange" :height="tableHeight1" :key="keyCount" v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column prop="zqbm" show-overflow-tooltip align="center" width="150px" label="执勤部门">
|
||||
</el-table-column>
|
||||
<el-table-column prop="jzcy" show-overflow-tooltip align="center" width="200" label="警组成员">
|
||||
</el-table-column>
|
||||
<el-table-column prop="sc" label="时长" align="center" width="150"></el-table-column>
|
||||
<el-table-column prop="lc" label="里程" width="100px" align="center"></el-table-column>
|
||||
<el-table-column prop="jqczsl" show-overflow-tooltip label="警情处置数量" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="xctjs" show-overflow-tooltip label="现场调解数" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="tjl" show-overflow-tooltip label="调解率" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="yjzlczsl" show-overflow-tooltip label="预警指令处置数量" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ryyjsl" show-overflow-tooltip label="人员移交数量" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="pccls" show-overflow-tooltip label="盘查车辆数量" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="clyjsl" show-overflow-tooltip label="移交数量" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight1 + 'px' }">
|
||||
<el-pagination class="pagination" @size-change="handleSizeChangezq" @current-change="handleCurrentChangezq"
|
||||
:current-page="formzq.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="totalzq">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人员档案弹窗 -->
|
||||
<PersonnelDialog :D_BZ_XB="D_BZ_XB" :D_BZ_MZ="D_BZ_MZ" :D_BZ_XLCJ="D_BZ_XLCJ" :D_BZ_XFXLLX="D_BZ_XFXLLX"
|
||||
ref="personDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ZbCalendar from "@/components/ZbCalendar/index";
|
||||
import PersonnelDialog from "../patrol-police/personnelProfile.vue";
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import Person from "@/assets/images/layout/default_male.png";
|
||||
import {
|
||||
getTbJcglXfll,
|
||||
deleteTbJcglXfll,
|
||||
getTbJcglXfllInfo,
|
||||
updateTbJcglXfll,
|
||||
getTbJcglBq,
|
||||
addTbJcglXfll,
|
||||
getCountBqsl,
|
||||
batchDeleteList,
|
||||
ryLz
|
||||
} from "@/api/xfll";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
onUnmounted,
|
||||
defineExpose,
|
||||
defineEmits
|
||||
} from "vue";
|
||||
const urlImg = ref("/mosty-api/mosty-base/minio/image/download/");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const title = ref("新增巡逻辅警信息");
|
||||
const chackipt = ref(false);
|
||||
const totalzq = ref(0);
|
||||
const loadingTable = ref(true);
|
||||
const emit = defineEmits(["deleteMore"]);
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "orgCode",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const zqjlData = ref([
|
||||
{
|
||||
zqbm: "xxx部门",
|
||||
jzcy: "张三、李四、王五...",
|
||||
sc: "8小时",
|
||||
jqczsl: "13件",
|
||||
yjzls: "21",
|
||||
xctjs: "16件",
|
||||
tjl: "30%",
|
||||
pcrysl: 13,
|
||||
ryyjsl: 2,
|
||||
lc: "123KM",
|
||||
pccls: 4,
|
||||
clyjsl: 1,
|
||||
createtime: "2022-06-01 11:42"
|
||||
},
|
||||
{
|
||||
zqbm: "xxx部门",
|
||||
jzcy: "张三、李四、王五...",
|
||||
sc: "8小时",
|
||||
jqczsl: "13件",
|
||||
xctjs: "16件",
|
||||
tjl: "30%",
|
||||
lc: "123KM",
|
||||
yjzls: "21",
|
||||
pcrysl: 13,
|
||||
ryyjsl: 2,
|
||||
pccls: 4,
|
||||
clyjsl: 1,
|
||||
createtime: "2022-06-02 14:44"
|
||||
}
|
||||
]);
|
||||
//获取字典数据
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_XB,
|
||||
D_BZ_WHCD,
|
||||
D_BZ_ZZMM,
|
||||
D_BZ_HYZK,
|
||||
D_BZ_MZ,
|
||||
D_BZ_XFXLLX,
|
||||
D_BZ_XLCJ,
|
||||
D_BZ_SFLZ
|
||||
} = proxy.$dict(
|
||||
"D_BZ_XB",
|
||||
"D_BZ_WHCD",
|
||||
"D_BZ_ZZMM",
|
||||
"D_BZ_HYZK",
|
||||
"D_BZ_MZ",
|
||||
"D_BZ_XFXLLX",
|
||||
"D_BZ_XLCJ",
|
||||
"D_BZ_SFLZ"
|
||||
);
|
||||
const bqList = ref([]); //标签数据
|
||||
const lxList = reactive([]); //搜索框标签选择数据
|
||||
//筛选条件参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
fjName: "",
|
||||
sfzh: "",
|
||||
ssbmdm: "",
|
||||
xtSjzt: "1"
|
||||
});
|
||||
//筛选条件参数执勤
|
||||
const formzq = ref({
|
||||
current: 1,
|
||||
size: 20
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
//执勤记录弹窗
|
||||
const zqjl = ref(false);
|
||||
const mapActive = ref(false);
|
||||
const dialogFormVisible = ref(false); //是否显示弹窗
|
||||
const elform = ref(null); //表单对象
|
||||
const depList = ref([]); //部门数据
|
||||
const cascader = ref(null); //级联选择器
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //按钮是否显示加载
|
||||
const ssbmIds = ref([]); //级联选择器回显ID
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
//新增表单参数
|
||||
const addFormDefault = ref({});
|
||||
const addForm = ref({
|
||||
id: "",
|
||||
fl: "02",
|
||||
xm: "",
|
||||
sfzh: "",
|
||||
xbdm: "",
|
||||
mzdm: "",
|
||||
zzmm: "",
|
||||
hyzk: "",
|
||||
whcddm: "",
|
||||
jh: "",
|
||||
lx: "02",
|
||||
lxdh: "",
|
||||
bz: "",
|
||||
ssbm: "",
|
||||
ssbmdm: ssbmIds.value[ssbmIds.value - 1]
|
||||
});
|
||||
const imgUrl = ref("");
|
||||
//新增表单验证数据
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入辅警姓名"
|
||||
}
|
||||
],
|
||||
sfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号码"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码"
|
||||
}
|
||||
],
|
||||
xbdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择性别",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
mzdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择民族"
|
||||
}
|
||||
],
|
||||
zzmm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择政治面貌"
|
||||
}
|
||||
],
|
||||
hyzk: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择婚姻状况"
|
||||
}
|
||||
],
|
||||
whcddm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择学历"
|
||||
}
|
||||
],
|
||||
lxdh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入联系电话"
|
||||
}
|
||||
],
|
||||
lx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择人员类别"
|
||||
}
|
||||
]
|
||||
});
|
||||
function chackZqjl(item) {
|
||||
zqjl.value = true;
|
||||
}
|
||||
|
||||
function upImgFile(row) { }
|
||||
function upImg(row) {
|
||||
addForm.value.tpid = row.data;
|
||||
imgUrl.value = urlImg.value + row.data;
|
||||
}
|
||||
function deletImg() {
|
||||
imgUrl.value = "";
|
||||
addForm.value.tpid = "";
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
dialogFormVisible.value = false;
|
||||
isDisabled.value = false;
|
||||
imgUrl.value = "";
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
}
|
||||
|
||||
function setBm() {
|
||||
if (ssbmIds.value.length >= 1) {
|
||||
const info = cascader.value.getCheckedNodes()[0];
|
||||
addForm.value.ssbm = info.label;
|
||||
addForm.value.ssbmdm = info.value;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
|
||||
//获取搜索栏标签选择数据
|
||||
getCountBqsl().then((res) => {
|
||||
res.forEach((item) => {
|
||||
lxList.push(item);
|
||||
});
|
||||
});
|
||||
getListData();
|
||||
//获取部门信息
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
//获取新增标签数据
|
||||
let data = {
|
||||
pageSize: 5000,
|
||||
pageCurrent: 1,
|
||||
bqlx: "SKL"
|
||||
};
|
||||
getTbJcglBq(data).then((res) => {
|
||||
bqList.value = res.records.filter((item) => {
|
||||
return item.xtSjzt == "1";
|
||||
});
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
emit("deleteMore", ids.value);
|
||||
};
|
||||
//点击标签功能
|
||||
function chackJn(item) {
|
||||
form.value.current = 1;
|
||||
form.value.bqId = item.id;
|
||||
form.value.bqlx = item.bqlx;
|
||||
getListData();
|
||||
}
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
batchDeleteList(ids.value).then((res) => {
|
||||
ElMessage({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//设置详情
|
||||
function setInfo(e) {
|
||||
title.value = "巡逻辅警详情";
|
||||
getTbJcglXfllInfo(e.id).then((res) => {
|
||||
ssbmIds.value = [];
|
||||
proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
|
||||
ssbmIds.value.push(res);
|
||||
});
|
||||
addForm.value = res;
|
||||
// form.value.ssbmdm = ssbmIds.value[ssbmIds.value.length - 1];
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
isDisabled.value = true;
|
||||
});
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.size = e;
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
form.value.current = e;
|
||||
getListData();
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChangezq(e) {
|
||||
formzq.value.size = e;
|
||||
formzq.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChangezq(e) {
|
||||
formzq.value.current = e;
|
||||
getListData();
|
||||
}
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
const ids = JSON.parse(JSON.stringify(e));
|
||||
}
|
||||
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
let data = addForm.value;
|
||||
data.bqId = addForm.value.sklList;
|
||||
if (data.id) {
|
||||
updateTbJcglXfll(data)
|
||||
.then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
addTbJcglXfll(data)
|
||||
.then((res) => {
|
||||
ElMessage({ message: "添加成功", type: "success" });
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//重置搜索
|
||||
function reset() {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
fjName: "",
|
||||
sfzh: "",
|
||||
ssbmdm: "",
|
||||
xtSjzt: "1"
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
let data = {
|
||||
fl: "02",
|
||||
sfzh: form.value.sfzh,
|
||||
xm: form.value.fjName,
|
||||
pageSize: form.value.size,
|
||||
pageCurrent: form.value.current,
|
||||
bqId: form.value.bqId,
|
||||
bqlx: form.value.bqlx,
|
||||
ssbmdm: form.value.ssbmdm
|
||||
};
|
||||
getTbJcglXfll(data)
|
||||
.then((res) => {
|
||||
loadingTable.value = false;
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
function add() {
|
||||
chackipt.value = false;
|
||||
title.value = "新增巡逻辅警信息";
|
||||
dialogFormVisible.value = true;
|
||||
ssbmIds.value = [];
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
imgUrl.value = "";
|
||||
}
|
||||
//点击修改打开弹窗
|
||||
function onClickUpdate(e) {
|
||||
chackipt.value = true;
|
||||
title.value = "修改巡逻辅警信息";
|
||||
getTbJcglXfllInfo(e.id).then((res) => {
|
||||
ssbmIds.value = [];
|
||||
proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
|
||||
ssbmIds.value.push(res);
|
||||
});
|
||||
addForm.value = res;
|
||||
imgUrl.value = res.tpid ? urlImg.value + res.tpid : "";
|
||||
addForm.value.sklList = res.sklList.map((item) => item.id);
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//删除人员
|
||||
function delDictItem(e) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
batchDeleteList([e.id]).then((res) => {
|
||||
ElMessage({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 276;
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 200;
|
||||
};
|
||||
// 人员档案
|
||||
const personDialog = ref(null);
|
||||
function getDocument(row) {
|
||||
personDialog.value.init(row);
|
||||
}
|
||||
defineExpose({
|
||||
add,
|
||||
batchDelete,
|
||||
handleFilter
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.dialog {
|
||||
.mj_box {
|
||||
display: flex;
|
||||
padding: 3rem;
|
||||
|
||||
.item {
|
||||
height: 40rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.leftAndRiight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeLeft,
|
||||
.checkedRight {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #07376d;
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
.jnbq {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
>.el-button.on {
|
||||
background: #046ce4;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: #001238;
|
||||
border-color: var(--el-disabled-border-color);
|
||||
color: var(--el-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input.is-disabled .el-input__inner:hover,
|
||||
::v-deep .el-select .el-input.is-disabled .el-input__inner {
|
||||
border-color: #09317f;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="分组名称">
|
||||
<el-input v-model="form.jzmc" 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>
|
||||
<div class="tabBox">
|
||||
<el-table :data="tableData" border ref="dataTreeList" row-key="id" style="width: 100%"
|
||||
@selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount" 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="80" />
|
||||
<el-table-column prop="jzmc" show-overflow-tooltip align="center" width="200" label="分组名称" />
|
||||
<el-table-column label="分组成员" prop="jzry">
|
||||
<template #default="{ row }">
|
||||
<span class="xmTag" v-for="item in row.jzry" :key="item.id">{{
|
||||
item.xm
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="150px" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="onClickUpdate(row.id)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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="form.pageCurrent" :page-sizes="[10, 20, 50]" :page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="openDialog" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="openDialog = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="addForm" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item label="分组名称" prop="jzmc">
|
||||
<el-input v-model="addForm.jzmc" placeholder="请输入分组名称" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分组成员" prop="jzry" style="width: 100%">
|
||||
<div class="ipt" @click.stop="fjVisible = true">
|
||||
<el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close="handleClosefj(tag)">
|
||||
{{ tag.xm }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 辅警弹唱 -->
|
||||
<FjLoad v-model="fjVisible" :Single="false" @choosedUsers="hanlderChooseFj" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
|
||||
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed,
|
||||
defineExpose,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const emit = defineEmits(["deleteMore"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
//筛选条件参数
|
||||
const formDefault = ref({});
|
||||
const form = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const loadingTable = ref(false);
|
||||
const title = ref("新增分组");
|
||||
const openDialog = ref(false); //打开弹窗
|
||||
const total = ref(0); //总数据
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //按钮是否显示加载
|
||||
const ids = ref([]); //批量删除的ID
|
||||
//新增表单参数
|
||||
const elform = ref(null); //表单对象
|
||||
const addFormDefault = ref({});
|
||||
const addForm = ref({});
|
||||
//新增表单验证数据
|
||||
const rules = reactive({
|
||||
jzmc: [{ required: true, message: "请输入分组名称", trigger: "blur" }]
|
||||
});
|
||||
const fjData = ref([]); //选择的辅警数据
|
||||
const fjVisible = ref(false); //辅警弹窗
|
||||
|
||||
onMounted(() => {
|
||||
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value));
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
handleFilter(); //查询数据
|
||||
});
|
||||
|
||||
function init() {
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
openDialog.value = true;
|
||||
}
|
||||
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
qcckGet(form.value, "/mosty-jcgl/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
loadingTable.value = false;
|
||||
res.records.forEach((element) => {
|
||||
element.jzry = JSON.parse(element.jzry);
|
||||
});
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
//选择辅警
|
||||
function hanlderChooseFj(arr) {
|
||||
fjData.value = arr;
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
}
|
||||
|
||||
// 删除辅警
|
||||
function handleClosefj(tag) {
|
||||
fjData.value.splice(fjData.value.indexOf(tag), 1);
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
emit("deleteMore", ids.value);
|
||||
};
|
||||
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.pageSize = e;
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
form.value.pageCurrent = e;
|
||||
getListData();
|
||||
}
|
||||
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
if (title.value == "编辑分组") {
|
||||
qcckPut(addForm.value, "/mosty-jcgl/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
openDialog.value = false;
|
||||
loading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
addForm.value.jzry = JSON.stringify(fjData.value);
|
||||
qcckPost(addForm.value, "/mosty-jcgl/tbJcglXfllFz")
|
||||
.then((res) => {
|
||||
ElMessage({ message: "添加成功", type: "success" });
|
||||
openDialog.value = false;
|
||||
loading.value = false;
|
||||
handleFilter();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//重置搜索
|
||||
function reset() {
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value));
|
||||
getListData();
|
||||
}
|
||||
|
||||
//点击修改打开弹窗
|
||||
function onClickUpdate(id) {
|
||||
title.value = "编辑分组";
|
||||
qcckGet({}, "/mosty-jcgl/tbJcglXfllFz/" + id).then((res) => {
|
||||
addForm.value = res;
|
||||
fjData.value = JSON.parse(res.jzry);
|
||||
openDialog.value = true;
|
||||
});
|
||||
}
|
||||
//删除人员
|
||||
function delDictItem(e) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deletEate(e.id);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deletEate(ids.value);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
function deletEate(data) {
|
||||
qcckPost(data, "/mosty-jcgl/tbJcglXfllFz/deleteList").then((res) => {
|
||||
ElMessage({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
batchDelete,
|
||||
init
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.xmTag {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
padding: 1px 6px;
|
||||
margin: 0 4px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,569 @@
|
||||
<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
|
||||
@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="form" :inline="true">
|
||||
<el-form-item label="经验名称">
|
||||
<el-input
|
||||
v-model="form.bqmc"
|
||||
placeholder="请输入经验名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</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>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
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="selection" width="40" align="center" />
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqbh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="经验编号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="350px"
|
||||
label="经验名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column sortable label="经验人员" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" @click="info(row)">{{ row.xfllSl }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150" label="数据状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="success" v-if="row.xtSjzt != 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else>注销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="mxId" show-overflow-tooltip label="计算模型" align="center" width="200px">
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="200px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button size="small" @click="setInfo(row.id)">详情</el-button> -->
|
||||
<el-button @click="update(row.id)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" 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="form.pageCurrent"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ diaTitle }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
v-if="!isDisabled"
|
||||
:loading="loading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
:model="addForm"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="经验编号" prop="bqbh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="addForm.bqbh"
|
||||
placeholder="请输入经验编号"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经验名称" prop="bqmc">
|
||||
<el-input
|
||||
v-model="addForm.bqmc"
|
||||
:readonly="disable"
|
||||
placeholder="请输入经验名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="width: 100%" v-if="xfllActive">
|
||||
<el-tabs
|
||||
style="width: 100%"
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="民警" name="mj"></el-tab-pane>
|
||||
<el-tab-pane label="辅警" name="fj"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-table
|
||||
:data="xfllDtata"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
:label="activeName == 'mj' ? '民警姓名' : '辅警姓名'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sfzh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="身份证号码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jh"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChangexf"
|
||||
@current-change="handleCurrentChangexf"
|
||||
:current-page="xfllQuery.current"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="xfllQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="xfllTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getTbJcglBq,
|
||||
addTbJcglBq,
|
||||
putTbJcglBq,
|
||||
infoTbJcglBq,
|
||||
delTbJcglBq,
|
||||
deleteTbJcglBq
|
||||
} from "@/api/basicsmanage/experience";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const xfllActive = ref(false);
|
||||
const ids = ref([]); //批量注销的ID
|
||||
const activeName = ref("mj");
|
||||
//巡防力量数据
|
||||
const xfllDtata = ref([]);
|
||||
//巡防力量查询参数
|
||||
const xfllQuery = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
fl: "01"
|
||||
});
|
||||
const xfllTotal = ref(0);
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否显示新增弹窗
|
||||
const elform = ref({}); //表单对象
|
||||
const loadingTable = ref(true);
|
||||
const chackadd = ref(true); //切换新增修改
|
||||
const disable = ref(false);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const diaTitle = ref("新增经验管理");
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //按钮是否显示加载
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
//赛选条件参数
|
||||
const form = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
id: "",
|
||||
bqbh: "",
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
});
|
||||
|
||||
function addLoad() {
|
||||
xfllActive.value = false;
|
||||
addForm.value = {
|
||||
bqbh: "JY" + repairZero(total.value + 1),
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
};
|
||||
isDisabled.value = false;
|
||||
disable.value = false;
|
||||
chackadd.value = true;
|
||||
diaTitle.value = "新增经验管理";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bqmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入经验名称"
|
||||
}
|
||||
]
|
||||
// mxId: [
|
||||
// {
|
||||
// required: true
|
||||
// }
|
||||
// ]
|
||||
});
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量注销数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq(ids.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "注销成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getListData();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
//补0函数
|
||||
function repairZero(num) {
|
||||
let data = num;
|
||||
if (1 <= num < 10) {
|
||||
data = "000" + num;
|
||||
} else if (10 <= num < 100) {
|
||||
data = "00" + num;
|
||||
} else if (100 <= num < 1000) {
|
||||
data = "0" + num;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
//获取巡防力量数据
|
||||
function getXfll() {
|
||||
let data = {
|
||||
fl: xfllQuery.value.fl,
|
||||
pageSize: xfllQuery.value.size,
|
||||
pageCurrent: xfllQuery.value.current,
|
||||
bqId: xfllQuery.value.bqId || ""
|
||||
};
|
||||
getTbJcglXfll(data).then((res) => {
|
||||
xfllDtata.value = res.records;
|
||||
xfllTotal.value = res.total;
|
||||
});
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.pageSize = e;
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
function handleClick() {
|
||||
if (activeName.value == "mj") {
|
||||
xfllQuery.value.fl = "01";
|
||||
getXfll();
|
||||
} else {
|
||||
xfllQuery.value.fl = "02";
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
form.value.pageCurrent = e;
|
||||
getListData();
|
||||
}
|
||||
//查看详情
|
||||
function setInfo(id) {
|
||||
infoTbJcglBq(id).then((res) => {
|
||||
disable.value = true;
|
||||
diaTitle.value = res.bqmc + "经验详情";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
isDisabled.value = true;
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update(id) {
|
||||
infoTbJcglBq(id).then((res) => {
|
||||
disable.value = false;
|
||||
isDisabled.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = res.bqmc + "经验修改";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (e.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
function info(row) {
|
||||
infoTbJcglBq(row.id).then((res) => {
|
||||
disable.value = false;
|
||||
isDisabled.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = res.bqmc + "经验修改";
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (row.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = row.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1.5e3);
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!chackadd.value) {
|
||||
putTbJcglBq(data).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addTbJcglBq(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(id) {
|
||||
// 删除数据用
|
||||
// delTbJcglBq(id).then((res) => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq([id]).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "注销成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//更改查询条数xfll
|
||||
function handleSizeChangexf(e) {
|
||||
activeName.size = e;
|
||||
xfllQuery.value.current = 1;
|
||||
getXfll();
|
||||
}
|
||||
//分页查询xfll
|
||||
function handleCurrentChangexf(e) {
|
||||
xfllQuery.value.current = e;
|
||||
getListData();
|
||||
getXfll();
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
const params = form.value;
|
||||
getTbJcglBq(params).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//重置查询条件
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
bqmc: "",
|
||||
bqlx: "EXP"
|
||||
};
|
||||
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";
|
||||
::v-deep .el-tabs--card > .el-tabs__header {
|
||||
border-bottom: 1px solid #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border: 1px solid #03438b;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||
border-left: 1px solid #234c9e;
|
||||
}
|
||||
.textBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.textBtn:hover {
|
||||
color: #2a5dc2;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 详情列表 -->
|
||||
<el-dialog
|
||||
title="人员档案管理"
|
||||
width="1400px"
|
||||
:model-value="peopleValue"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
@close="closed"
|
||||
>
|
||||
<div class="cntBox">
|
||||
<div class="cntbox-title one-border">{{dataValue.xm }}个人综合档案</div>
|
||||
<div class="cntInfo">
|
||||
<div class="left">
|
||||
<div class="img">
|
||||
<img src="@\assets\images\layout\default_male.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="right">
|
||||
<li class="rightItem">
|
||||
<div class="text">姓名</div>
|
||||
<div class="info">{{ dataValue.xm }}</div>
|
||||
<div class="text">性别</div>
|
||||
<div class="info">{{ dataValue.xbmc }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">身份证号</div>
|
||||
<div class="info">{{ dataValue.sfzh }}</div>
|
||||
<div class="text">年领</div>
|
||||
<div class="info">{{ dataValue.age }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">联系电话</div>
|
||||
<div class="info">{{ dataValue.lxdh }}</div>
|
||||
<div class="text">警号</div>
|
||||
<div class="info">{{ dataValue.jh }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">所属单位</div>
|
||||
<div class="info">{{ dataValue.ssbm }}</div>
|
||||
<div class="text">家庭地址</div>
|
||||
<div class="info">{{ dataValue.ssbm }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">入职时间</div>
|
||||
<div class="info"></div>
|
||||
<div class="text">籍贯</div>
|
||||
<div class="info">{{ dataValue.jgdm }}</div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">民族</div>
|
||||
<div class="info">{{ dataValue.mzmc }}</div>
|
||||
<div class="text">学历</div>
|
||||
<div class="info"></div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">婚姻状况</div>
|
||||
<div class="info"></div>
|
||||
<div class="text">政治面貌</div>
|
||||
<div class="info"></div>
|
||||
</li>
|
||||
<li class="rightItem">
|
||||
<div class="text">特殊技能</div>
|
||||
<div class="infoText"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cntbox-title two-border">训练档案</div>
|
||||
<div class="buns">
|
||||
<el-button @click="add_edit('', 'add')">新增</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
width="100%"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column label="训练日期" prop="xlrq" align="center" />
|
||||
<el-table-column label="训练类型" prop="xllx" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.D_BZ_XFXLLX"
|
||||
:value="row.xllx"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="训练时长(H)" prop="xlsc" align="center" />
|
||||
<el-table-column label="训练层级" prop="xlcj" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.D_BZ_XLCJ"
|
||||
:value="row.xlcj"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="bz" align="center" />
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="add_edit(row, 'edit')" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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>
|
||||
<!-- 添加-编辑- 训练记录 -->
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="400px"
|
||||
:model-value="recordsValue"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="addForm"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="right"
|
||||
:label-width="120"
|
||||
>
|
||||
<el-form-item label="训练日期" prop="xlrq">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="addForm.xlrq"
|
||||
placeholder="请选择"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练时长(h)" prop="xlsc">
|
||||
<el-input
|
||||
v-model="addForm.xlsc"
|
||||
placeholder="请输入训练时长(h)"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练类型 " prop="xllx">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="addForm.xllx"
|
||||
placeholder="请选择训练类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XFXLLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="训练层级" prop="xlcj">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="addForm.xlcj"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XLCJ"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeAdd">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submit"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import {
|
||||
addXljl,
|
||||
getXljlById,
|
||||
updateXljl,
|
||||
deleteXljl,
|
||||
getXljlList
|
||||
} from "@/api/base.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
D_BZ_XB: Array,
|
||||
D_BZ_MZ: Array,
|
||||
D_BZ_XLCJ: Array,
|
||||
D_BZ_XFXLLX: Array
|
||||
});
|
||||
const peopleValue = ref(false);
|
||||
const recordsValue = ref(false); //新增
|
||||
const dataValue = ref({});
|
||||
const elform = ref(null); //表单对象
|
||||
const loading = ref(false);
|
||||
const titleValue = ref("");
|
||||
const addFormDefault = ref({});
|
||||
const addForm = ref({
|
||||
xlrq: "",
|
||||
xlsc: "",
|
||||
xllx: "",
|
||||
xlcj: ""
|
||||
}); //训练档案表单
|
||||
const tableData = ref([]); //训练档案
|
||||
const rules = reactive({
|
||||
xlrq: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练日期"
|
||||
}
|
||||
],
|
||||
xlsc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入训练时长(h)"
|
||||
}
|
||||
],
|
||||
xllx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练类型"
|
||||
}
|
||||
],
|
||||
xlcj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择训练层级"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
|
||||
});
|
||||
|
||||
// 初始化
|
||||
function init(row) {
|
||||
peopleValue.value = true;
|
||||
row.age = IdCard(row.sfzh, 3);
|
||||
let sex = props.D_BZ_XB.find((v) => {
|
||||
return v.value == row.xbdm;
|
||||
});
|
||||
row.xbmc = sex ? sex.label : "";
|
||||
let origin = props.D_BZ_MZ.find((v) => {
|
||||
return v.value == row.mzdm;
|
||||
});
|
||||
row.mzmc = origin ? origin.label : "";
|
||||
dataValue.value = row;
|
||||
getDetail(dataValue.value.ryid);
|
||||
}
|
||||
|
||||
// 查询记录数据
|
||||
function getDetail(id) {
|
||||
getXljlList({ xfid: id }).then((res) => {
|
||||
tableData.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
// 新增-编辑
|
||||
function add_edit(row, type) {
|
||||
recordsValue.value = true;
|
||||
if (type == "add") {
|
||||
titleValue.value = "新增";
|
||||
} else {
|
||||
titleValue.value = "编辑";
|
||||
addForm.value = Object.assign(row);
|
||||
}
|
||||
}
|
||||
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
let data = addForm.value;
|
||||
let params = {
|
||||
...addForm.value,
|
||||
id: dataValue.value.id,
|
||||
xfllId: dataValue.value.ryid
|
||||
};
|
||||
if (titleValue.value == "新增") {
|
||||
addXljl(params)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.ryid);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (titleValue.value == "编辑") {
|
||||
updateXljl(addForm.value)
|
||||
.then((res) => {
|
||||
ElMessage({ message: "编辑成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.ryid);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭新增弹窗
|
||||
function closeAdd() {
|
||||
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
|
||||
recordsValue.value = false;
|
||||
}
|
||||
|
||||
//删除人员
|
||||
function delDictItem(id) {
|
||||
let ids = [id];
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
deleteXljl(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
getDetail(dataValue.value.ryid);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closed() {
|
||||
peopleValue.value = false;
|
||||
dataValue.value = {};
|
||||
}
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin boderLine() {
|
||||
border: 1px solid #136bff;
|
||||
}
|
||||
.cntBox {
|
||||
width: 100%;
|
||||
height: 64vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: #fff;
|
||||
.cntbox-title {
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.one-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
.two-border {
|
||||
@include boderLine;
|
||||
border-top: none;
|
||||
}
|
||||
.cntInfo {
|
||||
display: flex;
|
||||
.left {
|
||||
width: 400px;
|
||||
@include boderLine;
|
||||
border-right: none;
|
||||
position: relative;
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 180px;
|
||||
height: 220px;
|
||||
background: #ccc;
|
||||
img {
|
||||
width: 180px;
|
||||
max-height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin boderc() {
|
||||
min-height: 40px;
|
||||
line-height: 26px;
|
||||
color: rgb(27, 189, 238);
|
||||
border-right: 1px solid #136bff;
|
||||
border-left: 1px solid #136bff;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.rightItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include boderLine;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
div {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
width: 200px;
|
||||
}
|
||||
.info {
|
||||
width: calc((100% - 400px) / 2);
|
||||
@include boderc;
|
||||
}
|
||||
.infoText {
|
||||
width: calc(100% - 200px);
|
||||
@include boderc;
|
||||
}
|
||||
}
|
||||
.rightItem:last-child {
|
||||
border-bottom: 1px solid #136bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buns {
|
||||
text-align: right;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,577 @@
|
||||
<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="form" :inline="true">
|
||||
<el-form-item label="技能名称">
|
||||
<el-input
|
||||
v-model="form.textName"
|
||||
placeholder="请输入技能名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</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%"
|
||||
@selection-change="handleSelectionChange"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
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"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqbh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="技能编号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="bqmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="350px"
|
||||
label="技能名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="技能人数" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" @click="info(row)">{{ row.xfllSl }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150" label="数据状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="success" v-if="row.xtSjzt != 0"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else>注销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="200px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row, 'detail')" size="small"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="update(row, 'edit')"
|
||||
size="small"
|
||||
v-if="row.xtSjzt == 1"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="delDictItem(row)"
|
||||
v-if="row.xtSjzt == 1"
|
||||
type="danger"
|
||||
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="form.current"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submit"
|
||||
v-if="!isDisabled"
|
||||
:loading="loading"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
:model="addForm"
|
||||
:inline="true"
|
||||
:disabled="isDisabled"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="技能编号" prop="bqbh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="addForm.bqbh"
|
||||
placeholder="请输入技能编号"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="技能名称" prop="bqmc">
|
||||
<el-input
|
||||
v-model="addForm.bqmc"
|
||||
placeholder="请输入技能名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="width: 100%" v-if="xfllActive">
|
||||
<el-tabs
|
||||
style="width: 100%"
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="民警" name="mj"></el-tab-pane>
|
||||
<el-tab-pane label="辅警" name="fj"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-table
|
||||
:data="xfllDtata"
|
||||
border
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
:label="activeName == 'mj' ? '民警姓名' : '辅警姓名'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sfzh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="身份证号码"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jh"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChangexf"
|
||||
@current-change="handleCurrentChangexf"
|
||||
:current-page="xfllQuery.current"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="xfllQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="xfllTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PEO from "@/assets/images/layout/body-bg.png";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
getTbJcglBq,
|
||||
getTbJcglXfll,
|
||||
addTbJcglBq,
|
||||
deleteTbJcglBq,
|
||||
getTbJcglBqInfo,
|
||||
updateTbJcglBqInfo
|
||||
} from "@/api/xfll";
|
||||
import { delTbJcglBq } from "@/api/basicsmanage/experience";
|
||||
const xfllActive = ref(false);
|
||||
const activeName = ref("mj");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const loadingTable = ref(true);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const ids = ref([]); //批量注销的ID
|
||||
const title = ref("新增专业技能");
|
||||
//巡防力量数据
|
||||
const xfllDtata = ref([]);
|
||||
//巡防力量查询参数
|
||||
const xfllQuery = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
fl: "01"
|
||||
});
|
||||
const xfllTotal = ref(0);
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
id: "",
|
||||
bqbh: "",
|
||||
bqmc: ""
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bqmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入技能名称"
|
||||
}
|
||||
]
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const elform = ref({}); //表当对象
|
||||
const isDisabled = ref(false); //是否警用保存按钮
|
||||
const loading = ref(false); //是否显示按钮加载
|
||||
const checkAdd = ref(false);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
function handleClick() {
|
||||
if (activeName.value == "mj") {
|
||||
xfllQuery.value.fl = "01";
|
||||
getXfll();
|
||||
} else {
|
||||
xfllQuery.value.fl = "02";
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//获取巡防力量数据
|
||||
function getXfll() {
|
||||
let data = {
|
||||
fl: xfllQuery.value.fl,
|
||||
pageSize: xfllQuery.value.size,
|
||||
pageCurrent: xfllQuery.value.current,
|
||||
bqId: xfllQuery.value.bqId || ""
|
||||
};
|
||||
getTbJcglXfll(data).then((res) => {
|
||||
xfllDtata.value = res.records;
|
||||
xfllTotal.value = res.total;
|
||||
});
|
||||
}
|
||||
//查看详情
|
||||
function setInfo(e) {
|
||||
title.value = "专业技能技能详情";
|
||||
getTbJcglBqInfo([e.id]).then((res) => {
|
||||
addForm.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
isDisabled.value = true;
|
||||
});
|
||||
}
|
||||
//批量注销数据
|
||||
const batchDelete = () => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq(ids.value).then((res) => {
|
||||
ElMessage({
|
||||
message: "注销成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//补0函数
|
||||
function repairZero(num) {
|
||||
let data = num;
|
||||
if (1 <= num < 10) {
|
||||
data = "000" + num;
|
||||
} else if (10 <= num < 100) {
|
||||
data = "00" + num;
|
||||
} else if (100 <= num < 1000) {
|
||||
data = "0" + num;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
function add() {
|
||||
xfllActive.value = false;
|
||||
isDisabled.value = false;
|
||||
checkAdd.value = true;
|
||||
addForm.value = {
|
||||
bqbh: "JN" + repairZero(total.value + 1),
|
||||
bqmc: "",
|
||||
bqlx: "SKL"
|
||||
};
|
||||
title.value = "新增专业技能";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1.5e3);
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!checkAdd.value) {
|
||||
updateTbJcglBqInfo(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
addTbJcglBq(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
let data = {
|
||||
pageSize: form.value.size,
|
||||
pageCurrent: form.value.current,
|
||||
bqmc: form.value.textName,
|
||||
bqlx: "SKL"
|
||||
};
|
||||
getTbJcglBq(data)
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.size = e;
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
xfllQuery.value.current = e;
|
||||
}
|
||||
//更改查询条数xfll
|
||||
function handleSizeChangexf(e) {
|
||||
activeName.size = e;
|
||||
xfllQuery.value.current = 1;
|
||||
getXfll();
|
||||
}
|
||||
//分页查询xfll
|
||||
function handleCurrentChangexf(e) {
|
||||
xfllQuery.value.current = e;
|
||||
getListData();
|
||||
getXfll();
|
||||
}
|
||||
//修改技能
|
||||
function update(e, type) {
|
||||
isDisabled.value = type == "edit" ? false : true;
|
||||
getTbJcglBqInfo(e.id).then((res) => {
|
||||
addForm.value = res;
|
||||
activeName.value = "mj";
|
||||
xfllQuery.value.fl = "01";
|
||||
title.value = type == "edit" ? "专业技能修改" : "专业技能详情";
|
||||
checkAdd.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (e.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = e.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
function info(row) {
|
||||
getTbJcglBqInfo(row.id).then((res) => {
|
||||
addForm.value = res;
|
||||
activeName.value = "mj";
|
||||
xfllQuery.value.fl = "01";
|
||||
|
||||
title.value = "专业技能详情";
|
||||
checkAdd.value = false;
|
||||
isDisabled.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
if (row.xfllSl == 0) {
|
||||
xfllActive.value = false;
|
||||
} else {
|
||||
xfllActive.value = true;
|
||||
xfllQuery.value.bqId = row.id;
|
||||
getXfll();
|
||||
}
|
||||
}
|
||||
//注销技能
|
||||
function delDictItem(e) {
|
||||
// 注销数据用
|
||||
// delTbJcglBq(e.id).then((res) => {
|
||||
proxy
|
||||
.$confirm("确定要注销", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteTbJcglBq([e.id]).then((res) => {
|
||||
ElMessage({
|
||||
message: "注销成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
};
|
||||
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";
|
||||
::v-deep .el-tabs--card > .el-tabs__header {
|
||||
border-bottom: 1px solid #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #03438b;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border: 1px solid #03438b;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||
border-left: 1px solid #234c9e;
|
||||
}
|
||||
.textBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.textBtn:hover {
|
||||
color: #2a5dc2;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">每日街面装备</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="dialogFormVisible = true">
|
||||
<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="form" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<el-select clearable v-model="form.ssbm" placeholder="请选择所属部门">
|
||||
<el-option label="警察局" value="1"></el-option>
|
||||
<el-option label="警务室" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类型">
|
||||
<el-select clearable v-model="form.zblx" placeholder="请选择装备类型">
|
||||
<el-option label="枪支" value="1"></el-option>
|
||||
<el-option label="弹药" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="生产日期">
|
||||
<el-date-picker
|
||||
v-model="form.gzsj"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
prop="code"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="100px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="type"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="350px"
|
||||
label="装备类型"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="department"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
width="250px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="date"
|
||||
show-overflow-tooltip
|
||||
label="生产日期"
|
||||
align="center"
|
||||
width="200px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="batch"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
label="录入批次"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="coding"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="唯一编码"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="status"
|
||||
show-overflow-tooltip
|
||||
label="状态"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="150px"
|
||||
>
|
||||
<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)"
|
||||
>
|
||||
<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="form.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="form.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">新增装备</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
:model="addForm"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="装备类型" prop="zblx">
|
||||
<el-select
|
||||
v-model="addForm.zblx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="枪支" value="1" />
|
||||
<el-option label="警务移动端" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="ssbm">
|
||||
<el-select
|
||||
v-model="addForm.ssbm"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="部门一" value="1" />
|
||||
<el-option label="部门二" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="购置日期">
|
||||
<el-date-picker
|
||||
v-model="addForm.gzrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="录入批次">
|
||||
<el-select
|
||||
v-model="addForm.lrpc"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="第一批次" value="1" />
|
||||
<el-option label="第二批次" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="唯一编码" prop="wybm">
|
||||
<el-input
|
||||
v-model="addForm.wybm"
|
||||
placeholder="请输入编码"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用年限" prop="synx">
|
||||
<el-date-picker
|
||||
v-model="addForm.synx"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备名称">
|
||||
<el-input
|
||||
v-model="addForm.zbmc"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号">
|
||||
<el-input
|
||||
v-model="addForm.sbxh"
|
||||
placeholder="请输入设备型号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备厂商" prop="zbcs">
|
||||
<el-input
|
||||
v-model="addForm.zbcs"
|
||||
placeholder="请输入装备厂商"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="addForm.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const tableHeight = ref(); // 表格高度
|
||||
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
zblx: "",
|
||||
ssbm: "",
|
||||
gzsj: ""
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({
|
||||
zblx: "1",
|
||||
ssbm: "1",
|
||||
gzrq: "",
|
||||
lrpc: "1",
|
||||
wybm: "",
|
||||
synx: "",
|
||||
zbmc: "",
|
||||
sbxh: "",
|
||||
zbcs: "",
|
||||
bz: ""
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const elform = ref({}); //表单对象
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
zblx: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
ssbm: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
wybm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入唯一编码"
|
||||
}
|
||||
],
|
||||
synx: [
|
||||
{
|
||||
required: true,
|
||||
message: "选择使用年限"
|
||||
}
|
||||
],
|
||||
zbcs: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入装备厂商"
|
||||
}
|
||||
]
|
||||
});
|
||||
//新增提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
|
||||
if (valid) {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
//点击查询
|
||||
const handleFilter = () => {
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
const arr = [
|
||||
{
|
||||
code: 1,
|
||||
type: "移动警务终端",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
code: 2,
|
||||
type: "枪支",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
code: 3,
|
||||
type: "枪支",
|
||||
department: "xx部门",
|
||||
date: "2022-06-02",
|
||||
batch: "第二批次",
|
||||
coding: "NKJ89897",
|
||||
status: "正常"
|
||||
}
|
||||
];
|
||||
tableData.value = arr;
|
||||
total.value = arr.length;
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
zblx: "",
|
||||
ssbm: "",
|
||||
gzsj: ""
|
||||
};
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="modelValue">
|
||||
<div class="head_box_ii">
|
||||
<el-form v-model="form" inline>
|
||||
<el-form-item label="巡逻时间" prop="bksj">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="playTime"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
start-placeholder="巡逻开始时间"
|
||||
end-placeholder="巡逻结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择巡逻时间"
|
||||
@change="handletime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备号" prop="bksj">
|
||||
<el-input v-model="form.gpsId" placeholder="请输入设备号" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button size="small" class="btn" @click="getClDare">回放</el-button>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="map"><GdMap/> </div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
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, reactive } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref([]); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const form = reactive({})
|
||||
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) => {
|
||||
form.gpsId = val.sbbh
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val){
|
||||
form.kssj = val ? val[0] : ''
|
||||
form.jssj = val ? val[1] : ''
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", 'route');
|
||||
qcckPost(form,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
|
||||
let arr = res || []
|
||||
let brr = arr.map(item=>{return [item.jd,item.wd]})
|
||||
if (brr.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:brr,isClear:true,flag:'clgjRoute'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
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;
|
||||
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 62vh;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,638 @@
|
||||
<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
|
||||
@click="deletList"
|
||||
:disabled="multipleSelection.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="reback" >
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Aim />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">返回</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form class="mosty-from-wrap" :model="listQuery" :inline="true">
|
||||
<el-form-item label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请输入设备编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备品牌">
|
||||
<el-select
|
||||
v-model="listQuery.sbPp"
|
||||
class="m-2"
|
||||
placeholder="请选择设备品牌"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SBPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</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
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="250px"
|
||||
label="设备名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbFl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="设备分类"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_CLCS" :value="row.sbFl" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="azwz"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="150px"
|
||||
label="安装位置"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_AZWZ" :value="row.azwz" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbbh"
|
||||
label="设备编号"
|
||||
width="250px"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="sbPp"
|
||||
show-overflow-tooltip
|
||||
label="设备品牌"
|
||||
align="center"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_SBPP" :value="row.sbPp" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.xtSjzt" :options="D_BZ_SJZT"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row.id)" size="small">修改</el-button>
|
||||
<el-button @click="delDictItem(row)" type="danger" 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 v-if="dialogFormVisible" 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="dialogFormVisible = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
|
||||
<el-form-item prop="sbmc" label="设备名称">
|
||||
<el-input
|
||||
v-model="form.sbmc"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbFl" label="设备分类">
|
||||
<el-select
|
||||
v-model="form.sbFl"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="azwz" label="安装位置">
|
||||
<el-select
|
||||
v-model="form.azwz"
|
||||
class="m-2"
|
||||
placeholder="请选择安装位置"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_AZWZ"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xtSjzt" label="设备状态">
|
||||
<el-select
|
||||
v-model="form.xtSjzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_BZ_SJZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbPp" label="设备品牌">
|
||||
<el-select
|
||||
v-model="form.sbPp"
|
||||
class="m-2"
|
||||
placeholder="请选择设备品牌"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SBPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否支持视频" prop="sfsp">
|
||||
<el-radio-group v-model="form.sfsp" class="ml-4">
|
||||
<el-radio
|
||||
v-for="(item, index) in D_BZ_SFSP"
|
||||
:label="item.value"
|
||||
:key="index"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbbh" label="设备编号" class="tiaos">
|
||||
<el-input
|
||||
v-model="form.sbbh"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-button @click="getTS" v-show="form.sfsp=='1'">调试</el-button>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.textarea"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getXfclsb,
|
||||
addXfclsb,
|
||||
upXfclsb,
|
||||
delXfclsb,
|
||||
infoXfsb
|
||||
} from "@/api/basicsmanage/watchmanCar";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, watch,onUnmounted } from "vue";
|
||||
import { number } from "echarts";
|
||||
import { getVideoUrl , getReplayUrl} from "@/api/dpApi/otherApi";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_SJZT,
|
||||
D_BZ_CLLX,
|
||||
D_BZ_CLPP,
|
||||
D_BZ_CLCS,
|
||||
D_BZ_AZWZ,
|
||||
D_BZ_SBPP,
|
||||
D_BZ_SFSP
|
||||
} = proxy.$dict(
|
||||
"D_BZ_CLLX",
|
||||
"D_BZ_CLCS",
|
||||
"D_BZ_SJZT",
|
||||
"D_BZ_CLPP",
|
||||
"D_BZ_AZWZ",
|
||||
"D_BZ_SBPP",
|
||||
"D_BZ_SFSP"
|
||||
);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
cid:props.id
|
||||
});
|
||||
const props = defineProps({
|
||||
id: String
|
||||
})
|
||||
const chackipt = ref(true);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const cascader = ref(null);
|
||||
const loadingTable = ref(true);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const depList = ref([]); //部门数据
|
||||
|
||||
onMounted(() => {
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const cId=ref(props.id)
|
||||
const disable = ref(false);
|
||||
const chackadd = ref(false); //切换新增修改
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const diaTitle = ref("新增巡防设备");
|
||||
const dialogFormVisible = ref(false);
|
||||
const urls =ref ({
|
||||
realplay: '',
|
||||
talk: '',
|
||||
playback: ''
|
||||
})
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 返回
|
||||
function reback(){
|
||||
emitter.emit("reback")
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
listQuery.value.cid=props.id
|
||||
const params = listQuery.value;
|
||||
form.value.cid=props.id
|
||||
getXfclsb(params).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//重置搜索
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
cid:props.id
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
//调试getTS
|
||||
function getTS() {
|
||||
if (form.value.sbbh == "" || form.value.sbbh == null) {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: `请先输入设备编号`
|
||||
});
|
||||
} else if (form.value.sbPp == "" || form.value.sbPp == null) {
|
||||
proxy.$message({
|
||||
type: "warning",
|
||||
message: `请先选择设备品牌`
|
||||
});
|
||||
} else{
|
||||
//海能达(通过设备编号获取感知流)
|
||||
if(form.value.sbPp == "01"){
|
||||
const params = {
|
||||
cameraIndexCode: form.value.sbbh
|
||||
};
|
||||
getVideoUrl(params).then(res=>{
|
||||
if(res.data.data){
|
||||
urls.value.realplay = res.data.data.url
|
||||
realplay()
|
||||
}else{
|
||||
proxy.$message({
|
||||
message: "获取不到视频流，播放失败!!!",
|
||||
grouping:true,
|
||||
type: "info"
|
||||
});
|
||||
}
|
||||
})
|
||||
}else{
|
||||
//海康adas流
|
||||
const sbbh= '51050400991318001379'
|
||||
emitter.emit("openGzyVideo",sbbh)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
//新增弹窗
|
||||
const addDict = (row) => {
|
||||
chackipt.value = false;
|
||||
isEdit.value = false;
|
||||
dialogForm.value = {};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
//新增表单对象
|
||||
const form = ref({
|
||||
cid:props.id,
|
||||
azwz: "",
|
||||
sbFl: "",
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
xtSjzt: "",
|
||||
sfsp: "0",
|
||||
bz: ""
|
||||
});
|
||||
const rules = reactive({
|
||||
sbFl: [{ required: true, message: "请选择设备种类", trigger: "change" }],
|
||||
azwz: [{ required: true, message: "请选择安装位置", trigger: "change" }],
|
||||
sbbh: [{ required: true, message: "请输入设备编号", trigger: "change" }],
|
||||
sbPp: [{ required: true, message: "请输入设备品牌", trigger: "change" }],
|
||||
sbmc: [{ required: true, message: "请输入设备名称", trigger: "change" }],
|
||||
sfsp: [{ required: true, trigger: "change" }]
|
||||
});
|
||||
//修改
|
||||
function update(id) {
|
||||
chackipt.value = true;
|
||||
infoXfsb(id).then((res) => {
|
||||
disable.value = false;
|
||||
chackadd.value = true;
|
||||
diaTitle.value = "设备修改";
|
||||
form.value = res;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//重置表单
|
||||
function formReset() {
|
||||
form.value = {
|
||||
cid:props.id,
|
||||
azwz: "",
|
||||
sbFl: "",
|
||||
sbbh: "",
|
||||
sbPp: "",
|
||||
sbmc: "",
|
||||
xtSjzt: "",
|
||||
sfsp: "0",
|
||||
bz: ""
|
||||
};
|
||||
}
|
||||
function addLoad() {
|
||||
chackipt.value = false;
|
||||
formReset();
|
||||
disable.value = false;
|
||||
chackadd.value = false;
|
||||
diaTitle.value = "新增设备";
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
}
|
||||
const elform = ref(null);
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
let data = new FormData();
|
||||
const keys = Object.keys(form.value);
|
||||
keys.map((item) => {
|
||||
if (form.value[item] != null && item != "cid") {
|
||||
data.append(item, form.value[item]);
|
||||
} else if (item == "cid") {
|
||||
data.append("cid", form.value.cid);
|
||||
}
|
||||
});
|
||||
data.append("sbbh", form.value.sbbh);
|
||||
if (chackadd.value) {
|
||||
form.value.cid=props.id;
|
||||
upXfclsb(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
form.value.cid=props.id;
|
||||
addXfclsb(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = [row.id];
|
||||
delXfclsb(ids).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
delXfclsb(ids).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = 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";
|
||||
|
||||
.tiaos {
|
||||
position: relative;
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: -100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<div v-if="showxfclgl">
|
||||
<div class="titleBox">
|
||||
<div class="title">巡防车辆管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad('add',id)">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList('')" :disabled="multipleSelection.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"><Delete /> </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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form class="mosty-from-wrap" :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.cph" clearable placeholder="请输入车牌号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌">
|
||||
<el-input v-model="listQuery.clpp" clearable placeholder="请输入车辆品牌"></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="cntBox-bb">
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
row-key="id"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
v-loading="loadingTable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" type="index" width="60px" label="序号"/>
|
||||
<el-table-column prop="ssbm" align="center" label="所属部门" show-overflow-tooltip />
|
||||
<el-table-column prop="cplx" align="center" label="号牌种类" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_HPZL" :value="row.cplx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cph" label="车牌号" align="center"></el-table-column>
|
||||
<el-table-column prop="clpp" label="车辆品牌" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_CLPP" :value="row.clpp" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="clnk" label="车辆年款" align="center" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.zbzt" :options="D_ZDY_SBZT"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="350px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="lookGj(row,'clgj')" size="small">轨迹回放</el-button>
|
||||
<el-button @click="manage(row.cid)" size="small">设备管理</el-button>
|
||||
<el-button @click="addLoad('edit',row.cid)" size="small">修改</el-button>
|
||||
<el-button @click="deletList(row.cid)" type="danger" 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="mapbox" v-if="isShowMap" :style="{ height: tableHeight +50+ 'px' }">
|
||||
<!-- 轨迹回放 -->
|
||||
<MapDialog v-model:modelValue="isShowMap" lxtype="gjhf" :data="gJDate"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" 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="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="cph" label="车牌号">
|
||||
<el-input
|
||||
v-model="form.cph"
|
||||
placeholder="请输入车牌号"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="form.ssbm"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
filterable
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cplx" label="号牌种类">
|
||||
<el-select
|
||||
v-model="form.cplx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_HPZL"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbzt" label="车辆状态">
|
||||
<el-select
|
||||
v-model="form.zbzt"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_ZDY_SBZT"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="clpp" label="车辆品牌">
|
||||
<el-select
|
||||
v-model="form.clpp"
|
||||
class="m-2"
|
||||
filterable
|
||||
placeholder="请选择车辆品牌"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLPP"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clxh" label="车辆型号">
|
||||
<el-input placeholder="请输入车辆型号" v-model="form.clxh"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clnk" label="车辆年款">
|
||||
<el-date-picker
|
||||
type="year"
|
||||
v-model="form.clnk"
|
||||
format="YYYY"
|
||||
value-format="YYYY"
|
||||
placeholder="请选择车辆年款"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="gmrq" label="车辆生产日期">
|
||||
<el-date-picker
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="form.gmrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableCgrq"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bfrq" label="车辆报废日期">
|
||||
<el-date-picker
|
||||
@focus="cgrqTs"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="form.bfrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
style="width: 100%"
|
||||
:disabledDate="disableDqsj"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="cllx" label="车辆类型">
|
||||
<el-select
|
||||
v-model="form.cllx"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="clys" label="车辆颜色">
|
||||
<el-select
|
||||
v-model="form.clys"
|
||||
class="m-2"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_CLYS"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="GPS">
|
||||
<el-input v-model="form.gpsId" placeholder="请输入GPS" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<!-- 新增的电台和监控 -->
|
||||
<el-form-item label="车载电台">
|
||||
<el-input v-model="form.czdt" placeholder="请输入车载电台" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车载监控">
|
||||
<el-input v-model="form.czjk" placeholder="请输入车载监控" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jyqxList" label="警用器械" @click.stop="jyqxVisible = true">
|
||||
<el-input
|
||||
v-model="form.jyqx"
|
||||
placeholder="请选择警用器械"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
readonly
|
||||
suffix-icon="ArrowDown"
|
||||
v-if="jyqxData.length <= 0"/>
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in jyqxData" :key="tag.id" closable :type="tag.type" @close.stop="handleClose(tag)">
|
||||
{{ tag.qxMc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="器械数量" style="width: 100%" v-if="jyqxData.length >0">
|
||||
<span v-for="(item,idx) in jyqxData" :key="idx" style="margin:10px; 10px 0 10px 0;">
|
||||
{{item.qxMc}} <el-input-number :min="0" :max="1000" v-model="item.sl"></el-input-number>
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="form.textarea" placeholder="请输入关键字" show-word-limit type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备管理 -->
|
||||
<Carmanage v-if="sbgl" :id="sbid" />
|
||||
<JyqxLoad
|
||||
v-if="jyqxVisible"
|
||||
:roleIds="hasChooseJyqx"
|
||||
v-model="jyqxVisible"
|
||||
@choosedUsers="hanlderChooseJyqx"
|
||||
/>
|
||||
<!-- 导入 -->
|
||||
<Export
|
||||
:show="isImport"
|
||||
lx="car"
|
||||
@closeImport="isImport = false"
|
||||
@handleImport="handleFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MapDialog from './mapDialog.vue'
|
||||
import Export from "@/components/export/index.vue";
|
||||
import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
|
||||
import { getXfcl, addXfcl, upXfcl, delXfcl, infoXfcl, infoXfsb, getXfclsb } from "@/api/basicsmanage/watchmanCar";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import Carmanage from "./carmanage/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, getCurrentInstance,watch, onUnmounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_HPZL, D_ZDY_SBZT, D_BZ_CLLX, D_BZ_CLYS,D_BZ_CLPP } = proxy.$dict( "D_BZ_CLLX", "D_BZ_HPZL", "D_BZ_CLYS", "D_ZDY_SBZT", "D_BZ_CLPP");
|
||||
const showxfclgl = ref(true);//弹窗切换
|
||||
const isImport = ref(false);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const listQuery = ref({ pageCurrent: 1, pageSize: 20 });
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表单数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const loadingTable = ref(true);
|
||||
const dialogFormVisible = ref(false);
|
||||
const total = ref(0); //总数据
|
||||
const diaTitle = ref("");
|
||||
const btnLoading = ref(false);
|
||||
const jyqxVisible = ref(false)
|
||||
const jyqxData = ref([]) //警用器械数据
|
||||
const hasChooseJyqx = ref([])//警用器械数据ids
|
||||
const sbgl = ref(false); //设备管理弹窗
|
||||
const sbid = ref(""); //设备id
|
||||
const elform = ref(null);
|
||||
const isShowMap = ref(false)
|
||||
const gJDate = ref({})
|
||||
//新增表单对象
|
||||
const formDefault = ref({})
|
||||
const form = ref({
|
||||
ssbmdm: "",
|
||||
cplx: "",
|
||||
cph: "",
|
||||
clpp: "",
|
||||
clnk: "",
|
||||
bfrq: "",
|
||||
bz: ""
|
||||
});
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
cplx: [{ required: true, message: "请选择号牌种类", trigger: "change" }],
|
||||
cph: [{ required: true, message: "请输入车牌号", trigger: "change" }],
|
||||
clpp: [{ required: true, message: "请输入车辆品牌", trigger: "change" }],
|
||||
clnk: [{ required: true, message: "请选择车辆年款", trigger: "change" }],
|
||||
bfrq: [{ required: true, message: "请选择车辆报废日期", trigger: "change" }],
|
||||
gmrq: [{ required: true, message: "请选择车辆生产日期", trigger: "change" }]
|
||||
});
|
||||
watch(()=>isShowMap.value,(val)=>{
|
||||
emitter.emit('closeMeun')
|
||||
})
|
||||
onMounted(() => {
|
||||
formDefault.value = JSON.parse(JSON.stringify(form.value))
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
emitter.on("reback", (res) => {
|
||||
sbgl.value = false;
|
||||
showxfclgl.value = true;
|
||||
sbid.value = "";
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
|
||||
// 轨迹回放
|
||||
function lookGj (row,type){
|
||||
if(row.gpsId){
|
||||
gJDate.value = row
|
||||
isShowMap.value = true;
|
||||
}else{
|
||||
proxy.$message({ type: "warning", message: "该数据无gpsId!" });
|
||||
isShowMap.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//重置搜索
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
getXfcl(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
// 新增-修改
|
||||
function addLoad(type,id) {
|
||||
dialogFormVisible.value = true;
|
||||
if(type == 'add'){
|
||||
diaTitle.value = "新增巡防车辆";
|
||||
}else{
|
||||
diaTitle.value ='编辑巡防车辆'
|
||||
getDetailInfo(id)
|
||||
}
|
||||
}
|
||||
//根据id查看详情
|
||||
function getDetailInfo(id) {
|
||||
infoXfcl(id).then((res) => {
|
||||
form.value = res;
|
||||
jyqxData.value = res.jyqx ? JSON.parse(res.jyqx) : []
|
||||
hasChooseJyqx.value = jyqxData.value.map(item=>{ return item.id})
|
||||
form.value.ssbmdm = form.value.ssbmdm * 1;
|
||||
form.value.jyqx = ''
|
||||
});
|
||||
}
|
||||
|
||||
//批量选择数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val,map(item=>{
|
||||
return item.cid
|
||||
});
|
||||
};
|
||||
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
const ids = id ? [id]: multipleSelection.value;
|
||||
delXfcl(ids).then(() => {
|
||||
proxy.$message({type: "success",message: "删除成功"});
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// size 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
|
||||
//设备管理
|
||||
function manage(id) {
|
||||
sbgl.value = true;
|
||||
showxfclgl.value = false;
|
||||
sbid.value = id;
|
||||
}
|
||||
|
||||
//选择警用器械
|
||||
function hanlderChooseJyqx(arr) {
|
||||
hasChooseJyqx.value = arr.map((item) => { return item.id; });
|
||||
jyqxData.value = arr;
|
||||
}
|
||||
|
||||
// 删除警用器械
|
||||
function handleClose(tag){
|
||||
jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
|
||||
hasChooseJyqx.value = jyqxData.value.map((item) => { return item.id; });
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeDialog(){
|
||||
form.value = JSON.parse(JSON.stringify(formDefault.value))
|
||||
dialogFormVisible.value = false;
|
||||
jyqxData.value = []
|
||||
hasChooseJyqx.value = []
|
||||
}
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false
|
||||
btnLoading.value = true;
|
||||
form.value.jyqx = JSON.stringify(jyqxData.value)
|
||||
if (diaTitle.value == '编辑巡防车辆') {
|
||||
upXfcl(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
btnLoading.value = false;
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
addXfcl(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
closeDialog()
|
||||
btnLoading.value = false;
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//购置日期限制
|
||||
function disableCgrq(row) {
|
||||
let time = new Date();
|
||||
return time.getTime() <= row.getTime();
|
||||
}
|
||||
|
||||
// 到期日期限制
|
||||
function disableDqsj(row) {
|
||||
if (form.value.gmrq) {
|
||||
let time = new Date(form.value.gmrq);
|
||||
return time.getTime() >= row.getTime();
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function cgrqTs() {
|
||||
if (!form.value.gmrq) {
|
||||
proxy.$message({ message: "请先选择车辆生产日期", type: "warning" });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.cntBox-bb{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.tabBox{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.mapbox{
|
||||
width: 1000px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="modelValue">
|
||||
<div class="head_box_ii">
|
||||
<el-form v-model="form" inline>
|
||||
<el-form-item label="巡逻时间" prop="bksj">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="playTime"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
start-placeholder="巡逻开始时间"
|
||||
end-placeholder="巡逻结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择巡逻时间"
|
||||
@change="handletime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号" prop="bksj">
|
||||
<el-select v-model="form.hphm" placeholder="请选择号牌号码" disabled>
|
||||
<el-option v-for="item in props.data.clList" :key="item.id" :label="item.jdchphm" :value="item.jdchphm"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" class="btn" @click="getClDare">车辆回放</el-button>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="map"><GdMap /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
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, reactive } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref([]); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const form = reactive({})
|
||||
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) => {
|
||||
form.hphm = val.cph;
|
||||
form.gpsId = val.gpsId
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val){
|
||||
form.kssj = val ? val[0] : ''
|
||||
form.jssj = val ? val[1] : ''
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", 'clgjRoute');
|
||||
qcckPost(form,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
|
||||
let arr = res || []
|
||||
let points = arr.map(item=>{return [item.jd,item.wd]})
|
||||
if (points.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'clgjRoute'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
emitter.emit("deletePointArea", 'clgjRoute');
|
||||
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;
|
||||
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,374 @@
|
||||
<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>
|
||||
@ -0,0 +1,209 @@
|
||||
<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>
|
||||
260
src/views/backOfficeSystem/editPassword/index.vue
Normal file
260
src/views/backOfficeSystem/editPassword/index.vue
Normal file
@ -0,0 +1,260 @@
|
||||
<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/lz/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/situationPresentation/top-message.png"/>
|
||||
<img v-show="item.xtLrrid === 'admin'" class="xxx" src="@/assets/images/situationPresentation/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 { getUserOrFjInfo } 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");
|
||||
let sfzh=localStorage.getItem('idEntityCard')
|
||||
getUserOrFjInfo({id,sfzh}).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/situationPresentation/user_info.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.head-tab {
|
||||
padding: 2%;
|
||||
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>
|
||||
@ -0,0 +1,201 @@
|
||||
<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-jcgl/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-jcgl/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(listQuery.value,'/mosty-jcgl/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>
|
||||
@ -0,0 +1,199 @@
|
||||
<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-jcgl/tbJcglXfCyry').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
// 新增
|
||||
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-jcgl/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>
|
||||
@ -0,0 +1,275 @@
|
||||
<!--
|
||||
* @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 props.dic.D_BZ_XFLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</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 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>
|
||||
<el-form-item prop="xfnr" style="width:100%;">
|
||||
<template #label>巡防内容 <el-button type="pramary" @click="showNrDialog = true">选择模板</el-button></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>巡防单位 <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="dwmc" align="center" label="单位名称" />
|
||||
<el-table-column prop="dz" 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%;">
|
||||
<el-upload
|
||||
action="/mosty-api/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"/>
|
||||
<!-- 选择人员 -->
|
||||
<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/layout/default_male.png";
|
||||
import GdMap from "@/components/Map/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 showDialog = ref(false); //弹窗
|
||||
const chooseIds = ref([]); //ids
|
||||
const showNrDialog = ref(false)
|
||||
const chooseNrIds = ref([]); //ids
|
||||
|
||||
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" }],
|
||||
xfzzXm: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
|
||||
xfzy: [{ required: true, message: "请选择组员", trigger: ['change','blur']}],
|
||||
})
|
||||
const roleIdsPeo = ref([])
|
||||
|
||||
const imgList = ref([]);
|
||||
const urlImg = ref("/mosty-api/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 getDataById = (id)=>{
|
||||
qcckGet({},'/mosty-jcgl/tbJcglXf/'+id).then(res=>{
|
||||
listQuery.value = res
|
||||
listQuery.value.xfdw = res.xfdw ? JSON.parse(res.xfdw) :[]
|
||||
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/home/icon-jz.png"), flag: "zfry"});
|
||||
})
|
||||
}
|
||||
|
||||
// 移除
|
||||
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/home/icon-jz.png"), flag: "zfry"});
|
||||
}
|
||||
// 选择内容
|
||||
const choosedNrList = (val)=>{
|
||||
showNrDialog.value = false
|
||||
chooseNrIds.value = val.map(item=>{ return item.id })
|
||||
listQuery.value.xfnr = val[0].nr
|
||||
}
|
||||
|
||||
// 提交
|
||||
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)
|
||||
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-jcgl/tbJcglXf').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(pramas,'/mosty-jcgl/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;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,178 @@
|
||||
<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="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</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="dwmc" align="center" label="单位名称"/>
|
||||
<el-table-column prop="dz1" 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 } from "vue";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
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-jcgl/tbJcglXfDwgl').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;
|
||||
}
|
||||
.el-dialog{
|
||||
background: #050e33;
|
||||
}
|
||||
.el-dialog__title{
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,267 @@
|
||||
<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 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 props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
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({
|
||||
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-jcgl/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-jcgl/tbJcglXfNrmb').then(res=>{
|
||||
closeAddModel()
|
||||
handleFilter();
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
})
|
||||
}else{
|
||||
qcckPut(addForm.value,'/mosty-jcgl/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
|
||||
}
|
||||
qcckGet(params,'/mosty-jcgl/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;
|
||||
}
|
||||
.el-dialog{
|
||||
background: #050e33;
|
||||
}
|
||||
.el-dialog__title{
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
226
src/views/backOfficeSystem/patrolManagement/task/index.vue
Normal file
226
src/views/backOfficeSystem/patrolManagement/task/index.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<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 #xfdw ="{ row }">
|
||||
<el-tag v-for="it in row.xfdw" :key="it.id" style="margin:0 4px;">{{it.dwmc}}</el-tag>
|
||||
</template>
|
||||
<template #xflx ="{ row }">
|
||||
<dict-tag :options="D_BZ_XFLX" :value="row.xflx" :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="addEditDiloag" :dic="{D_BZ_XFLX}" @updateDate="getData" />
|
||||
</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 Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from './components/editAddForm.vue'
|
||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XFLX,D_BZ_RWZT } = proxy.$dict("D_BZ_XFLX","D_BZ_RWZT");
|
||||
const ids = ref([]);//多选
|
||||
const addEditDiloag = ref()
|
||||
const searchBox = ref() //搜索框
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "defaultSlot",
|
||||
prop: "ssbmdm",
|
||||
options: [],
|
||||
placeholder: "请选择单位",
|
||||
label: "归属单位"
|
||||
},
|
||||
{
|
||||
showType: "select",
|
||||
prop: "xflx",
|
||||
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:"date",
|
||||
prop: "jssj",
|
||||
label: "起止时间",
|
||||
},
|
||||
])
|
||||
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: "xflx",
|
||||
showSolt:true
|
||||
},
|
||||
{
|
||||
label: "巡防内容",
|
||||
prop: "xfnr"
|
||||
},
|
||||
]
|
||||
});
|
||||
const listQuery = ref({ssbmdm:''})
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getData()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
listQuery.value = {...listQuery.value,...val,}
|
||||
if(val.cz) listQuery.value.ssbmdm = '';
|
||||
delete listQuery.value.cz;
|
||||
getData()
|
||||
}
|
||||
// 获取数据
|
||||
const getData = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageCurrent:pageData.pageConfiger.pageNum,
|
||||
...listQuery.value
|
||||
}
|
||||
delete pramas.daterange
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jcgl/tbJcglXf').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableData.forEach(item =>{
|
||||
item.xfdw = JSON.parse(item.xfdw)
|
||||
item.xfzy = JSON.parse(item.xfzy)
|
||||
})
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
// 多选
|
||||
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-jcgl/tbJcglXf/bacth').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type,id)=>{
|
||||
addEditDiloag.value.init(type,id)
|
||||
}
|
||||
// 表格高度计算
|
||||
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>
|
||||
@ -0,0 +1,58 @@
|
||||
<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>
|
||||
@ -0,0 +1,340 @@
|
||||
<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/layout/default_male.png";
|
||||
import GdMap from "@/components/Map/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-jcgl/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-jcgl/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-jcgl/tbJcglXfDwgl').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
loading.value = false;
|
||||
close()
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(pramas,'/mosty-jcgl/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>
|
||||
212
src/views/backOfficeSystem/patrolManagement/unit/index.vue
Normal file
212
src/views/backOfficeSystem/patrolManagement/unit/index.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<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: "dz1"
|
||||
},
|
||||
{
|
||||
label: "最后修改时间",
|
||||
prop: "xtZhgxsj"
|
||||
},
|
||||
]
|
||||
});
|
||||
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-jcgl/tbJcglXfDwgl').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
// 详情 - 新增
|
||||
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-jcgl/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>
|
||||
@ -0,0 +1,202 @@
|
||||
<!--
|
||||
* @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/layout/default_male.png";
|
||||
import GdMap from "@/components/Map/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-jcgl/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>
|
||||
254
src/views/backOfficeSystem/patrolManagement/war/index.vue
Normal file
254
src/views/backOfficeSystem/patrolManagement/war/index.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<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-api/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-jcgl/tbJcglXfZg').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
// 导出报表
|
||||
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>
|
||||
|
||||
80
src/views/backOfficeSystem/patrolResults/components/ddgl.vue
Normal file
80
src/views/backOfficeSystem/patrolResults/components/ddgl.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<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>
|
||||
@ -0,0 +1,589 @@
|
||||
<!-- 人员比中日志 -->
|
||||
<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 }">
|
||||
<img
|
||||
:src="
|
||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
||||
row.sfzh
|
||||
"
|
||||
width="75"
|
||||
/>
|
||||
</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-api/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-api/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 { 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: "",
|
||||
sfzh: ""
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
||||
});
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
tableData.value = [];
|
||||
loadingTable.value = true;
|
||||
getRypcList(listQuery.value).then((res) => {
|
||||
res.records.forEach((item) => {
|
||||
if (item.bqxxsj != "") {
|
||||
tableData.value.push(item);
|
||||
}
|
||||
});
|
||||
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: "",
|
||||
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>
|
||||
@ -0,0 +1,690 @@
|
||||
<!-- 车辆比中日志 -->
|
||||
<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 }">
|
||||
<img
|
||||
:src="
|
||||
'http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=' +
|
||||
row.jdcsyrsfzh
|
||||
"
|
||||
width="75"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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="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"
|
||||
>
|
||||
<!-- <template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="D_BZ_CLBQ"
|
||||
:value="row.bqmc"
|
||||
: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="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.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-api/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-api/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 { 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: ""
|
||||
}); //搜索表单
|
||||
|
||||
//表单验证
|
||||
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) => {
|
||||
res.records.forEach(item => {
|
||||
if(item.bqmc && item.bqmc != ""){
|
||||
tableData.value.push(item);
|
||||
}
|
||||
})
|
||||
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: ""
|
||||
};
|
||||
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>
|
||||
@ -0,0 +1,495 @@
|
||||
<!-- 人员比中日志 -->
|
||||
<!-- 人员核查 -->
|
||||
<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-api/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`]"
|
||||
style="width:75px;"
|
||||
:src="`/mosty-api/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" 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="操作" 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-api/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`]"
|
||||
style="width:100px;"
|
||||
:append-to-body="true"
|
||||
:src="`/mosty-api/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-api/mosty-base/minio/image/download/${item.fjid}`]"
|
||||
:src="`/mosty-api/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-api/mosty-base/minio/image/download/${item}`]"
|
||||
:src="`/mosty-api/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/layout/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>
|
||||
1592
src/views/backOfficeSystem/patrolResults/serviceReportLog/index.vue
Normal file
1592
src/views/backOfficeSystem/patrolResults/serviceReportLog/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,526 @@
|
||||
<!-- 车辆核查 -->
|
||||
<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-api/mosty-base/minio/image/download/${row.tpList?.[0].fjid}`]"
|
||||
style="width:75px;" :src="`/mosty-api/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="xtCjr" 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 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-api/mosty-base/minio/image/download/${form.tpList?.[0].fjid}`]"
|
||||
style="width:100px;" :append-to-body="true"
|
||||
:src="`/mosty-api/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="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.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>
|
||||
<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-api/mosty-base/minio/image/download/${item.fjid}`]"
|
||||
:src="`/mosty-api/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-api/mosty-base/minio/image/download/${item}`]"
|
||||
:src="`/mosty-api/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/layout/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_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: ""
|
||||
}); //搜索表单
|
||||
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_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();
|
||||
};
|
||||
//点击重置
|
||||
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>
|
||||
@ -0,0 +1,138 @@
|
||||
<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>
|
||||
@ -0,0 +1,120 @@
|
||||
<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>
|
||||
@ -0,0 +1,128 @@
|
||||
<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>
|
||||
@ -0,0 +1,117 @@
|
||||
<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>
|
||||
@ -0,0 +1,426 @@
|
||||
<!-- 界面警情统计 -->
|
||||
<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>
|
||||
@ -0,0 +1,125 @@
|
||||
<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>
|
||||
@ -0,0 +1,347 @@
|
||||
<!-- 重要场所统计 -->
|
||||
<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>
|
||||
@ -0,0 +1,103 @@
|
||||
<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>
|
||||
@ -0,0 +1,397 @@
|
||||
<!-- 重点人员统计 -->
|
||||
<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">
|
||||
<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>
|
||||
@ -0,0 +1,389 @@
|
||||
<!-- 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>
|
||||
@ -0,0 +1,214 @@
|
||||
<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>
|
||||
@ -0,0 +1,334 @@
|
||||
<!-- 重要场所统计 -->
|
||||
<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>
|
||||
@ -0,0 +1,147 @@
|
||||
<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>
|
||||
@ -0,0 +1,400 @@
|
||||
<!-- 巡防力量 -->
|
||||
<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]) => {
|
||||
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);
|
||||
}
|
||||
});
|
||||
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);
|
||||
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: carbj
|
||||
? carbj[0].ssbm
|
||||
: false || fjObj
|
||||
? fjObj[0].ssbm
|
||||
: false || mjObj[0].ssbm
|
||||
};
|
||||
});
|
||||
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>
|
||||
@ -0,0 +1,121 @@
|
||||
<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>
|
||||
@ -0,0 +1,441 @@
|
||||
<!-- 感知源 -->
|
||||
<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>
|
||||
@ -0,0 +1,214 @@
|
||||
<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>
|
||||
@ -0,0 +1,343 @@
|
||||
<!-- 街面警务站 -->
|
||||
<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>
|
||||
@ -0,0 +1,119 @@
|
||||
<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>
|
||||
@ -0,0 +1,109 @@
|
||||
<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>
|
||||
@ -0,0 +1,373 @@
|
||||
<!-- 盘查物品分析 -->
|
||||
<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>
|
||||
@ -0,0 +1,106 @@
|
||||
<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>
|
||||
@ -0,0 +1,103 @@
|
||||
<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>
|
||||
@ -0,0 +1,405 @@
|
||||
<!-- 盘查车辆分析 -->
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,94 @@
|
||||
<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>
|
||||
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,587 @@
|
||||
<!-- 处置警情分析 -->
|
||||
<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>
|
||||
@ -0,0 +1,93 @@
|
||||
<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>
|
||||
@ -0,0 +1,292 @@
|
||||
<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-hczx/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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,94 @@
|
||||
<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>
|
||||
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,443 @@
|
||||
<!-- 事件分析 -->
|
||||
<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>
|
||||
@ -0,0 +1,95 @@
|
||||
<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;
|
||||
let colors = ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"]
|
||||
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,
|
||||
color: colors,
|
||||
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>
|
||||
@ -0,0 +1,303 @@
|
||||
<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 countAll" :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" :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="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 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))
|
||||
getListData();
|
||||
getDate() //获取全部
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
|
||||
// 获取全部数据
|
||||
function getDate(){
|
||||
qcckPost({ssbmdm:listQuery.value.ssbmdm},'/mosty-qwzx/tbQwXfbb/bmtjAll').then(res=>{
|
||||
countAll.value = JSON.parse(JSON.stringify(countAllDefault.value))
|
||||
if(res){
|
||||
countAll.value.forEach(item=>{
|
||||
for(let key in res){
|
||||
if(key == item.type) item.value = parseInt(res[key])
|
||||
if(key == 'xflc') item.value = (item.value/1000).toFixed(2)
|
||||
if(key == 'xfsc') item.value = (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();
|
||||
};
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
listQuery.value = {pageCurrent: 1,pageSize: 10};
|
||||
timeRange.value = []
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckPost(listQuery.value,'/mosty-qwzx/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>
|
||||
@ -0,0 +1,248 @@
|
||||
<!-- 巡区统计 -->
|
||||
<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-qwzx/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>
|
||||
@ -0,0 +1,317 @@
|
||||
<!-- 巡区统计 -->
|
||||
<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"
|
||||
@click="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="ssbm"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="巡组名称" prop="jzMc" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.jzMc ? row.jzMc : row.fzrXm + "巡组" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="巡逻人员"
|
||||
prop="bz2"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="it in row.pbmj" :key="it.id">{{
|
||||
it.jlxm
|
||||
}}</el-tag>
|
||||
<el-tag v-for="it in row.pbfj" :key="it.id">{{
|
||||
it.jlxm
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="巡逻车辆" prop="bz3" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="it in row.pbcl" :key="it.id">{{
|
||||
it.jdchphm
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="器械"
|
||||
prop="bz4"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="it in row.jyqx" :key="it.id">{{
|
||||
it.qxmc
|
||||
}}</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 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.jzMc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="下辖巡组" prop="bz2">
|
||||
<el-input v-model="form.jzMc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻民警" prop="bz3">
|
||||
<div class="ipt">
|
||||
<el-tag v-for="it in form.pbmj" :key="it.id">{{ it.jlxm }}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻辅警" prop="bz3">
|
||||
<div class="ipt">
|
||||
<el-tag v-for="it in form.pbfj" :key="it.id">{{ it.jlxm }}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻车辆" prop="bz4">
|
||||
<div class="ipt">
|
||||
<el-tag v-for="it in form.pbcl" :key="it.id">{{ it.jdchphm }}</el-tag>
|
||||
</div>
|
||||
</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 } 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;
|
||||
qcckGet(listQuery.value, "/mosty-qwzx/tbQwXfbb")
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
tableData.value.forEach((item) => {
|
||||
item.pbcl = item.pbcl ? JSON.parse(item.pbcl) : [];
|
||||
item.pbfj = item.pbfj ? JSON.parse(item.pbfj) : [];
|
||||
item.pbmj = item.pbmj ? JSON.parse(item.pbmj) : [];
|
||||
item.jyqx = item.jyqx ? JSON.parse(item.jyqx) : [];
|
||||
});
|
||||
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);
|
||||
}
|
||||
.ipt {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,275 @@
|
||||
<!-- 巡区统计 -->
|
||||
<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="fzr_xm" align="center" />
|
||||
<el-table-column
|
||||
label="负责人身份证"
|
||||
prop="fzr_sfzh"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<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="巡逻里程" 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 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.fzr_sfzh"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻民警数量" prop="bz3">
|
||||
<div class="ipt">{{form.mjsl}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻辅警" prop="bz3">
|
||||
<div class="ipt">{{form.fjsl}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻车辆" prop="bz4">
|
||||
<div class="ipt">{{form.jcsl}}</div>
|
||||
</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 } 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-qwzx/tbQwXfbb/grtj")
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
tableData.value.forEach((item) => {
|
||||
item.xflc = (parseInt(item.xflc) / 1000).toFixed(2);
|
||||
item.xfsc = (parseInt(item.xfsc) / 3600).toFixed(2);
|
||||
});
|
||||
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);
|
||||
}
|
||||
.ipt {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,416 @@
|
||||
<!-- 巡防安全态势统计 -->
|
||||
<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="searchBox chart-box">
|
||||
<div class="title-line">
|
||||
<div>各分数阈值派出所的个数</div>
|
||||
<div>
|
||||
<el-button type="primary">设置预警阈值分值</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="display-box">
|
||||
<div class="display-item item1">
|
||||
<p class="dis-text">大于9000分值</p>
|
||||
<p class="dis-text">
|
||||
<span class="dis-num">1</span> 0%
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-item item2">
|
||||
<p class="dis-text">5000-9000分值</p>
|
||||
<p class="dis-text">
|
||||
<span class="dis-num">1</span> 0%
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-item item3">
|
||||
<p class="dis-text">1000-5000分值</p>
|
||||
<p class="dis-text">
|
||||
<span class="dis-num">1</span> 0%
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-item item4">
|
||||
<p class="dis-text">1000以下分值</p>
|
||||
<p class="dis-text">
|
||||
<span class="dis-num">2</span> 0%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
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="jwzfz" align="center" />
|
||||
<el-table-column label="战果分值" prop="zgfz" align="center" />
|
||||
<el-table-column label="135处置分值" prop="czfz" align="center" />
|
||||
<el-table-column
|
||||
label="群体事件分值"
|
||||
prop="qtfz"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="统计时间" prop="time" align="center" />
|
||||
<el-table-column label="态势颜色" prop="tscolor" align="center">
|
||||
<template #default="scope">
|
||||
<div class="tscolor-box">
|
||||
<!-- <div v-if="scope.row.tscolor === 1" class="ts-box" :class="scope.row.tscolor === 1 ? 'item1': ''"></div>
|
||||
<div v-if="scope.row.tscolor === 2" class="ts-box" :class="scope.row.tscolor === 2 ? 'item2': ''"></div>
|
||||
<div v-if="scope.row.tscolor === 3" class="ts-box" :class="scope.row.tscolor === 3 ? 'item3': ''"></div> -->
|
||||
<div
|
||||
class="ts-box"
|
||||
:class="
|
||||
scope.row.tscolor === 4
|
||||
? 'item4'
|
||||
: scope.row.tscolor === 3
|
||||
? 'item3'
|
||||
: scope.row.tscolor === 2
|
||||
? 'item2'
|
||||
: scope.row.tscolor === 1
|
||||
? 'item1'
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</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"
|
||||
: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="name">
|
||||
<el-input v-model="form.fz"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计时间" prop="name">
|
||||
<el-input v-model="form.time"></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" }]
|
||||
});
|
||||
|
||||
function handleNodeClick(val) {}
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
tableData.value = [];
|
||||
loadingTable.value = true;
|
||||
setTimeout(() => {
|
||||
tableData.value = [
|
||||
{
|
||||
name: "高新区分局",
|
||||
jwzfz: "456",
|
||||
zgfz: "745",
|
||||
czfz: "475",
|
||||
qtfz: "234",
|
||||
time: "2022-06-03 12:46",
|
||||
tscolor: 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) {
|
||||
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(() => {})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//批量删除
|
||||
function batchDelete() {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {})
|
||||
.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 - 490;
|
||||
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: 170px;
|
||||
margin-bottom: 10px;
|
||||
.title-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.display-box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.display-item {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
color: #000;
|
||||
.dis-text {
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
}
|
||||
.dis-num {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.item4 {
|
||||
background-color: rgb(8, 39, 241);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.tscolor-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ts-box {
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgb(13, 66, 241);
|
||||
}
|
||||
.item1 {
|
||||
background-color: rgb(207, 11, 11);
|
||||
}
|
||||
.item2 {
|
||||
background-color: rgb(202, 75, 20);
|
||||
}
|
||||
.item3 {
|
||||
background-color: rgb(247, 239, 10);
|
||||
}
|
||||
.item4 {
|
||||
background-color: rgb(8, 39, 241);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,227 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-03-22 11:36:21
|
||||
* @LastEditTime: 2023-04-10 17:11:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bbl-box">
|
||||
<div class="popTitle">{{ childTitle }}巡防报备情况</div>
|
||||
<div class="popBody" style="max-height: 600px">
|
||||
<div class="tjtitle">
|
||||
<el-date-picker
|
||||
v-model="searchDay"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 150px"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="changeDay"
|
||||
/>
|
||||
<div class="tjli lightblue">
|
||||
当日应报备：<span>{{ allNums <= 0 ? 0 : allNums }}</span>
|
||||
</div>
|
||||
<div class="tjli green">
|
||||
当日已报备：<span>{{ alreadyNums <= 0 ? 0 : alreadyNums }}</span>
|
||||
</div>
|
||||
<div class="tjli orange">
|
||||
当日未报备：<span>{{
|
||||
Number(allNums) - Number(alreadyNums) <= 0
|
||||
? 0
|
||||
: Number(allNums) - Number(alreadyNums)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableChildData"
|
||||
border
|
||||
class="table flex-auto overflow-auto margin-tp-10"
|
||||
row-class-name="table-row"
|
||||
cell-class-name="table-cell"
|
||||
header-row-class-name="table-header-row"
|
||||
header-cell-class-name="table-header-cell"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="报备详情" align="center">
|
||||
<el-table-column prop="ssbm" label="单位" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip effect="dark" :content="row.ssbm" placement="right">
|
||||
<span>{{ row.ssbm }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ybb" label="应报备" align="center" />
|
||||
<el-table-column prop="zsbb" label="最少报备" align="center" />
|
||||
<el-table-column prop="sjbb" label="已报备" align="center" />
|
||||
<el-table-column label="未报备" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.wbb < 0 ? 0 : row.wbb }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bbf" label="报备分" align="center" />
|
||||
<el-table-column prop="bbkf" label="报备扣分" align="center" />
|
||||
|
||||
<el-table-column label="报备完成率" align="center" prop="xlbl">
|
||||
<template #default="{ row }">
|
||||
<p v-if="row.ybb">
|
||||
{{ ((Number(row.sjbb) / Number(row.ybb)) * 100).toFixed(2) }}%
|
||||
</p>
|
||||
<p v-else>0%</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="childlistQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="childlistQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { ZHJMXF_URL, ASSESS_SCORE_URL } from "@/settings";
|
||||
// import dictData from "@utils/dicts";
|
||||
import { JXgetPageList, getStatistics } from "@/api/performance";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { parseTime, timestampToStr } from "@/utils/index";
|
||||
const props = defineProps({
|
||||
childTitle: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
searchType: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
ssbmdm: {
|
||||
default: "",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const childlistQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
type: "01",
|
||||
searchType: props.searchType,
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
ssbmdm: props.ssbmdm,
|
||||
cxcj: "02"
|
||||
});
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
const searchDay = ref("");
|
||||
const allNums = ref("");
|
||||
const tableChildData = ref([]);
|
||||
const alreadyNums = ref("");
|
||||
const notNums = ref("");
|
||||
const total = ref(0);
|
||||
onMounted(() => {
|
||||
searchDay.value = timeValidate(new Date(), "ymd");
|
||||
childlistQuery.value.kssj = timeValidate(new Date(), "ymd");
|
||||
childlistQuery.value.jssj = timeValidate(new Date(), "ymd");
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
});
|
||||
watch(
|
||||
() => [props.ssbmdm, props.searchType],
|
||||
() => {
|
||||
childlistQuery.value.ssbmdm = props.ssbmdm;
|
||||
childlistQuery.value.searchType = props.searchType;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 获取弹窗表格初始化数据
|
||||
const getChildTableList = () => {
|
||||
JXgetPageList(childlistQuery.value).then((res) => {
|
||||
tableChildData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const _getStatistics = () => {
|
||||
let { searchType, ssbmdm, kssj } = childlistQuery.value;
|
||||
let params = {
|
||||
searchType: searchType,
|
||||
ssbmdm: ssbmdm,
|
||||
time: kssj
|
||||
};
|
||||
getStatistics(params).then((res) => {
|
||||
alreadyNums.value = res.sjbb;
|
||||
allNums.value = res.ybb;
|
||||
});
|
||||
};
|
||||
const changeDay = (val) => {
|
||||
childlistQuery.value.kssj = val;
|
||||
childlistQuery.value.jssj = val;
|
||||
childlistQuery.value.pageCurrent = 1;
|
||||
getChildTableList();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
childlistQuery.value.pageSize = currentSize;
|
||||
getChildTableList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
childlistQuery.value.pageCurrent = currentPage;
|
||||
getChildTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popTitle {
|
||||
color: #72d8ff;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tjtitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tjli {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #0d2944 !important;
|
||||
color: #61f9ff;
|
||||
}
|
||||
.bbl-box {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
<style >
|
||||
.el-dialog__body {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,205 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-03-22 11:36:21
|
||||
* @LastEditTime: 2023-04-10 17:02:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="qs-box">
|
||||
<div class="popTitle">{{ childTitle }}指令签收情况</div>
|
||||
<div class="tjtitle">
|
||||
<el-date-picker
|
||||
v-model="searchDay"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 150px"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="changeDay"
|
||||
/>
|
||||
<div class="tjli lightblue">
|
||||
当日应巡逻：<span>{{ allNums <= 0 ? 0 : allNums }}</span>
|
||||
</div>
|
||||
<div class="tjli green">
|
||||
当日已巡逻：<span>{{ alreadyNums <= 0 ? 0 : alreadyNums}}</span>
|
||||
</div>
|
||||
<div class="tjli orange">
|
||||
当日未巡逻：<span>{{
|
||||
Number(allNums) - Number(alreadyNums) <= 0 ? 0 : (Number(allNums) - Number(alreadyNums)%100).toFixed(0)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:600px;">
|
||||
<GdMap id="mapDivDialog" v-if="mapShow"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { ZHJMXF_URL, ASSESS_SCORE_URL } from "@/settings";
|
||||
import { JXgetPageList, getStatistics } from "@/api/performance";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import GdMap from "@/components/Map/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { parseTime, timestampToStr } from "@/utils/index";
|
||||
import { queryListfzyc } from "@/api/dpApi/home.js";
|
||||
const props = defineProps({
|
||||
childTitle: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
searchType: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
ssbmdm: {
|
||||
default: "",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const childlistQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
type: "01",
|
||||
searchType: props.searchType,
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
ssbmdm: props.ssbmdm,
|
||||
cxcj: "02"
|
||||
});
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
const searchDay = ref("");
|
||||
const allNums = ref("");
|
||||
const tableChildData = ref([]);
|
||||
const alreadyNums = ref("");
|
||||
const notNums = ref("");
|
||||
const total = ref(0);
|
||||
const allList = ref([]);
|
||||
const mapShow = ref(false);
|
||||
onMounted(() => {
|
||||
nextTick(()=>{ mapShow.value = true; })
|
||||
searchDay.value = timeValidate(new Date(),'ymd');
|
||||
childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
|
||||
childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
showFZYC();
|
||||
});
|
||||
watch(
|
||||
() => [props.ssbmdm, props.searchType],
|
||||
() => {
|
||||
childlistQuery.value.ssbmdm = props.ssbmdm;
|
||||
childlistQuery.value.searchType = props.searchType;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
showFZYC();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 地图撒点
|
||||
function showFZYC() {
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc");
|
||||
let { kssj, jssj, ssbmdm } = childlistQuery.value;
|
||||
let param = {
|
||||
ssbmdm: ssbmdm,
|
||||
kssj: kssj,
|
||||
jssj: jssj,
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000
|
||||
};
|
||||
queryListfzyc(param).then((res) => {
|
||||
if(res.length == 0 ) return false;
|
||||
let cc = []
|
||||
let list = res.map((el, index) => {
|
||||
let centerPoint = [el.zxX,el.zxY]
|
||||
if(index == 0) cc = centerPoint;
|
||||
let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
|
||||
let text = el.realDate + ' ' + el.bc
|
||||
let obj = { position:position,text, id: el.id ,userData:el}
|
||||
return obj;
|
||||
});
|
||||
let arr1 = list.filter(v=>{return v.sfxl == 1})
|
||||
let arr2 = list.filter(v=>{return v.sfxl != 1})
|
||||
let params1 = { fontColor:'#12fdb8',coords: arr2, type:'rectangle', flag:'zdxl_fzyc',color:'rgba(2,20,51,0.5)',linecolor:'#f51616'}
|
||||
let params2 = { fontColor:'#12fdb8',coords: arr2, type:'rectangle', flag:'zdxl_fzyc',color:'rgba(2,20,51,0.5)',linecolor:'#1C97FF'}
|
||||
emitter.emit("echoPlane", params1);
|
||||
emitter.emit("echoPlane", params2);
|
||||
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
|
||||
});
|
||||
}
|
||||
// 获取弹窗表格初始化数据
|
||||
const getChildTableList = () => {
|
||||
JXgetPageList(childlistQuery.value).then((res) => {
|
||||
tableChildData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const _getStatistics = () => {
|
||||
let { searchType, ssbmdm, kssj } = childlistQuery.value;
|
||||
let params = {
|
||||
searchType: searchType,
|
||||
ssbmdm: ssbmdm,
|
||||
time: kssj
|
||||
};
|
||||
getStatistics(params).then((res) => {
|
||||
alreadyNums.value = res.sjxl;
|
||||
allNums.value = res.yxl;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
childlistQuery.value.pageSize = currentSize;
|
||||
getChildTableList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
childlistQuery.value.pageCurrent = currentPage;
|
||||
getChildTableList();
|
||||
};
|
||||
const changeDay = (val) => {
|
||||
childlistQuery.value.kssj = val;
|
||||
childlistQuery.value.jssj = val;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
showFZYC();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popTitle {
|
||||
color: #72d8ff;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tjtitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tjli {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #0d2944 !important;
|
||||
color: #61f9ff;
|
||||
}
|
||||
.qs-box {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,212 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-03-22 11:36:21
|
||||
* @LastEditTime: 2023-04-10 17:02:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="qs-box">
|
||||
<div class="popTitle">{{ childTitle }}巡逻里程情况</div>
|
||||
<div class="popBody" style="max-height: 600px; overflow: auto">
|
||||
<div class="tjtitle">
|
||||
<el-date-picker
|
||||
v-model="searchDay"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 150px"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="changeDay"
|
||||
/>
|
||||
<div class="tjli lightblue">
|
||||
当日应巡逻里程：<span>{{ allNums <= 0 ? 0 : allNums}}</span>
|
||||
</div>
|
||||
<div class="tjli green">
|
||||
当日实际巡逻里程：<span>{{ alreadyNums <=0 ? 0 : alreadyNums }}</span>
|
||||
</div>
|
||||
<div class="tjli orange">
|
||||
当日未巡逻里程：<span>{{ notNums <= 0 ? 0 : notNums }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableChildData"
|
||||
border
|
||||
class="table flex-auto overflow-auto margin-tp-10"
|
||||
row-class-name="table-row"
|
||||
cell-class-name="table-cell"
|
||||
header-row-class-name="table-header-row"
|
||||
header-cell-class-name="table-header-cell"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- @row-click="getScore" -->
|
||||
<el-table-column label="巡逻里程率" align="center">
|
||||
<el-table-column prop="ssbm" label="单位" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip effect="dark" :content="row.ssbm" placement="right">
|
||||
<span>{{ row.ssbm }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="yxllc" label="应巡逻里程" align="center" />
|
||||
<el-table-column prop="sjxllc" label="实际巡逻里程" align="center" />
|
||||
<el-table-column label="未巡逻里程" align="center" prop="wxllc" />
|
||||
<el-table-column label="巡逻里程得扣分" align="center" prop="xllckf" />
|
||||
<el-table-column label="巡逻里程得分" align="center" prop="xllcf" />
|
||||
<el-table-column label="比例" align="center" prop="pccbl">
|
||||
<template #default="{ row }">
|
||||
<p v-if="row.yxllc">
|
||||
{{
|
||||
((Number(row.sjxllc) / Number(row.yxllc)) * 100).toFixed(2)
|
||||
}}%
|
||||
</p>
|
||||
<p v-else>0%</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="childlistQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="childlistQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { JXgetPageList, getStatistics } from "@/api/performance";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { parseTime, timestampToStr } from "@/utils/index";
|
||||
const props = defineProps({
|
||||
childTitle: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
searchType: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
ssbmdm: {
|
||||
default: "",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const childlistQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
type: "01",
|
||||
searchType: props.searchType,
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
ssbmdm: props.ssbmdm,
|
||||
cxcj: "02"
|
||||
});
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
const searchDay = ref("");
|
||||
const allNums = ref("");
|
||||
const tableChildData = ref([]);
|
||||
const alreadyNums = ref("");
|
||||
const notNums = ref("");
|
||||
const total = ref(0);
|
||||
const allList = ref([]);
|
||||
onMounted(() => {
|
||||
searchDay.value = timeValidate(new Date(),'ymd');
|
||||
childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
|
||||
childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
});
|
||||
watch(
|
||||
() => [props.ssbmdm, props.searchType],
|
||||
() => {
|
||||
childlistQuery.value.ssbmdm = props.ssbmdm;
|
||||
childlistQuery.value.searchType = props.searchType;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 获取弹窗表格初始化数据
|
||||
const getChildTableList = () => {
|
||||
JXgetPageList(childlistQuery.value).then((res) => {
|
||||
tableChildData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const _getStatistics = () => {
|
||||
let { searchType, ssbmdm, kssj } = childlistQuery.value;
|
||||
let params = {
|
||||
searchType: searchType,
|
||||
ssbmdm: ssbmdm,
|
||||
time: kssj
|
||||
};
|
||||
getStatistics(params).then((res) => {
|
||||
alreadyNums.value = res.sjxllc;
|
||||
allNums.value = res.yxllc;
|
||||
notNums.value = res.wxllc;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
childlistQuery.value.pageSize = currentSize;
|
||||
getChildTableList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
childlistQuery.value.pageCurrent = currentPage;
|
||||
getChildTableList();
|
||||
};
|
||||
const changeDay = (val) => {
|
||||
childlistQuery.value.kssj = val;
|
||||
childlistQuery.value.jssj = val;
|
||||
childlistQuery.value.pageCurrent=1
|
||||
getChildTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popTitle {
|
||||
color: #72d8ff;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tjtitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tjli {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #0d2944 !important;
|
||||
color: #61f9ff;
|
||||
}
|
||||
.qs-box {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-03-22 11:36:21
|
||||
* @LastEditTime: 2023-04-10 17:02:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="qs-box">
|
||||
<div class="popTitle">{{ childTitle }}盘查情况</div>
|
||||
<div class="popBody" style="max-height: 600px; overflow: auto">
|
||||
<div class="tjtitle">
|
||||
<el-date-picker
|
||||
v-model="searchDay"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 150px"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="changeDay"
|
||||
/>
|
||||
<div class="tjli lightblue">
|
||||
当日应盘查：<span>{{ allNums <= 0 ? 0 : allNums}}</span>
|
||||
</div>
|
||||
<div class="tjli green">
|
||||
当日已盘查：<span>{{ alreadyNums <=0 ? 0 : alreadyNums }}</span>
|
||||
</div>
|
||||
<div class="tjli orange">
|
||||
当日未盘查：<span>{{ notNums <= 0 ? 0 : notNums }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableChildData"
|
||||
border
|
||||
class="table flex-auto overflow-auto margin-tp-10"
|
||||
row-class-name="table-row"
|
||||
cell-class-name="table-cell"
|
||||
header-row-class-name="table-header-row"
|
||||
header-cell-class-name="table-header-cell"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- @row-click="getScore" -->
|
||||
<el-table-column label="盘查详情" align="center">
|
||||
<el-table-column prop="ssbm" label="单位" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip effect="dark" :content="row.ssbm" placement="right">
|
||||
<span>{{ row.ssbm }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ycc" label="应盘查" align="center" />
|
||||
<el-table-column prop="sjcc" label="实际盘查人" align="center" />
|
||||
<el-table-column label="未盘查" align="center" prop="wcc" />
|
||||
<el-table-column label="比例" align="center" prop="pccbl">
|
||||
<template #default="{ row }">
|
||||
<p v-if="row.ycc">
|
||||
{{ ((Number(row.sjcc) / Number(row.ycc)) * 100).toFixed(2) }}%
|
||||
</p>
|
||||
<p v-else>0%</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="childlistQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="childlistQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { JXgetPageList, getStatistics } from "@/api/performance";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { parseTime, timestampToStr } from "@/utils/index";
|
||||
const props = defineProps({
|
||||
childTitle: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
searchType: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
ssbmdm: {
|
||||
default: "",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const childlistQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
type: "01",
|
||||
searchType: props.searchType,
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
ssbmdm: props.ssbmdm,
|
||||
cxcj: "02"
|
||||
});
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
const searchDay = ref("");
|
||||
const allNums = ref("");
|
||||
const tableChildData = ref([]);
|
||||
const alreadyNums = ref("");
|
||||
const notNums = ref("");
|
||||
const total = ref(0);
|
||||
const allList = ref([]);
|
||||
onMounted(() => {
|
||||
searchDay.value = timeValidate(new Date(),'ymd');
|
||||
childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
|
||||
childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
});
|
||||
watch(
|
||||
() => [props.ssbmdm, props.searchType],
|
||||
() => {
|
||||
childlistQuery.value.ssbmdm = props.ssbmdm;
|
||||
childlistQuery.value.searchType = props.searchType;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 获取弹窗表格初始化数据
|
||||
const getChildTableList = () => {
|
||||
JXgetPageList(childlistQuery.value).then((res) => {
|
||||
tableChildData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const _getStatistics = () => {
|
||||
let { searchType, ssbmdm, kssj } = childlistQuery.value;
|
||||
let params = {
|
||||
searchType: searchType,
|
||||
ssbmdm: ssbmdm,
|
||||
time: kssj
|
||||
};
|
||||
getStatistics(params).then((res) => {
|
||||
alreadyNums.value = res.sjcc;
|
||||
allNums.value = res.ycc;
|
||||
notNums.value = res.wcc;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
childlistQuery.value.pageSize = currentSize;
|
||||
getChildTableList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
childlistQuery.value.pageCurrent = currentPage;
|
||||
getChildTableList();
|
||||
};
|
||||
const changeDay = (val) => {
|
||||
childlistQuery.value.kssj = val;
|
||||
childlistQuery.value.jssj = val;
|
||||
childlistQuery.value.pageCurrent=1
|
||||
getChildTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popTitle {
|
||||
color: #72d8ff;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tjtitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tjli {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #0d2944 !important;
|
||||
color: #61f9ff;
|
||||
}
|
||||
.qs-box {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-03-22 11:36:21
|
||||
* @LastEditTime: 2023-04-10 17:02:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="qs-box">
|
||||
<div class="popTitle">{{ childTitle }}盘查情况</div>
|
||||
<div class="popBody" style="max-height: 600px; overflow: auto">
|
||||
<div class="tjtitle">
|
||||
<el-date-picker
|
||||
v-model="searchDay"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 150px"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="changeDay"
|
||||
/>
|
||||
<div class="tjli lightblue">
|
||||
当日应盘查：<span>{{ allNums <= 0 ? 0 : allNums}}</span>
|
||||
</div>
|
||||
<div class="tjli green">
|
||||
当日已盘查：<span>{{ alreadyNums <=0 ? 0 : alreadyNums }}</span>
|
||||
</div>
|
||||
<div class="tjli orange">
|
||||
当日未盘查：<span>{{ notNums <= 0 ? 0 : notNums }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableChildData"
|
||||
border
|
||||
class="table flex-auto overflow-auto margin-tp-10"
|
||||
row-class-name="table-row"
|
||||
cell-class-name="table-cell"
|
||||
header-row-class-name="table-header-row"
|
||||
header-cell-class-name="table-header-cell"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- @row-click="getScore" -->
|
||||
<el-table-column label="盘查详情" align="center">
|
||||
<el-table-column prop="ssbm" label="单位" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip effect="dark" :content="row.ssbm" placement="right">
|
||||
<span>{{ row.ssbm }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ycr" label="应盘查" align="center" />
|
||||
<el-table-column prop="sjcr" label="实际盘查人" align="center" />
|
||||
<el-table-column label="未盘查" align="center" prop="wcr" />
|
||||
<el-table-column label="比例" align="center" prop="qsbl">
|
||||
<template #default="{ row }">
|
||||
<p v-if="row.ycr">
|
||||
{{ ((Number(row.sjcr) / Number(row.ycr)) * 100).toFixed(2) }}%
|
||||
</p>
|
||||
<p v-else>0%</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="childlistQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="childlistQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { JXgetPageList, getStatistics } from "@/api/performance";
|
||||
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
||||
import { parseTime, timestampToStr } from "@/utils/index";
|
||||
const props = defineProps({
|
||||
childTitle: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
searchType: {
|
||||
default: "",
|
||||
type: String
|
||||
},
|
||||
ssbmdm: {
|
||||
default: "",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const childlistQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
type: "01",
|
||||
searchType: props.searchType,
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
ssbmdm: props.ssbmdm,
|
||||
cxcj: "02"
|
||||
});
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
const searchDay = ref("");
|
||||
const allNums = ref("");
|
||||
const tableChildData = ref([]);
|
||||
const alreadyNums = ref("");
|
||||
const notNums = ref("");
|
||||
const total = ref(0);
|
||||
const allList = ref([]);
|
||||
onMounted(() => {
|
||||
searchDay.value = timeValidate(new Date(),'ymd');
|
||||
childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
|
||||
childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
});
|
||||
watch(
|
||||
() => [props.ssbmdm, props.searchType],
|
||||
() => {
|
||||
childlistQuery.value.ssbmdm = props.ssbmdm;
|
||||
childlistQuery.value.searchType = props.searchType;
|
||||
getChildTableList();
|
||||
_getStatistics();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 获取弹窗表格初始化数据
|
||||
const getChildTableList = () => {
|
||||
JXgetPageList(childlistQuery.value).then((res) => {
|
||||
tableChildData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
const _getStatistics = () => {
|
||||
let { searchType, ssbmdm, kssj } = childlistQuery.value;
|
||||
let params = {
|
||||
searchType: searchType,
|
||||
ssbmdm: ssbmdm,
|
||||
time: kssj
|
||||
};
|
||||
getStatistics(params).then((res) => {
|
||||
alreadyNums.value = res.sjcr;
|
||||
allNums.value = res.ycr;
|
||||
notNums.value = res.wcr;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
childlistQuery.value.pageSize = currentSize;
|
||||
getChildTableList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
childlistQuery.value.pageCurrent = currentPage;
|
||||
getChildTableList();
|
||||
};
|
||||
const changeDay = (val) => {
|
||||
childlistQuery.value.kssj = val;
|
||||
childlistQuery.value.jssj = val;
|
||||
childlistQuery.value.pageCurrent=1
|
||||
getChildTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popTitle {
|
||||
color: #72d8ff;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.tjtitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tjli {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #0d2944 !important;
|
||||
color: #61f9ff;
|
||||
}
|
||||
.qs-box {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user