'删除其他不用的文件'
This commit is contained in:
esacpe
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"> </MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :data="obj"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
|
||||
const searchConfiger = ref([{ label: "时间段", prop: "time", showType: "daterange" }]);
|
||||
const obj = ref({
|
||||
xDate: ["波密", "墨脱", "米林", "朗县", "察隅", "林芝", "公布江达"],
|
||||
list: [
|
||||
{ name: "值守点数量", value: [100, 200, 355, 444, 325, 256, 247], hatColor: "#087df9", color: ["rgba(0,244,255,1)", "rgba(0,77,167,1)"] },
|
||||
{ name: "值守人员数量", value: [100, 200, 355, 444, 325, 256, 247], hatColor: "#059f59", color: ["#92f9de", "#0c9973"] }
|
||||
]
|
||||
});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
zsdsl: "20",
|
||||
zsrsl: "20",
|
||||
dz: "巴宜区"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
showIndex: false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "", prop: "dz" },
|
||||
{ label: "值守点数量", prop: "zsdsl" },
|
||||
{ label: "值守人员数量", prop: "zsrsl" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
const onSearch = params => {
|
||||
console.log("Search params:", params);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px); /* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
.right {
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image style="width: 50px; height: 50px" :src="row.accidentPhoto" :preview-src-list="[row.accidentPhoto]"> </el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const current = ref("list");
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "报警时间",
|
||||
prop: "bjsj",
|
||||
placeholder: "人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
|
||||
{
|
||||
label: "管辖部门",
|
||||
prop: "jurisdiction",
|
||||
placeholder: "管辖部门",
|
||||
showType: "cascader"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
gxbm: "123",
|
||||
bjr: "123",
|
||||
bjrxb: "123",
|
||||
bjrdh: "123",
|
||||
bjsj: "123",
|
||||
jjybh: "123",
|
||||
xtba: "123"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
|
||||
tableColumn: [
|
||||
{ label: "管辖部门", prop: "gxbm" },
|
||||
{ label: "报警人", prop: "bjr" },
|
||||
{ label: "报警人性别", prop: "bjrxb" },
|
||||
{ label: "报警人电话", prop: "bjrdh" },
|
||||
{ label: "报警时间", prop: "bjsj" },
|
||||
{ label: "接警员编号", prop: "jjybh" },
|
||||
{ label: "协调保安", prop: "xtba" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = val => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = val => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = val => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = val => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = val => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = "/mosty-ylth/system/dyy/ywxx/list";
|
||||
// qcckPost(data, url)
|
||||
// .then((res) => {
|
||||
// pageData.tableData = res.rows || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// })
|
||||
// .catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">敬请协调情况详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList" @change="handleChange">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
csdm: "",
|
||||
xm: "",
|
||||
lxdh: "",
|
||||
ssxq: ""
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择管辖部门", trigger: "change" }],
|
||||
jqlx: [{ required: true, message: "请选择警情类型", trigger: "change" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "管辖部门", prop: "ssbmdm", type: "department" },
|
||||
{ label: "警情类型", prop: "jqlx", type: "select",options:[] },
|
||||
{ label: "报警人", prop: "bjrxm", type: "input" },
|
||||
{ label: "报警人性别", prop: "xb", type: "select",options:[] },
|
||||
],
|
||||
[
|
||||
{ label: "报警人电话", prop: "bjdh", type: "input" },
|
||||
{ label: "报警时间", prop: "bjsj", type: "date" },
|
||||
{ label: "接警员编号", prop: "jjydh", type: "input" },
|
||||
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "协调保安", prop: "xdba", type: "input",width:'23%' },
|
||||
{ label: "处置民警", prop: "czmj", type: "date",width:'23%' },
|
||||
],
|
||||
[
|
||||
{ label: "警情描述", prop: "jjydh", type: "input" ,lx:'textarea'},
|
||||
]
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 12rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="敬请协调情况统计" />
|
||||
<el-button :type="current == 'list' ? 'primary' : ''" @click="current = 'list'">列 表</el-button>
|
||||
<el-button :type="current != 'list' ? 'primary' : ''" @click="current = 'echart'">统计图表</el-button>
|
||||
</div>
|
||||
<AlarmList v-if="current == 'list'"></AlarmList>
|
||||
<AlarmEchats v-else></AlarmEchats>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import AlarmList from "./components/alarmList.vue";
|
||||
import AlarmEchats from "./components/alarmEchats.vue";
|
||||
// import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const current = ref("list");
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="bonx">
|
||||
<div class="titleBox">
|
||||
<PageTitle title="勤务打卡统计"></PageTitle>
|
||||
</div>
|
||||
<div class="lineEchartsBox">
|
||||
<moreLineEcharts echartsId="qwdkLine" :data="obj"></moreLineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import moreLineEcharts from "@/components/echarts/moreLineEcharts.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
const obj = reactive({
|
||||
color: ['#EB00FF', '#F57100'], //['#EB00FF','#F57100']
|
||||
list: [], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
|
||||
xData: [],//['09-01','09-02','09-03','09-04']
|
||||
})
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
const getData = () => {
|
||||
qcckGet({}, "/mosty-jbld/jblddk/queryDktj").then(res => {
|
||||
if (res && res.length > 0) {
|
||||
obj.list = res[0]?.list.map((el) => {
|
||||
return { label: el.bxxmc, val: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||||
})
|
||||
obj.list?.forEach((w) => {
|
||||
res.forEach((el) => {
|
||||
el.list.forEach((item) => {
|
||||
if (w.label == item.bxxmc) {
|
||||
w.val.push(item.num)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
obj.xData = res.map((el) => el.ssbm)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bonx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.lineEchartsBox {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">固定勤务{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList" @change="handleChange">
|
||||
<div class="listBox">
|
||||
<el-row class="el-row-title">
|
||||
<el-col class="tc border1" :span="4">班次</el-col>
|
||||
<el-col class="tc" :span="4">时间</el-col>
|
||||
<el-col class="tc border" :span="8">带队民警</el-col>
|
||||
<el-col class="tc" :span="8">巡逻保安</el-col>
|
||||
</el-row>
|
||||
<el-row v-for="(item, index) in listQuery.qwglRyDtos" :key="index">
|
||||
<el-col class="tc border1" :span="4"> {{ item.bcmc }} </el-col>
|
||||
<el-col class="tc" :span="4">{{ item.qwsj }}</el-col>
|
||||
<el-col class="tc border" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.mjList" :key="idx" @close="item.mjList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('mj', index, item.mjList)">新增</span>
|
||||
</el-col>
|
||||
<el-col class="tc" :span="8">
|
||||
<el-tag closable v-for="(it, idx) in item.baList" :key="idx" @close="item.baList.splice(idx, 1)">
|
||||
{{ it.xm }}
|
||||
</el-tag>
|
||||
<span class="btns" @click="addUser('ab', index, item.baList)">新增</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 选择民警 -->
|
||||
<ChooseUser :roleIds="roleIds" v-model="chooseUserVisible" :Single="false" @choosedUsers="saveUsers"></ChooseUser>
|
||||
<!-- 选择保安 -->
|
||||
<AbIndex :roleIds="roleIds" v-model="chooseAbVisible" @choosedUsers="saveUsers"></AbIndex>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import AbIndex from "@/components/MyComponents/ChooseUser/AbIndex.vue";
|
||||
import { getTime } from "@/utils/time.js";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const roleIds = ref([]);
|
||||
const chooseType = ref('');
|
||||
const chooseIndex = ref()
|
||||
const chooseAbVisible = ref(false)
|
||||
const chooseUserVisible = ref(false);
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({
|
||||
xhzq: 0,
|
||||
kssj: timeValidate(new Date(), 'ymd'),
|
||||
qwglRyDtos: []
|
||||
});
|
||||
const rules = reactive({
|
||||
qwmc: [{ required: true, message: "请输入勤务名称", trigger: "blur" }],
|
||||
bxxid: [{ required: true, message: "请选择巡逻路线", trigger: "change" }],
|
||||
kssj: [{ required: true, message: "请选择开始时间", trigger: "change" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "勤务名称", prop: "qwmc", type: "input" },
|
||||
{ label: "巡逻路线", prop: "bxxid", type: "select", options: props.dic.bxxlist },
|
||||
],
|
||||
[
|
||||
{ label: "开始时间", prop: "kssj", type: "date" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
{ label: "勤务循环周期", prop: "xhzq", type: "number", width: '50%', placeholder: "请输入勤务循环周期" },
|
||||
{ label: "", prop: "", type: "slot" }
|
||||
])
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (id) getDateById(id);
|
||||
};
|
||||
|
||||
// 更根据id获取数据
|
||||
const getDateById = (id) => {
|
||||
qcckGet({ id }, `/mosty-jbld/gdqwgl/selectByid`).then((res) => {
|
||||
let arr1 = handleZz(res.baList, 'baList')
|
||||
let arr2 = handleZz(res.mjList, 'mjList')
|
||||
let list = [...arr1, ...arr2];
|
||||
res.qwglRyDtos = list.reduce((result, obj) => {
|
||||
var target = result.find((item) => item.bcmc === obj.bcmc);
|
||||
target ? Object.assign(target, obj) : result.push(obj);
|
||||
return result;
|
||||
}, []);
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
// 去重组装数据
|
||||
const handleZz = (val, type) => {
|
||||
let newData = [];
|
||||
val.forEach(item => {
|
||||
let index = newData.findIndex(obj => obj.bcmc === item.bcmc);
|
||||
if (index !== -1) {
|
||||
newData[index][type].push({ id: item.ryid, xm: item.xm });
|
||||
} else {
|
||||
let obj = { bcmc: item.bcmc, qwsj: item.qwsj }
|
||||
obj[type] = [{ id: item.ryid, xm: item.xm }];
|
||||
newData.push(obj);
|
||||
}
|
||||
});
|
||||
return newData;
|
||||
}
|
||||
|
||||
// 选择的用户
|
||||
const addUser = (type, index, arr) => {
|
||||
chooseType.value = type;
|
||||
chooseIndex.value = index;
|
||||
roleIds.value = arr ? arr.map(item => item.id) : [];
|
||||
type == 'mj' ? chooseUserVisible.value = true : chooseAbVisible.value = true;
|
||||
};
|
||||
|
||||
//批量添加用户
|
||||
const saveUsers = (users) => {
|
||||
switch (chooseType.value) {
|
||||
case 'mj':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].mjList = users.map(item => {
|
||||
return { id: item.id, xm: item.userName }
|
||||
});
|
||||
break;
|
||||
case 'ab':
|
||||
listQuery.value.qwglRyDtos[chooseIndex.value].baList = users.map(item => {
|
||||
return { id: item.id, xm: item.xm }
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 处理表单数据变化
|
||||
const handleChange = (data) => {
|
||||
listQuery.value.qwglRyDtos = []
|
||||
if (data.xhzq > 0) {
|
||||
if (!listQuery.value.kssj) return proxy.$message.warning("请选择开始时间");
|
||||
for (let i = 0; i < data.xhzq; i++) {
|
||||
listQuery.value.qwglRyDtos.push({ bcmc: `第${i + 1}班`, qwsj: getTime(i, listQuery.value.kssj), mjList: [], xlba: [] })
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let data = { ...listQuery.value }
|
||||
data.qwglRyDtos = data.qwglRyDtos.map(item => {
|
||||
return {
|
||||
bcmc: item.bcmc,
|
||||
qwsj: item.qwsj,
|
||||
mjIds: item.mjList.map(mj => mj.id),
|
||||
baIds: item.baList.map(ba => ba.id)
|
||||
}
|
||||
});
|
||||
let url = title.value == '新增' ? `/mosty-jbld/gdqwgl/add` : `/mosty-jbld/gdqwgl/update`;
|
||||
qcckPost(data, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value.qwglRyDtos = [];
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
|
||||
.listBox {
|
||||
width: 100%;
|
||||
height: 536px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-row {
|
||||
border: 1px solid #e3e7ed;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
::v-deep .el-row-title {
|
||||
border-top: 1px solid #e3e7ed;
|
||||
background: #e3eeff;
|
||||
}
|
||||
|
||||
::v-deep .border {
|
||||
border-left: 1px solid #e3e7ed;
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .border1 {
|
||||
border-right: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
::v-deep .el-col {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #0072ff;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="固定勤务管理" />
|
||||
<el-button type="primary" @click="addEdit('add', row)">新增</el-button>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row.id)">编辑</el-link>
|
||||
<el-link type="danger" @click="deleteItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" v-if="show" :dic="{bxxlist}" @refresh="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const bxxlist = ref([])
|
||||
const show = ref(false);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "勤务名称",
|
||||
prop: "qwmc",
|
||||
placeholder: "勤务名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department",
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 160,
|
||||
tableColumn: [
|
||||
{ label: "勤务名称", prop: "qwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "巡逻路线名称", prop: "bxxmc" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getBxxList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/gdqwgl/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, id) => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, id);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const getBxxList = () => {
|
||||
// 获取巡逻路线列表
|
||||
qcckGet({}, `/mosty-jbld/jbldBxx/selecList`).then((res) => {
|
||||
bxxlist.value = res.map(item => ({ label: item.bxxMc, value: item.id }));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const deleteItem = (id) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost({id}, "/mosty-jbld/gdqwgl/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">巡逻路线{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
<template #jwd>
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div class="mapBox relative">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
import { color } from "echarts";
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "值守点名称", prop: "zsdMc", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
[
|
||||
{ label: "地址", prop: "xxdz", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "选择点位", prop: "jwd", type: "slot"},
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
if(res.jd && res.wd){
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.jd,wd:res.wd}], icon, flag: 'bxd'});
|
||||
emitter.emit("setMapCenter", { location: [res.jd,res.wd], zoomLevel:12});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: calc(100% - 24rem);
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
margin: 0 12rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="值守点管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</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 #ewm="{ row }">
|
||||
<el-image style="width: 70px;" :src="`${baseUrl}${row.ewm}`" preview-teleported>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit('edit', row.id)">编辑</el-link>
|
||||
<el-link type="danger" link @click="handleDelete(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @refresh="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const baseUrl = 'data:image/jpeg;base64,'
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "值守点名称",
|
||||
prop: "zsdMc",
|
||||
placeholder: "请输入值守点名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "值守点名称", prop: "zsdMc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "二维码", prop: "ewm" ,showSolt:true},
|
||||
{ label: "地址", prop: "xxdz" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const handleDelete = (id) => {
|
||||
proxy.$modal.confirm("是否确认删除该值守点？").then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/jbldzsd/delete").then(() => {
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
getList();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, id) => {
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, id);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">巡逻路线详情</span>
|
||||
<div>
|
||||
<el-button size="small" v-if="openType != 'detail'" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
|
||||
<template #jwd>
|
||||
<div class="flex align-center ww100">
|
||||
<el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
|
||||
<el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
|
||||
<el-button type="primary" @click="changePoint">选择点位</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<div class="mapBox relative">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
|
||||
import { color } from "echarts";
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const loading = ref(false);
|
||||
const listQuery = ref({});
|
||||
const openType = ref("")
|
||||
const rules = reactive({
|
||||
zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "值守点名称", prop: "zsdMc", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
],
|
||||
[
|
||||
{ label: "地址", prop: "xxdz", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "选择点位", prop: "jwd", type: "slot"},
|
||||
],
|
||||
])
|
||||
|
||||
// 获取数据
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res => {
|
||||
if(res.type == 'point') {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
let icon = require('@/assets/point/zsd1.png');
|
||||
emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id,) => {
|
||||
dialogForm.value = true;
|
||||
openType.value = type;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if(id) getDateById(id)
|
||||
};
|
||||
|
||||
// 根据id获取数据
|
||||
const getDateById = (id) =>{
|
||||
qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
}
|
||||
|
||||
// 选择点位
|
||||
const changePoint = () =>{
|
||||
listQuery.value.jd = ''
|
||||
listQuery.value.wd = ''
|
||||
emitter.emit("removePlot", 'point');
|
||||
emitter.emit("deletePointArea", 'bxd');
|
||||
emitter.emit("drawShape", { type: 'point', flag: 'point'});
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
FormRef.value.submit(()=>{
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
|
||||
qcckPost(listQuery.value, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("refresh");
|
||||
close();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height:500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
</MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :key="echartsBar" :data='obj'></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, defineExpose, reactive } from "vue";
|
||||
const echartsBar = ref(1)
|
||||
const searchConfiger = ref([
|
||||
{ label: "时间段", prop: "time", showType: "daterange" },
|
||||
]);
|
||||
const obj = ref({
|
||||
xDate: [],
|
||||
list:[
|
||||
{name:'值守点数量',value:[],hatColor:'#087df9',color:['rgba(0,244,255,1)','rgba(0,77,167,1)']},
|
||||
{name:'打卡数',value:[],hatColor:'#059f59',color:['#92f9de','#0c9973']},]
|
||||
})
|
||||
const searchDate = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false,
|
||||
showIndex:false
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "", prop: "ssbm" },
|
||||
{ label: "值守点数量", prop: "zsdNum" },
|
||||
{ label: "打卡数", prop: "dkNum" },
|
||||
]
|
||||
});
|
||||
|
||||
const onSearch = (params) => {
|
||||
searchDate.value.kssj = params.time ? params.time[0] : '';
|
||||
searchDate.value.jssj = params.time ? params.time[1] : '';
|
||||
getList()
|
||||
};
|
||||
|
||||
const init = () =>{
|
||||
searchDate.value.kssj = ''
|
||||
searchDate.value.jssj = ''
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
let data = { ...searchDate.value };
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/getZsdTj").then((res) => {
|
||||
pageData.tableData = res || [];
|
||||
obj.value.xDate = pageData.tableData.map(v=> v.ssbm);
|
||||
obj.value.list[0].value = pageData.tableData.map(v=> v.zsdNum);//值守人员数量
|
||||
obj.value.list[1].value = pageData.tableData.map(v=> v.dkNum); //值守点数量
|
||||
echartsBar.value++
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px); /* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
.right{
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="值守点值守统计">
|
||||
<el-button @click="handleBtn('列表')" :type="activeName == '列表' ? 'primary':''">列表</el-button>
|
||||
<el-button @click="handleBtn('统计图表')" :type="activeName == '统计图表' ? 'primary':''">统计图表</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<Count v-if="activeName == '统计图表'" ref="countPage"></Count>
|
||||
<ListTable @lookDetail="lookDetail" ref="listPage" v-if="activeName == '列表'"></ListTable>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetailForm from "@/views/backOfficeSystem/AlarmLinkage/GuardPoint/components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import ListTable from "./listTable.vue";
|
||||
import Count from "./count.vue";
|
||||
import { nextTick, ref } from "vue";
|
||||
const countPage = ref()
|
||||
const listPage = ref()
|
||||
const activeName = ref("列表");
|
||||
const detailDiloag = ref();
|
||||
const lookDetail = (row) => {
|
||||
detailDiloag.value.init('detail',row.id);
|
||||
};
|
||||
function handleBtn(type){
|
||||
activeName.value = type;
|
||||
nextTick(()=>{
|
||||
type == '列表'? listPage.value.init() : countPage.value.init()
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, defineEmits,defineExpose, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["lookDetail"]);
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "值守点名称",
|
||||
prop: "zsdMc",
|
||||
placeholder: "请输入值守点名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "值守点名称", prop: "zsdMc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "打卡人数", prop: "num" },
|
||||
{ label: "地址", prop: "xxdz" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const init = () =>{
|
||||
getList();
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/jbldzsd/selectPageTj").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情 (Removed as per prototype)
|
||||
const addEdit = (row) => {
|
||||
emit("lookDetail", row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">安全人员管理详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { ref, reactive, defineEmits, getCurrentInstance } from 'vue';
|
||||
const emit = defineEmits(["updateData"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogForm = ref(false);
|
||||
const FormRef = ref();
|
||||
const listQuery = ref({});
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const rules = reactive({
|
||||
code: [{ required: true, message: "请输入场所代码", trigger: "blur" }],
|
||||
csmc: [{ required: true, message: "请输入场所名称", trigger: "blur" }],
|
||||
});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "场所代码", prop: "csdm", type: "input" },
|
||||
{ label: "场所名称", prop: "csmc", type: "input" },
|
||||
{ label: "姓名", prop: "xm", type: "input" },
|
||||
{ label: "证件号码", prop: "zjhm", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "联系电话", prop: "lxdh", type: "input" },
|
||||
{ label: "居住地址", prop: "jzdz", type: "input" },
|
||||
{ label: "所属辖区", prop: "ssbmdm", type: "department" },
|
||||
{ label: "外派单位", prop: "wpdw", type: "input" },
|
||||
],
|
||||
])
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (id) {
|
||||
title.value = '修改'
|
||||
qcckGet({ id }, `/mosty-jbld/tbbary/selectByid`).then((res) => {
|
||||
listQuery.value = res || {};
|
||||
})
|
||||
} else {
|
||||
title.value = "新增"
|
||||
}
|
||||
};
|
||||
const save = () => {
|
||||
FormRef.value.submit(() => {
|
||||
loading.value = true;
|
||||
let url = title.value == '新增' ? `/mosty-jbld/tbbary/add` : `/mosty-jbld/tbbary/update`;
|
||||
console.log(url, 'url');
|
||||
qcckPost(listQuery.value, url).then((res) => {
|
||||
loading.value = false;
|
||||
proxy.$message.success("保存成功");
|
||||
emit("updateData");
|
||||
close();
|
||||
}).catch(() => {
|
||||
debugger
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
const close = () => {
|
||||
console.log(22222);
|
||||
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="保安人员管理">
|
||||
<el-button type="primary" @click="addEdit('add', null)">
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon><span>新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('detail', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" @updateData="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "人员姓名",
|
||||
prop: "xm",
|
||||
placeholder: "人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "联系电话",
|
||||
prop: "lxdh",
|
||||
placeholder: "联系电话",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
{ label: "联系方式", prop: "lxdh" },
|
||||
{ label: "外派单位", prop: "wpdw" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
})
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
// 删除
|
||||
const delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckPost({ id }, "/mosty-jbld/tbbary/delete").then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/tbbary/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">临时任务统计详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" label-position="right">
|
||||
<el-form-item label="任务名称">
|
||||
<el-input v-model="listQuery.rwmc" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssbm" placeholder="请输入所属辖区" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务地点">
|
||||
<el-input v-model="listQuery.rwdz" placeholder="请输入任务地点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务时间">
|
||||
<el-input v-model="listQuery.rwsj" placeholder="请输入任务时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型">
|
||||
<el-select :disabled="true" v-model="listQuery.rwlx" placeholder="请选择任务类型">
|
||||
<el-option v-for="item in dic.D_BZ_JBLDRWLX" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态">
|
||||
<el-select :disabled="true" v-model="listQuery.rwzt" placeholder="请选择任务状态">
|
||||
<el-option v-for="item in dic.JBLDRWZT" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述" style="width:100%">
|
||||
<el-input type="textarea" style="width:100%" v-model="listQuery.rwms" placeholder="请输入任务描述" :rows="4" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { ref, reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
qcckGet({ id: row.id }, "/mosty-jbld/rw/selectByid").then(res => {
|
||||
listQuery.value = res;
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};;
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep .el-form{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 12rem;
|
||||
.el-form-item--default{
|
||||
width: 23%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="Count-Cnt flex">
|
||||
<div class="left">
|
||||
<MyTable :tableData="pageData.tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger">
|
||||
</MyTable>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BarHatEcharts echartsId="counrtEchars" :data='obj'></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet} from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
const searchConfiger = ref([
|
||||
{ label: "时间段", prop: "time", showType: "daterange" },
|
||||
]);
|
||||
const obj = ref({
|
||||
xDate: [],
|
||||
list: []
|
||||
})
|
||||
const paramsObj = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 620,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
showIndex: false,
|
||||
rowKey: 'ssbmdm',
|
||||
lazy: false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "", prop: "mc" },
|
||||
{ label: "跟踪侦察", prop: "xlzsl" },
|
||||
{ label: "人员线索", prop: "xlrs" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
});
|
||||
const getData = () => {
|
||||
qcckGet(paramsObj.value, "/mosty-jbld/rw/getRwtj").then(res => {
|
||||
if (res && res.length > 0) {
|
||||
pageData.tableColumn = res[0].list.map((el) => {
|
||||
return { label: el.zdmc, prop: el.py }
|
||||
})
|
||||
pageData.tableColumn.unshift({ label: "", prop: "mc" })
|
||||
pageData.tableData = res.map((item) => {
|
||||
let big = {};
|
||||
big.mc = item.ssbm;
|
||||
big.ssbmdm = item.ssbmdm;
|
||||
item.list.forEach((el) => {
|
||||
big[el.py] = el.count
|
||||
})
|
||||
return big
|
||||
})
|
||||
obj.value.list = res[0]?.list.map((el) => {
|
||||
return { name: el.zdmc, value: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||||
})
|
||||
obj.value.list?.forEach((w) => {
|
||||
res.forEach((el) => {
|
||||
el.list.forEach((item) => {
|
||||
if (w.name == item.zdmc) {
|
||||
w.value.push(item.count)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
obj.value.xDate = res.map((el) => el.ssbm)
|
||||
}
|
||||
})
|
||||
}
|
||||
const onSearch = (params) => {
|
||||
if (params.time.length > 0) {
|
||||
paramsObj.value.kssj = params.time[0]
|
||||
paramsObj.value.jssj = params.time[1]
|
||||
}
|
||||
getData()
|
||||
};
|
||||
|
||||
// 获取统计数据
|
||||
const getCount = () =>{
|
||||
qcckGet({},'/mosty-jbld/rw/getRwtj').then(res=>{
|
||||
console.log(res,'============00');
|
||||
let arr = res || [];
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Count-Cnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 267px);
|
||||
/* Adjust height as needed */
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1 0 0;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="临时任务管理">
|
||||
<el-button @click="activeName = '列表'">列表</el-button>
|
||||
<el-button @click="activeName = '统计图表'">统计图表</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<Count v-if="activeName == '统计图表'"></Count>
|
||||
<ListTable @lookDetail="lookDetail" v-if="activeName == '列表'" :dic="{ D_BZ_JBLDRWLX, JBLDRWZT }"></ListTable>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" :dic="{ D_BZ_JBLDRWLX, JBLDRWZT }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { reactive, ref, defineEmits, onMounted, getCurrentInstance } from "vue";
|
||||
import ListTable from "./listTable.vue";
|
||||
import Count from "./count.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_JBLDRWLX, JBLDRWZT } = proxy.$dict("D_BZ_JBLDRWLX", "JBLDRWZT");
|
||||
const activeName = ref("列表");
|
||||
const detailDiloag = ref();
|
||||
const lookDetail = (row) => {
|
||||
detailDiloag.value.init(row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</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 #rwlx="{ row }">
|
||||
<dict-tag :options="dic.D_BZ_JBLDRWLX" :value="row.rwlx" :tag="false" />
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js"; // Temporarily comment out as API logic might change
|
||||
import { reactive, ref, defineEmits, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["lookDetail"]);
|
||||
const queryFrom = ref({})
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "任务名称",
|
||||
prop: "rwmc",
|
||||
placeholder: "请输入任务名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "所属辖区",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择所属辖区",
|
||||
showType: "department"
|
||||
},
|
||||
{
|
||||
label: "任务类型",
|
||||
prop: "rwlx",
|
||||
placeholder: "请选择任务类型",
|
||||
showType: "select",
|
||||
options:props.dic.D_BZ_JBLDRWLX
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "任务名称", prop: "rwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "任务地点", prop: "rwdz" },
|
||||
{ label: "任务时间", prop: "rwsj" },
|
||||
{ label: "任务类型", prop: "rwlx", showSolt: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// Mock data is used for now, uncomment and adapt API call when needed
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
let url = "/mosty-jbld/rw/selectPage"; // Example API endpoint
|
||||
qcckGet(data, url)
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const addEdit = (row) => {
|
||||
emit("lookDetail", row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
const evaluate = (row) => {
|
||||
emit("evaluate", row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">任务{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<FormMessage ref="FormRef" v-model="listQuery" :formList="formList">
|
||||
<template #Personnel>
|
||||
<div class="bar">巡逻人员</div>
|
||||
<div class="flex tableRow" v-for="(item,index) in zDList" :key="index">
|
||||
<div class="content-left">{{ item.label }}</div>
|
||||
<div class="content-right">{{ listQuery[item.key] }}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<template #punchCardTime>
|
||||
<div style="width: calc(100% - 1px);;">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ref, defineProps, reactive, defineEmits, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue';
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
const dialogForm = ref(false);
|
||||
const title = ref('');
|
||||
const FormRef = ref();
|
||||
const listQuery = ref({});
|
||||
const formList = reactive([
|
||||
[
|
||||
{ label: "任务名称", prop: "rwbt", type: "input" },
|
||||
{ label: "巡逻线路", prop: "xlmc", type: "input"},
|
||||
],
|
||||
[
|
||||
{ label: "所属辖区", prop: "ssbm", type: "input" },
|
||||
{ label: "任务时间", prop: "rwkssj", type: "input" },
|
||||
],
|
||||
[
|
||||
{ label: "", prop: "Personnel", type: "slot" },
|
||||
],
|
||||
[
|
||||
{ label: "", prop: "punchCardTime", type: "slot" },
|
||||
],
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData:[],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
haveControls: false,
|
||||
showIndex:false
|
||||
},
|
||||
tableHeight: 400,
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "巡逻点位", prop: "bxdMc" },
|
||||
{ label: "打卡时间", prop: "" },
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
title.value = type == "add" ? "新增" : "详情";
|
||||
dialogForm.value = true;
|
||||
if (row) getDateById(row.id);
|
||||
};
|
||||
const zDList = reactive([
|
||||
{
|
||||
label: "民警",
|
||||
key: "fjxm"
|
||||
}, {
|
||||
label: "民警",
|
||||
key: "mjxm"
|
||||
}, {
|
||||
label: "保安",
|
||||
key:'baxm'
|
||||
}, {
|
||||
label: "网格员",
|
||||
key: 'wgyxm'
|
||||
}, {
|
||||
label: "群防群治",
|
||||
key: 'qfqz'
|
||||
}
|
||||
])
|
||||
// 获取详情
|
||||
const getDateById = (id) => {
|
||||
qcckGet({id:id}, `/mosty-jmxf/bxxRwxx/selectByid`).then((res) => {
|
||||
listQuery.value = res
|
||||
pageData.tableData=res.bxx.bxds
|
||||
})
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
FormRef.value.reset()
|
||||
};
|
||||
|
||||
|
||||
defineExpose({ init })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cntinfo {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid #ececec;
|
||||
background-color: rgb(224, 224, 224);
|
||||
}
|
||||
|
||||
.tableRow {
|
||||
border: 1px solid #ececec;
|
||||
border-top: none;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-left {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<div class="patrol-line-dialog">
|
||||
<el-dialog v-model="isShow" title="下发指令" width="800px" :show-close="true" :center="true"
|
||||
:before-close="handleClose">
|
||||
<div class="uplodBox">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="rwbt" label="任务名称">
|
||||
<el-input v-model="formData.rwbt" placeholder="请输入任务名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="rwsj" label="任务时间">
|
||||
<el-date-picker @change="handleChangeTime" v-model="formData.rwsj" type="datetimerange" unlink-panels range-separator="至"
|
||||
:start-placeholder="'开始时间'" :end-placeholder="'结束时间'" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider> 巡逻人员 </el-divider>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="fzrxm" label="负责人">
|
||||
<el-input v-model="formData.fzrxm" readonly placeholder="请选择负责人" @click="handleClick('fzr','选择负责人')"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="mjlist" label="民警">
|
||||
<div class="tagBox" @click="handleClick('mj','选择民警','mjlist')">
|
||||
<span class="txet" v-if="!formData.mjlist || formData.mjlist.length == 0">请选择民警</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.mjlist" :key="item.id" closable @close.stop="removeTag(item, 'mjlist')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="fjlist" label="辅警">
|
||||
<div class="tagBox" @click="handleClick('fj','选择辅警','fjlist')">
|
||||
<span class="txet" v-if="!formData.fjlist || formData.fjlist.length == 0">请选择辅警</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.fjlist" :key="item.id" closable @close.stop="removeTag(item, 'fjlist')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="baryList" label="保安">
|
||||
<div class="tagBox" @click="handleClick('ba','选择保安','baryList')">
|
||||
<span class="txet" v-if="!formData.baryList || formData.baryList.length == 0">请选择保安</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.baryList" :key="item.id" closable @close.stop="removeTag(item, 'baryList')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="wgyjson" label="网格员">
|
||||
<div class="tagBox" @click="handleClick('wgy','选择网格员','wgyjson')">
|
||||
<span class="txet" v-if="!formData.wgyjson || formData.wgyjson.length == 0">请选择网格员</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.wgyjson" :key="item.id" closable @close.stop="removeTag(item, 'wgyjson')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="qfqzjson" label="群防群治">
|
||||
<div class="tagBox" @click="handleClick('qfqz','选择群防群治','qfqzjson')">
|
||||
<span class="txet" v-if="!formData.qfqzjson || formData.qfqzjson.length == 0">请选择群防群治</span>
|
||||
<span class="txet" v-else>
|
||||
<el-tag v-for="item in formData.qfqzjson" :key="item.id" closable @close.stop="removeTag(item, 'qfqzjson')">{{item.xm}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="foot tc">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 选择人员列表 -->
|
||||
<ChooseList :data="chooseType" v-model="showDialog" @choosed="choosedList"></ChooseList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import ChooseList from "@/components/ChooseList/index.vue";
|
||||
import { reactive, ref, defineEmits } from "vue";
|
||||
const emits = defineEmits(['refresh']);
|
||||
const isShow = ref(false);
|
||||
const formData = ref({});
|
||||
const rules = reactive({
|
||||
rwbt: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
|
||||
rwsj: [{ required: true, message: "请选择任务时间", trigger: "change" }],
|
||||
fzrxm: [{ required: true, message: "请选择负责人", trigger: "change" }],
|
||||
mjlist: [{ required: true, message: "请选择民警", trigger: "change" }],
|
||||
fjlist: [{ required: true, message: "请选择辅警", trigger: "change" }],
|
||||
});
|
||||
const loading = ref(false)
|
||||
const showDialog = ref(false);
|
||||
const chooseType = reactive({
|
||||
title:'选择列表',
|
||||
type:'user',//选择类型
|
||||
Single:false,//是否单选
|
||||
roleIds:[],//回显的数据
|
||||
});
|
||||
const formRef = ref()
|
||||
// 点击选择数据
|
||||
function handleClick (type,title,val){
|
||||
chooseType.type = type;
|
||||
chooseType.title = title;
|
||||
chooseType.roleIds = [];
|
||||
chooseType.Single = type == 'fzr' ? true : false;
|
||||
if (!formData.value[val]) formData.value[val] = [];
|
||||
chooseType.roleIds = formData.value[val].map(item => item.id);
|
||||
showDialog.value = true;
|
||||
}
|
||||
|
||||
// 选择数据
|
||||
function choosedList(data) {
|
||||
switch (chooseType.type) {
|
||||
case 'fzr':
|
||||
formData.value.fzrxm = data[0].xm;
|
||||
formData.value.fzrsfzh = data[0].sfzh;
|
||||
break;
|
||||
case 'mj':
|
||||
formData.value.mjlist = data;
|
||||
break;
|
||||
case 'fj':
|
||||
formData.value.fjlist = data;
|
||||
break;
|
||||
case 'ba':
|
||||
formData.value.baryList = data;
|
||||
break;
|
||||
case 'wgy':
|
||||
formData.value.wgyjson = data;
|
||||
break;
|
||||
case 'qfqz':
|
||||
formData.value.qfqzjson = data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 删除数据
|
||||
function removeTag(item, type) {
|
||||
formData.value[type] = formData.value[type].filter((i) => i.id !== item.id);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function handleClose() {
|
||||
isShow.value = false;
|
||||
formData.value = {};
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
function handleChangeTime(val){
|
||||
formData.value.rwkssj = val ? val[0] :'';
|
||||
formData.value.rwjssj = val ? val[1] :'';
|
||||
}
|
||||
|
||||
// 提交
|
||||
function onComfirm (){
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
let params = { ...formData.value }
|
||||
params.basl = params.baryList ? params.baryList.length : 0 ;
|
||||
params.baxm = params.baryList ? params.baryList.map(item => item.xm).join(',') : '';
|
||||
params.jlryList = [...params.mjlist, ...params.fjlist];
|
||||
params.mjsl = params.mjlist ? params.mjlist.length : 0;
|
||||
params.fjsl = params.fjlist ? params.fjlist.length : 0;
|
||||
params.mjxm = params.mjlist ? params.mjlist.map(item => item.xm).join(',') : '';
|
||||
params.fjxm = params.fjlist ? params.fjlist.map(item => item.xm).join(',') : '';
|
||||
params.wgyxm = params.wgyjson ? params.wgyjson.map(item => item.xm).join(',') : '';
|
||||
params.wgyjson = params.wgyjson ? JSON.stringify(params.wgyjson) : '';
|
||||
params.qfqz = params.qfqzjson ? params.qfqzjson.map(item => item.xm).join(',') : '';
|
||||
params.qfqzjson = params.qfqzjson ? JSON.stringify(params.qfqzjson) : '';
|
||||
qcckPost(params, "/mosty-jmxf/bxxRwxx/uodateEntity").then((res) => {
|
||||
emits('refresh');
|
||||
ElMessage({ message: "保存成功", type: "success", });
|
||||
loading.value = false;
|
||||
handleClose();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const init = (type,row) => {
|
||||
qcckGet({id:row.id}, "/mosty-jmxf/bxxRwxx/selectByid").then((res) => {
|
||||
let jlList = res.jlryList || []
|
||||
res.mjlist = jlList.filter(item => item.fl == '01');
|
||||
res.fjlist = jlList.filter(item => item.fl == '02');
|
||||
res.qfqzjson = res.qfqzjson ? JSON.parse(res.qfqzjson) : [];
|
||||
res.wgyjson = res.wgyjson ? JSON.parse(res.wgyjson) : [];
|
||||
res.rwsj = [res.rwkssj,res.rwjssj]
|
||||
formData.value = res;
|
||||
isShow.value = true;
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagBox {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 2px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.txet {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.patrol-line-dialog {
|
||||
.el-date-editor .el-range-separator {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="任务中心" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<!-- <el-link type="primary" @click="addEdit('edit', row)">详情</el-link> -->
|
||||
<el-link type="primary" @click="openDetail( row)">详情</el-link>
|
||||
<!-- <el-link type="danger" @click="handleDelete([row.id])">删除</el-link> -->
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 下发任务 -->
|
||||
<XfrwDialog ref="xfDiloag" @refresh="getList"></XfrwDialog>
|
||||
</div>
|
||||
<AddForm ref="addForm"/>
|
||||
</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 XfrwDialog from "./components/xfrwDialog.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import AddForm from "./components/addForm.vue";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const xfDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "任务标题",
|
||||
prop: "rwbt",
|
||||
placeholder: "请输入任务标题",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "任务时间",
|
||||
prop: "datetime",
|
||||
showType: "datetimerange"
|
||||
},
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "任务标题", prop: "rwbt" },
|
||||
{ label: "任务开始时间", prop: "rwkssj" },
|
||||
{ label: "任务结束时间", prop: "rwjssj" },
|
||||
{ label: "巡逻线名称", prop: "xlmc" },
|
||||
{ label: "负责人姓名", prop: "fzrxm" },
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
queryFrom.value.startTime = val.datetime ? val.datetime[0] : '';
|
||||
queryFrom.value.endTime = val.datetime ? val.datetime[1] : '';
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
delete data.datetime;
|
||||
qcckGet(data, "/mosty-jmxf/bxxRwxx/selectPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
nextTick(() => {
|
||||
xfDiloag.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (ids) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"}).then(() => {
|
||||
qcckPost({ids}, "/mosty-jmxf/bxxRwxx/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
// 查看详情
|
||||
const addForm = ref()
|
||||
// 打开详情
|
||||
const openDetail = (row) => {
|
||||
addForm.value.init("detail", row);
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">巡逻情况统计详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="勤务名称">
|
||||
<el-input v-model="listQuery.qwmc"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻路线名称">
|
||||
<el-input v-model="listQuery.bxxmc"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssbm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间">
|
||||
<el-input v-model="listQuery.kssj"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">打卡情况</el-divider>
|
||||
<div class="mb10">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
<template #rylx="{row}">
|
||||
<!-- 人员类型 01民警 02保安") -->
|
||||
<span>{{ row.rylx == '01' ? '民警' :'保安' }}</span>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableHeight: 500,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false
|
||||
},
|
||||
controlsWidth: 100, // No controls needed based on prototype
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "身份证", prop: "sfzh" },
|
||||
{ label: "人员类型", prop: "rylx",showSolt:true },
|
||||
{ label: "所属单位", prop: "ssbm" },
|
||||
{ label: "巡逻扫码时间", prop: "qwsj" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet({id:row.qwid, qwsj:row.qwsj},'/mosty-jbld/gdqwgl/selectByid').then(res=>{
|
||||
listQuery.value = res || [];
|
||||
pageData.tableConfiger.loading = false;
|
||||
pageData.tableData = [...res.mjList,...res.baList]
|
||||
}).catch(()=>{
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="巡逻情况统计"></PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<template #ddmjList="{ row }">
|
||||
<span>{{ row.ddmjList.length }}</span>
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" link @click="addEdit(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const searchBox = ref(); //搜索框
|
||||
const detailDiloag = ref();
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "勤务名称",
|
||||
prop: "qwmc",
|
||||
placeholder: "请输入勤务名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 100,
|
||||
tableColumn: [
|
||||
{ label: "勤务名称", prop: "qwmc" },
|
||||
{ label: "所属辖区", prop: "ssbm" },
|
||||
{ label: "巡逻路线名称", prop: "bxxmc" },
|
||||
{ label: "带队民警", prop: "ddmjList", showSolt: true },
|
||||
{ label: "打卡人数", prop: "dkrs" },
|
||||
{ label: "巡逻时间", prop: "qwsj" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jbld/gdqwgl/getXljltj")
|
||||
.then((res) => {
|
||||
pageData.tableData = res || [];
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
const addEdit = (row) => {
|
||||
detailDiloag.value.init(row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 230;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,406 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">专家库管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="专家姓名">
|
||||
<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" unlink-panels 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>
|
||||
@ -1,506 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2023-05-17 21:33:29
|
||||
* @LastEditTime: 2023-05-31 09:39:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \mosty-qcck-new\src\views\basicsmanage\gudingjianchazhan\component\addGzyZ.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="名称" style="width: 18%">
|
||||
<el-input
|
||||
v-model="listQuery.gzyzmc"
|
||||
placeholder="名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
<el-button type="primary" @click="addGzyEvent"> 新增 </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 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
|
||||
prop="gzyzmc"
|
||||
show-overflow-tooltip
|
||||
label="感知源组名称"
|
||||
width="250px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jl"
|
||||
show-overflow-tooltip
|
||||
width="100px"
|
||||
label="距离（米）"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jd"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="经度"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="wd"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="纬度"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jczmc"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
label="所属检查站"
|
||||
></el-table-column>
|
||||
<el-table-column label="关联感知源">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-for="(item, index) in row.sxtList"
|
||||
:key="item"
|
||||
@close="onClickJczClose(index)"
|
||||
style="margin-bottom: 5px"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="onClickGzyz(row, 'info')">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" @click="onClickGzyz(row, 'update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="onClickGzyz(row, 'delete')"
|
||||
>
|
||||
删除
|
||||
</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>
|
||||
<div
|
||||
v-if="dialogFormVisible"
|
||||
class="dialog"
|
||||
style="top: 0; left: 0; right: 0; overflow: hidden"
|
||||
>
|
||||
<div class="head_box" style="margin-bottom: 20px">
|
||||
<span class="title">感知源组</span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoading"
|
||||
size="small"
|
||||
@click="submit"
|
||||
v-if="isShowBut"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="(dialogFormVisible = false), (form = {})"
|
||||
>关闭</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: 48%" prop="gzyzmc" label="名称">
|
||||
<el-input
|
||||
v-model="form.gzyzmc"
|
||||
placeholder="请输入名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jl" label="距离">
|
||||
<el-input
|
||||
v-model="form.jl"
|
||||
placeholder="请输入距离(米)"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="width: 100%"
|
||||
prop="jczmc"
|
||||
label="关联感知源"
|
||||
@click="gzyModelValue = true"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.gz"
|
||||
placeholder="请选择感知源"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
suffix-icon="ArrowDown"
|
||||
readonly
|
||||
v-if="gzyList.length <= 0"
|
||||
>
|
||||
</el-input>
|
||||
<div style="text-align: left" e-else>
|
||||
<el-tag
|
||||
closable
|
||||
v-for="(item, index) in gzyList"
|
||||
:key="item"
|
||||
@close="onClickJczClose(index)"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input
|
||||
v-model="form.jd"
|
||||
clearable
|
||||
style="width: 45%; margin-right: 10px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.wd"
|
||||
clearable
|
||||
style="width: 45%; margin-right: 10px"
|
||||
/>
|
||||
<el-button @click="seachLat">确定</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map" style="height: 520px">
|
||||
<GdMap v-if="dialogFormVisible" :isShowDraw="true" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<GzSource
|
||||
:gzyModelValue="gzyModelValue"
|
||||
@choosedGzy="choosedGzy"
|
||||
@close="gzyModelValue = false"
|
||||
:data="gzyList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GzSource from "@/components/MyComponents/GzSource/index.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
defineProps,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const loadingTable = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const gzyModelValue = ref(false); //感知源组件弹窗
|
||||
const isShowBut = ref(true); //是否显示按钮 新增 修改显示
|
||||
const isUpdate = ref(false); //当前操作是否为修改操作
|
||||
const store = useStore();
|
||||
//搜索数据
|
||||
const props = defineProps({
|
||||
jczid: String,
|
||||
dict: Object //字典
|
||||
});
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczid: props.jczid
|
||||
});
|
||||
const gzyList = ref([]);
|
||||
const form = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
onMounted(() => {
|
||||
form.value = {};
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
emitter.on("coordString", (res) => {
|
||||
const coords = res.coord.split(",");
|
||||
form.value["jd"] = coords[0];
|
||||
form.value["wd"] = coords[1];
|
||||
});
|
||||
emitter.on("drawLngLat", (res) => {
|
||||
//如果点位存在 删除点位
|
||||
if (store.getters.points.length > 0) {
|
||||
for (let i = 0; i < store.getters.points.length; i++) {
|
||||
const item = store.getters.points[i];
|
||||
egis.removePlotFeature(item);
|
||||
}
|
||||
store.commit("map/setPoints", []);
|
||||
}
|
||||
if (res.properties.t == "Point") {
|
||||
store.commit("map/setPoints", [res.properties.id]);
|
||||
form.value.jd = res.properties.conteolPoint[0];
|
||||
form.value.wd = res.properties.conteolPoint[1];
|
||||
} else {
|
||||
proxy.$message.warning("请选择绘制点位");
|
||||
egis.removePlotFeature(res.properties.id);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString");
|
||||
emitter.off("drawLngLat");
|
||||
});
|
||||
//感知源组操作
|
||||
const onClickGzyz = (val, type) => {
|
||||
isShowBut.value = true;
|
||||
isUpdate.value = false;
|
||||
switch (type) {
|
||||
case "info":
|
||||
case "update":
|
||||
form.value = val;
|
||||
if (type == "info") {
|
||||
isShowBut.value = false;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
if (type == "update") isUpdate.value = true;
|
||||
gzyList.value = val.sxtList;
|
||||
dialogFormVisible.value = true;
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [val],
|
||||
icon: require("@/assets/point/kk.png"),
|
||||
flag: "gzyz",
|
||||
isBounds: true
|
||||
});
|
||||
}, 1e3);
|
||||
break;
|
||||
case "delete":
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
deleteGzyz(val.id);
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
//删除
|
||||
const deleteGzyz = (id) => {
|
||||
qcckDelete({}, `/mosty-jmxf/gzyz/delGzyz/${id}`).then((res) => {
|
||||
proxy.$message.success("成功");
|
||||
reset();
|
||||
});
|
||||
};
|
||||
|
||||
// 新增感知源
|
||||
const addGzyEvent = () => {
|
||||
dialogFormVisible.value = true;
|
||||
gzyList.value = [];
|
||||
};
|
||||
//保存数据
|
||||
const submit = () => {
|
||||
let requestUrl;
|
||||
if (isUpdate.value) {
|
||||
//修改地址
|
||||
requestUrl = "/mosty-jmxf/gzyz/editGzyz";
|
||||
} else {
|
||||
//新增地址
|
||||
requestUrl = "/mosty-jmxf/gzyz/addGzyz";
|
||||
}
|
||||
form.value.sbbhList = gzyList.value.map((item) => item.id);
|
||||
form.value.jczid = props.jczid;
|
||||
qcckPost(form.value, requestUrl).then((res) => {
|
||||
proxy.$message.success("成功");
|
||||
dialogFormVisible.value = false;
|
||||
form.value = {};
|
||||
reset();
|
||||
});
|
||||
};
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除选中的感知源数据
|
||||
const onClickJczClose = (index) => {
|
||||
gzyList.value.splice(index, 1);
|
||||
};
|
||||
//选择感知源
|
||||
const choosedGzy = (val) => {
|
||||
gzyList.value = val;
|
||||
if (val.length > 0) {
|
||||
form.value.jd = val[0].jd;
|
||||
form.value.wd = val[0].wd;
|
||||
}
|
||||
};
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczid: props.jczid
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/gzyz/getPageList").then((res) => {
|
||||
if (res) {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value =
|
||||
window.innerHeight - 57 - 37 - searchBox.value.offsetHeight - 130;
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 130;
|
||||
};
|
||||
|
||||
// 搜索经纬度
|
||||
function seachLat() {
|
||||
emitter.emit("deletePointArea", "gzyz");
|
||||
if (form.value.jd && form.value.wd) {
|
||||
let item = {
|
||||
jd: form.value.jd,
|
||||
wd: form.value.wd
|
||||
};
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [item],
|
||||
icon: require("@/assets/point/kk.png"),
|
||||
flag: "gzyz"
|
||||
});
|
||||
} else {
|
||||
proxy.$message.info("经度,纬度不能未空");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.latlng {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .el-form--inline {
|
||||
padding: 0.1rem 0 !important;
|
||||
}
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="感知源名称" style="width: 18%">
|
||||
<el-input
|
||||
v-model="listQuery.sbmc"
|
||||
placeholder="请填写感知源名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" style="width: 18%">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号">
|
||||
<el-input
|
||||
v-model="listQuery.sbbh"
|
||||
placeholder="请填写设备编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sblx" label="感知源类型" style="width: 16%">
|
||||
<el-select v-model="listQuery.sblx">
|
||||
<el-option
|
||||
v-for="item in props.dict.D_BZ_SBLX"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</el-option
|
||||
>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sblx" label="状态" style="width: 15%">
|
||||
<el-select v-model="listQuery.sfdy">
|
||||
<el-option label="已订阅" value="1">已订阅</el-option>
|
||||
<el-option label="未订阅" value="0">未订阅</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
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="dataTreeList"
|
||||
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="数据加载中。。"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sbmc"
|
||||
show-overflow-tooltip
|
||||
width="250px"
|
||||
label="感知源名称"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.sbmc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sbbh"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="编号"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.sbbh }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dzmc"
|
||||
show-overflow-tooltip
|
||||
label="地址"
|
||||
width="250px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.dzmc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sblx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="感知源类型"
|
||||
width="120px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag
|
||||
:options="props.dict.D_BZ_SBLX"
|
||||
:value="row.sblx"
|
||||
:tag="false"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sblxdm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="订阅类型"
|
||||
width="120px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.sblx != '07'">远端感知</span>
|
||||
<span v-else>视频天网</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssbm" show-overflow-tooltip label="所属部门">
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.ssbm }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dzmc"
|
||||
show-overflow-tooltip
|
||||
label="状态"
|
||||
width="100px"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag type="success" v-if="row.sfDy">已订阅</el-tag>
|
||||
<el-tag type="primary" v-else>未订阅</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
@click="_updateGayStaus(row, '02', '取消订阅成功')"
|
||||
v-if="row.sfDy"
|
||||
>
|
||||
取消订阅
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="_updateGayStaus(row, '01', '订阅成功')"
|
||||
v-else
|
||||
>
|
||||
添加订阅
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
defineProps,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const total = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const loadingTable = ref(false);
|
||||
//搜索数据
|
||||
|
||||
const props = defineProps({
|
||||
jczid: String,
|
||||
dict: Object, //字典
|
||||
dyLx:String//视频和感知源类型
|
||||
});
|
||||
const listQuery = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
sbmc: "",
|
||||
ssbmdm: "",
|
||||
isChild: "1",
|
||||
sblx: "",
|
||||
sfdy: "1",
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
ids.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageNo = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
sbmc: "",
|
||||
ssbmdm: "",
|
||||
isChild: "1",
|
||||
sblx: "",
|
||||
sfdy: "1",
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//更改订阅状态
|
||||
function _updateGayStaus(item, status, msg) {
|
||||
let data = {
|
||||
sxtid: item.id,
|
||||
lx: status,
|
||||
jczid: props.jczid,
|
||||
dyLx:props.dyLx
|
||||
};
|
||||
qcckPost(data, "/mosty-jmxf/tbYsSxt/jczDyGzy").then((res) => {
|
||||
proxy.$message.success(msg);
|
||||
reset();
|
||||
});
|
||||
}
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {};
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
qcckPost(listQuery.value, "/mosty-jmxf/tbYsSxt/getPageJczSxt").then((res) => {
|
||||
if (res) {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value =
|
||||
window.innerHeight - 57 - 37 - searchBox.value.offsetHeight - 150;
|
||||
|
||||
tableHeight1.value = window.innerHeight - 57 - 20 - 130;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
::v-deep .el-form--inline {
|
||||
padding: 0.1rem 0 !important;
|
||||
}
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,544 +0,0 @@
|
||||
<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.jczmc" placeholder="请输入检查站名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="执勤类型">
|
||||
<el-select clearable style="width: 100%" v-model="listQuery.zqlx" placeholder="请选择执勤类型" >
|
||||
<el-option v-for="dict in D_BZ_ZQLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="点位类型">
|
||||
<el-select clearable style="width: 100%" v-model="listQuery.jczlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="dict in D_BZ_JCZLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属圈层">
|
||||
<el-select v-model="qcidList" collapse-tags multiple class="m-2" placeholder="请选择所属圈层">
|
||||
<el-option v-for="item in ssqcList" :key="item.value" :label="item.label" :value="item.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="kfdId" 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" align="center" width="55" />
|
||||
<el-table-column type="index" align="center" width="60px" label="序号"/>
|
||||
<el-table-column prop="ssbm" label="所属部门" show-overflow-tooltip align="center" />
|
||||
<el-table-column prop="jczmc" show-overflow-tooltip align="center" label="检查站名称"/>
|
||||
<el-table-column show-overflow-tooltip align="center" label="执勤类型">
|
||||
<template #default="{ row }">
|
||||
<DictTag :options="D_BZ_ZQLX" :value="row.zqlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="点位类型">
|
||||
<template #default="{ row }">
|
||||
<DictTag :options="D_BZ_JCZLX" :value="row.jczlx" :tag="false"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="所属圈层">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-for="item in row.qcList" :key="item.id">{{ item.qcmc }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="xxdz" show-overflow-tooltip align="center" label="检查站地址"/>
|
||||
<el-table-column label="感知源操作" align="center" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="onClickDygzy(row, 'gzyz')" type="primary" >配置感知源</el-button>
|
||||
<el-button type="success" size="small" @click="onClickDygzy(row, 'sp')" >配置现场天网</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-button @click="delDictItem(row.id)" type="danger" size="small">删除</el-button>
|
||||
<el-button @click="commonQC(row)" size="small">同步圈层</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination" :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">{{ 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" 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="jczmc" label="检查站名称">
|
||||
<el-input v-model="form.jczmc" placeholder="请输入检查站名称" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="执勤类型" style="width: 31%" prop="zqlx">
|
||||
<el-select v-model="form.zqlx" placeholder="请选择执勤类型">
|
||||
<el-option v-for="item in D_BZ_ZQLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 32%" prop="jczlx" label="点位类型">
|
||||
<el-select v-model="form.jczlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="item in D_BZ_JCZLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" label="站点负责人">
|
||||
<el-input v-model="form.fzr" placeholder="请输入站点负责人" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" label="联系电话">
|
||||
<el-input v-model="form.lxdh" placeholder="请输入联系电话" style="width: 100%" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="道路类型" style="width: 31%" prop="dllx">
|
||||
<el-select v-model="form.dllx" placeholder="请选择道路类型">
|
||||
<el-option v-for="item in D_BZ_DLLX" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 31%" prop="xxdz" label="检查站地址">
|
||||
<el-input v-model="form.xxdz" placeholder="请输入检查站地址" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item @click="showRichOnly = true" style="width: 31%" prop="ssqc" label="所属圈层" required>
|
||||
<MOSTY.RichOnly width="100%" :data="qcList" v-model="showRichOnly" @close="showRichOnly = false" @choosedQc="choosedQcData"/>
|
||||
<el-input v-model="form.ssqc" placeholder="所属圈层" style="width: 100%" clearable suffix-icon="ArrowDown" v-if="qcList.length === 0"/>
|
||||
<template v-else>
|
||||
<el-tag v-for="(item, index) in qcList" :key="item.id" closable @close="onCloseQc(index)">{{ item.qcmc }}</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="示意图(最多3张)" prop="fjid" style="width: 48%">
|
||||
<MOSTY.Upload :isImg="true" width="100%" :limit="3" v-model="form.fjid"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
|
||||
<MOSTY.Upload width="100%" :isImg="true" :limit="3" v-model="form.qjfjid"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="form.jd" clearable style="width: 45%" />
|
||||
<el-input v-model="form.wd" clearable style="width: 45%" />
|
||||
<el-button @click="seachLat">确定</el-button>
|
||||
<el-button @click="zdyLat">自定义坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map"> <GdMap :isShowDraw="true" /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 订阅天网视频 -->
|
||||
<div v-if="dialogSpVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">选择现场视频</span>
|
||||
<div><el-button @click="(dialogSpVisible = false), (formGzy.radius = 2000)">关闭</el-button></div>
|
||||
</div>
|
||||
<Pzgzy :dyLx="'02'" :jczid="formGzy.jczid" :dict="{ D_BZ_GZSBLX, D_BZ_SBLX, D_BZ_SF }" v-if="formGzy.jczid"/>
|
||||
</div>
|
||||
<!-- 添加感知源组 -->
|
||||
<div v-if="dialogGzyzVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">感知源组管理</span>
|
||||
<div>
|
||||
<el-button @click="dialogGzyzVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<AddGzyZ :jczid="formGzy.jczid" :dict="{ D_BZ_GZSBLX, D_BZ_SBLX, D_BZ_SF }" :data="gzyList"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { getItem } from "@/utils/storage.js";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import AddGzyZ from "./component/addGzyZ.vue";
|
||||
import Pzgzy from "./component/pzgzy.vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, inject, watch, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const userId = getItem("USERID");
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const {D_BZ_KFDLX,D_BZ_DLLX,D_BZ_JCZJB,D_BZ_JCZLX,D_BZ_QCLX,D_BZ_ZQLX,D_BZ_GZSBLX,D_BZ_SBLX,D_BZ_SF} = proxy.$dict("D_BZ_KFDLX","D_BZ_DLLX","D_BZ_JCZJB","D_BZ_JCZLX","D_BZ_QCLX","D_BZ_ZQLX","D_BZ_GZSBLX","D_BZ_SBLX","D_BZ_SF");
|
||||
const showRichOnly = ref(false);
|
||||
const chackipt = ref(true);
|
||||
const cascader = ref(null);
|
||||
const depList = ref([]); //部门数据
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(null); // 表格高度
|
||||
const diaTitle = ref("新增检查站");
|
||||
const loadingTable = ref(false);
|
||||
const checkList = ref([]);
|
||||
const reload = inject("reload");
|
||||
const isShow = ref(false); //是否是修改
|
||||
const qcidList = ref([]);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
jczmc: "",
|
||||
ssbmdm: ""
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jczmc: "",
|
||||
ssbmdm: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
qjfjid:[]
|
||||
});
|
||||
const gzyTotal = ref(0); //感知源总数
|
||||
const gzyFunction = ref("01"); //感知源功能选项
|
||||
const dialogSpVisible = ref(false); //显示视频弹窗
|
||||
const dialogGzyzVisible = ref(false); //显示感知源组弹窗
|
||||
const btnLoading = ref(false); //按钮加载
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false);
|
||||
const multipleSelection = ref([]); //批量数据
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
const gzyMapList = ref([]); //感知源数据
|
||||
const selectJcz = ref(); //已选择感知源
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jczmc: [{ required: true, message: "请输入检查站名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
jczlx: [{ required: true, message: "请选择点位类型", trigger: "change" }],
|
||||
zqlx: [{ required: true, message: "请选择执勤类型", trigger: "change" }],
|
||||
fzr: [{ required: true, message: "请输入站点负责人", trigger: "change" }],
|
||||
lxdh: [{ required: true, message: "请输入联系电话", trigger: "change" }],
|
||||
dllx: [{ required: true, message: "请选择道路类型", trigger: "change" }],
|
||||
xxdz: [{ required: true, message: "请输入检查站地址", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择快返点位置", trigger: "change" }],
|
||||
ssqc: [{ required: true, message: "请选择所属圈层", trigger: "change blur" }]
|
||||
});
|
||||
const elform = ref(null);
|
||||
const qcList = ref([]); //选中的圈层数据
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const formGzy = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
isChild: 1
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
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];
|
||||
}
|
||||
});
|
||||
getListData();
|
||||
getQCListData();
|
||||
emitter.on("drawLngLat", (res) => {
|
||||
//如果点位存在 删除点位
|
||||
if (store.getters.points.length > 0) {
|
||||
for (let i = 0; i < store.getters.points.length; i++) {
|
||||
const item = store.getters.points[i];
|
||||
egis.removePlotFeature(item);
|
||||
}
|
||||
store.commit("map/setPoints", []);
|
||||
}
|
||||
if (res.properties.t == "Point") {
|
||||
store.commit("map/setPoints", [res.properties.id]);
|
||||
form.value.jd = res.properties.conteolPoint[0];
|
||||
form.value.wd = res.properties.conteolPoint[1];
|
||||
} else {
|
||||
proxy.$message.warning("请选择绘制点位");
|
||||
egis.removePlotFeature(res.properties.id);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
const ssqcList = ref([]);
|
||||
//圈层数据
|
||||
const getQCListData = async () => {
|
||||
let params = { pageCurrent: 1, pageSize: 100 };
|
||||
qcckGet(params, "/mosty-jmxf/qc/selectQcList").then((res) => {
|
||||
let arr = res.records || []
|
||||
ssqcList.value = arr.map((item, index) => {
|
||||
return { label: item.qcmc, value: item.id };
|
||||
});
|
||||
});
|
||||
};
|
||||
// 同步圈层
|
||||
const commonQC = (val) =>{
|
||||
proxy.$confirm("确定要同步该数据到检查站", "警告", {type: "warning"}).then(() => {
|
||||
qcckGet({}, "/mosty-jmxf/jcz/sysQcck?jczId="+val.id).then(res=>{
|
||||
proxy.$message.success(res);
|
||||
getListData();
|
||||
})
|
||||
}).catch(() => {});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
emitter.off("coordString");
|
||||
emitter.off("showJczDygzy");
|
||||
emitter.off("drawLngLat");
|
||||
});
|
||||
//选中的圈层数据
|
||||
const choosedQcData = (val) => {
|
||||
qcList.value = val;
|
||||
form.value.ssqc = "111";
|
||||
};
|
||||
const onCloseQc = (index) => {
|
||||
qcList.value.splice(index, 1);
|
||||
if (qcList.value.length == 0) {
|
||||
form.value.ssqc = "";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//显示订阅感知源
|
||||
function onClickDygzy(row, type) {
|
||||
switch (type) {
|
||||
case "gzyz":
|
||||
dialogGzyzVisible.value = true;
|
||||
break;
|
||||
case "sp":
|
||||
dialogSpVisible.value = true;
|
||||
break;
|
||||
}
|
||||
formGzy.value = {
|
||||
...formGzy.value,
|
||||
jczid: row.id
|
||||
};
|
||||
}
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
listQuery.value.qcidList = qcidList.value.join(",");
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/jcz/selectJczList")
|
||||
.then((res) => {
|
||||
loadingTable.value = false;
|
||||
if (res && res.records) {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, };
|
||||
form.value = {fjid:'',qjfjid:''};
|
||||
qcidList.value = [];
|
||||
getListData();
|
||||
};
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = [];
|
||||
if (val) {
|
||||
val.forEach((item) => {
|
||||
multipleSelection.value.push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
//新增
|
||||
function addKfdList() {
|
||||
qcList.value = [];
|
||||
diaTitle.value = "新增检查站";
|
||||
nextTick(()=>{ dialogFormVisible.value = true; })
|
||||
form.value = {
|
||||
fjid:'',qjfjid:''
|
||||
};
|
||||
isShow.value = false;
|
||||
}
|
||||
//删除
|
||||
const delDictItem = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
|
||||
const ids = [id];
|
||||
qcckPost(ids, "/mosty-jmxf/jcz/deleteById").then(() => {
|
||||
proxy.$message.success("删除成功");
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
//批量删除
|
||||
const deletList = () => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
const ids = multipleSelection.value;
|
||||
qcckPost(ids, "/mosty-jmxf/jcz/deleteById").then(() => {
|
||||
proxy.$message.success("删除成功");
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
//修改
|
||||
const update = (row) => {
|
||||
nextTick(()=>{
|
||||
dialogFormVisible.value = true;
|
||||
|
||||
let obj = JSON.parse(JSON.stringify(row));
|
||||
if(obj.qjfjid) obj.qjfjid = obj.qjfjid.split(',')
|
||||
if(obj.fjid) obj.fjid = obj.fjid.split(',')
|
||||
|
||||
form.value = obj
|
||||
|
||||
isShow.value = true;
|
||||
diaTitle.value = "修改检查站";
|
||||
setTimeout(() => {
|
||||
emitter.emit("addPointArea", { coords: [row], icon: require("@/assets/point/jwz.png"), flag: "zqd", isBounds: true });
|
||||
emitter.emit("setMapCenter", { location: [row.jd, row.wd], zoomLevel: 10 });
|
||||
}, 1e3);
|
||||
qcList.value = [];
|
||||
if (row.qcList) {
|
||||
qcList.value = row.qcList;
|
||||
form.value.ssqc = "111";
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function changeStatus(row) {
|
||||
let params = { id: row.id, sfqd: row.sfqd };
|
||||
qcckPost(params, "/mosty-jmxf/jcz/updateJcz").then((res) => {
|
||||
let text = row.sfqd == 0 ? "关闭成功" : "启动成功";
|
||||
proxy.$message.success(text);
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
|
||||
function zdyLat(){
|
||||
form.value.jd = '';
|
||||
form.value.wd = ''
|
||||
emitter.emit("drawShape", { type: "point", flag: "zqd" ,isclear:true});
|
||||
}
|
||||
|
||||
// 搜索经纬度
|
||||
function seachLat() {
|
||||
emitter.emit("deletePointArea","zqd");
|
||||
if (form.value.jd && form.value.wd) {
|
||||
let item = { jd: form.value.jd, wd: form.value.wd };
|
||||
emitter.emit("addPointArea", { coords: [item], icon: require("@/assets/point/jwz.png"), flag: "zqd"});
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [form.value.jd, form.value.wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
} else {
|
||||
proxy.$message.info("经度,纬度不能未空");
|
||||
}
|
||||
}
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.qcidList = qcList.value.map((item) => item.id);
|
||||
let prams = { ...form.value}
|
||||
if(prams.fjid && Array.isArray(prams.fjid)) prams.fjid = prams.fjid.join(',')
|
||||
if(prams.qjfjid && Array.isArray(prams.qjfjid)) prams.qjfjid = prams.qjfjid.join(',')
|
||||
if (!isShow.value) {
|
||||
qcckPost(prams, "/mosty-jmxf/jcz/addJcz").then((res) => {
|
||||
proxy.$message.success("新增成功");
|
||||
dialogFormVisible.value = false;
|
||||
reset();
|
||||
});
|
||||
} else {
|
||||
qcckPost(prams, "/mosty-jmxf/jcz/updateJcz").then((res) => {
|
||||
proxy.$message.success("编辑成功");
|
||||
dialogFormVisible.value = false;
|
||||
reset();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 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 - 238;
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.dygzy {
|
||||
padding: 20px;
|
||||
.function_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,517 +0,0 @@
|
||||
<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 prop="xfqLx" label="巡防区类型">
|
||||
<el-select v-model="listQuery.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>
|
||||
<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="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 {choseRbgb} from '@/utils/tools.js'
|
||||
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
|
||||
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/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 } = proxy.$dict("D_BZ_XFQDJ", "D_BZ_XQLX");
|
||||
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];
|
||||
if (res.type === "geoJson") 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 handleall(id){
|
||||
qcckPost({xfbmlx: "02"},'/mosty-jmxf/tbJcglXfqy/queryListNew').then((res) => {
|
||||
let arr = res ? res : [];
|
||||
let color = { stops:[] ,property: 'FID'} //颜色
|
||||
let arrNew = arr.filter(t=>{
|
||||
return t.id != form.value.id
|
||||
})
|
||||
let list = arrNew.map((item,idx)=>{
|
||||
item.identification = 'xfq';
|
||||
// let ys = choseRbgb(item.color,0.8)
|
||||
let ys = 'rgba(0,0,0,0.1)'
|
||||
color.stops.push([idx+1,ys]) //颜色
|
||||
return { position:[item.pgis],FID:idx+1, text:item.xfqMc, id: item.id }
|
||||
})
|
||||
let params = { coords: list, color, type:'polygon', flag:'xfq',linecolor:'#1f2d3d',fontColor:'#ffff00',fontSize:'16px'}
|
||||
if(params.coords.length > 0) emitter.emit("echoPlane", params); //有数据就撒点
|
||||
setTimeout(()=>{
|
||||
infoXfqy(id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.pgis.length > 0) {
|
||||
let ys = choseRbgb(res.color,0.6)
|
||||
let linecolor = res.color
|
||||
emitter.emit("drawShape", { coords: [res.pgis], flag: "qclk", type:'geoJson' ,isclear:true,color:ys,linecolor });
|
||||
emitter.emit("setMapCenter", { location: res.pgis[0], zoomLevel: 12 });
|
||||
}
|
||||
});
|
||||
},2000)
|
||||
})
|
||||
}
|
||||
|
||||
// 新增巡防区域 - 编辑
|
||||
function addEdit(type,id) {
|
||||
dialogFormVisible.value = true;
|
||||
if(id){
|
||||
title.value = "修改巡防区";
|
||||
drawData.pgis = [];
|
||||
handleall(id)
|
||||
}else{
|
||||
title.value = "新增巡防区";
|
||||
drawData.pgis = null;
|
||||
form.value = {color:'#409eff'}
|
||||
}
|
||||
}
|
||||
//批量数据
|
||||
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("removeEara", 'qclk');
|
||||
let ys = choseRbgb(form.value.color,0.5)
|
||||
let linecolor = form.value.color
|
||||
emitter.emit("drawShape", { type: "polygon", flag: "qc",isclear:true ,color:ys,linecolor});
|
||||
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: 800px;
|
||||
// height: 400px;
|
||||
}
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,211 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qcmc" label="圈层名称">
|
||||
<el-input v-model="listQuery.qcmc" placeholder="请输入圈层名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qclx" label="圈层类型">
|
||||
<el-select v-model="listQuery.qclx" placeholder="请选择圈层类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_QCLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qcjb" label="圈层级别">
|
||||
<el-select v-model="listQuery.qcjb" placeholder="请选择圈层级别">
|
||||
<el-option v-for="dict in props.dic.D_BZ_QCDJ" :key="dict.value" :value="dict.value" :label="dict.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input v-model="listQuery.bz" placeholder="请输入备注" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联检查站" style="width: 100%" @click="jczVisible = true">
|
||||
<el-input
|
||||
v-model="listQuery.jczList"
|
||||
placeholder="请选择关联检查站"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
readonly
|
||||
suffix-icon="ArrowDown"
|
||||
v-if="listQuery.jczList == null || listQuery.jczList.length <= 0"
|
||||
/>
|
||||
<MOSTY.GljczTable v-model="listQuery.jczList" v-else/>
|
||||
</el-form-item>
|
||||
<el-form-item label="圈层颜色" style="width: 10%" prop="qcys">
|
||||
<el-color-picker v-model="listQuery.qcys"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 85%" prop="zbList" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.zbList" clearable style="width: 90%" @blur="handleBlur" />
|
||||
<el-button @click="chackLat">绘制区域</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapBox"><GdMap/></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<JczLoad v-model="jczVisible" titleValue="选择检查站" @choosedJcz="choosedJcz" :data="listQuery.jczList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {choseRbgb} from '@/utils/tools.js'
|
||||
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
|
||||
import JczLoad from "@/components/MyComponents/ChooseJz/jczLoad.vue";
|
||||
import { spliceArray, spliceString } from "@/utils/auth.js";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import Person from "@/assets/images/default_male.png";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
dic:Object
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const xfzy = ref([])
|
||||
const listQuery = ref({qcys:'#409eff'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const title = ref('')
|
||||
const jczVisible = ref(false);
|
||||
const rules = reactive({
|
||||
qcmc: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
})
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "polygon") listQuery.value.zbList = res.coord[0];
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
title.value = row ? '编辑圈层':'新增圈层'
|
||||
if(row) getDataById(row)
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
qcckGet({ id: row.id }, "/mosty-jmxf/qc/selectById").then(async (res) => {
|
||||
listQuery.value = res;
|
||||
if (res.jczList) {
|
||||
listQuery.value.jczidList = res.jczList.map((item) => { return item.id; });
|
||||
listQuery.value.jczList = res.jczList;
|
||||
}
|
||||
//如果是自定义绘制的圈层
|
||||
if (res.zbList && res.zbList.length > 0) {
|
||||
setTimeout(()=>{
|
||||
let obj = { position:[res.zbList], text:res.xfqMc, id:res.id }
|
||||
let ys = res.qcys ? choseRbgb(res.qcys,0.5) : 'rgba(29,237,245,0.6)' //全部按照类型区分颜色 , 二机撒随机颜色
|
||||
emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc", type:'polygon' });
|
||||
emitter.emit("setMapCenter", { location: res.zbList[0], zoomLevel: 10 });
|
||||
},500)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 失去焦點會先
|
||||
const handleBlur = () =>{
|
||||
if(listQuery.value.zbList && !Array.isArray(listQuery.value.zbList)){
|
||||
let att = listQuery.value.zbList.split(',')
|
||||
let coods = [],newAtt = []
|
||||
att.forEach((iv,idx)=>{
|
||||
newAtt.push(iv)
|
||||
let index = idx + 1
|
||||
if(index%2 == 0){
|
||||
coods.push(newAtt)
|
||||
newAtt = []
|
||||
}
|
||||
})
|
||||
listQuery.value.zbList = coods
|
||||
let ys = listQuery.value.qcys ? choseRbgb(listQuery.value.qcys,0.3) : 'rgba(29,237,245,0.3)' //全部按照类型区分颜色 , 二机撒随机颜色
|
||||
let obj = { position:[coods], text:'', id:'' }
|
||||
emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc", type:'polygon' });
|
||||
emitter.emit("setMapCenter", { location: coods[0], zoomLevel: 10 });
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
let ys = choseRbgb(listQuery.value.qcys,0.5)
|
||||
let linecolor = listQuery.value.qcys
|
||||
emitter.emit("drawShape", { type: "polygon", flag: "qc",color:ys,linecolor,isclear:true });
|
||||
listQuery.value.zbList = "";
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let url = title.value == '新增圈层'? '/mosty-jmxf/qc/addQc':'/mosty-jmxf/qc/updateQc'
|
||||
let text =title.value == '新增圈层'? '新增成功':'编辑成功'
|
||||
qcckPost(listQuery.value,url).then(() => {
|
||||
proxy.$message({ type: "success", message: text });
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { qcys :'#409eff'}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
// 选择检查站
|
||||
const choosedJcz = (arr) => {
|
||||
listQuery.value.jczList = arr;
|
||||
listQuery.value.jczidList = arr.map((v) => {
|
||||
return v.id;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="圈层管理">
|
||||
<el-button type="primary" @click="addEditForm('add','')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="deletList(null)" :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 #qclx="{ row }">
|
||||
<dict-tag :value="row.qclx" :options="D_BZ_QCLX" :tag="false"/>
|
||||
</template>
|
||||
<template #qcjb="{ row }">
|
||||
<dict-tag :options="D_BZ_QCDJ" :value="row.qcjb" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button @click="addEditForm('eidt',row)" size="small">编辑</el-button>
|
||||
<el-button @click="deletList(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑-新增 -->
|
||||
<EditAddForm ref="editInfo" @updateDate="getDataList" :dic="{D_BZ_QCLX,D_BZ_QCDJ}"></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, nextTick } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_QCLX ,D_BZ_QCDJ} = proxy.$dict("D_BZ_QCLX","D_BZ_QCDJ");
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const listQuery = ref({})
|
||||
const editInfo = ref()
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "input",
|
||||
prop: "qcmc",
|
||||
placeholder: "请输入圈层名称",
|
||||
label: "圈层名称",
|
||||
},
|
||||
{
|
||||
showType: "select",
|
||||
prop: "qclx",
|
||||
placeholder: "请选择圈层类型",
|
||||
label: "圈层类型",
|
||||
options:D_BZ_QCLX
|
||||
},
|
||||
])
|
||||
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: "qcmc"},
|
||||
{ label: "圈层类型", prop: "qclx", showSolt:true },
|
||||
{ label: "圈层等级", prop: "qcjb" ,showSolt:true}
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getDataList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
listQuery.value = {...listQuery.value,...val}
|
||||
if(val.cz) listQuery.value.ssbmdm = '';
|
||||
delete listQuery.value.cz;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取数据
|
||||
const getDataList = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageCurrent:pageData.pageConfiger.pageNum,
|
||||
...listQuery.value
|
||||
}
|
||||
delete pramas.daterange
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/qc/selectQcList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getDataList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(val instanceof Array) ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
let IDS = id ? [id] : ids.value
|
||||
qcckPost(IDS,'/mosty-jmxf/qc/deleteQc').then(() => {
|
||||
proxy.$message({ type: "success",message: "删除成功"});
|
||||
getDataList()
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增编辑表单
|
||||
const addEditForm = (type,row)=>{
|
||||
nextTick(()=>{
|
||||
editInfo.value.init(type,row)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,633 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡逻点位管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
@click="batchDelete"
|
||||
:disabled="ids.length == 0"
|
||||
typeof="danger"
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.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/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>
|
||||
@ -1,488 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡逻路线管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻路线名称">
|
||||
<el-input v-model="listQuery.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/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 } 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 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 }
|
||||
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>
|
||||
@ -1,268 +0,0 @@
|
||||
<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-jmxf/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-jmxf//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-jmxf/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-jmxf//tbJcglXf').then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
closeDialog()
|
||||
getListData();
|
||||
}).catch(()=>{ btnLoading.value = false; });
|
||||
} else {
|
||||
qcckPost(form.value,'/mosty-jmxf/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>
|
||||
@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||||
<el-form-item 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/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-jmxf/tbJcglXfCyry/'+id).then(res=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增警务站管理'){
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { 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>
|
||||
@ -1,426 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">警务站管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="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="180">
|
||||
<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 style="width: 100%" ref="cascader" clearable filterable
|
||||
:options="depList" :props="props" v-model="form.ssbmdm" :placeholder="form.ssbm"/>
|
||||
</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 style="width: 100%" prop="jwzTp " label="警务站图片">
|
||||
<MOSTY.Upload width="100%" :limit="5" v-model="form.jwzTp"></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/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;
|
||||
form.value = {};
|
||||
// form.value.upload = [];
|
||||
// form.value.uploadNew = [];
|
||||
console.log(form.value, 'form.value');
|
||||
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); });
|
||||
console.log(row);
|
||||
|
||||
form.value = {...row};
|
||||
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() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
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>
|
||||
@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||||
<el-form-item style="width: 31%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department v-model="listQuery.ssbmdm" :placeholder="listQuery.ssbm" filterable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 31%" prop="kfdMc" :label="handleLabel(listQuery.dwlx)">
|
||||
<el-input v-model="listQuery.kfdMc" placeholder="请输入快反点名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="dwlx" label="点位类型">
|
||||
<el-select v-model="listQuery.dwlx" placeholder="请选择点位类型">
|
||||
<el-option v-for="item in props.dic.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="listQuery.kfdDz" placeholder="请输入快反点地址" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input @change="jwdChange" v-model="listQuery.jd" clearable style="width: 45%" />
|
||||
<el-input @change="jwdChange" v-model="listQuery.wd" clearable style="width: 45%" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="yfzfw" label="一分钟范围" @change="yfzChange" style="width: 100%" >
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.yfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('yfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="sfzfw" @change="sfzChange" label="三分钟范围" style="width: 100%" >
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.sfzfw" clearable style="width: 90%" />
|
||||
<el-button @click="chackLatY('sfzfw')">开始绘制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="wfzfw" label="五分钟范围" @change="wfzChange" style="width: 100%">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.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 /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
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, nextTick, onMounted} from 'vue';
|
||||
const props = defineProps({
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const title = ref('新增快反点管理');
|
||||
const disabledFoem = ref(false) //表单禁用
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({ dwlx:'01'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
kfdMc: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
dwlx: [{ required: true, message: "请选择点位类型", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
kfdDz: [{ required: true, message: "请输入快反点地址", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择快反点位置", trigger: "change" }],
|
||||
yfzfw: [{ required: true, message: "请选择一分钟范围", trigger: "change" }],
|
||||
sfzfw: [{ required: true, message: "请选择三分钟范围", trigger: "change" }],
|
||||
wfzfw: [{ required: true, message: "请选择五分钟范围", trigger: "change" }],
|
||||
});
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
handleSd(res.coord[0],res.coord[1],listQuery.value.dwlx)
|
||||
}
|
||||
if (res.type === "polygon") listQuery.value[res.flag] = res.coord[0];
|
||||
});
|
||||
})
|
||||
|
||||
const handleLabel = (val) =>{
|
||||
switch(val){
|
||||
case '01':
|
||||
return '快反点名称'
|
||||
case '02':
|
||||
return '屯警点名称'
|
||||
case '03':
|
||||
return '驻守点名称'
|
||||
case '04':
|
||||
return '武警联动名称'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(row){
|
||||
title.value = type == 'edit'?'修改快反点管理':'快反点管理详情'
|
||||
getDataById(row) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增快反点管理'
|
||||
}
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(row))
|
||||
nextTick(()=>{
|
||||
if (row.jd && row.wd) {
|
||||
handleSd(row.jd,row.wd,row.dwlx)
|
||||
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 });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取经纬度 - 圈层范围清空
|
||||
function chackLat(type) {
|
||||
listQuery.value.jd = "";
|
||||
listQuery.value.wd = "";
|
||||
listQuery.value.yfzfw = "";
|
||||
listQuery.value.sfzfw = "";
|
||||
listQuery.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 jwdChange() {
|
||||
if (listQuery.value.jd && listQuery.value.wd) {
|
||||
let icon = require("@/assets/point/kfd.png")
|
||||
handleSd(listQuery.value.jd,listQuery.value.wd,listQuery.value.dwlx)
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [listQuery.value.jd, listQuery.value.wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制一、三、五分钟圈陈
|
||||
function chackLatY(type) {
|
||||
emitter.emit("drawShape", { type: "polygon", flag: type, isclear:true});
|
||||
listQuery.value[type] = "";
|
||||
}
|
||||
|
||||
// 处理撒点
|
||||
function handleSd (jd,wd,dwlx) {
|
||||
let icon = require("@/assets/point/kfd.png")
|
||||
if(dwlx == '02') icon = require("@/assets/point/tjd.png")
|
||||
if(dwlx == '03') icon = require("@/assets/point/zsd.png")
|
||||
if(dwlx == '04') icon = require("@/assets/point/lqd.png")
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("addPointArea", { coords: [{jd, wd}], icon, flag: "kfd" });
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增快反点管理'){
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tpJcglKfd/addKfd').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPost(listQuery.value,'/mosty-jmxf/tpJcglKfd/updateKfd').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { dwlx:'01'}
|
||||
dialogForm.value = false
|
||||
}
|
||||
defineExpose({init});
|
||||
</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>
|
||||
@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="快反点管理">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #dwlx="{ row }">
|
||||
<dict-tag :options="D_BZ_KFDLX " :value="row.dwlx" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('edit', row)">修改</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.kfdId])">删除</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_KFDLX }" @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 './components/editAddForm.vue'
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_KFDLX } = proxy.$dict("D_BZ_KFDLX");
|
||||
const addEditDialog = ref();
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请输入选择所属部门",
|
||||
label: "所属部门"
|
||||
},{
|
||||
showType: "input",
|
||||
prop: "kfdMc",
|
||||
placeholder: "请输入快反点名称",
|
||||
label: "快反点名称",
|
||||
},
|
||||
{
|
||||
showType: "select",
|
||||
prop: "dwlxs",
|
||||
placeholder: "请选择点位类型",
|
||||
label: "点位类型",
|
||||
options:D_BZ_KFDLX
|
||||
},
|
||||
])
|
||||
const queryFrom = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
loading:false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "ssbm",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "快反点名称",
|
||||
prop: "kfdMc",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
|
||||
{
|
||||
label: "点位类型",
|
||||
prop: "dwlx",
|
||||
showSolt :true,
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "快反点地址",
|
||||
prop: "kfdDz",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "经度",
|
||||
prop: "jd",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "纬度",
|
||||
prop: "wd",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getData() //获取数据
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData() //获取数据
|
||||
}
|
||||
// 获取数据
|
||||
const getData = ()=>{
|
||||
let pramas = {
|
||||
pageSize:pageData.pageConfiger.pageSize,
|
||||
pageNum:pageData.pageConfiger.pageNum,
|
||||
...queryFrom.value
|
||||
}
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/tpJcglKfd/selectKfdList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getData()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type,row)=>{
|
||||
addEditDialog.value.init(type,row)
|
||||
}
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(!Array.isArray(val)) return false;
|
||||
ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
// 批量删除
|
||||
function delDictItem(ids) {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(ids,'/mosty-jmxf/tpJcglKfd/deleteKfd').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2024-01-25 16:21:46
|
||||
* @LastEditTime: 2024-01-26 10:10:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
clearable
|
||||
v-model="listQuery.ssbmdm"
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sbmc" label="感知源名称">
|
||||
<el-input v-model="listQuery.sbmc" placeholder="请输入感知源名称" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sbbh" label="感知源编号">
|
||||
<el-input v-model="listQuery.sbbh" placeholder="请输入感知源编号" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="sblx" label="感知源类型">
|
||||
<el-select v-model="listQuery.sblx" placeholder="请选择感知源类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_SBLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sblxdm" label="摄像机类型">
|
||||
<el-select v-model="listQuery.sblxdm" placeholder="请选择摄像机类型">
|
||||
<el-option v-for="dict in props.dic.D_BZ_GZSBLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="csmc" label="来源厂商">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入来源厂商" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="dzmc" label="感知源地址">
|
||||
<el-input v-model="listQuery.dzmc" placeholder="请输入感知源地址" style="width: 100%" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.jd" clearable placeholder="请选择坐标" style="width: 42%"></el-input>
|
||||
<el-input v-model="listQuery.wd" clearable placeholder="请选择坐标" style="width: 42%; margin-left: 1%"></el-input>
|
||||
<el-button @click="chackLat" style="margin-left: 1%" v-if="listQuery.jd && listQuery.wd">确定</el-button>
|
||||
<el-button @click="selectLocation">选择定位</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="mapBox"><GdMap/></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {choseRbgb} from '@/utils/tools.js'
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import Person from "@/assets/images/default_male.png";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
dic:Object
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const xfzy = ref([])
|
||||
const listQuery = ref({qcys:'#409eff'}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const title = ref('')
|
||||
const jczVisible = ref(false);
|
||||
const rules = reactive({
|
||||
sbbh: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
||||
sbmc: [{ required: true, message: "请输入感知源名称", trigger: "blur" }],
|
||||
sblx: [{ required: true, message: "请选择感知源类型", trigger: "change" }],
|
||||
jd: [{ required: true, message: "请选择坐标", trigger: ['change','blur'] }],
|
||||
})
|
||||
const mapType = ref(""); //地图绘制对象
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.jd = res.coord[0];
|
||||
listQuery.value.wd = res.coord[1];
|
||||
chackLat();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
title.value = row ? '编辑感知源':'新增感知源'
|
||||
if(row) getDataById(row)
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
qcckGet({}, "/mosty-yszx/tbYsSxt/"+row.id).then(async (res) => {
|
||||
listQuery.value = res;
|
||||
if (res.jd && res.wd) emitter.emit("addPointArea", { coords: [res], icon: require("@/assets/point/sp.png"), flag: "jczGzy"});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//获取经纬度
|
||||
const chackLat = (type) => {
|
||||
const { jd, wd } = listQuery.value;
|
||||
emitter.emit("deletePointArea", "jczGzy");
|
||||
if (jd && wd) {
|
||||
emitter.emit("addPointArea", {coords: [{ jd, wd }],icon: require("@/assets/point/sp.png"),flag: "jczGzy" });
|
||||
}
|
||||
}
|
||||
|
||||
//选择定位
|
||||
const selectLocation = () => {
|
||||
emitter.emit("drawShape", { flag: "select_point", type: "point", isclear: true });
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
if(title.value == '新增感知源'){
|
||||
qcckPost(listQuery.value, "/mosty-yszx/tbYsSxt/add").then((res) => {
|
||||
proxy.$message({ type: "success", message: "新增成功"});
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
}else{
|
||||
qcckPut(listQuery.value, "/mosty-yszx/tbYsSxt/update").then((res) => {
|
||||
proxy.$message({ type: "success", message: "修改成功"});
|
||||
close()
|
||||
emit("updateDate");
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { qcys :'#409eff'}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.mapBox{
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.latlng {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="感知源管理">
|
||||
<el-button type="primary" @click="addEditForm('add','')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"/>
|
||||
</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 #sblx="{ row }">
|
||||
<dict-tag :value="row.sblx" :options="D_BZ_SBLX" :tag="false"/>
|
||||
</template>
|
||||
<template #sblxdm="{ row }">
|
||||
<dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button @click="addEditForm('eidt',row)" size="small">编辑</el-button>
|
||||
<el-button @click="deletList(row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑-新增 -->
|
||||
<EditAddForm ref="editInfo" @updateDate="getDataList" :dic="{D_BZ_SBLX,D_BZ_GZSBLX}"></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, nextTick } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SBLX ,D_BZ_GZSBLX} = proxy.$dict("D_BZ_SBLX","D_BZ_GZSBLX");
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const listQuery = ref({})
|
||||
const editInfo = ref()
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入感知源名称",
|
||||
label: "感知源名称",
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "sbbh",
|
||||
placeholder: "请输入感知源编号",
|
||||
label: "感知源编号",
|
||||
},
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "感知源名称", prop: "sbmc",showOverflowTooltip:true},
|
||||
{ label: "编号", prop: "sbbh",showOverflowTooltip:true},
|
||||
{ label: "地址", prop: "dzmc" ,showOverflowTooltip:true},
|
||||
{ label: "感知源类型", prop: "sblx" ,showSolt:true,showOverflowTooltip:true},
|
||||
{ label: "摄像机类型", prop: "sblxdm" ,showSolt:true,showOverflowTooltip:true},
|
||||
{ label: "所属部门", prop: "ssbm",showOverflowTooltip:true},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
getDataList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
listQuery.value = {...listQuery.value,...val}
|
||||
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
|
||||
qcckPost(pramas,'/mosty-yszx/tbYsSxt/getPageList').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getDataList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getDataList()
|
||||
}
|
||||
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(val instanceof Array) ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
//批量删除
|
||||
const deletList = (id) => {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckDelete({},'/mosty-yszx/tbYsSxt/'+id).then(() => {
|
||||
proxy.$message({ type: "success",message: "删除成功"});
|
||||
getDataList()
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
};
|
||||
|
||||
// 新增编辑表单
|
||||
const addEditForm = (type,row)=>{
|
||||
nextTick(()=>{
|
||||
editInfo.value.init(type,row)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,835 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">执勤警组管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="警组名称">
|
||||
<el-input v-model="listQuery.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" @selection-change="handleSelectionChange" 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 type="index" align="center" width="60px" label="序号" />
|
||||
<el-table-column prop="ssbm" label="所属部门" />
|
||||
<el-table-column prop="jzMc" align="center" label="警组名称" />
|
||||
<el-table-column prop="ddMjxm" show-overflow-tooltip label="警组负责人" align="center" />
|
||||
<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" />
|
||||
</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 @change="handleChange" v-model="form.ssbmdm" :placeholder="form.ssbm" style="width: 100%"
|
||||
ref="cascader" clearable filterable :options="depList" :props="props" />
|
||||
</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="form.ssbmdm?chooseUserVisible = true:chooseUserVisible = false " 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="form.ssbmdm?mjVisible = true:mjVisible = false"
|
||||
>
|
||||
<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="form.ssbmdm?fjVisible = true:fjVisible = false">
|
||||
<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="mjjzcy" label="群防群治人员" @click.stop="qfqzVisible = true">
|
||||
<el-input v-model="form.qfqz" placeholder="请选择群防群治人员" style="width: 100%" clearable readonly
|
||||
suffix-icon="ArrowDown" v-if="qfqzData.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in qfqzData" :key="tag.id" class="mx-1" closable :type="tag.type"
|
||||
@close.stop="handleClose(tag, 'QFQZ')">
|
||||
{{ tag.qfqzmc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jzznzb" label="移动警务终端" @click.stop="(zblx = '81'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<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'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<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'), (form.ssbmdm?znzbVisible = true:znzbVisible = false)">
|
||||
<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="clList" label="警组车辆" @click.stop="form.ssbmdm?jyclVisible = true:jyclVisible = false">
|
||||
<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" showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
<!-- 选择民警 -->
|
||||
<MjLoad v-if="mjVisible" v-model="mjVisible" titleValue="选择民警" :roleIds="hasChooseMj" showBm="false" :ssbmdm="form.ssbmdm"
|
||||
@choosedUsers="hanlderChooseMj" />
|
||||
<!-- 选择辅警 -->
|
||||
<FjLoad v-if="fjVisible" v-model="fjVisible" :roleIds="hasChooseFj" @choosedUsers="hanlderChooseFj" :showBm="false" :ssbmdm="form.ssbmdm"/>
|
||||
<!-- 智能装备 -->
|
||||
<ZnzbLoad v-model="znzbVisible" v-if="znzbVisible" :roleIds="hasChooseZnzb" :zblx="zblx" :showBm="false" :ssbmdm="form.ssbmdm"
|
||||
@choosedUsers="hanlderChooseZnzb" />
|
||||
<!-- 车辆 -->
|
||||
<JyclLoad v-if="jyclVisible" :roleIds="hasChooseJycl" v-model="jyclVisible" @choosedUsers="hanlderChooseJycl"
|
||||
:showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
<!-- 群防群治 -->
|
||||
<QfqzLoadCopy v-if="qfqzVisible" :roleIds="hasChooseQfqz" v-model="qfqzVisible" @choosedUsers="hanlderChooseQfqz"
|
||||
:showBm="false" :ssbmdm="form.ssbmdm" />
|
||||
</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 QfqzLoadCopy from "@/components/MyComponents/ChooseJz/QfqzLoad.vue";
|
||||
import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
|
||||
import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
|
||||
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 qfqzVisible=ref(false)
|
||||
const qfqzData=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 ids = ref([]); //批量删除的ID
|
||||
|
||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
||||
const hasChooseMj = ref([]); //已经选胡民警
|
||||
const hasChooseFj = ref([]); //已经选胡FU警
|
||||
const hasChooseZnzb = ref([]); //已经选胡智能装备
|
||||
const hasChooseJyqx = ref([]); //已经选常用装备
|
||||
const hasChooseJycl = ref([]); //已经选警用车辆
|
||||
const hasChooseQfqz = 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;
|
||||
case "QFQZ":
|
||||
qfqzData.value.splice(qfqzData.value.indexOf(tag), 1);
|
||||
if (title.value == "新增勤务警组") {
|
||||
hasChooseQfqz.value.splice(hasChooseQfqz.value.indexOf(tag.id), 1);
|
||||
} else {
|
||||
hasChooseQfqz.value.splice(hasChooseQfqz.value.indexOf())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//获取数据
|
||||
const getListData = () => {
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbJcglJz/queryList").then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = Number(res.total);
|
||||
loadingTable.value = false;
|
||||
}).catch(err=>{
|
||||
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.userName;
|
||||
form.value.ddMjsfzh = user.idEntityCard;
|
||||
form.value.ddDh = user.mobile;
|
||||
form.value.ddMjid = user.id;
|
||||
form.value.ddMjjh = user.inDustRialId;
|
||||
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 hanlderChooseQfqz(arr) {
|
||||
const qfqzList = arr.map((item) => {
|
||||
return {
|
||||
qfqzId: item.id,
|
||||
qfqzmc: item.xm,
|
||||
};
|
||||
});
|
||||
hasChooseQfqz.value = qfqzList.map((item) => { return item.id; });
|
||||
qfqzData.value = qfqzList;
|
||||
}
|
||||
//单个删除
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
qcckPost([row.id], "/mosty-jmxf/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-jmxf/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-jmxf/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);
|
||||
});
|
||||
qfqzData.value=JSON.parse(res.qfqz)?JSON.parse(res.qfqz):[];
|
||||
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;
|
||||
params.qfqz=JSON.stringify(qfqzData.value)
|
||||
if (chackAdd.value) {
|
||||
qcckPost(params, "/mosty-jmxf/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-jmxf/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;
|
||||
};
|
||||
</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>
|
||||
@ -1,466 +0,0 @@
|
||||
<!-- 社会安保力量 -->
|
||||
<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>
|
||||
@ -1,432 +0,0 @@
|
||||
<!-- 增删改查基础模板 -->
|
||||
<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"
|
||||
unlink-panels
|
||||
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>
|
||||
@ -1,481 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">重点人员管理</div>
|
||||
<div class="btnBox" style="display: flex">
|
||||
<el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true;">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="姓名">
|
||||
<el-input placeholder="请输入重点人员姓名" v-model="listQuery.xm" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker unlink-panels v-model="listQuery.gkkssj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任区">
|
||||
<el-select v-model="listQuery.xfqid" placeholder="请选择责任区" filterable>
|
||||
<el-option v-for="item in zrqList" :key="item.id" :label="item.xfqMc" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="管控状态">
|
||||
<el-select v-model="listQuery.gkzt" placeholder="请选择管控状态" >
|
||||
<el-option v-for="item in D_ZDRGK_GKZT" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="listQuery.gkbq" placeholder="请选择管控状态" filterable>
|
||||
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item.value" :label="item.label" :value="item.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 :data="tableData" border row-key="orgCode" style="width: 100%" :key="keyCount" :height="tableHeight">
|
||||
<el-table-column prop="sfzh" label="身份证号码" show-overflow-tooltip align="center" width="200"/>
|
||||
<el-table-column prop="xm" label="姓名" show-overflow-tooltip width="120"/>
|
||||
<el-table-column label="性别" show-overflow-tooltip width="80">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图片" align="center" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
style="width=80px;height:90px"
|
||||
:preview-src-list="[`/mosty-base/minio/image/download/${row.fjdz}`]"
|
||||
v-if="row.fjdz"
|
||||
hide-on-click-modal
|
||||
preview-teleported
|
||||
fit="cover"
|
||||
:src="`/mosty-base/minio/image/download/${row.fjdz}`"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="民族" align="center" width="80" >
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_MZ" :value="row.mz" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="jzdz" label="居住地" show-overflow-tooltip align="center" width="320"/>
|
||||
<el-table-column prop="lxfs" label="联系方式" show-overflow-tooltip align="center" width="180"/> -->
|
||||
<el-table-column label="紧急联系人及方式" show-overflow-tooltip align="center" width="180" >
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.jjlxr }}({{ row.jjlxrLxfs }})</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标签" show-overflow-tooltip align="center" width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="rybq_box">
|
||||
<dict-tag v-for="item in row.gkbq" :key="item" :options="D_ZDRGK_GKBQ" :value="item" :tag="true"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkMan" label="等级" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_ZDRGK_GKDJ" :value="row.gkdj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkMan" label="管控状态" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_ZDRGK_GKZT" :value="row.gkzt" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="xtCjsj" label="创建时间" show-overflow-tooltip align="center" width="150"/>
|
||||
<!-- <el-table-column prop="gksj" label="最近管控时间" show-overflow-tooltip align="center" width="150"/>
|
||||
<el-table-column prop="linkMan" label="管控次数" show-overflow-tooltip align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.gkjlList?.length }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="gkyy" label="管控原因" show-overflow-tooltip align="center" width="200"/>
|
||||
<el-table-column prop="czfs" label="处置方式" show-overflow-tooltip align="center" width="100"/>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="230">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="lookGj(row)" size="small">预警轨迹</el-button>
|
||||
<el-button @click="update(row)" size="small">编辑</el-button>
|
||||
<el-popconfirm @confirm="delDictItem(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?">
|
||||
<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.pageCurrent"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogFormVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ isUpdate ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button v-if="isUpdate" type="primary" size="small" @click="onSave" :loading="buttonLoading" >修改</el-button>
|
||||
<!-- 新增 -->
|
||||
<el-button v-else type="primary" size="small" @click="onAdd" :loading="buttonLoading" >保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="mosty-from-wrap" ref="editRef" label-width="140px" :rules="rules" :inline="true" label-position="top" :model="dialogForm">
|
||||
<el-form-item label="身份证号码" show-word-limit prop="sfzh" required >
|
||||
<el-input placeholder="请填写身份证号码" v-model="dialogForm.sfzh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input placeholder="请填写重点人员姓名" v-model="dialogForm.xm" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" required>
|
||||
<el-select v-model="dialogForm.xbdm" placeholder="请选择性别">
|
||||
<el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<MOSTY.PackageSelect width="280px" v-model="dialogForm.mz" dictEnum="NATION" clearable filterable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="居住地" >
|
||||
<el-input show-word-limit placeholder="请填写详细居住地" v-model="dialogForm.jzdz" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" >
|
||||
<el-input placeholder="请填写联系方式" show-word-limit v-model="dialogForm.lxfs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任社区民警" >
|
||||
<el-input placeholder="请填写责任社区民警" show-word-limit v-model="dialogForm.jjlxr" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任社区民警电话" >
|
||||
<el-input placeholder="请填写责任社区民警电话" show-word-limit v-model="dialogForm.jjlxrLxfs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="gkbq" >
|
||||
<el-select v-model="dialogForm.gkbq" multiple placeholder="请选择标签">
|
||||
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="等级" prop="gkdj" >
|
||||
<el-select v-model="dialogForm.gkdj" placeholder="请选择等级">
|
||||
<el-option
|
||||
v-for="item in D_ZDRGK_GKDJ"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="管控状态" prop="gkzt">
|
||||
<el-select v-model="dialogForm.gkzt" placeholder="请选择管控状态">
|
||||
<el-option
|
||||
v-for="item in D_ZDRGK_GKZT"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="所属责任区" prop="xfqid" @click.stop="modelValue = true" >
|
||||
<el-input v-model="dialogForm.xfqid" placeholder="请选择所属责任区" style="width: 100%" clearable readonly suffix-icon="ArrowDown" v-if="dialogForm.xfqList.length <= 0" />
|
||||
<template v-else>
|
||||
<el-tag @close.stop="handleClose(tag, 'zrq')" v-for="tag in dialogForm.xfqList" :key="tag.id" class="mx-1" closable :type="tag.type">
|
||||
{{ tag.xfqMc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="管控原因" style="width: 100%">
|
||||
<el-input placeholder="请填写管控原因" type="textarea" show-word-limit v-model="dialogForm.gkyy" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处置方式" style="width: 100%">
|
||||
<el-radio-group v-model="dialogForm.czfs">
|
||||
<el-radio label="留置盘问"></el-radio>
|
||||
<el-radio label="核实后放行"></el-radio>
|
||||
<el-radio label="不处理"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<MOSTY.Upload v-model="dialogForm.fjdz" :limit="1"></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 请选择责任区 -->
|
||||
<ZrxLoad v-model="modelValue" v-if="modelValue" :roleIds="dialogForm.xfqid" @choosedUsers="hanlderChooseZrq" />
|
||||
<!-- 轨迹 -->
|
||||
<Route ref="dialogRout" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import ZrxLoad from "./zrxLoad.vue";
|
||||
import Route from "./route.vue";
|
||||
const store = useStore();
|
||||
const modelValue = ref(false)
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB, D_ZDRGK_GKZT, D_ZDRGK_GKBQ, D_ZDRGK_GKDJ, D_ZDRGK_GKLX ,D_BZ_MZ} = proxy.$dict( "D_BZ_XB", "D_ZDRGK_GKZT", "D_ZDRGK_GKBQ", "D_ZDRGK_GKDJ", "D_ZDRGK_GKLX","D_BZ_MZ");
|
||||
const zdryDetail = ref({});
|
||||
const dialogRout = ref();
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
//查询参数
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageSize: 20,
|
||||
pageCurrent: 1,
|
||||
});
|
||||
const buttonLoading = ref(false);
|
||||
const dialogFormDefault = ref({});
|
||||
const dialogForm = ref({
|
||||
xfqid: [],
|
||||
xfqList: [],
|
||||
});
|
||||
// 数据相关
|
||||
const tableData = ref([]);
|
||||
const dialogFormVisible = ref(false);
|
||||
const zrqList = ref([]); //责任区数据
|
||||
const isUpdate = ref(false);
|
||||
const rules = reactive({
|
||||
xm:[{ required: true, message: '请填写姓名' ,trigger:'blur'}],
|
||||
xbdm:[{ required: true, message: '请选择性别',trigger:'change' }],
|
||||
mz:[{ required: true, message: '请选择民族' ,trigger:'blur'}],
|
||||
jzdz:[{ required: true, message: '请填写详细居住地' ,trigger:'blur'}],
|
||||
lxfs:[{ required: true, message: '请填写联系方式' ,trigger:'blur'}],
|
||||
jjlxr:[{ required: true, message: '请填写责任社区民警' ,trigger:'blur'}],
|
||||
jjlxrLxfs:[{ required: true, message: '责任社区民警电话' ,trigger:'change'}],
|
||||
gkdj:[{ required: true, message: '请选择等级' ,trigger:'change'}],
|
||||
gkzt:[{ required: true, message: '请选择管控状态' ,trigger:'change'}],
|
||||
xfqid:[{ required: true, message: '请选择所属责任区' ,trigger:'change'}],
|
||||
})
|
||||
onMounted(() => {
|
||||
dialogFormDefault.value = JSON.parse(JSON.stringify(dialogForm.value));
|
||||
tabHeightFn();
|
||||
_getXfqData();
|
||||
getListData();
|
||||
});
|
||||
|
||||
//编辑
|
||||
const update = (item) => {
|
||||
item.fjdz = [item.fjdz];
|
||||
dialogForm.value = item;
|
||||
dialogForm.value.xfqid = dialogForm.value.xfqList.map(v=>{return v.xfqId})
|
||||
dialogFormVisible.value = true;
|
||||
isUpdate.value = true;
|
||||
};
|
||||
|
||||
// 查看轨迹
|
||||
|
||||
const lookGj = (row) => {
|
||||
dialogRout.value.innit(row)
|
||||
}
|
||||
|
||||
// 获取数据的方法
|
||||
const getListData = async () => {
|
||||
// listQuery.value.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbJcglZdrgk/queryList").then((res) => {
|
||||
if (!res) return false;
|
||||
for (let i = 0; i < res.records.length; i++) {
|
||||
res.records[i].gkbq = res.records[i].gkbq.split(",");
|
||||
}
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
//获取巡防区并绘制
|
||||
const _getXfqData = () => {
|
||||
let data = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
|
||||
};
|
||||
qcckGet(data, "/mosty-jmxf/tbJcglXfqy/queryList").then((res) => {
|
||||
zrqList.value = res.records || [];
|
||||
});
|
||||
};
|
||||
|
||||
// 处理删除tag
|
||||
function handleClose(tag, type) {
|
||||
dialogForm.value.xfqList.splice(dialogForm.value.xfqList.indexOf(tag), 1);
|
||||
dialogForm.value.xfqid.splice(dialogForm.value.xfqid.indexOf(tag.id), 1);
|
||||
}
|
||||
const reset = () => {
|
||||
tableData.value = [];
|
||||
dialogForm.value = {};
|
||||
listQuery.value = { pageSize: 20, pageCurrent: 1, gkbq: "", gkzt: "" };
|
||||
getListData();
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.gkjssj = listQuery.value.gkkssj;
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//选择
|
||||
function hanlderChooseZrq(arr) {
|
||||
dialogForm.value.xfqid = arr.map((v) => { return v.id; });
|
||||
dialogForm.value.xfqList = arr.map(item=>{return {xfqId:item.id ,xfqMc:item.xfqMc}})
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (!valid) return ElMessage.error("请填写完必填项!");
|
||||
buttonLoading.value = true;
|
||||
dialogForm.value.gkbq = dialogForm.value.gkbq.join(",");
|
||||
if (dialogForm.value.fjdz instanceof Array) dialogForm.value.fjdz = dialogForm.value.fjdz.join(",");
|
||||
qcckPost(dialogForm.value, "/mosty-jmxf/tbJcglZdrgk/updateZdr").then((res) => {
|
||||
ElMessage.success("修改成功");
|
||||
dialogFormVisible.value = false;
|
||||
buttonLoading.value = false;
|
||||
isUpdate.value = false;
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
}).catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
const editRef = ref(null);
|
||||
//新增
|
||||
const onAdd = () => {
|
||||
editRef.value.validate((valid) => {
|
||||
if (!valid) return ElMessage.error("请填写完必填项!");
|
||||
buttonLoading.value = true;
|
||||
let params = { ...dialogForm.value }
|
||||
params.xfqid = params.xfqid ? params.xfqid.join(',') :'';
|
||||
params.gkbq = params.gkbq ? params.gkbq.join(",") : ''
|
||||
params.fjdz = params.fjdz ? params.fjdz.join(",") : ''
|
||||
params.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
|
||||
qcckPost(params, "/mosty-jmxf/tbJcglZdrgk/saveZdr").then((res) => {
|
||||
ElMessage.success("新增成功");
|
||||
buttonLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
closeDialog();
|
||||
handleFilter();
|
||||
}).catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const delDictItem = (row) => {
|
||||
qcckPost([row.id], "/mosty-jmxf/tbJcglZdrgk/deleteBatch").then((res) => {
|
||||
ElMessage.success("删除成功");
|
||||
reset();
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogFormVisible.value = false;
|
||||
isUpdate.value = false;
|
||||
dialogForm.value = JSON.parse(JSON.stringify(dialogFormDefault.value));
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
<style >
|
||||
.el-input-group__prepend {
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
.user-manage-container {
|
||||
.table-header-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
::v-deep .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.twoLine {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-flow: wrap;
|
||||
|
||||
.el-form-item {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.zdy_tag {
|
||||
color: #999;
|
||||
border: 1px solid #999;
|
||||
display: inline-block;
|
||||
padding: 0px 10px;
|
||||
border-radius: 3px;
|
||||
line-height: 22px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.active_tag {
|
||||
color: #fff;
|
||||
border: 1px solid #409eff;
|
||||
background: #409eff;
|
||||
}
|
||||
.rybq_box {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">轨迹查看</span>
|
||||
<div>
|
||||
<el-button size="small" @click="dialogForm = false,dataList=[]">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gjMapBox">
|
||||
<div class="left">
|
||||
<el-form :model="dataForm" class="routeForm" label-width="150px" label-position="top">
|
||||
<el-form-item prop="yjRysfzh" label="预警人身份证">
|
||||
<el-input readonly v-model="dataForm.yjRysfzh"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="中心点-半径">
|
||||
<div class="jwdBox">
|
||||
<el-input readonly v-model="dataForm.jd"/>
|
||||
<el-input readonly v-model="dataForm.wd"/>
|
||||
<el-input readonly v-model="dataForm.radius"/>
|
||||
<el-button type="info" @click="selectLoop">圈选</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="timeRange" label="预警时间">
|
||||
<el-date-picker
|
||||
v-model="dataForm.timeRange"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="handleTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="foorbTN">
|
||||
<el-button @click="getDateList">搜索</el-button>
|
||||
<el-button @click="resetRoute">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<ul class="tableBox noScollLine" v-loading="loading">
|
||||
<li class="tableBoxItem" v-for="item in dataList" :key="item.id">
|
||||
<YjItem :data="item" />
|
||||
</li>
|
||||
<el-empty description="暂无数据" :image-size="0.1" v-if="!loading && dataList.length <= 0"/>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<GdMap/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import YjItem from "@/views/homeMy/components/yjItem.vue";
|
||||
import { getYjPointList } from "@/api/dpApi/home.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { ref,onMounted , defineExpose} from 'vue';
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const loading = ref(false)
|
||||
const dataForm = ref({})
|
||||
const dataList = ref([])
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if(res.type == 'circle'){
|
||||
dataForm.value.jd = res.data.centerPoint[0];
|
||||
dataForm.value.wd = res.data.centerPoint[1];
|
||||
dataForm.value.radius = Number(res.data.radius)*1000;
|
||||
emitter.emit("addPointArea", { coords: [{jd:res.data.centerPoint[0],wd:res.data.centerPoint[1]}], icon: require("@/assets/point/zsdw.png"), flag: "centerpoint"});
|
||||
getDateList()
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const innit = (row) =>{
|
||||
dialogForm.value = true;
|
||||
dataForm.value = {yjRysfzh:row.sfzh}
|
||||
getDateList()
|
||||
}
|
||||
|
||||
|
||||
// 重置
|
||||
const resetRoute = () =>{
|
||||
dataForm.value = {yjRysfzh:dataForm.value.yjRysfzh}
|
||||
emitter.emit("removePlot", 'quan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
getDateList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取列表
|
||||
const getDateList = () =>{
|
||||
loading.value = true;
|
||||
emitter.emit("deletePointArea", 'yjHt');
|
||||
let data = { ...dataForm.value}
|
||||
for (let key in data){
|
||||
if(!data[key] || key == 'timeRange') delete data[key];
|
||||
}
|
||||
getYjPointList(data).then((res) => {
|
||||
loading.value = false;
|
||||
dataList.value = res || [];
|
||||
let zt = dataList.value.filter(v =>{ return v.yjbq == '在逃'})
|
||||
let ztIcon = require("@/assets/point/yj.png")
|
||||
handlePoint(zt,ztIcon,'yjHt')
|
||||
let qc = dataList.value.filter(v =>{ return v.yjbq == '侵财'})
|
||||
let qcIcon = require("@/assets/point/yj1.png")
|
||||
handlePoint(qc,qcIcon,'yjHt')
|
||||
let qt = dataList.value.filter(v =>{ return v.yjbq != '侵财' && v.yjbq != '在逃'})
|
||||
let qtIcon = require("@/assets/point/yj2.png")
|
||||
handlePoint(qt,qtIcon,'yjHt')
|
||||
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 处理撒点
|
||||
function handlePoint(arr,icon,flag,scale,fontColor){
|
||||
let list = arr.filter((item) => {
|
||||
item.identification = flag;
|
||||
return item.jd && item.wd;
|
||||
});
|
||||
if(list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: flag ,scale,fontColor });
|
||||
}
|
||||
|
||||
|
||||
// 时间处理
|
||||
const handleTime = (val) =>{
|
||||
dataForm.value.startTime = val ? val[0] :''
|
||||
dataForm.value.endTime = val ? val[1] :''
|
||||
}
|
||||
|
||||
//地图圈选
|
||||
function selectLoop() {
|
||||
emitter.emit("deletePointArea", 'yuan');
|
||||
emitter.emit("deletePointArea", "centerpoint");
|
||||
emitter.emit("drawShape", { flag: "quan" ,type:'circle',isclear:true});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({innit})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gjMapBox{
|
||||
display:flex;
|
||||
width:100%;
|
||||
height:calc(100% - 48px);
|
||||
.left{
|
||||
width:400px;
|
||||
height:100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tableBox{
|
||||
width:400px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y:auto;
|
||||
margin-right:2px;
|
||||
}
|
||||
.right{
|
||||
flex:1
|
||||
}
|
||||
|
||||
}
|
||||
.routeForm{
|
||||
width: 100%;
|
||||
}
|
||||
.jwdBox{
|
||||
display: flex;
|
||||
}
|
||||
.foorbTN{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog .routeForm .el-form-item--default{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择所属责任区"
|
||||
width="1400px"
|
||||
v-model="modelValue"
|
||||
:append-to-body="true"
|
||||
@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.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 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"
|
||||
sortable
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqMc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="巡防区名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqFzr"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="分责人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfqFzrId"
|
||||
label="警号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="ssbm"
|
||||
label="所属部门"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" >
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[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 { qcckPost, qcckGet } 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, nextTick } from "vue";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
onMounted(()=>{
|
||||
handleFilter();
|
||||
})
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
qcckGet(params, "/mosty-jmxf/tbJcglXfqy/queryList").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 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("choosedUsers", list);
|
||||
closed();
|
||||
};
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,357 +0,0 @@
|
||||
<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-jmxf/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-jmxf/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-jmxf/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-jmxf/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-jmxf/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>
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="patrol-line-dialog">
|
||||
<el-dialog v-model="isShow" :title="title" width="800px" :show-close="true" :center="true"
|
||||
:before-close="handleClose">
|
||||
<div class="uplodBox">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
|
||||
<el-form-item prop="xm" label="姓名">
|
||||
<el-input v-model="formData.xm" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="lxdh" label="联系电话">
|
||||
<el-input v-model="formData.lxdh" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zjhm" label="身份证号">
|
||||
<el-input v-model="formData.zjhm" placeholder="请输入身份证号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jzdz" label="居住地址">
|
||||
<el-input v-model="formData.jzdz" placeholder="请输入居住地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="wpdw" label="外派单位">
|
||||
<el-input v-model="formData.wpdw" placeholder="请输入外派单位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="csmc" label="场所名称">
|
||||
<el-input v-model="formData.csmc" placeholder="请输入场所名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="csdm" label="场所代码">
|
||||
<el-input v-model="formData.csdm" placeholder="请输入场所代码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="foot tc">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import { reactive, ref } from "vue";
|
||||
const emit = defineEmits(['refresh'])
|
||||
const isShow = ref(false);
|
||||
const formData = ref({});
|
||||
const title = ref('')
|
||||
const rules = reactive({
|
||||
jzdz: [{ required: true, message: "请输入居住地址", trigger: "blur" }],
|
||||
wpdw: [{ required: true, message: "请输入外派单位", trigger: "blur" }],
|
||||
xm: [{ required: true, message: "请输入姓名", trigger: "blur"}],
|
||||
...rule.phoneRule({ validator: true,message: "请输入联系电话",require: true }, "lxdh"), // 是否必填 是否进行校验`
|
||||
...rule.identityCardRule({ validator: true,message: "请输入身份证号" ,require: true}, "zjhm"), // 是否必填 是否进行校验
|
||||
|
||||
});
|
||||
const loading = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 关闭弹窗
|
||||
function handleClose() {
|
||||
isShow.value = false;
|
||||
formData.value = {};
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 提交
|
||||
function onComfirm (){
|
||||
formRef.value.validate((valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
let params = { ...formData.value }
|
||||
let url = title.value == '新增' ? '/mosty-jmxf/tbbary/add' : '/mosty-jmxf/tbbary/update';
|
||||
qcckPost(params, url).then((res) => {
|
||||
ElMessage({ message: "保存成功", type: "success", });
|
||||
loading.value = false;
|
||||
emit('refresh')
|
||||
handleClose();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const init = (type,row) => {
|
||||
title.value = type == 'add' ? '新增' : '编辑';
|
||||
isShow.value = true;
|
||||
if(row){
|
||||
qcckGet({id:row.id},'/mosty-jmxf/tbbary/selectByid').then((res) => {
|
||||
formData.value = res;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({init})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagBox {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 2px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.txet {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.patrol-line-dialog {
|
||||
.el-date-editor .el-range-separator {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="保安人员" />
|
||||
<el-button type="primary" @click="addEdit('add', null)">新增</el-button>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #gw="{ row }">
|
||||
<dict-tag :options="D_BAXX_GWLX" :value="row.gw" :tag="false" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="handleDelete(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 新增编辑 -->
|
||||
<AddDialog ref="addEditDialog" @refresh="getList"></AddDialog>
|
||||
|
||||
</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 AddDialog from "./components/addDialog.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BAXX_GWLX } = proxy.$dict("D_BAXX_GWLX");
|
||||
const addEditDialog = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "xm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "证件号码",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:false,
|
||||
},
|
||||
haveControls: false,
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "联系电话", prop: "lxdh" },
|
||||
{ label: "证件号码", prop: "sfzh" },
|
||||
{ label: "场所名称", prop: "csmc" },
|
||||
{ label: "岗位", prop: "gw", showSolt: true },
|
||||
{ label: "入职时间", prop: "rzsj" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
qcckGet(data, "/mosty-jmxf/tbbary/cyryPage").then((res) => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
addEditDialog.value.init(type, row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (id) => {
|
||||
proxy.$confirm("确认删除该记录吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
|
||||
qcckPost({ id }, "/mosty-jmxf/tbbary/delete").then((res) => {
|
||||
proxy.$message({ type: "success", message: "删除成功!" });
|
||||
getList();
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 下发
|
||||
const handleXfrw = (row) => {
|
||||
addEditDialog.value.init(row);
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,569 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">经验管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@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" v-if="row.xtSjzt != 0">修改</el-button>
|
||||
<el-button @click="delDictItem(row.id)" v-if="row.xtSjzt != 0" 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
@ -1,460 +0,0 @@
|
||||
<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\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"
|
||||
unlink-panels
|
||||
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 {tbJcglXfAdd,tbJcglSelectPage,tbJcglDelete,tbJcglEdit} from '@/api/xfll.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.id);
|
||||
}
|
||||
|
||||
// 查询记录数据
|
||||
function getDetail(id) {
|
||||
tbJcglSelectPage({ ryid: 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 params = {
|
||||
...addForm.value,
|
||||
ryid: dataValue.value.id
|
||||
};
|
||||
if (titleValue.value == "新增") {
|
||||
tbJcglXfAdd(params)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.id);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (titleValue.value == "编辑") {
|
||||
tbJcglEdit(addForm.value)
|
||||
.then((res) => {
|
||||
ElMessage({ message: "编辑成功", type: "success" });
|
||||
closeAdd();
|
||||
getDetail(dataValue.value.id);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
}).finally(() => {
|
||||
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(() => {
|
||||
tbJcglDelete(ids).then((res) => {
|
||||
ElMessage({ message: "删除成功", type: "success" });
|
||||
getDetail(dataValue.value.id);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
|
||||
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;
|
||||
color: #000;
|
||||
}
|
||||
.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>
|
||||
@ -1,305 +0,0 @@
|
||||
<!-- <template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">群防群治人员</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="form" :inline="true">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.xm" 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%" :height="tableHeight" :key="keyCount"
|
||||
v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80" />
|
||||
<el-table-column sortable prop="xm" show-overflow-tooltip align="center" width="250px" label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sjh" show-overflow-tooltip align="center" width="350px" label="手机号码">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" width="350px" label="人员身份证号">
|
||||
</el-table-column>
|
||||
<el-table-column label="人员类型" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="textBtn" v-if="row.rylx == '01'">群众</span>
|
||||
<span class="textBtn" v-if="row.rylx == '02'">党员</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="setInfo(row, 'edit')" size="small" >修改</el-button>
|
||||
<el-button @click="setInfo(row, 'detail')" 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.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="close()">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="felform" :rules="rules" :model="addForm" :inline="true" :disabled="isDisabled" label-position="top">
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="addForm.xm" placeholder="请输入姓名" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员类型" prop="rylx" >
|
||||
<el-select v-model="addForm.rylx" placeholder="请选择人员类型" clearable>
|
||||
<el-option label="群众" value="01"></el-option>
|
||||
<el-option label="党员" value="02"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="sjh">
|
||||
<el-input v-model="addForm.sjh" placeholder="请输入手机号码" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="sfzh">
|
||||
<el-input v-model="addForm.sfzh" placeholder="请输入身份证号码" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qfqzAdd, qfqzEdit,qfqzSelectPage,qfqzDelete } from '@/api/lz/backstage'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const loadingTable = ref(true);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const title = ref("新增专业技能");
|
||||
|
||||
//查询参数
|
||||
const form = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
});
|
||||
//新增表单参数
|
||||
const addForm = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
xm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
}
|
||||
],
|
||||
rylx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择人员类型"
|
||||
},
|
||||
],
|
||||
sjh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入手机号码"
|
||||
}
|
||||
],
|
||||
sfzh: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入身份证号码"
|
||||
}
|
||||
],
|
||||
});
|
||||
const tableData = ref([]); //表单数据
|
||||
const total = ref(0); //总数据
|
||||
const dialogFormVisible = ref(false); //是否打开新增弹窗
|
||||
const felform = 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();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
|
||||
//查看详情
|
||||
function setInfo(e, type) {
|
||||
addForm.value = { ...e };
|
||||
dialogFormVisible.value = true;
|
||||
if (type == 'detail') {
|
||||
isDisabled.value = true;
|
||||
checkAdd.value =false
|
||||
title.value = "群防群治人员详情";
|
||||
} else {
|
||||
title.value = "修改群防群治人员";
|
||||
checkAdd.value =false
|
||||
isDisabled.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function add() {
|
||||
isDisabled.value = false;
|
||||
checkAdd.value = true;
|
||||
title.value = "新增群防群治人员";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//新增提交
|
||||
function submit() {
|
||||
loading.value = true;
|
||||
felform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = addForm.value;
|
||||
if (!checkAdd.value) {
|
||||
qfqzEdit(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "修改成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qfqzAdd(data).then((res) => {
|
||||
ElMessage({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
getListData();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
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,
|
||||
xm: form.value.xm,
|
||||
};
|
||||
qfqzSelectPage(data)
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loadingTable.value = false;
|
||||
});
|
||||
};
|
||||
//修改查询条件
|
||||
const delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qfqzDelete(id).then(() => {
|
||||
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
}) .catch(() => {console.log("报错");
|
||||
});
|
||||
})
|
||||
.catch((err) => {console.log(err);
|
||||
});
|
||||
}
|
||||
//更改查询条数
|
||||
function handleSizeChange(e) {
|
||||
form.value.size = e;
|
||||
form.value.current = 1;
|
||||
getListData();
|
||||
}
|
||||
//分页查询
|
||||
function handleCurrentChange(e) {
|
||||
xfllQuery.value.current = e;
|
||||
}
|
||||
|
||||
|
||||
//点击重置
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
current: 1,
|
||||
size: 20,
|
||||
textName: ""
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
const close = () => {
|
||||
|
||||
addForm.value = {};
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
// 表格高度计算
|
||||
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> -->
|
||||
@ -1,444 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">专业技能管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量注销</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="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/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>
|
||||
@ -1,276 +0,0 @@
|
||||
<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" unlink-panels 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
@ -1,137 +0,0 @@
|
||||
<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>
|
||||
|
||||
<span>里程：{{ lc }} km</span>
|
||||
|
||||
<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 { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import GdMap from "@/components/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 lc = ref(0); //时间范围
|
||||
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;
|
||||
form.lc = 0;
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val) {
|
||||
form.kssj = val ? val[0] : "";
|
||||
form.jssj = val ? val[1] : "";
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
form.islx = "1";
|
||||
qcckPost(form, "/mosty-jmxf/tbWzXfwz/selectSbLswzMo").then((res) => {
|
||||
let arr = res.list || [];
|
||||
lc.value = res.lc / 1000;
|
||||
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);
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mm-box {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
height: 100%;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 62vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,638 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">设备管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addLoad">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@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>
|
||||
@ -1,556 +0,0 @@
|
||||
<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-select v-model="listQuery.clpp" placeholder="请选择车辆品牌" >
|
||||
<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="cllx" label="车辆类型">
|
||||
<el-select v-model="listQuery.cllx" placeholder="请选择车辆类型" >
|
||||
<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>
|
||||
<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 prop="gpsId" label="GPS" 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 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>
|
||||
@ -1,141 +0,0 @@
|
||||
<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>
|
||||
<span>里程：{{ lc }} km</span>
|
||||
<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/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 lc = ref(0); //里程
|
||||
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;
|
||||
form.lc = 0;
|
||||
getClDare();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 处理时间
|
||||
function handletime(val) {
|
||||
form.kssj = val ? val[0] : "";
|
||||
form.jssj = val ? val[1] : "";
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "clgjRoute");
|
||||
form.islx = "1";
|
||||
qcckPost(form, "/mosty-jmxf/tbWzXfwz/selectSbLswzMo").then((res) => {
|
||||
let arr = res.list || [];
|
||||
lc.value = res.lc/1000;
|
||||
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%;
|
||||
margin-top: 16px;
|
||||
background: #fff;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// height: 60px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,494 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">不巡防申请</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="申请部门">
|
||||
<MOSTY.Department
|
||||
width="180px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="listQuery.sqbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input
|
||||
v-model="listQuery.sqrXm"
|
||||
placeholder="请填写申请人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="不巡日期范围">
|
||||
<el-date-picker
|
||||
v-model="QzrqS"
|
||||
style="width: 300px"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="upQzrqs"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核状态">
|
||||
<el-select v-model="listQuery.shzt" placeholder="请选择审核状态" style="width:180px">
|
||||
<el-option v-for="dict in D_BZ_BXFSHZT" :key="dict.value+'shzt'" :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"
|
||||
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="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bxfsj" sortable align="center" label="不巡日期">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxfyy"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="不巡原因"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="申请部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqrXm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="申请人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtCjsj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
sortable
|
||||
label="申请时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="审批状态"
|
||||
sortable
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXFSHZT" :value="row.shzt" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" fixed="right" width="200px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="info(row)" size="small">详情</el-button>
|
||||
<el-button v-if="row.shzt == '0'" @click="update(row)" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="row.shzt != '1'"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="delDictItem(row)"
|
||||
>注销</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
|
||||
v-if="!infoActive"
|
||||
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 prop="sqbmdm" label="申请部门">
|
||||
<MOSTY.Department
|
||||
:placeholder="form.sqbm"
|
||||
width="200px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="form.sqbmdm"
|
||||
/>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="sqrXm" label="申请人">
|
||||
<el-input
|
||||
@click="chooseUserVisible = true"
|
||||
placeholder="请填写申请人"
|
||||
clearable
|
||||
v-model="form.sqrXm"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bxfsj" label="不巡防日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.bxfsj"
|
||||
placeholder="请选择不巡防日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 73%" prop="bxfyy" label="不巡原因">
|
||||
<el-input
|
||||
v-model="form.bxfyy"
|
||||
placeholder="请填写不巡原因"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 73%">
|
||||
<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 ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { dateFormat } from "@/utils/auth.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import {
|
||||
getBxfsq,
|
||||
addBxfsq,
|
||||
deleteBxfsq,
|
||||
getBxfsqInfo,
|
||||
updateBxfsq
|
||||
} from "@/api/service/application.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const chackipt = ref(true);
|
||||
const { D_BZ_BXFSHZT } = proxy.$dict("D_BZ_BXFSHZT");
|
||||
const QzrqS = ref([]);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const depList = ref([]); //部门数据
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const cascader = ref(null);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增不巡防申请");
|
||||
const loadingtable = ref(false); //表格加载
|
||||
const elform = ref(null);
|
||||
const infoActive = ref(true);
|
||||
const total = ref(0);
|
||||
const checkAdd = ref(false);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const chooseUserVisible = ref(false);
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
form.value.sqbm = data[0].text;
|
||||
const ids = JSON.parse(JSON.stringify(e));
|
||||
form.value.sqbmdm = ids;
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
sqbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择申请部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
sqrXm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择申请人",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bxfsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择不巡防日期",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bxfyy: [
|
||||
{
|
||||
required: true,
|
||||
message: "请填写不巡防原因",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
// let dept = getItem("deptId");
|
||||
QzrqS.value = [];
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
// sqbmdm: dept[0].deptId
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
function upQzrqs() {
|
||||
if (QzrqS.value.length == 2) {
|
||||
listQuery.value.kssj = QzrqS.value[0];
|
||||
listQuery.value.jssj = QzrqS.value[1];
|
||||
}
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
infoActive.value = false;
|
||||
resetForm();
|
||||
let dept = getItem("deptId");
|
||||
let user = getItem("USERNAME");
|
||||
form.value.sqbmdm = dept[dept.length - 1].deptId;
|
||||
form.value.sqbm = dept[dept.length - 1].deptName;
|
||||
form.value.sqrXm = getItem("USERNAME");
|
||||
form.value.sqrId = getItem("USERID");
|
||||
chackipt.value = true;
|
||||
title.value = "新增不巡防申请";
|
||||
checkAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
function focusF() {
|
||||
chackipt.value = false;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
infoActive.value = false;
|
||||
chackipt.value = true;
|
||||
resetForm();
|
||||
getBxfsqInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
checkAdd.value = false;
|
||||
title.value = "不巡防申请修改";
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//详情
|
||||
function info(row) {
|
||||
infoActive.value = true;
|
||||
chackipt.value = true;
|
||||
resetForm();
|
||||
getBxfsqInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
checkAdd.value = false;
|
||||
title.value = "不巡防申请详情";
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//注销
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定删除该数据？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
deleteBxfsq(row.id).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
props.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingtable.value = true;
|
||||
getBxfsq(listQuery.value).then((res) => {
|
||||
loadingtable.value = false;
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loadingtable.value = false;
|
||||
});;
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.sqrXm = user.userName;
|
||||
form.value.sqrId = user.id;
|
||||
};
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
form.value.sqbmid = form.value.sqbmdm
|
||||
if (checkAdd.value) {
|
||||
addBxfsq(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
updateBxfsq(form.value).then((res) => {
|
||||
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(() => {
|
||||
getListData();
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</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: "分钟";
|
||||
}
|
||||
</style>
|
||||
@ -1,428 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">不巡防审批</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="申请部门">
|
||||
<MOSTY.Department
|
||||
width="180px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="listQuery.sqbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input
|
||||
v-model="listQuery.sqrXm"
|
||||
placeholder="请填写申请人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="不巡日期范围">
|
||||
<el-date-picker
|
||||
v-model="QzrqS"
|
||||
style="width: 300px"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="upQzrqs"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</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%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bxfsj" sortable align="center" label="不巡日期">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bxfyy"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="不巡原因"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="申请部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqrXm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="申请人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtCjsj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
sortable
|
||||
label="申请时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="审批状态"
|
||||
sortable
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_BXFSHZT" :value="row.shzt" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="200px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="info(row)" size="small">详情</el-button>
|
||||
<el-button type="warning" size="small" @click="judge(row)"
|
||||
>审核</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 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 prop="sqbmdm" label="申请部门">
|
||||
<el-cascader
|
||||
v-if="!chackipt"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
v-model="form.sqbmdm"
|
||||
:options="depList"
|
||||
:props="props"
|
||||
@change="handleChange"
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="form.sqbm"
|
||||
v-if="chackipt"
|
||||
@focus="focusF"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sqrXm" label="申请人">
|
||||
<el-input
|
||||
@click="chooseUserVisible = true"
|
||||
placeholder="请填写申请人"
|
||||
clearable
|
||||
v-model="form.sqrXm"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bxfsj" label="不巡防日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.bxfsj"
|
||||
placeholder="请选择"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 73%" prop="bxfyy" label="不巡原因">
|
||||
<el-input
|
||||
v-model="form.bxfyy"
|
||||
placeholder="请填写不巡原因"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 73%">
|
||||
<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 ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { dateFormat } from "@/utils/auth.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import {
|
||||
getBxfsq,
|
||||
judgeBxfsq,
|
||||
getBxfsqInfo
|
||||
} from "@/api/service/application.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const chackipt = ref(true);
|
||||
const { D_BZ_BXFSHZT } = proxy.$dict("D_BZ_BXFSHZT");
|
||||
const QzrqS = ref([]);
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const depList = ref([]); //部门数据
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const cascader = ref(null);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("不巡防申请新增");
|
||||
const elform = ref(null);
|
||||
const infoActive = ref(true);
|
||||
const total = ref(0);
|
||||
const checkAdd = ref(false);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const chooseUserVisible = ref(false);
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
form.value.sqbm = data[0].text;
|
||||
const ids = JSON.parse(JSON.stringify(e));
|
||||
form.value.sqbmdm = ids;
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({});
|
||||
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
// let dept = getItem("deptId");
|
||||
QzrqS.value = [];
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
// sqbmdm: dept[0].deptId
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
function upQzrqs() {
|
||||
if (QzrqS.value.length == 2) {
|
||||
listQuery.value.kssj = QzrqS.value[0];
|
||||
listQuery.value.jssj = QzrqS.value[1];
|
||||
}
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
infoActive.value = false;
|
||||
resetForm();
|
||||
let dept = getItem("deptId");
|
||||
let user = getItem("USERNAME");
|
||||
form.value.sqbmdm = dept[dept.length - 1].deptId;
|
||||
form.value.sqbm = dept[dept.length - 1].deptName;
|
||||
form.value.sqrXm = getItem("USERNAME");
|
||||
form.value.sqrId = getItem("USERID");
|
||||
chackipt.value = true;
|
||||
title.value = "不巡防申请新增";
|
||||
checkAdd.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
function focusF() {
|
||||
chackipt.value = false;
|
||||
}
|
||||
//详情
|
||||
function info(row) {
|
||||
infoActive.value = true;
|
||||
chackipt.value = true;
|
||||
resetForm();
|
||||
getBxfsqInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
checkAdd.value = false;
|
||||
title.value = "不巡防申请详情";
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//注销
|
||||
function judge(row) {
|
||||
proxy
|
||||
.$confirm("确定审批该数据？", "警告", {
|
||||
type: "warning",
|
||||
confirmButtonText: "审核通过",
|
||||
cancelButtonText: "审核不通过",
|
||||
distinguishCancelAndClose: true
|
||||
})
|
||||
.then(() => {
|
||||
row.shzt = "1";
|
||||
row.spyj = "同意通过！！";
|
||||
judgePass(row);
|
||||
})
|
||||
.catch((active) => {
|
||||
if (active == "close") {
|
||||
proxy.$message.info("已取消");
|
||||
} else if (active === "cancel") {
|
||||
proxy
|
||||
.$prompt("请填写审核不通过的原因")
|
||||
.then((res) => {
|
||||
if (!res.value) {
|
||||
proxy.$message.error("请填写审核不通过的原因");
|
||||
} else {
|
||||
row.shzt = "2";
|
||||
row.spyj = res.value;
|
||||
judgePass(row);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 审核通过或不通过
|
||||
function judgePass(row) {
|
||||
judgeBxfsq(row).then((res) => {
|
||||
proxy.$message.success("审批成功");
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
listQuery.value.shzt = "0";
|
||||
getBxfsq(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.sqrXm = user.userName;
|
||||
form.value.sqrId = user.id;
|
||||
};
|
||||
/**
|
||||
* 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(() => {
|
||||
let dept = getItem("deptId");
|
||||
// listQuery.value.sqbmdm = dept[0].deptId;
|
||||
getListData();
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</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: "分钟";
|
||||
}
|
||||
</style>
|
||||
@ -1,825 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">勤务等级管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item prop="qwdj" label="勤务等级">
|
||||
<el-select clearable style="width: 100%" v-model="listQuery.qwdj">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DJQW"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="勤务起止时间">
|
||||
<el-date-picker
|
||||
v-model="seqwQzsj"
|
||||
unlink-panels
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</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%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
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
|
||||
prop="qwdj"
|
||||
align="center"
|
||||
width="120"
|
||||
label="勤务等级"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DJQW" :value="row.qwdj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="qwkssj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="320"
|
||||
label="勤务起止时间"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.qwkssj }} 至 {{ row.qwjssj }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqrybl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="建议执勤人员比例"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.jyzqrybl }}%</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="建议执勤车辆比例"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.jyzqclbl }}%</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="状态"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.fbzt == 0">未发布</span>
|
||||
<span v-if="row.fbzt == 1">已发布</span>
|
||||
<span v-if="row.fbzt == 2">已结束</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="320px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="getJlqk(row)" size="small">警力情况</el-button>
|
||||
<el-button v-if="row.fbzt == 1" @click="jsQw(row)" size="small"
|
||||
>结束勤务</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="row.fbzt == 0"
|
||||
:loading="row.btnLoading"
|
||||
@click="fabu(row)"
|
||||
size="small"
|
||||
>发布勤务</el-button
|
||||
>
|
||||
<el-button v-if="row.fbzt == 0" @click="update(row)" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button v-if="row.fbzt != 0" @click="info(row)" size="small"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="row.fbzt == '0'"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="delDictItem(row)"
|
||||
>删除</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"
|
||||
:loading="btnLoading"
|
||||
v-if="bcBtn"
|
||||
@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 prop="qwdj" label="勤务等级">
|
||||
<el-select
|
||||
@change="checkQwdj"
|
||||
style="width: 100%"
|
||||
v-model="form.qwdj"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_DJQW"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="qwQzsj" label="勤务起止时间">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.qwQzsj"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
unlink-panels
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="ssbmdm" label="所属部门">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
:placeholder="form.ssbm"
|
||||
clearable
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sfxj" label="是否发送到下级">
|
||||
<el-select style="width: 100%" v-model="form.sfxj">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SF"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jyzqrybl" label="建议执勤人员比例（%）">
|
||||
<el-input-number
|
||||
:max="100"
|
||||
:min="0"
|
||||
style="width: 100%"
|
||||
v-model="form.jyzqrybl"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jyzqclbl" label="建议执勤车辆比例（%）">
|
||||
<el-input-number
|
||||
style="width: 100%"
|
||||
v-model="form.jyzqclbl"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="twoh"
|
||||
style="width: 100%"
|
||||
prop="qwyy"
|
||||
label="勤务原因"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.qwyy"
|
||||
placeholder="请填写勤务原因"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="twoh"
|
||||
style="width: 100%"
|
||||
prop="qwyq"
|
||||
label="勤务要求"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.qwyq"
|
||||
placeholder="请填写勤务要求"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="等级勤务方案">
|
||||
<MOSTY.FileUpload
|
||||
v-model:modelValue="form.fjdz"
|
||||
:limit="3"
|
||||
:isEdit="fileEdit"
|
||||
@handleChange="changeFile"
|
||||
></MOSTY.FileUpload>
|
||||
</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 v-if="jlqkVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">警力情况</span>
|
||||
<div>
|
||||
<el-button size="small" @click="jlqkVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
sortable
|
||||
prop="ksrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="开始日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jsrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="结束日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jmxzs"
|
||||
label="街面巡组数"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfmjs"
|
||||
label="巡防民警数"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xffjs"
|
||||
show-overflow-tooltip
|
||||
label="巡防辅警数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfcls"
|
||||
show-overflow-tooltip
|
||||
label="巡防车辆数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="znzbs"
|
||||
show-overflow-tooltip
|
||||
label="智能装备数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jyqxs"
|
||||
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="listQueryzq.pageCurrent"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="listQueryzq.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalzq"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getRecentDay,timeValidate } from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch
|
||||
} from "vue";
|
||||
import {
|
||||
fabuzt,
|
||||
getqwdj,
|
||||
addQwdj,
|
||||
deleteQwdj,
|
||||
getQwdjInfo,
|
||||
updateQwdj
|
||||
} from "@/api/service/grade.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { ElNotification } from "element-plus";
|
||||
const jlqkVisible = ref(false); //警力情况弹窗
|
||||
const title = ref("新增勤务等级");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_DJQW, D_BZ_ZXFW,D_BZ_SF } = proxy.$dict("D_BZ_DJQW", "D_BZ_ZXFW","D_BZ_SF");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const seqwQzsj = ref([]);
|
||||
watch(
|
||||
() => seqwQzsj.value,
|
||||
(val) => {
|
||||
listQuery.value.qwkssj = val[0] || "";
|
||||
listQuery.value.qwjssj = val[1] || "";
|
||||
}
|
||||
);
|
||||
const elform = ref(null);
|
||||
const chackAdd = ref(false);
|
||||
const total = ref(0);
|
||||
const totalzq = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const bcBtn = ref(true);
|
||||
const fileEdit = ref(true);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const loadingTable = ref(false);
|
||||
const zqjlData = ref([
|
||||
{
|
||||
ksrq: "2022/07/22",
|
||||
jsrq: "2022/07/23",
|
||||
jmxzs: 6,
|
||||
xfmjs: 8,
|
||||
xffjs: 20,
|
||||
xfcls: 12,
|
||||
znzbs: 35,
|
||||
jyqxs: 50
|
||||
},
|
||||
{
|
||||
ksrq: "2022/07/22",
|
||||
jsrq: "2022/07/23",
|
||||
jmxzs: 6,
|
||||
xfmjs: 8,
|
||||
xffjs: 20,
|
||||
xfcls: 12,
|
||||
znzbs: 35,
|
||||
jyqxs: 50
|
||||
}
|
||||
]);
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const listQueryzq = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jyzqclbl: 34,
|
||||
jyzqrybl: 34,
|
||||
qwQzsj: [],
|
||||
sfxj:'0'
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
qwdj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务等级",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwkssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务开始日期",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwjssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务结束日期",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwQzsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择起止时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
// 文件改变事件
|
||||
function changeFile(data) {
|
||||
form.value.fjdz = data;
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
seqwQzsj.value = [];
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
|
||||
// 获取一周的警情数据
|
||||
const getJQList = () =>{
|
||||
let params = { startTime: getRecentDay(-6)}
|
||||
qcckGet(params,'/mosty-jmxf/tbJq/getJqCount').then(res=>{
|
||||
ElNotification({
|
||||
title:'Success',
|
||||
message:`近一周的警情有${res}条数据！`,
|
||||
type:'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function checkQwdj(val) {
|
||||
let obj = D_BZ_DJQW.value.find(v=>{
|
||||
return vala == v.value
|
||||
})
|
||||
if(obj) form.value.qwdjmc = obj.label
|
||||
if (form.value.qwdj == "01") {
|
||||
form.value.jyzqclbl = 100;
|
||||
form.value.jyzqrybl = 100;
|
||||
} else if (form.value.qwdj == "02") {
|
||||
form.value.jyzqclbl = 50;
|
||||
form.value.jyzqrybl = 50;
|
||||
} else {
|
||||
form.value.jyzqclbl = 34;
|
||||
form.value.jyzqrybl = 34;
|
||||
}
|
||||
}
|
||||
//查看警力情况
|
||||
function getJlqk(row) {
|
||||
jlqkVisible.value = true;
|
||||
}
|
||||
//上传
|
||||
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {
|
||||
jyzqclbl: 34,
|
||||
jyzqrybl: 34,
|
||||
qwQzsj: [],
|
||||
sfxj:'0'
|
||||
};
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
title.value = "修改勤务等级";
|
||||
getQwdjInfo(row.id).then((res) => {
|
||||
bcBtn.value = true;
|
||||
form.value = res;
|
||||
form.value.qwQzsj = [res.qwkssj, res.qwjssj];
|
||||
chackAdd.value = false;
|
||||
fileEdit.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//详情
|
||||
function info(row) {
|
||||
title.value = "勤务等级详情";
|
||||
bcBtn.value = false;
|
||||
getQwdjInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
form.value.qwQzsj = [res.qwkssj, res.qwjssj];
|
||||
chackAdd.value = false;
|
||||
fileEdit.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//发布
|
||||
function fabu(row) {
|
||||
proxy
|
||||
.$confirm("请确认发布此等级勤务", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
tableData.value.forEach((v) => {
|
||||
if (v.id == row.id) {
|
||||
v.btnLoading = true;
|
||||
fabuzt({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "发布成功"
|
||||
});
|
||||
v.btnLoading = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//结束勤务
|
||||
function jsQw(row) {
|
||||
proxy
|
||||
.$confirm("请确认结束此等级勤务", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
row.fbzt = "2";
|
||||
tableData.value.forEach((v) => {
|
||||
if (v.id == row.id) {
|
||||
v.btnLoading = true;
|
||||
updateQwdj(row).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "已结束该等级勤务"
|
||||
});
|
||||
v.btnLoading = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
if (row.fbzt === "1") {
|
||||
proxy.$message({
|
||||
type: "error",
|
||||
message: "勤务已经发布，不能删除!!"
|
||||
});
|
||||
} else {
|
||||
proxy
|
||||
.$confirm("确定删除当前勤务等级？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
deleteQwdj(row.id).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getqwdj(listQuery.value).then((res) => {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function add() {
|
||||
bcBtn.value = true;
|
||||
title.value = "新增勤务等级";
|
||||
chackAdd.value = true;
|
||||
fileEdit.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
getJQList()
|
||||
formReset();
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
const data = {
|
||||
...form.value,
|
||||
qwkssj:form.value.qwQzsj[0],
|
||||
qwjssj:form.value.qwQzsj[1]
|
||||
}
|
||||
delete data.qwQzsj
|
||||
|
||||
if (chackAdd.value) {
|
||||
addQwdj(data).then(() => {
|
||||
btnLoading.value = false;
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
}).catch(()=>{
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
data.id = form.value.id
|
||||
updateQwdj(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
btnLoading.value = false;
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
}).catch(()=>{
|
||||
btnLoading.value = false;
|
||||
});;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
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 - 220;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,473 +0,0 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="起止日期">
|
||||
<el-date-picker
|
||||
v-model="Qzrq"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="upQzrq"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请假人部门">
|
||||
<MOSTY.Department
|
||||
width="180px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="listQuery.sqbmid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请假人类型">
|
||||
<el-select
|
||||
style="width: 180px"
|
||||
v-model="listQuery.sqrlx"
|
||||
placeholder="请选择请假人类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SQRLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="请假人">
|
||||
<el-input
|
||||
style="width: 180px"
|
||||
placeholder="请填写请假人"
|
||||
v-model="listQuery.sqrXm"
|
||||
>
|
||||
</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
|
||||
ref="dataTreeList"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqrlx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="100"
|
||||
label="请假人类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_SQRLX" :value="row.sqrlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqrXm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="请假人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sqbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="请假人部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="kssj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="起止日期"
|
||||
width="320"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{ row.kssj.substring(0, 10) + "—" + row.jssj.substring(0, 10) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="qjlx"
|
||||
show-overflow-tooltip
|
||||
width="100"
|
||||
align="center"
|
||||
label="请假类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_QXJLX" :value="row.qjlx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtCjsj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="200"
|
||||
label="申请时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtCjr"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="录入人"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xtCjbmmc"
|
||||
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="addEdit('edit', row.id)" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button type="danger" size="small" @click="delDictItem(row)"
|
||||
>删除</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: 30%" prop="sqrlx" label="申请人类型">
|
||||
<el-select placeholder="请选择申请人类型" style="width: 100%" v-model="form.sqrlx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SQRLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 30%" prop="sqbmdm" label="申请人部门">
|
||||
<MOSTY.Department
|
||||
width="180px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="form.sqbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 30%" prop="sqrXm" label="申请人">
|
||||
<el-input
|
||||
@click="chooseUserVisible = true"
|
||||
v-model="form.sqrXm"
|
||||
placeholder="请选择申请人"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 30%" prop="sqrSfzh" label="身份证号">
|
||||
<el-input
|
||||
v-model="form.sqrSfzh"
|
||||
placeholder="请输入身份证号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 30%" prop="qjlx" label="请假类型">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="form.qjlx"
|
||||
filterable
|
||||
placeholder="请选择请假类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in D_BZ_QXJLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 62%" prop="QzrqForm" required label="起止日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.QzrqForm"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="upQzrqForm"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请假原因" prop="qjyy" style="width: 94%">
|
||||
<el-input
|
||||
v-model="form.qjyy"
|
||||
placeholder="请输入请假原因"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" style="width: 94%">
|
||||
<el-input
|
||||
v-model="form.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisible"
|
||||
:PoliceType="form.sqrlx == '01' ? 'MJ' : 'FJ'"
|
||||
:Single="true"
|
||||
@choosedPolice="hanlderChoose"
|
||||
></ChooseUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseUser from "@/components/MyComponents/choosePolice";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { getQwQxj, addQwQxj, deleteQwQxj, getQwQxjInfo, updateQwQxj } from "@/api/service/pleaseTake.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_QXJLX, D_BZ_SQRLX } = proxy.$dict("D_BZ_QXJLX", "D_BZ_SQRLX");
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const Qzrq = ref([]); //搜索日期
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const chooseUserVisible = ref(false);//人员弹窗
|
||||
const title = ref("新增人员请休假");
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
//表单数据
|
||||
const form = ref({
|
||||
QzrqForm: []
|
||||
});
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
sqrXm: [{ required: true, message: "请输入申请人员", trigger: ['blur','change'] }],
|
||||
sqrlx: [{ required: true, message: "请选择申请人类型", trigger: "change" }],
|
||||
QzrqForm: [{ required: true, message: "请选择请假日期", trigger: "change" }],
|
||||
sqbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
||||
qjyy: [{ required: true, message: "请输入请假原因", trigger: "blur" }],
|
||||
qjlx: [{ required: true, message: "请输入请假类型", trigger: "change" }],
|
||||
...rule.identityCardRule( {require: true,trigger: ['blur','change'], message: "请输入身份证号",validator: true},"sqrSfzh"), //身份证校验
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => { keyCount.value = data; });
|
||||
tabHeightFn();
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
});
|
||||
// 查询
|
||||
function handleFilter() {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
Qzrq.value = [];
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
getQwQxj(listQuery.value).then((res) => {
|
||||
total.value = res.total;
|
||||
tableData.value = res.records;
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索切换时间
|
||||
function upQzrq(val) {
|
||||
listQuery.value.kssj = val.length > 0 ? val[0] : "";
|
||||
listQuery.value.jssj = val.length > 0 ? val[1] : "";
|
||||
}
|
||||
//新增时间切换
|
||||
function upQzrqForm(val) {
|
||||
form.value.kssj = val.length > 0 ? val[0] : "";
|
||||
form.value.jssj = val.length > 0 ? val[1] : "";
|
||||
}
|
||||
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.sqrXm = user.xm;
|
||||
form.value.sqrId = user.fl === "01" ? user.ryid : user.id;
|
||||
form.value.sqbm = user.ssbm;
|
||||
form.value.sqrSfzh = user.sfzh;
|
||||
form.value.lxdh = user.lxdh;
|
||||
};
|
||||
|
||||
//新增-编辑
|
||||
async function addEdit(type, id) {
|
||||
dialogFormVisible.value = true;
|
||||
if (type == "add") {
|
||||
title.value = "新增人员请休假";
|
||||
} else {
|
||||
title.value = "人员请休假修改";
|
||||
getQwQxjInfo(id).then((res) => {
|
||||
form.value = res;
|
||||
form.value.QzrqForm = [res.kssj, res.jssj];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//注销
|
||||
function delDictItem(row) {
|
||||
proxy.$confirm("确定删除该数据？", "警告", { type: "warning" }).then(() => {
|
||||
deleteQwQxj(row.id).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getListData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
function closeDialog() {
|
||||
dialogFormVisible.value = false;
|
||||
btnLoading.value = false;
|
||||
form.value = {};
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
delete form.value.QzrqForm;
|
||||
if (title.value == "新增人员请休假") {
|
||||
addQwQxj(form.value).then((res) => {
|
||||
closeDialog();
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
getListData();
|
||||
}).catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
updateQwQxj(form.value).then(() => {
|
||||
closeDialog();
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
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";
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
</style>
|
||||
@ -1,81 +0,0 @@
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted, defineProps, watch } from "vue";
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
data: { type: Array }
|
||||
});
|
||||
watch(
|
||||
() => prop.data,
|
||||
() => {
|
||||
upEchares();
|
||||
}
|
||||
);
|
||||
//echarts容器
|
||||
const pieEchart = ref(null);
|
||||
//配置echarts
|
||||
function getOption() {
|
||||
const option = {
|
||||
title: {
|
||||
text: prop.title,
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255, 1)",
|
||||
fontSize: "12px"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
top: "10%",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255, 1)",
|
||||
fontSize: "12px"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: prop.title,
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
center: ["50%", "65%"],
|
||||
data: prop.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
//初始化
|
||||
function upEchares() {
|
||||
echarts.init(pieEchart.value).setOption(getOption());
|
||||
}
|
||||
onMounted(() => {
|
||||
upEchares();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="pie">
|
||||
<div ref="pieEchart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,666 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">警力报备</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
|
||||
<el-button 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="180px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="listQuery.deptIds"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tongji">
|
||||
统计人数：在岗民警<span>{{ tongjiData.zgmjs }}</span
|
||||
>人， 不在岗民警 <span>{{ tongjiData.bzgmjs }}</span
|
||||
>人， 在岗率
|
||||
<span>{{ percentage(tongjiData.zgmjs, tongjiData.bzgmjs) }}</span
|
||||
>； 在岗辅警 <span>{{ tongjiData.zgfjs }}</span
|
||||
>人， 不在岗辅警 <span>{{ tongjiData.bzgfjs }}</span
|
||||
>人， 在岗率
|
||||
<span>{{ percentage(tongjiData.zgfjs, tongjiData.bzgfjs) }}</span
|
||||
>
|
||||
<!-- ；街面民警 <span>{{ tongjiData.jmmj }}</span
|
||||
>人， 街面辅警 <span>{{ tongjiData.jmfj }}</span
|
||||
>人 -->
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<div class="title">统计图表：</div>
|
||||
<div class="item" v-for="(item, index) in echdata" :key="index">
|
||||
<PieEcharts :data="item.data" :title="item.title" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
ref="dataTreeList"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'itemList', hasChildren: true }"
|
||||
style="width: 100%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="开始时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="结束时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="在岗民警"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="在岗辅警"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="值班民警"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="值班辅警"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="不在岗民警"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop=""
|
||||
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-button type="danger" @click="delDictItem(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 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"
|
||||
>
|
||||
<div class="from_label">勤务班次</div>
|
||||
<el-form-item label="巡防部门" prop="">
|
||||
<el-cascader
|
||||
v-if="!chackipt"
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
v-model="form.ssbmdm"
|
||||
:options="depList"
|
||||
:props="props"
|
||||
@change="handleChange"
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="form.ssbm"
|
||||
v-if="chackipt"
|
||||
@focus="focusF"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="起止时间" style="width: 48%">
|
||||
<el-date-picker
|
||||
v-model="qzSj"
|
||||
style="width: 100%"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
@change="changeQzSj"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/></el-form-item>
|
||||
<el-form-item style="width: 48%" label="在岗民警" prop="">
|
||||
<el-input
|
||||
@click="zgMjVisible = true"
|
||||
v-model="mjtext"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
readonly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="在岗辅警" prop="">
|
||||
<el-input
|
||||
@click="zgFjVisible = true"
|
||||
v-model="fjtext"
|
||||
readonly
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="值班民警" prop="">
|
||||
<el-input
|
||||
@click="zbMjVisible = true"
|
||||
v-model="mjtext"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
readonly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="值班辅警" prop="">
|
||||
<el-input
|
||||
@click="zbFjVisible = true"
|
||||
v-model="fjtext"
|
||||
readonly
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="不在岗民警" prop="">
|
||||
<el-input
|
||||
@click="bzgMjVisible = true"
|
||||
v-model="mjtext"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
readonly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="不在岗辅警" prop="">
|
||||
<el-input
|
||||
@click="bzgFjVisible = true"
|
||||
v-model="fjtext"
|
||||
readonly
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<MjLoad v-model="zgMjVisible" @choosedUsers="hanlderChooseZgMj" />
|
||||
<FjLoad v-model="zgFjVisible" @choosedUsers="hanlderChooseZgFj" />
|
||||
<MjLoad v-model="zbMjVisible" @choosedUsers="hanlderChooseZbMj" />
|
||||
<FjLoad v-model="zbFjVisible" @choosedUsers="hanlderChooseZbFj" />
|
||||
<MjLoad v-model="bzgMjVisible" @choosedUsers="hanlderChooseBzgMj" />
|
||||
<FjLoad v-model="bzgFjVisible" @choosedUsers="hanlderChooseBzgFj" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
|
||||
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import PieEcharts from "./components/PieEcharts.vue";
|
||||
import { getQwbc } from "@/api/service/shift.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import {
|
||||
getJlbb,
|
||||
addJlbb,
|
||||
deleteJlbb,
|
||||
getJlbbInfo,
|
||||
updateJlbb,
|
||||
getCountBmjlbb
|
||||
} from "@/api/service/policeForceReport.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tongjiData = ref({});
|
||||
const qzSj = ref([]);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const cascader = ref(null);
|
||||
const tableData = ref([]); //表格数据
|
||||
const depList = ref([]); //部门数据
|
||||
const chackipt = ref(true);
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const chooseUserVisible = ref(false);
|
||||
const chooseList = ref([]);
|
||||
const qwbaDataList = ref([]);
|
||||
const title = ref("警力报备");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const zgMjVisible = ref(false); //在岗民警弹窗
|
||||
const zgMjData = ref([]);
|
||||
const zgFjVisible = ref(false); //在岗辅警弹窗
|
||||
const zgFjData = ref([]);
|
||||
const bzgMjVisible = ref(false); //不在岗民警弹窗
|
||||
const bzgMjData = ref([]);
|
||||
const bzgFjVisible = ref(false); //不在岗辅警弹窗
|
||||
const bzgFjData = ref([]);
|
||||
const zbMjVisible = ref(false); //值班民警弹窗
|
||||
const zbMjData = ref([]);
|
||||
const zbFjVisible = ref(false); //值班辅警弹窗
|
||||
const zbFjData = ref([]);
|
||||
//图表数据
|
||||
const echdata = ref([
|
||||
{
|
||||
title: "警种统计",
|
||||
data: [
|
||||
{ value: 0, name: "民警" },
|
||||
{ value: 0, name: "辅警" },
|
||||
{ value: 0, name: "特警" },
|
||||
{ value: 0, name: "交警" },
|
||||
{ value: 0, name: "辅警" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
data: [
|
||||
{ value: 0, name: "男" },
|
||||
{ value: 0, name: "女" },
|
||||
{ value: 0, name: "未知" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人员类型",
|
||||
data: [
|
||||
{ value: 0, name: "民警" },
|
||||
{ value: 0, name: "辅警" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "年龄分布",
|
||||
data: [
|
||||
{ value: 0, name: "0~30" },
|
||||
{ value: 0, name: "31~40" },
|
||||
{ value: 0, name: "41~50" },
|
||||
{ value: 0, name: "50以上" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
function changeQzSj() {
|
||||
if (qzSj.value.length == 2) {
|
||||
form.value.kssj = qzSj.value.length[0];
|
||||
form.value.jssj = qzSj.value.length[1];
|
||||
}
|
||||
}
|
||||
//百分比转化
|
||||
function percentage(a, b) {
|
||||
let data = "--";
|
||||
if (a + b == 0) {
|
||||
data = "0%";
|
||||
} else {
|
||||
data = ((a / (a + b)) * 100).toFixed(2) + "%";
|
||||
}
|
||||
return data != NaN + "%" ? data : "--";
|
||||
}
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//表单验证
|
||||
const rules = reactive({});
|
||||
//获取警力报备统计数据
|
||||
function getBbtj() {
|
||||
getCountBmjlbb().then((res) => {
|
||||
tongjiData.value = res;
|
||||
echdata.value[1].data = res.xbtj.map((item) => {
|
||||
let name = "未知";
|
||||
if (item.type == "1") {
|
||||
name = "男";
|
||||
} else if (item.type == "2") {
|
||||
name = "女";
|
||||
}
|
||||
return { value: item.sl, name };
|
||||
});
|
||||
echdata.value[2].data = res.rylxtj.map((item) => {
|
||||
return { value: item.sl, name: item.type == "01" ? "民警" : "辅警" };
|
||||
});
|
||||
echdata.value[3].data = res.nlfbtj.map((item) => {
|
||||
let name = "";
|
||||
if (item.type == "1") {
|
||||
name = "0~30";
|
||||
} else if (item.type == "2") {
|
||||
name = "31~40";
|
||||
} else if (item.type == "3") {
|
||||
name = "31~50";
|
||||
} else {
|
||||
name = "50以上";
|
||||
}
|
||||
return { value: item.sl, name };
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//警力弹窗回调
|
||||
function hanlderChooseZgMj(data) {
|
||||
}
|
||||
function hanlderChooseZgFj() {}
|
||||
function hanlderChooseZbMj() {}
|
||||
function hanlderChooseZbFj() {}
|
||||
function hanlderChooseBzgMj() {}
|
||||
function hanlderChooseBzgFj() {}
|
||||
//获取列表数据
|
||||
function getQwbcData() {
|
||||
let params = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000
|
||||
};
|
||||
getQwbc(params).then((res) => {
|
||||
qwbaDataList.value = res.records;
|
||||
});
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//查询条件选择部门
|
||||
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 reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
chackipt.value = false;
|
||||
resetForm();
|
||||
title.value = "警力报备";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
// 选中某个班次
|
||||
function chooseSomeOne(item) {
|
||||
chooseList.value.push(item);
|
||||
}
|
||||
function focusF() {
|
||||
chackipt.value = false;
|
||||
}
|
||||
//删除某个班次
|
||||
function deleteBc(val) {
|
||||
chooseList.value = chooseList.value.filter((item) => {
|
||||
return item.id != val.id;
|
||||
});
|
||||
}
|
||||
//修改
|
||||
function update() {
|
||||
chackipt.value = true;
|
||||
resetForm();
|
||||
title.value = "警力报备修改";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//注销
|
||||
function delDictItem() {
|
||||
proxy.$confirm("确定要删除", "警告", {
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
getJlbb(listQuery.value).then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
// formReset();
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
});
|
||||
getBbtj();
|
||||
getListData();
|
||||
getQwbcData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</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: "分钟";
|
||||
}
|
||||
.tongji {
|
||||
line-height: 28px;
|
||||
color: #81c3ed;
|
||||
> span {
|
||||
font-size: 24px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
height: 160px;
|
||||
color: #81c3ed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
.chooce-bc {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.chooce-bc-top {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
border: 1px solid #03438b;
|
||||
.bc-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.colose {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.choose-bc-bottom {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
border: 1px solid #03438b;
|
||||
.bc-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.chooce-bc-btn-box {
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.chooce-bc-btn-item {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
margin-right: 7px;
|
||||
margin-bottom: 4px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
background: orange;
|
||||
border-radius: 10px;
|
||||
.item {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.from_label {
|
||||
width: 100%;
|
||||
line-height: 2.5em;
|
||||
text-indent: -68px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -1,714 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">Banner设置</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="listQuery.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间">
|
||||
<el-date-picker
|
||||
v-model="seqwQzsj"
|
||||
type="datetimerange"
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</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%"
|
||||
:key="keyCount"
|
||||
:height="tableHeight"
|
||||
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
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="Banner图"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.tp" fit="cover" style="width: 80px;height:90px"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="标题"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="qwdj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="200px"
|
||||
sortable
|
||||
label="时间"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_DJQW" :value="row.qwdj" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="排序"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jyzqclbl"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="状态"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="350px"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="delDictItem(row)"
|
||||
>删除</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"
|
||||
:loading="btnLoading"
|
||||
v-if="bcBtn"
|
||||
@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: 100%" label="照片上传" prop="form.photo">
|
||||
<MOSTY.Upload
|
||||
width="800px"
|
||||
:limit="1"
|
||||
v-model="form.photo"
|
||||
></MOSTY.Upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="twoh"
|
||||
prop="qwyy"
|
||||
label="标题"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.qwyy"
|
||||
placeholder="请填写标题"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="twoh"
|
||||
prop="qwyy"
|
||||
label="排序"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.qwyy"
|
||||
placeholder="请填写序号"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" style="width: 100%">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio label="1">正常</el-radio>
|
||||
<el-radio label="2">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="qwQzsj" label="时间" style="width: 100%">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="form.qwQzsj"
|
||||
type="datetimerange"
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
range-separator="至"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="jlqkVisible" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">警力情况</span>
|
||||
<div>
|
||||
<el-button size="small" @click="jlqkVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:default-expand-all="ijhpand"
|
||||
: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
|
||||
sortable
|
||||
prop="ksrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="开始日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jsrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="结束日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jmxzs"
|
||||
label="街面巡组数"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfmjs"
|
||||
label="巡防民警数"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xffjs"
|
||||
show-overflow-tooltip
|
||||
label="巡防辅警数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="xfcls"
|
||||
show-overflow-tooltip
|
||||
label="巡防车辆数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="znzbs"
|
||||
show-overflow-tooltip
|
||||
label="智能装备数"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="jyqxs"
|
||||
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="listQueryzq.pageCurrent"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="listQueryzq.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="totalzq"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch
|
||||
} from "vue";
|
||||
import {
|
||||
fabuzt,
|
||||
getqwdj,
|
||||
addQwdj,
|
||||
deleteQwdj,
|
||||
getQwdjInfo,
|
||||
updateQwdj
|
||||
} from "@/api/service/grade.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const jlqkVisible = ref(false); //警力情况弹窗
|
||||
const title = ref("新增勤务等级");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_DJQW, D_BZ_ZXFW } = proxy.$dict("D_BZ_DJQW", "D_BZ_ZXFW");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const tableHeight1 = ref(); // 表格高度
|
||||
const tableData = ref([]); //表格数据
|
||||
const seqwQzsj = ref([]);
|
||||
watch(
|
||||
() => seqwQzsj.value,
|
||||
(val) => {
|
||||
listQuery.value.qwkssj = val[0] || "";
|
||||
listQuery.value.qwjssj = val[1] || "";
|
||||
}
|
||||
);
|
||||
const elform = ref(null);
|
||||
const chackAdd = ref(false);
|
||||
const total = ref(0);
|
||||
const totalzq = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const bcBtn = ref(true);
|
||||
const fileEdit = ref(true);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const loadingTable = ref(false);
|
||||
const zqjlData = ref([
|
||||
{
|
||||
ksrq: "2022/07/22",
|
||||
jsrq: "2022/07/23",
|
||||
jmxzs: 6,
|
||||
xfmjs: 8,
|
||||
xffjs: 20,
|
||||
xfcls: 12,
|
||||
znzbs: 35,
|
||||
jyqxs: 50
|
||||
},
|
||||
{
|
||||
ksrq: "2022/07/22",
|
||||
jsrq: "2022/07/23",
|
||||
jmxzs: 6,
|
||||
xfmjs: 8,
|
||||
xffjs: 20,
|
||||
xfcls: 12,
|
||||
znzbs: 35,
|
||||
jyqxs: 50
|
||||
}
|
||||
]);
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const listQueryzq = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
jyzqclbl: 34,
|
||||
jyzqrybl: 34,
|
||||
zxfw: "03",
|
||||
qwQzsj: []
|
||||
});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
qwdj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务等级",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwkssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务开始日期",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwjssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择勤务结束日期",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
zxfw: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择执行范围",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
qwQzsj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择起止时间",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
// 文件改变事件
|
||||
function changeFile(data) {
|
||||
form.value.fjdz = data;
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
seqwQzsj.value = [];
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
|
||||
function checkQwdj() {
|
||||
if (form.value.qwdj == "01") {
|
||||
form.value.jyzqclbl = 100;
|
||||
form.value.jyzqrybl = 100;
|
||||
} else if (form.value.qwdj == "02") {
|
||||
form.value.jyzqclbl = 50;
|
||||
form.value.jyzqrybl = 50;
|
||||
} else {
|
||||
form.value.jyzqclbl = 34;
|
||||
form.value.jyzqrybl = 34;
|
||||
}
|
||||
}
|
||||
//查看警力情况
|
||||
function getJlqk(row) {
|
||||
jlqkVisible.value = true;
|
||||
}
|
||||
//上传
|
||||
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = {
|
||||
jyzqclbl: 34,
|
||||
jyzqrybl: 34,
|
||||
zxfw: "03",
|
||||
qwQzsj: []
|
||||
};
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
title.value = "修改勤务等级";
|
||||
getQwdjInfo(row.id).then((res) => {
|
||||
bcBtn.value = true;
|
||||
form.value = res;
|
||||
form.value.qwQzsj = [res.qwkssj, res.qwjssj];
|
||||
chackAdd.value = false;
|
||||
fileEdit.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//详情
|
||||
function info(row) {
|
||||
title.value = "勤务等级详情";
|
||||
bcBtn.value = false;
|
||||
getQwdjInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
form.value.qwQzsj = [res.qwkssj, res.qwjssj];
|
||||
chackAdd.value = false;
|
||||
fileEdit.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//发布
|
||||
function fabu(row) {
|
||||
proxy
|
||||
.$confirm("请确认发布此等级勤务", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
tableData.value.forEach((v) => {
|
||||
if (v.id == row.id) {
|
||||
v.btnLoading = true;
|
||||
fabuzt({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "发布成功"
|
||||
});
|
||||
v.btnLoading = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//结束勤务
|
||||
function jsQw(row) {
|
||||
proxy
|
||||
.$confirm("请确认结束此等级勤务", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
row.fbzt = "2";
|
||||
tableData.value.forEach((v) => {
|
||||
if (v.id == row.id) {
|
||||
v.btnLoading = true;
|
||||
updateQwdj(row).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "已结束该等级勤务"
|
||||
});
|
||||
v.btnLoading = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//删除
|
||||
function delDictItem(row) {
|
||||
if (row.fbzt === "1") {
|
||||
proxy.$message({
|
||||
type: "error",
|
||||
message: "勤务已经发布，不能删除!!"
|
||||
});
|
||||
} else {
|
||||
proxy
|
||||
.$confirm("确定删除当前勤务等级？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
deleteQwdj(row.id).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getqwdj(listQuery.value).then((res) => {
|
||||
tableData.value = res.records.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
btnLoading: false
|
||||
};
|
||||
});
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});;
|
||||
}
|
||||
|
||||
function add() {
|
||||
bcBtn.value = true;
|
||||
title.value = "新增勤务等级";
|
||||
chackAdd.value = true;
|
||||
fileEdit.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
formReset();
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
formReset();
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
const data = {}
|
||||
data.zxfw = form.value.zxfw
|
||||
data.jyzqclbl = form.value.jyzqclbl
|
||||
data.jyzqrybl = form.value.jyzqrybl
|
||||
data.qwdj = form.value.qwdj
|
||||
data.qwkssj = form.value.qwQzsj[0]
|
||||
data.qwjssj = form.value.qwQzsj[1]
|
||||
data.fjdz = form.value.fjdz?form.value.fjdz:''
|
||||
data.qwyy = form.value.qwyy?form.value.qwyy:''
|
||||
data.qwyq = form.value.qwyq?form.value.qwyq:''
|
||||
data.bz = form.value.bz?form.value.bz:''
|
||||
|
||||
if (chackAdd.value) {
|
||||
addQwdj(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
data.id = form.value.id
|
||||
updateQwdj(data).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
*/
|
||||
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 - 130;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,52 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">部门值班日历</div>
|
||||
</div>
|
||||
<ZbCalendar :list="list" v-if="list.length > 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import ZbCalendar from '@/components/ZbCalendar/index'
|
||||
|
||||
//日历组件key
|
||||
//日历数据
|
||||
const list = ref([])
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
list.value = [{
|
||||
"title": "值班 50人",
|
||||
"start": "2022-07-04T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "值班 20人",
|
||||
"start": "2022-07-05T12:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "值班 50人",
|
||||
"start": "2022-07-06T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "备勤 50人",
|
||||
"start": "2022-07-06T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "请休假 50人",
|
||||
"start": "2022-07-06T07:00:00+00:00"
|
||||
}
|
||||
]
|
||||
}, 0.3e3)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
</style>
|
||||
@ -1,201 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2022-11-01 14:39:19
|
||||
* @LastEditTime: 2022-11-01 16:48:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \rsga\src\views\service\shifTscheduling\index\downXlsx.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
title="导出预览"
|
||||
width="800px"
|
||||
:model-value="modelValue"
|
||||
@close="closed"
|
||||
>
|
||||
<el-form class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="请选择月份">
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="month"
|
||||
@change="serchList"
|
||||
:clearable="false"
|
||||
value-format="YYYY-MM"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="tabList"
|
||||
:span-method="objectSpanMethod"
|
||||
height="60vh"
|
||||
id="downid"
|
||||
style="width: 100%"
|
||||
v-loading="loadingtable"
|
||||
element-loading-background="rgba(0,0,0,0.3)"
|
||||
element-loading-text="数据加载中。。"
|
||||
border
|
||||
>
|
||||
<el-table-column label="序号" align="center" type="index" width="60" />
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="日期"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column label="星期" prop="time" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<span>{{ getWeek(row.time) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zbldXm"
|
||||
label="值班长"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column prop="zbmj" label="值班员" align="center">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{
|
||||
[...JSON.parse(row.zbmj), ...JSON.parse(row.zbfj)]
|
||||
.map((item) => item.jlxm)
|
||||
.join("、")
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closed">关闭</el-button>
|
||||
<el-button :disabled="tabList.length===0" type="primary" @click="exportExcel">导出</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted, reactive } from "vue";
|
||||
import { exportData } from "@/api/service/shifTscheduling.js";
|
||||
import FileSaver from "file-saver";
|
||||
import * as XLSX from "xlsx";
|
||||
const tabRef = ref(null);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
const arr = ref([]);
|
||||
const loadingtable = ref(false)
|
||||
//列表行合并
|
||||
const objectSpanMethod = ({ row, colum, rowIndex, columnIndex }) => {
|
||||
if (columnIndex === 1) {
|
||||
return {
|
||||
rowspan: arr.value[rowIndex],
|
||||
colspan: 1
|
||||
};
|
||||
}
|
||||
};
|
||||
const value = ref();
|
||||
//生成列表合并集合
|
||||
function tempMerges() {
|
||||
//列表合并集合
|
||||
const a = [];
|
||||
//日期数组
|
||||
const b = [];
|
||||
//时间重合数据集
|
||||
const c = tabList.value.map((item) => {
|
||||
a.push(0);
|
||||
if (b.indexOf(item.time) === -1) {
|
||||
b.push(item.time);
|
||||
}
|
||||
return {
|
||||
time: item.time,
|
||||
num: tabList.value.filter((tab) => tab.time === item.time).length
|
||||
};
|
||||
});
|
||||
b.forEach((v) => {
|
||||
const index = c.map((item) => item.time).indexOf(v);
|
||||
a[index] = c[index].num;
|
||||
});
|
||||
return a;
|
||||
}
|
||||
//列表数据
|
||||
const tabList = ref([]);
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
// 导出配置
|
||||
const dcText = reactive({
|
||||
title: "导出"
|
||||
});
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
function exportExcel() {
|
||||
let xlsxParam = { raw: true };
|
||||
let wb = XLSX.utils.table_to_book(
|
||||
document.querySelector("#downid"),
|
||||
xlsxParam
|
||||
);
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array"
|
||||
});
|
||||
closed();
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`${dcText.title}.xlsx`
|
||||
);
|
||||
} catch (e) {
|
||||
if (typeof console !== "undefined") console.log(e, wbout);
|
||||
}
|
||||
return wbout;
|
||||
}
|
||||
//获取列表数据
|
||||
function getList() {
|
||||
loadingtable.value = true
|
||||
exportData({ time: value.value, pbid: props.data.id }).then((res) => {
|
||||
tabList.value = res;
|
||||
arr.value = tempMerges();
|
||||
loadingtable.value = false
|
||||
});
|
||||
}
|
||||
function serchList(val) {
|
||||
getList();
|
||||
}
|
||||
onMounted(() => {
|
||||
value.value = getYm();
|
||||
getList();
|
||||
});
|
||||
|
||||
//获取某天星期
|
||||
function getWeek(time) {
|
||||
const weekArr = new Array(
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六"
|
||||
);
|
||||
var day = new Date(time);
|
||||
return weekArr[day.getDay()];
|
||||
}
|
||||
//获取当前年月
|
||||
function getYm() {
|
||||
const t = new Date();
|
||||
const y = t.getFullYear();
|
||||
const m = t.getMonth() < 9 ? "0" + (t.getMonth() + 1) : t.getMonth() + 1;
|
||||
return y + "-" + m;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,75 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">我的值班排班</div>
|
||||
<el-button style="margin-top: 12px" @click="active = !active">
|
||||
{{ active ? "列表模式" : "日历模式" }}
|
||||
</el-button>
|
||||
</div>
|
||||
<ZbCalendar @calClick="getListData" :list="list" v-if="active" />
|
||||
<List v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import List from "./list";
|
||||
import { getZbbbByMonth } from "@/api/service/shifTscheduling.js";
|
||||
import { ref, onMounted } from "vue";
|
||||
import ZbCalendar from "@/components/ZbCalendar/Calendar";
|
||||
//状态字典
|
||||
const ztDict = [
|
||||
{
|
||||
label: "未值班",
|
||||
value: "01",
|
||||
color: "#7b7b7b"
|
||||
},
|
||||
{
|
||||
label: "值班中",
|
||||
value: "02",
|
||||
color: "#51fb06"
|
||||
},
|
||||
{
|
||||
label: "值班",
|
||||
value: "03",
|
||||
color: "#0084ff"
|
||||
},
|
||||
{
|
||||
label: "请假",
|
||||
value: "04",
|
||||
color: "#f00"
|
||||
}
|
||||
];
|
||||
const active = ref(true);
|
||||
|
||||
//日历组件key
|
||||
//日历数据
|
||||
const list = ref([]);
|
||||
function getListData(e) {
|
||||
list.value = [];
|
||||
getZbbbByMonth({ time: e }).then((res) => {
|
||||
res.forEach((v) => {
|
||||
v.list.forEach((item) => {
|
||||
list.value.push({
|
||||
title: ztDict.filter((evn) => evn.value === item.zt)[0].label,
|
||||
day: v.day,
|
||||
start: e + "-" + v.day,
|
||||
end: e + "-" + v.day,
|
||||
time: item.time,
|
||||
color: ztDict.filter((evn) => evn.value === item.zt)[0].color
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
var time = new Date();
|
||||
getListData(time.getFullYear() + "-" + (time.getMonth() + 1));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,883 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="起止时间">
|
||||
<el-date-picker
|
||||
v-model="QzrqS"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="upQzrqS"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</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%"
|
||||
: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="zbpbksrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
sortable
|
||||
label="开始日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zbpbjsrq"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
sortable
|
||||
label="结束日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mrbc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="班次数量"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
class="mx-1"
|
||||
v-for="item in bcslOptions"
|
||||
v-show="item.value == row.mrbc"
|
||||
:key="item.value"
|
||||
>{{ item.label }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="xhlx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="排班类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
class="mx-1"
|
||||
v-for="item in D_BZ_PBXHLX"
|
||||
v-show="item.value == row.xhlx"
|
||||
:key="item.value"
|
||||
>{{ item.label }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="showInfo(row.id)" 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 size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="elform"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="值班部门">
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
v-model="formData.ssbmdm"
|
||||
:options="depList"
|
||||
@change="handleChange"
|
||||
:props="props"
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbpbksrq" label="开始日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="formData.zbpbksrq"
|
||||
placeholder="请选择"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="有无期限">
|
||||
<el-radio-group v-model="formData.jsrqlx">
|
||||
<el-radio label="0" size="large">无期限</el-radio>
|
||||
<el-radio label="1" size="large">有期限</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbpbjsrq" label="结束日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="formData.zbpbjsrq"
|
||||
placeholder="请选择"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="formData.jsrqlx == '0'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" label="循环周期">
|
||||
<el-radio-group v-model="formData.xhzq" @change="chooceDay">
|
||||
<el-radio :label="1">1天</el-radio>
|
||||
<el-radio :label="2">2天</el-radio>
|
||||
<el-radio :label="3">3天</el-radio>
|
||||
<el-radio :label="7">一周</el-radio>
|
||||
<el-radio :label="0">自定义</el-radio>
|
||||
<el-input-number
|
||||
v-model="dayCount"
|
||||
:min="1"
|
||||
@change="handleCOuntDay"
|
||||
:max="10"
|
||||
:disabled="formData.xhzq != 0"
|
||||
/>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="每日班次数量">
|
||||
<el-select
|
||||
v-model="formData.mrbc"
|
||||
placeholder="请选择"
|
||||
@change="chooseBc"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in bcslOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排班类型">
|
||||
<el-select v-model="formData.xhlx" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in D_BZ_PBXHLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-row v-for="(item, index) in list.zbList" :key="index">
|
||||
<div class="jgtitle">
|
||||
<div class="title">第{{ index + 1 }}天</div>
|
||||
</div>
|
||||
<el-row v-for="(v, i) in item.mrbclist" :key="i" class="zbbcList">
|
||||
<el-form-item label="值班领导">
|
||||
<el-input
|
||||
clearable
|
||||
@click="handleChoose(index, i, 'zzld')"
|
||||
style="width: 100%"
|
||||
v-model="v.zbld"
|
||||
placeholder="请选择"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbzhzXm" label="值班指挥长">
|
||||
<el-input
|
||||
clearable
|
||||
@click="handleChoose(index, i, 'zhz')"
|
||||
style="width: 100%"
|
||||
v-model="v.zbzhzXm"
|
||||
placeholder="请选择"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zzzhzXm" label="专职指挥长">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="v.zzzhzXm"
|
||||
@click="handleChoose(index, i, 'zzzhz')"
|
||||
placeholder="请选择"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzzbXm" label="法制值班">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="v.fzzbXm"
|
||||
@click="handleChoose(index, i, 'fzzb')"
|
||||
placeholder="请选择"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbdh" label="值班电话">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="v.zbdh"
|
||||
placeholder="请填写值班电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="hh" label="呼号">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="v.hh"
|
||||
placeholder="请填写呼号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="值班民警"
|
||||
@click.stop="choosePolice('MJ', index, i)"
|
||||
>
|
||||
<div class="ipt">
|
||||
<el-tag
|
||||
v-for="tag in v.mjList"
|
||||
:key="tag.id"
|
||||
class="mx-1"
|
||||
closable
|
||||
:type="tag.type"
|
||||
@close="handleClose(tag, 'mj', index, i)"
|
||||
>
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="值班辅警"
|
||||
@click.stop="choosePolice('FJ', index, i)"
|
||||
>
|
||||
<div class="ipt">
|
||||
<el-tag
|
||||
v-for="tag in v.fjList"
|
||||
:key="tag.id"
|
||||
class="mx-1"
|
||||
closable
|
||||
:type="tag.type"
|
||||
@close="handleClose(tag, 'fj', index, i)"
|
||||
>
|
||||
{{ tag.jlxm }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="qwbcid" label="值班班次">
|
||||
<el-radio-group v-model="v.qwbcid" @change="setQwbc(v)">
|
||||
<el-radio
|
||||
v-for="item in qwbaDataList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
>
|
||||
<div class="tags" :style="{ borderColor: item.bcys }">
|
||||
<span>{{ setHm(item.kssj) }}-{{ setHm(item.jssj) }}</span>
|
||||
<span>{{ item.bcmc }}</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="kssj" label="开始时间">
|
||||
<el-time-picker
|
||||
readonly
|
||||
style="width: 100%"
|
||||
v-model="v.kssj"
|
||||
format="HH时mm分"
|
||||
value-format="HH:mm:00"
|
||||
placeholder="请选择开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj" label="结束时间">
|
||||
<el-time-picker
|
||||
readonly
|
||||
style="width: 100%"
|
||||
format="HH时mm分"
|
||||
value-format="HH:mm:00"
|
||||
v-model="v.jssj"
|
||||
placeholder="请选择结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zbsc" label="值班时长">
|
||||
<el-input
|
||||
class="min"
|
||||
readonly
|
||||
v-model="v.zbsc"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="zblistLine"></div>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input
|
||||
v-model="formData.bz"
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/></el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisible"
|
||||
@choosedUsers="hanlderChoose"
|
||||
></ChooseUser>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisibleZz"
|
||||
@choosedUsers="hanlderChooseZz"
|
||||
></ChooseUser>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisibleFz"
|
||||
@choosedUsers="hanlderChooseFz"
|
||||
></ChooseUser>
|
||||
<ChooseUser
|
||||
v-model="chooseUserVisibleZh"
|
||||
@choosedUsers="hanlderChooseZh"
|
||||
></ChooseUser>
|
||||
<!-- 民警 -->
|
||||
<ChooseUser
|
||||
v-model="mjLoad"
|
||||
@choosedUsers="hanlderChooseMJLOAD"
|
||||
></ChooseUser>
|
||||
<!-- 辅警 -->
|
||||
<ChoosePolice
|
||||
v-model="choosePoliceVisible"
|
||||
:PoliceType="PoliceType"
|
||||
@choosedPolice="choosedPolice"
|
||||
>
|
||||
</ChoosePolice>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import ChoosePolice from "@/components/MyComponents/choosePolice";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { getQwbc } from "@/api/service/shift.js";
|
||||
import { getQwZbByUser, zbPbDetail } from "@/api/service/shifTscheduling.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onBeforeMount,
|
||||
nextTick
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_BZ_PBXHLX} = proxy.$dict('D_BZ_PBXHLX')
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const weekList = ref([]); //周下拉数据
|
||||
const weekListend = ref([]); //周下拉数据
|
||||
const QzrqS = ref([]);
|
||||
const mjLoad = ref(false); //民警弹窗
|
||||
const tableData = ref([]); //表格数据
|
||||
const cascader = ref(null);
|
||||
const chooseUserVisible = ref(false);
|
||||
const chooseUserVisibleFz = ref(false);
|
||||
const chooseUserVisibleZh = ref(false);
|
||||
const chooseUserVisibleZz = ref(false);
|
||||
const Qzrq = ref([]);
|
||||
const chackipt = ref(true);
|
||||
const depList = ref([]); //部门数据
|
||||
const loadingtable = ref(false);
|
||||
const formData = ref({
|
||||
jsrqlx: "0",
|
||||
mrbc: 1,
|
||||
xhzq: 1
|
||||
}); //多单数据表单
|
||||
//班次数量
|
||||
const bcslOptions = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: "一班"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "二班"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "三班"
|
||||
}
|
||||
]); // 每日班次
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
const choosePoliceVisible = ref(false); //民警辅警弹窗
|
||||
const PoliceType = ref(""); //民警辅警弹窗
|
||||
const fjText = ref("");
|
||||
const mjList = ref([]);
|
||||
const fjList = ref([]);
|
||||
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("值班排班新增");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
|
||||
const qwbaDataList = ref([]);
|
||||
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
function upQzrq() {
|
||||
form.value.ksrq = Qzrq.value[0];
|
||||
form.value.jsrq = Qzrq.value[1];
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
zbld: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择负责人",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择值班部门",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
function upQzrqS() {
|
||||
if (QzrqS.value.length == 2) {
|
||||
listQuery.value.zbpbksrq = QzrqS.value[0];
|
||||
listQuery.value.zbpbjsrq = QzrqS.value[1];
|
||||
}
|
||||
}
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
formData.value.ssbm = data[0].label
|
||||
}
|
||||
function setQwbc() {
|
||||
qwbaDataList.value.forEach((v) => {
|
||||
if (v.id == form.value.qwbcid) {
|
||||
form.value.kssj = v.kssj;
|
||||
form.value.jssj = v.jssj;
|
||||
form.value.qwbcid = v.id;
|
||||
form.value.zbsc = v.zbsc;
|
||||
}
|
||||
});
|
||||
}
|
||||
function getQwbcData() {
|
||||
let params = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000,
|
||||
bclx: "01"
|
||||
};
|
||||
getQwbc(params).then((res) => {
|
||||
qwbaDataList.value = res.records.map((item) => {
|
||||
return {
|
||||
bcys: item.bcys,
|
||||
kssj: item.kssj,
|
||||
jssj: item.jssj,
|
||||
id: item.id,
|
||||
zbsc: item.zqsc,
|
||||
bcmc: item.bcmc
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZbsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let end = new Date();
|
||||
end.setHours(form.value.jssj.split(":")[0]);
|
||||
end.setMinutes(form.value.jssj.split(":")[1]);
|
||||
let start = new Date();
|
||||
start.setHours(form.value.kssj.split(":")[0]);
|
||||
start.setMinutes(form.value.kssj.split(":")[1]);
|
||||
let time;
|
||||
if (end >= start) {
|
||||
time = parseInt(end - start) / 1000 / 60;
|
||||
} else {
|
||||
end.setDate(end.getDate() + 1);
|
||||
time = parseInt(end - start) / 1000 / 60;
|
||||
}
|
||||
form.value.zbsc = time;
|
||||
}
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
listQuery.value.pageSize = 20;
|
||||
getListData();
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
QzrqS.value = [];
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {};
|
||||
mjList.value = [];
|
||||
fjList.value = [];
|
||||
}
|
||||
// 去重
|
||||
function uprequrie (arr,type){
|
||||
let obj={}
|
||||
let mewArr = arr.reduce((item,next)=>{
|
||||
obj[next.zbzq]?'':obj[next.zbzq] = true && item.push(next)
|
||||
return item
|
||||
},[])
|
||||
return mewArr
|
||||
}
|
||||
let dataCopy = ref({
|
||||
zbld: "",
|
||||
zbzhzXm: "",
|
||||
zzzhzXm: "",
|
||||
fzzbXm: "",
|
||||
zbdh: "",
|
||||
hh: "",
|
||||
qwbcid: "",
|
||||
kssj: "",
|
||||
jssj: "",
|
||||
zbsc: "",
|
||||
mjList: [],
|
||||
fjList: []
|
||||
});
|
||||
const list = reactive({
|
||||
zbList: [
|
||||
{
|
||||
mrbclist: [dataCopy.value]
|
||||
}
|
||||
]
|
||||
});
|
||||
//修改
|
||||
function showInfo(id) {
|
||||
resetForm();
|
||||
title.value = "值班排班详情";
|
||||
// chackipt.value = true;
|
||||
zbPbDetail(id).then((res) => {
|
||||
dialogFormVisible.value =true
|
||||
formData.value.ssbmdm = parseInt(res.ssbmdm)
|
||||
formData.value.ssbm = res.ssbm
|
||||
formData.value.id = res.id
|
||||
formData.value.xhlx = res.xhlx
|
||||
formData.value.xhzq = res.xhzq
|
||||
formData.value.zbpbksrq = res.zbpbksrq
|
||||
formData.value.zbpbjsrq = res.zbpbjsrq
|
||||
formData.value.jsrqlx = res.jsrqlx
|
||||
formData.value.bz = res.bz
|
||||
formData.value.mrbc = res.mrbc
|
||||
let list1 = []
|
||||
let arr = []
|
||||
arr = uprequrie(res.pbzqList)
|
||||
arr.forEach((item,index)=>{
|
||||
let obj1 = {
|
||||
mrbclist:[]
|
||||
}
|
||||
res.pbzqList.forEach((v,t)=>{
|
||||
if(item.zbzq == v.zbzq){
|
||||
let mjList1 = []
|
||||
let fjlist1 = []
|
||||
item.jlList.forEach(c=>{
|
||||
if(c.jllx == '01'){
|
||||
mjList1.push(c)
|
||||
}
|
||||
if(c.jllx == '02'){
|
||||
fjlist1.push(c)
|
||||
}
|
||||
})
|
||||
v.mjList = mjList1
|
||||
v.fjList = fjlist1
|
||||
obj1.mrbclist.push(v)
|
||||
}
|
||||
})
|
||||
list1.push(obj1)
|
||||
})
|
||||
list.zbList = list1
|
||||
});
|
||||
}
|
||||
function handleClose(tag, type) {
|
||||
if (type == "mj") {
|
||||
mjList.value.splice(mjList.value.indexOf(tag), 1);
|
||||
}
|
||||
if (type == "fj") {
|
||||
fjList.value.splice(fjList.value.indexOf(tag), 1);
|
||||
}
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingtable.value = true;
|
||||
getQwZbByUser(listQuery.value).then((res) => {
|
||||
loadingtable.value = false;
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loadingtable.value = false;
|
||||
});;
|
||||
}
|
||||
//选择用户
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
form.value.zbld = user.userName;
|
||||
form.value.zbldId = user.id;
|
||||
form.value.zbdh = user.mobile;
|
||||
};
|
||||
//选择值班指挥长
|
||||
const hanlderChooseZh = (users) => {
|
||||
const user = users[0];
|
||||
form.value.zbzhzXm = user.userName;
|
||||
form.value.zbzhzId = user.id;
|
||||
};
|
||||
//选择专职指挥长
|
||||
const hanlderChooseZz = (users) => {
|
||||
const user = users[0];
|
||||
form.value.zzzhzXm = user.userName;
|
||||
form.value.zzzhzId = user.id;
|
||||
};
|
||||
//选择法制值班
|
||||
const hanlderChooseFz = (users) => {
|
||||
const user = users[0];
|
||||
form.value.fzzbXm = user.userName;
|
||||
form.value.fzzbId = user.id;
|
||||
};
|
||||
// 选择辅警
|
||||
function choosedPolice(police) {
|
||||
if (police.type == "FJ") {
|
||||
fjList.value = police.userList.map((item) => {
|
||||
fjText.value += item.xm + ";";
|
||||
return {
|
||||
jlId: item.id,
|
||||
jllx: "02",
|
||||
jlxm: item.xm,
|
||||
sfzh: item.sfzh,
|
||||
xbdm: item.xbdm,
|
||||
lxdh: item.lxdh
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
function hanlderChooseMJLOAD(users) {
|
||||
mjList.value = users.map((item) => {
|
||||
return {
|
||||
jlId: item.id,
|
||||
jllx: "01",
|
||||
jlxm: item.userName,
|
||||
sfzh: item.idEntityCard,
|
||||
xbdm: item.sex,
|
||||
lxdh: item.mobile
|
||||
};
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
dialogFormVisible.value = false;
|
||||
resetForm();
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
//选则民警、辅警
|
||||
function choosePolice(type) {
|
||||
if (type == "MJ") {
|
||||
mjLoad.value = true;
|
||||
} else {
|
||||
PoliceType.value = type;
|
||||
choosePoliceVisible.value = true;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
// 时分秒截取
|
||||
function setHm(item) {
|
||||
return item.split(":")[0] + ":" + item.split(":")[1];
|
||||
}
|
||||
onMounted(() => {
|
||||
getQwbcData();
|
||||
getListData();
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
});
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</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: "分钟";
|
||||
}
|
||||
.chooce-bc {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
border: 1px solid #03438b;
|
||||
padding: 4px 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chooce-bc-top {
|
||||
height: 150px;
|
||||
.bc-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.colose {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.choose-bc-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #6d6f73;
|
||||
}
|
||||
.choose-bc-bottom {
|
||||
height: 150px;
|
||||
.bc-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.chooce-bc-btn-box {
|
||||
height: 118px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.chooce-bc-btn-item {
|
||||
border: 2px solid;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
margin-right: 7px;
|
||||
margin-bottom: 4px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
.item {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
border: 2px solid;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
> span {
|
||||
line-height: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.ipt {
|
||||
border: 1px solid rgb(7, 85, 188);
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.min {
|
||||
position: relative;
|
||||
}
|
||||
.min::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
content: "分钟";
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">全县值班日历</div>
|
||||
</div>
|
||||
<ZbCalendar :list="list" v-if="list.length > 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineComponent,
|
||||
getCurrentInstance,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import ZbCalendar from '@/components/ZbCalendar/index'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
//日历组件key
|
||||
//日历数据
|
||||
const list = ref([])
|
||||
onMounted(() => {
|
||||
setTimeout(() =>{
|
||||
list.value = [{
|
||||
"title": "值班 50人",
|
||||
"start": "2022-07-04T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "值班 20人",
|
||||
"start": "2022-07-05T12:00:00+00:00"
|
||||
},
|
||||
{
|
||||
"title": "值班 50人",
|
||||
"start": "2022-07-06T07:00:00+00:00"
|
||||
}
|
||||
]
|
||||
}, 0.3e3)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
</style>
|
||||
@ -1,578 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">勤务班次</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</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.bcmc"
|
||||
placeholder="请输入班次名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排班级别">
|
||||
<el-select v-model="listQuery.pbjb" placeholder="请选择排班级别">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_PBJB"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排班类型">
|
||||
<el-select placeholder="请选择排班类型" v-model="listQuery.bclx">
|
||||
<el-option
|
||||
v-for="dict in D_BZ_PBLX"
|
||||
: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"
|
||||
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="index"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bcmc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="班次名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ssbm"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="所属部门"
|
||||
width="320"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pbjb"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="排班级别"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_PBJB" :value="row.pbjb" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bclx"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="排班类型"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_PBLX" :value="row.bclx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="kssj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="开始时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jssj"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="结束时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zqsc"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="值班时长"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.zqsc + "分钟" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="160"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button @click="update(row)" size="small">修改</el-button>
|
||||
<el-button type="danger" size="small" @click="delDictItem(row)"
|
||||
>注销</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 label="所属部门" prop="ssbmdm">
|
||||
<MOSTY.Department
|
||||
width="100%"
|
||||
:placeholder="form.ssbm"
|
||||
clearable
|
||||
v-model="form.ssbmdm"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="bclx" label="排班类型">
|
||||
<el-select v-model="form.bclx" readonly>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_PBLX"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcmc" label="班次名称">
|
||||
<el-input
|
||||
v-model="form.bcmc"
|
||||
placeholder="请输入班次名称"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="kssj" label="开始时间">
|
||||
<el-time-picker
|
||||
style="width: 100%"
|
||||
@change="setZqsc"
|
||||
v-model="form.kssj"
|
||||
format="HH时mm分"
|
||||
value-format="HH:mm:00"
|
||||
placeholder="请选择开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj" label="结束时间">
|
||||
<el-time-picker
|
||||
style="width: 100%"
|
||||
@change="setZqsc"
|
||||
format="HH时mm分"
|
||||
value-format="HH:mm:00"
|
||||
v-model="form.jssj"
|
||||
placeholder="请选择结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zqsc" label="执勤时长">
|
||||
<el-input
|
||||
class="min"
|
||||
readonly
|
||||
v-model="form.zqsc"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="pbjb" label="排班级别">
|
||||
<el-select
|
||||
v-model="form.pbjb"
|
||||
@change="pbjbChange"
|
||||
placeholder="请选择排班级别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_PBJB"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="适用部门" prop="ssbmdm" v-if="form.pbjb == '03'">
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
ref="cascader"
|
||||
v-model="form.ssbmdm"
|
||||
:options="depList"
|
||||
@change="handleChange"
|
||||
:props="props"
|
||||
:show-all-levels="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcys" label="字体颜色">
|
||||
<el-color-picker v-model="form.bcys" />
|
||||
</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 {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch
|
||||
} from "vue";
|
||||
import {
|
||||
getQwbc,
|
||||
addQwbc,
|
||||
deleteQwbc,
|
||||
getQwbcInfo,
|
||||
updateQwbc
|
||||
} from "@/api/service/shift.js";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { dateFormat } from "@/utils/auth";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_PBJB, D_BZ_PBLX } = proxy.$dict("D_BZ_PBJB", "D_BZ_PBLX");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const chackAdd = ref(false);
|
||||
const tableData = ref([]); //表格数据
|
||||
const loadingTable = ref(true);
|
||||
const btnLoading = ref(false); //按钮截流
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增班次");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const depList = ref([]); //部门数据
|
||||
const cascader = ref("");
|
||||
//搜索数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
//表单数据
|
||||
const form = ref({
|
||||
bcys: "#FFFFFF",
|
||||
bclx: "02",
|
||||
ssbmdm:''
|
||||
});
|
||||
const department =
|
||||
window.localStorage.getItem("deptId") &&
|
||||
JSON.parse(window.localStorage.getItem("deptId"))[0];
|
||||
function pbjbChange(val) {
|
||||
if (val == "03") {
|
||||
form.value.ssbmdm = department.deptId;
|
||||
form.value.ssbm = department.deptName;
|
||||
}
|
||||
}
|
||||
//级联选择器配置
|
||||
const props = {
|
||||
expandTrigger: "children",
|
||||
children: "childDeptList",
|
||||
label: "orgName",
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
};
|
||||
//查询条件选择部门
|
||||
function handleChange(e) {
|
||||
let data = cascader.value.getCheckedNodes();
|
||||
form.value.ssbm = data[0].label;
|
||||
}
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
bcmc: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输班次名称",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
kssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择开始时间",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
jssj: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择结束时间",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
pbjb: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择排班级别",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
bclx: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择排班类型",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
ssbmdm: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属部门",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
zqsc: [{ validator: checkZqsc, trigger: "change" }]
|
||||
});
|
||||
|
||||
//执勤时长验证
|
||||
function checkZqsc(rule, value, callback) {
|
||||
if (value <= 0) {
|
||||
return callback(new Error("请选择正确的时间范围"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
getListData();
|
||||
}
|
||||
//计算执勤时长
|
||||
function setZqsc() {
|
||||
if (form.value.jssj && form.value.kssj) {
|
||||
let end = new Date();
|
||||
end.setHours(form.value.jssj.split(":")[0]);
|
||||
end.setMinutes(form.value.jssj.split(":")[1]);
|
||||
let start = new Date();
|
||||
start.setHours(form.value.kssj.split(":")[0]);
|
||||
start.setMinutes(form.value.kssj.split(":")[1]);
|
||||
let time;
|
||||
if (end >= start) {
|
||||
time = parseInt(end - start) / 1000 / 60;
|
||||
form.value.kts = 0;
|
||||
} else {
|
||||
end.setDate(end.getDate() + 1);
|
||||
time = parseInt(end - start) / 1000 / 60;
|
||||
form.value.kts = 1;
|
||||
}
|
||||
form.value.zqsc = time >> 0;
|
||||
}
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
getListData();
|
||||
}
|
||||
//新增表单重置
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
bcys: "#FFFFFF",
|
||||
bclx: "02"
|
||||
};
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
chackAdd.value = true;
|
||||
resetForm();
|
||||
title.value = "新增班次";
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
getQwbcInfo(row.id).then((res) => {
|
||||
resetForm();
|
||||
form.value = res;
|
||||
if (res.pbjb == "03") {
|
||||
form.value.ssbmdm = parseInt(res.ssbmdm);
|
||||
form.value.ssbm = res.ssbm;
|
||||
}
|
||||
chackAdd.value = false;
|
||||
title.value = "修改班次";
|
||||
dialogFormVisible.value = true;
|
||||
});
|
||||
}
|
||||
//注销
|
||||
function delDictItem(row) {
|
||||
proxy
|
||||
.$confirm("确定删除该班次？", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
deleteQwbc(row.id).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getQwbc(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) {
|
||||
btnLoading.value = true;
|
||||
setTimeout(() => {
|
||||
btnLoading.value = false;
|
||||
}, 1500);
|
||||
if (chackAdd.value) {
|
||||
addQwbc(form.value).then((res) => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
updateQwbc(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;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
selectDeptPage({}).then((res) => {
|
||||
depList.value = res.records;
|
||||
}); //查询部门
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</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: "分钟";
|
||||
}
|
||||
</style>
|
||||
@ -1,188 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="预警方案">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<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>
|
||||
<el-button type="primary" @click="goback">
|
||||
<el-icon style="vertical-align: middle"> <Menu /> </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 #zldj="{ row }">
|
||||
<dict-tag :options="D_BZ_TYJB" :value="row.zldj" :tag="false" />
|
||||
</template>
|
||||
<template #zllx="{ row }">
|
||||
<dict-tag :options="D_BZ_RGZLLX" :value="row.zllx" :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_RGZLLX,D_BZ_TYJB}" :dataItem="props.dataItem" @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 './components/editAddForm.vue'
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import { reactive, ref ,defineEmits,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dataItem:Object
|
||||
})
|
||||
const emits = defineEmits('changeItem')
|
||||
const { D_BZ_RGZLLX ,D_BZ_TYJB} = proxy.$dict("D_BZ_RGZLLX","D_BZ_TYJB");
|
||||
const addEditDialog = ref();
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const searchConfiger = reactive([
|
||||
{ showType: "input", prop: "zlbt", 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: "zlbt" },
|
||||
{ label: "指令等级", prop: "zldj", showSolt :true },
|
||||
{ label: "指令类型", prop: "zllx", showSolt :true },
|
||||
{ label: "所属部门", prop: "ssbm" },
|
||||
{ label: "指令内容", prop: "zlnr" },
|
||||
]
|
||||
});
|
||||
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,
|
||||
jjrid:props.dataItem.id
|
||||
}
|
||||
pageData.tableConfiger.loading = true
|
||||
qcckGet(pramas,'/mosty-jmxf/tbyjmb').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getData()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type,id)=>{
|
||||
addEditDialog.value.init(type,id)
|
||||
}
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(Array.isArray(val)) ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
// 批量删除
|
||||
function delDictItem(row) {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(row,'/mosty-jmxf/tbyjmb/bacth').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
pageData.pageConfiger.pageNum = 1
|
||||
getData();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
const goback = (type,row)=>{
|
||||
emits('changeItem',null)
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="isShowMOdel = true" v-show="!disabledFoem">预警模版</el-button>
|
||||
<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="zlbt" label="指令标题">
|
||||
<el-input v-model="listQuery.zlbt" placeholder="请填写指令标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zldj" label="指令等级">
|
||||
<el-select readonly v-model="listQuery.zldj">
|
||||
<el-option v-for="item in props.dic.D_BZ_TYJB" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="zllx" label="指令类型">
|
||||
<el-select readonly v-model="listQuery.zllx">
|
||||
<el-option v-for="item in props.dic.D_BZ_RGZLLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指令内容" style="width:100%">
|
||||
<el-input v-model="listQuery.zlnr" style="width:100%" type="textarea" placeholder="请输入指令内容" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 预警模版 -->
|
||||
<Yjmb v-model="isShowMOdel" v-if="isShowMOdel" :Single="true" @choosedModel="choosedModel" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import Yjmb from './yjmb.vue'
|
||||
import { IdCard } from "@/utils/validate.js";
|
||||
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits} from 'vue';
|
||||
const props = defineProps({
|
||||
dataItem:Object,
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const isShowMOdel = ref(false)
|
||||
|
||||
const title = ref('新增预警方案');
|
||||
const disabledFoem = ref(false) //表单禁用
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({ zlbt:''}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
zlbt: [{ required: true, message: "请输入指令标题", trigger: "blur"}],
|
||||
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change"}],
|
||||
zldj: [{ required: true, message: "请选择指令等级", trigger: "change"}],
|
||||
zllx: [{ required: true, message: "请选择指令类型", trigger: "change"}],
|
||||
zlnr: [{ required: true, message: "请选择指令内容", trigger: "change"}],
|
||||
})
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,id)=> {
|
||||
dialogForm.value = true
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(id){
|
||||
title.value = type == 'edit'?'修改预警方案':'预警方案详情'
|
||||
getDataById(id) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增预警方案'
|
||||
}
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (id)=>{
|
||||
qcckGet({},'/mosty-jmxf/tbyjmb/'+id).then(res=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let pramas = {
|
||||
...listQuery.value,
|
||||
jjrid:props.dataItem.id
|
||||
}
|
||||
if(title.value == '新增预警方案'){
|
||||
qcckPost(pramas,'/mosty-jmxf//tbyjmb').then(res=>{
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
close()
|
||||
emits('updateDate')
|
||||
loading.value = false;
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(pramas,'/mosty-jmxf//tbyjmb').then(res=>{
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
close()
|
||||
loading.value = false;
|
||||
emits('updateDate')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 打开末班
|
||||
const choosedModel = (val) =>{
|
||||
listQuery.value = val ? val[0] :{}
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = { zlbt :''}
|
||||
dialogForm.value = false
|
||||
}
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
</style>
|
||||
@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="指令标题">
|
||||
<el-input v-model="listQuery.zlbt" placeholder="请输入指令标题" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" style="margin-top: 0px" v-if="modelValue">
|
||||
<el-table
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
:highlight-current-row="props.Single"
|
||||
border
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
:row-key="keyid"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single"/>
|
||||
<el-table-column width="55" #default="{ row }" v-else>
|
||||
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" type="index" align="center" sortable width="80"/>
|
||||
<el-table-column prop="ssbm" label="所属部门" align="center"/>
|
||||
<el-table-column prop="zlbt" align="center" label="指令标题"/>
|
||||
<el-table-column align="center" label="指令等级" prop="zldj">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_TYJB" :value="row.jczlx" :tag="false"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="指令等级" prop="zllx">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_RGZLLX" :value="row.zllx" :tag="false"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="zlnr" 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="[2, 5, 10, 20]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { defineProps, watch, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_TYJB ,D_BZ_RGZLLX} = proxy.$dict("D_BZ_TYJB","D_BZ_RGZLLX");
|
||||
const props = defineProps({
|
||||
//是否显示
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
//标题
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择预警模版"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//已经选中得数据回显
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const ridioIndex = ref(null);
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
ssbmdm: ""
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false)
|
||||
const emits = defineEmits(["update:modelValue", "choosedModel"]);
|
||||
const closed = () => {
|
||||
listQuery.value.jczmc = "";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
};
|
||||
getListData();
|
||||
};
|
||||
// 判断传进来的选中数据和加载的选中数据不满足的数据
|
||||
const checkopenList = ref([]);
|
||||
|
||||
// 确定选中
|
||||
const onComfirm = () => {
|
||||
//单选
|
||||
if (props.Single) {
|
||||
if (![ridioIndex.value][0]) return proxy.$message.warning("请选择模版");
|
||||
const info = tableData.value.find((item) => {
|
||||
return item.id === ridioIndex.value;
|
||||
});
|
||||
emits("choosedModel", [JSON.parse(JSON.stringify(info))]);
|
||||
} else {
|
||||
//多选
|
||||
const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||||
if (jczList.length === 0) return proxy.$message.warning("请选择模版");
|
||||
emits("choosedModel", [...jczList, ...checkopenList.value]);
|
||||
}
|
||||
closed();
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
});
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
//检查站数据
|
||||
const getListData = async () => {
|
||||
loading.value = true
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbyjmb").then((res) => {
|
||||
tableData.value = res?.records;
|
||||
loading.value = false
|
||||
multipleUser(props.data, tableData.value);
|
||||
total.value = Number(res.total);
|
||||
}).catch(()=>{ loading.value = false });
|
||||
};
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelectionUser.value = val;
|
||||
if (checkopenList.value) {
|
||||
for (let i = 0; i < multipleSelectionUser.value.length; i++) {
|
||||
const l = multipleSelectionUser.value[i];
|
||||
for (let j = 0; j < checkopenList.value.length; j++) {
|
||||
const z = checkopenList.value[j];
|
||||
if (l.id == z.id) {
|
||||
checkopenList.value.splice(j, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//回显--用于多选表格
|
||||
function multipleUser(row, list) {
|
||||
if (row) {
|
||||
if (props.Single) {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (typeof item == "object") {
|
||||
if (item.id == select.id) {
|
||||
ridioIndex.value = item.id;
|
||||
}
|
||||
} else {
|
||||
if (item == select.id) {
|
||||
ridioIndex.value = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
row.forEach((item) => {
|
||||
list.forEach((select) => {
|
||||
if (item.id == select.id) {
|
||||
if (multipleUserRef.value) {
|
||||
multipleUserRef.value.toggleRowSelection(select, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val === true) {
|
||||
ridioIndex.value = "";
|
||||
handleFilter();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (multipleUserRef.value) multipleUser(val, tableData.value);
|
||||
checkopenList.value = JSON.parse(JSON.stringify(val));
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
::v-deep .el-form--inline {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
::v-deep .el-radio__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
||||
background: #106fdc;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<JJR v-if="isShow" @changeItem="changeItem" />
|
||||
<CASE v-if="!isShow" @changeItem="changeItem" :dataItem="dataItem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import JJR from './jjr.vue'
|
||||
import CASE from './case.vue'
|
||||
import { ref } from 'vue';
|
||||
const isShow = ref(true);
|
||||
const dataItem = ref({});
|
||||
const changeItem = (val) =>{
|
||||
isShow.value = val ? false :true;
|
||||
if(val) dataItem.value = val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,287 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">法定假日设置</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add_edit('','add')">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="batchDelete(null)" :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 prop="jjrmc" label="节日名称">
|
||||
<el-input v-model="listQuery.jjrmc" placeholder="请输入节日名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jjrq" label="节日日期">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="listQuery.jjrq"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="qwdj" label="日期类型">
|
||||
<el-select v-model="listQuery.rqlx" placeholder="请选择日期类型">
|
||||
<el-option value="0" label="节假日"></el-option>
|
||||
<el-option value="1" label="工作日"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jjrjsrq" label="结束时间">
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
v-model="listQuery.jjrjsrq"
|
||||
placeholder="请选择结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getListData"> 查询 </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"
|
||||
@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="jjrmc" align="center" label="节日名称"/>
|
||||
<el-table-column prop="jjrq" align="center" label="节日日期" />
|
||||
<el-table-column prop="rqlx" align="center" label="日期类型">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.rqlx == 0">节假日</span>
|
||||
<span v-if="row.rqlx == 1">工作日</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jjrjsrq" align="center" label="结束时间" />
|
||||
|
||||
<el-table-column label="操作" align="center" fixed="right" width="280">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="handleCase(row)" size="small">处置预案</el-button>
|
||||
<el-button @click="add_edit(row,'edit')" size="small">修改</el-button>
|
||||
<el-button @click="batchDelete(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">保存</el-button >
|
||||
<el-button size="small" @click="formReset">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="jjrmc" label="节日名称">
|
||||
<el-input v-model="form.jjrmc" placeholder="请输入节日名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jjrq" label="节日日期">
|
||||
<el-date-picker v-model="form.jjrq" type="date" placeholder="请选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rqlx" label="日期类型">
|
||||
<el-select v-model="form.rqlx" placeholder="请选择日期类型">
|
||||
<el-option value="0" label="节假日"></el-option>
|
||||
<el-option value="1" label="工作日"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jjrjsrq" label="结束时间">
|
||||
<el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="form.jjrjsrq" placeholder="请选择结束时间"/>
|
||||
</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 * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import { getVacationData, getVacationAdd, getVacationUpdate, getVacationDelete, getVacationDeleteMore } from "@/api/service/grade.js";
|
||||
const emits = defineEmits(['changeItem'])
|
||||
const dialogFormVisible = ref(false); //弹窗
|
||||
const ids = ref([]); //批量删除的ID
|
||||
const title = ref("");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const elform = ref(null);
|
||||
const form = ref({jjrmc: ''});//表单数据
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
jjrmc: [ {required: true, message: "请输入节日名称",trigger: "blur"}],
|
||||
jjrq: [{ required: true, message: "请选择节日日期", trigger: "change"}],
|
||||
rqlx: [{ required: true, message: "请选择日期类型", trigger: "change"}],
|
||||
jjrjsrq: [{ required: true, message: "请选择结束日期", trigger: "change"}],
|
||||
});
|
||||
const total = ref(0);
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const loadingTable = ref(false);
|
||||
const tableData = ref([]); //表格数据
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});//搜索数据
|
||||
|
||||
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loadingTable.value = true;
|
||||
getVacationData(listQuery.value).then((res) => {
|
||||
tableData.value = res.records
|
||||
total.value = res.total;
|
||||
loadingTable.value = false;
|
||||
}).catch(()=>{
|
||||
loadingTable.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
//重置
|
||||
function reset() {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
}
|
||||
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
if (!form.value.id) {
|
||||
getVacationAdd(form.value).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功"});
|
||||
formReset()
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
getVacationUpdate(form.value).then(() => {
|
||||
proxy.$message({type: "success", message: "修改成功"});
|
||||
formReset()
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 新增-编辑
|
||||
function add_edit(row,type) {
|
||||
title.value = row.id ? "编辑节假日期" : "新增节假日期";
|
||||
if(row.id) form.value = JSON.parse(JSON.stringify(row))
|
||||
dialogFormVisible.value = true;
|
||||
}
|
||||
//重置新增表单
|
||||
function formReset() {
|
||||
form.value = { rqlx: '' };
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
//批量数据
|
||||
const handleSelectionChange = (val) => {
|
||||
ids.value = val.map(v=>{return v.id});
|
||||
};
|
||||
|
||||
//批量删除数据
|
||||
const batchDelete = (val) => {
|
||||
proxy.$confirm("确定删除当前节假日？", "警告", { type: "warning" }).then(() => {
|
||||
let arr = val ? [val] : ids.value;
|
||||
getVacationDeleteMore(arr).then((res) => {
|
||||
proxy.$message({message: "删除成功",type: "success"});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// size 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 处警预案
|
||||
const handleCase = (val) =>{
|
||||
emits('changeItem',val)
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
|
||||
tabHeightFn();
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.updata {
|
||||
&::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
.twoh {
|
||||
&::v-deep .el-textarea__inner {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="mm-box" v-if="props.modelValue">
|
||||
<div class="head_box_ii">
|
||||
<div class="timeBox">
|
||||
<div class="time-map">{{ times[0] }}</div>
|
||||
<el-slider
|
||||
v-model="playTime"
|
||||
id="playtimeSlider"
|
||||
:range="true"
|
||||
:min="sliderMIn"
|
||||
:max="sliderMax"
|
||||
:format-tooltip="playTimeFormat"
|
||||
@change="playTimeChange"
|
||||
:key="videoTndex">
|
||||
</el-slider>
|
||||
<div class="time-map">{{ times[1] }}</div>
|
||||
<div style="display:flex;" v-if="props.lxtype == 'gjhf'">
|
||||
<el-button size="small" @click="chooseTime">搜索</el-button>
|
||||
<el-button size="small" @click="getGjDare">轨迹回放</el-button>
|
||||
<el-button size="small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区 </el-button>
|
||||
<el-button size="small" v-else-if="props.data.xffwlx == 2" @click="getKfdData">快反点</el-button>
|
||||
</div>
|
||||
<div v-else class="hphmBox">
|
||||
<div style="width:160px;">
|
||||
<el-select v-model="hphm" placeholder="请选择号牌号码" >
|
||||
<el-option v-for="item in props.data.clList" :key="item.id" :label="item.jdchphm" :value="item.jdchphm"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="width:110px;margin-left: 10px;">里程：{{lc}} km</div>
|
||||
|
||||
<el-button size="small" class="btn" @click="getClDare">车辆回放</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small" @click="closeAddModel">关闭</el-button>
|
||||
</div>
|
||||
<div class="map"><GdMap /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid } from "@/api/dpApi/home.js";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, watch, getCurrentInstance } from "vue";
|
||||
import { timeValidate } from "@/utils/time.js";
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const playTime = ref(null); //时间
|
||||
const detailFiles = ref([]); //时间范围
|
||||
const sliderMIn = ref(0);
|
||||
const sliderMax = ref(0);
|
||||
const videoTndex = ref(1);
|
||||
const lc = ref(0);
|
||||
const hphm = ref("");
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lxtype: String
|
||||
});
|
||||
|
||||
const isClearn = ref(true);
|
||||
const times = ref([1, 1]);
|
||||
watch(() => props.data,(val) => {
|
||||
hphm.value = ''
|
||||
lc.value = 0
|
||||
let ks = val.bbkssj;
|
||||
let js = val.bbjssj ? val.bbjssj : timeValidate(new Date());
|
||||
times.value = [ks, js];
|
||||
let start = new Date(ks).getTime();
|
||||
let end = new Date(js).getTime();
|
||||
sliderMIn.value = Number(start);
|
||||
sliderMax.value = Number(end);
|
||||
playTime.value = [start, end];
|
||||
if (props.lxtype == "gjhf") { getGjDare(); }
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
// 滑块提示
|
||||
function playTimeFormat(val) {
|
||||
let time = new Date(val);
|
||||
return timeValidate(time);
|
||||
}
|
||||
//选中时间
|
||||
function playTimeChange(val) {
|
||||
let kssj = timeValidate(val[0]);
|
||||
let jssj = timeValidate(val[1]);
|
||||
times.value = [kssj, jssj];
|
||||
}
|
||||
|
||||
// 根据时间来画轨迹
|
||||
function chooseTime() {
|
||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1] };
|
||||
emitter.emit("deletePointArea", "route");
|
||||
qcckPost(params, "/mosty-jmxf/tbWzXfwz/selectLswz").then((res) => {
|
||||
let arr = res || [];
|
||||
handleRoute(arr)
|
||||
});
|
||||
}
|
||||
|
||||
// 获取轨迹
|
||||
function getGjDare(bbId) {
|
||||
let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1]};
|
||||
emitter.emit("deletePointArea", "route");
|
||||
qcckPost(params, "/mosty-jmxf/tbWzXfwz/selectLswz").then((res) => {
|
||||
let arr = res || [];
|
||||
handleRoute(arr)
|
||||
});
|
||||
}
|
||||
// 画轨迹
|
||||
function handleRoute(arr){
|
||||
let points = arr.map(item=>{return [item.jd, item.wd]});
|
||||
if (points.length > 0) {
|
||||
emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
|
||||
} else {
|
||||
proxy.$message({ type: "warning", message: `没有轨迹数据` });
|
||||
}
|
||||
}
|
||||
|
||||
// 获取车辆轨迹
|
||||
function getClDare() {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
if (hphm.value == "") return proxy.$message({ type: "warning", message: `请选择车辆` });
|
||||
let list = props.data.clList;
|
||||
let obj = list.find(item=>{
|
||||
return item.jdchphm == hphm.value
|
||||
})
|
||||
if(obj && obj.gpsId){
|
||||
let params = { gpsId:obj.gpsId, kssj: times.value[0], jssj: times.value[1] , islx:"1"};
|
||||
qcckPost(params,'/mosty-jmxf/tbWzXfwz/selectSbLswzMo').then(res=>{
|
||||
let arr = res.list || []
|
||||
lc.value= res.lc / 1000
|
||||
handleRoute(arr)
|
||||
})
|
||||
}else{
|
||||
proxy.$message({ type: "warning", message: `该车辆暂时没有轨迹` });
|
||||
}
|
||||
|
||||
}
|
||||
//获取巡防区数据
|
||||
function getXfqData() {
|
||||
isClearn.value = !isClearn.value;
|
||||
emitter.emit("deletePointArea", "xfq");
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
let ids = props.data.xffwid.split(",");
|
||||
if (ids.length > 0) {
|
||||
ids.forEach((el) => {
|
||||
getTbJcglXfqySelectById({id: el }).then((res) => {
|
||||
if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
if (res.pgis.length <= 0) return;
|
||||
let obj = { position:[res.pgis], text:res.xfqMc, id: res.id}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: true });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
ElMessage({ message: "暂无巡防区数据", type: "warning" });
|
||||
}
|
||||
}
|
||||
|
||||
//获取快反点数据
|
||||
function getKfdData() {
|
||||
isClearn.value = !isClearn.value;
|
||||
if (isClearn.value) {
|
||||
emitter.emit("deletePointArea", "kfd");
|
||||
emitter.emit("deletePointArea", "kfdArea");
|
||||
} else {
|
||||
getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
|
||||
if (res) {
|
||||
//点位数据
|
||||
if (!res.jd || !res.wd) return;
|
||||
//一分钟范围
|
||||
if (res.yfzfw.length > 0) {
|
||||
let obj = { position:[res.yfzfw], text:'', id: '11'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
|
||||
}
|
||||
//三分钟范围
|
||||
if (res.sfzfw.length > 0) {
|
||||
let obj1 = { position:[res.sfzfw], text:'', id: '211'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
|
||||
}
|
||||
//五分钟范围
|
||||
if (res.wfzfw.length > 0) {
|
||||
let obj2 = { position:[res.wfzfw], text:'', id: '131'}
|
||||
emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
|
||||
}
|
||||
let icon = require("@/assets/point/kfd.png");
|
||||
emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
|
||||
emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
|
||||
} else {
|
||||
ElMessage({ message: "暂无快反点数据", type: "warning" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 取消新增模板
|
||||
const closeAddModel = () => {
|
||||
emitter.emit("deletePointArea", "route");
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mm-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.head_box_ii {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.timeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.time-map {
|
||||
width: 212px;
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
.hphmBox {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">部门巡防排班日历</div>
|
||||
<!-- <div class="jzlist">
|
||||
<span v-for="item in jzlist" :style="{ color: item.c }" :key="item.c">
|
||||
<i :style="{ background: item.c }"></i> {{ item.name }}
|
||||
</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<ZbCalendar
|
||||
@calClick="calClick"
|
||||
:list="list"
|
||||
v-if="list.length > 0"
|
||||
:isClick="true"
|
||||
:API="getXfpbInfo"
|
||||
/>
|
||||
<el-dialog width="90%" v-model="loading" :title="title">
|
||||
<div class="calendarLoad">
|
||||
<div class="item" v-for="(item,itemIndex) in calendrData" :key="item.id">
|
||||
<span
|
||||
:style="{ background: upJSON(item.qwbcId)[itemIndex%upJSON(item.qwbcId).length].bcys }"
|
||||
class="jz"
|
||||
>{{ upJSON(item.qwbcId)[itemIndex%upJSON(item.qwbcId).length].bcmc }}</span
|
||||
>
|
||||
<p>
|
||||
时间：{{ putTime(item.ksrq) + " " + item.kssj }}-{{
|
||||
putTime(item.jsrq) + " " + item.jssj
|
||||
}}
|
||||
</p>
|
||||
<p>跨天数：</p>
|
||||
<p>执勤时长：{{ item.zqsc / 60 }} 小时</p>
|
||||
<p>警组负责人：{{ item.fzrXm }}</p>
|
||||
<p>
|
||||
勤务民警：
|
||||
<span class="t" v-for="t in upJSON(item.pbmj)" :key="t.id">{{
|
||||
t.jlxm
|
||||
}}</span>
|
||||
</p>
|
||||
<p>
|
||||
勤务辅警：
|
||||
<span class="t" v-for="t in upJSON(item.pbfj)" :key="t.id">{{
|
||||
t.jlxm
|
||||
}}</span>
|
||||
</p>
|
||||
<p>
|
||||
武装类型： <span class="t"></span> 着装类型：
|
||||
<span class="t"></span>
|
||||
</p>
|
||||
<p>物资：</p>
|
||||
<div class="wz">
|
||||
<span v-for="(qx, i) in upJSON(item.jyqx)" :key="i + 0.678"
|
||||
>{{ qx.qxmc }} ({{ qx.qxsl }}个)</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getXfpb, rlpbQuery } from "@/api/service/watchmanSchedulingPbjl.js";
|
||||
import ZbCalendar from "@/components/ZbCalendar/index";
|
||||
import { handleTime } from "@/utils/time.js";
|
||||
const title = ref("排班详情");
|
||||
const jzlist = ref([
|
||||
{ name: "警组一", c: "hwb(28deg 41% 23%)" },
|
||||
{ name: "警组二", c: "rgb(254 94 33)" },
|
||||
{ name: "警组三", c: "rgb(15 246 7)" }
|
||||
]);
|
||||
//日历组件key
|
||||
|
||||
//日历数据
|
||||
const list = ref([]);
|
||||
const calendrData = ref({});
|
||||
const loading = ref(false);
|
||||
|
||||
function calClick(data) {
|
||||
let prams = {
|
||||
pbrq: data
|
||||
};
|
||||
rlpbQuery(prams).then((res) => {
|
||||
title.value = data + "排班详情";
|
||||
calendrData.value = res;
|
||||
loading.value = true;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getXfpb({
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000
|
||||
}).then((res) => {
|
||||
let calendarData = [];
|
||||
res.records.forEach((v) => {
|
||||
// let qwbcIds = JSON.parse(v.qwbcId);
|
||||
// let n = qwbcIds.length;
|
||||
if (v.ksrq && v.jsrq) {
|
||||
// let data = handleTime(v.ksrq.substring(0, 10), v.jsrq.substring(0, 10));
|
||||
// data.forEach((item, index) => {
|
||||
// calendarData.push({
|
||||
// title: qwbcIds[index % n].bcmc,
|
||||
// start: item.start,
|
||||
// end: item.end,
|
||||
// myData: item.start,
|
||||
// color: qwbcIds[index % n].bcys
|
||||
// });
|
||||
// });
|
||||
} else {
|
||||
// calendarData.push({
|
||||
// title: qwbcIds[index % n].bcmc,
|
||||
// start: v.xfrq.substring(0, 10),
|
||||
// myData: v.xfrq.substring(0, 10),
|
||||
// color: qwbcIds[index % n].bcys
|
||||
// });
|
||||
}
|
||||
});
|
||||
list.value = calendarData;
|
||||
});
|
||||
});
|
||||
//时间处理
|
||||
function putTime(time) {
|
||||
let n = new Date(time);
|
||||
return n.toLocaleDateString().replace(/\//g, "-");
|
||||
}
|
||||
//转JSON数据
|
||||
function upJSON(data,i) {
|
||||
return JSON.parse(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
.jzlist {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 200px;
|
||||
> span {
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
> i {
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
border-radius: 50%;
|
||||
left: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//弹窗样式
|
||||
.calendarLoad {
|
||||
display: flex;
|
||||
.item {
|
||||
width: 20%;
|
||||
border: 1px solid #095ed6;
|
||||
padding: 12px;
|
||||
margin: 0 12px 12px;
|
||||
background: #092562;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.jz {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 24px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.t {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.wz {
|
||||
float: left;
|
||||
height: 200px;
|
||||
> span {
|
||||
border: 1px solid #095ed6;
|
||||
padding: 4px 12px;
|
||||
margin-right: 12px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">我的巡防排班</div>
|
||||
<el-button style="margin-top: 12px" @click="active = !active">
|
||||
{{ active ? "列表模式" : "日历模式" }}
|
||||
</el-button>
|
||||
</div>
|
||||
<ZbCalendar @calClick='getListData' :list="list" v-if="active" />
|
||||
<List v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import List from "./list";
|
||||
import { getPbbbByMonth } from "@/api/service/watchmanSchedulingPbjl.js";
|
||||
import { ref, onMounted } from "vue";
|
||||
import ZbCalendar from "@/components/ZbCalendar/Calendar";
|
||||
//状态字典
|
||||
const ztDict = [
|
||||
{
|
||||
label: "未执勤",
|
||||
value: "01",
|
||||
color: "#7b7b7b",
|
||||
},
|
||||
{
|
||||
label: "执勤中",
|
||||
value: "02",
|
||||
color: "#51fb06",
|
||||
},
|
||||
{
|
||||
label: "执勤",
|
||||
value: "03",
|
||||
color: "#0084ff",
|
||||
},
|
||||
{
|
||||
label: "请假",
|
||||
value: "04",
|
||||
color: "#f00",
|
||||
},
|
||||
];
|
||||
const active = ref(true);
|
||||
|
||||
//日历组件key
|
||||
//日历数据
|
||||
const list = ref([]);
|
||||
function getListData(e){
|
||||
list.value = []
|
||||
getPbbbByMonth({time:e}).then(res=>{
|
||||
res.forEach(v=>{
|
||||
v.list.forEach(item=>{
|
||||
list.value.push({
|
||||
title:ztDict.filter(evn=>evn.value===item.zt)[0].label,
|
||||
day:v.day,
|
||||
start:e+'-'+v.day,
|
||||
end:e+'-'+v.day,
|
||||
time:item.time,
|
||||
color:ztDict.filter(evn=>evn.value===item.zt)[0].color
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
var time = new Date()
|
||||
getListData(time.getFullYear()+'-'+(time.getMonth()+1))
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,715 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="titleBox">
|
||||
<div class="title">勤务排班</div>
|
||||
</div>
|
||||
<!-- 排班表 -->
|
||||
<div class="schedulTable" :class="drawer ? 'isWidth' : ''">
|
||||
<el-calendar ref="calendar" v-model="value">
|
||||
<template #header="{ date }">
|
||||
<span>{{ date }}</span>
|
||||
<div class="choose-month-box">
|
||||
<div
|
||||
class="choose-month-item-box"
|
||||
@click="selectDate('prev-month', date)"
|
||||
>
|
||||
上个月
|
||||
</div>
|
||||
<div
|
||||
class="choose-month-item-box center-month"
|
||||
@click="selectDate('today', date)"
|
||||
>
|
||||
本月
|
||||
</div>
|
||||
<div
|
||||
class="choose-month-item-box"
|
||||
@click="selectDate('next-month', date)"
|
||||
>
|
||||
下个月
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dateCell="{ data }">
|
||||
<div class="dateTxt">
|
||||
<div :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split("-").slice(2).join("-") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%"
|
||||
v-for="item in list.calendarList"
|
||||
:key="item.id"
|
||||
@click="getday(item)"
|
||||
@mouseenter="showChecked(item)"
|
||||
@mouseleave="leaveChecked(item)"
|
||||
>
|
||||
<div
|
||||
class="data-block"
|
||||
v-if="
|
||||
item.day.indexOf(data.day) != -1 &&
|
||||
!(item.day === list.currentFlag)
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="police-block"
|
||||
v-show="item.pbs && item.mjSet && item.fjSet"
|
||||
>
|
||||
<div class="item-block jingzubg">
|
||||
<div>排班</div>
|
||||
<div>{{ item.pbs }}</div>
|
||||
</div>
|
||||
<div class="item-block minjingbg">
|
||||
<div>民警</div>
|
||||
<div>{{ item.mjSet }}</div>
|
||||
</div>
|
||||
<div class="item-block fujingbg">
|
||||
<div>辅警</div>
|
||||
<div>{{ item.fjSet }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="checked-box"
|
||||
v-if="
|
||||
item.day.indexOf(data.day) != -1 &&
|
||||
item.day === list.currentFlag
|
||||
"
|
||||
>
|
||||
<div v-show="item.pbs && item.mjSet && item.fjSet">
|
||||
<div class="item-block">
|
||||
<div class="qw-box" @click="serviceDuty(data.day)">排班</div>
|
||||
</div>
|
||||
<div class="item-block">
|
||||
<div class="zb-box" @click="onDuty(data.day)">值班</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
:direction="direction"
|
||||
:modal="false"
|
||||
size="100%"
|
||||
modal-class="drawer-contain"
|
||||
>
|
||||
<template #default>
|
||||
<div class="drawer-box">
|
||||
<div class="current-part-box">
|
||||
<div class="current-text-box">当前单位</div>
|
||||
<div class="partFrame-box">
|
||||
<!-- 特警支队 -->
|
||||
<MOSTY
|
||||
:placeholder="placeholder"
|
||||
width="200px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="ssbmid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jz-box">
|
||||
<div class="qw-text">排班</div>
|
||||
<div class="qw-group-num">
|
||||
<div class="left">{{ list.serviceList.pbNum }}</div>
|
||||
<div class="center">{{ list.serviceList.mNum }}</div>
|
||||
<div class="right">{{ list.serviceList.fNum }}</div>
|
||||
</div>
|
||||
<div class="qw-group-text">
|
||||
<div class="left">排班班次</div>
|
||||
<div class="center">排班民警</div>
|
||||
<div class="right">排班辅警</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zb1-box">
|
||||
<div class="qw-text">值班</div>
|
||||
<div class="qw-group-num">
|
||||
<div class="text1">{{ list.pbNum.wzgjl }}</div>
|
||||
<div class="text2">{{ list.pbNum.zbjl }}</div>
|
||||
<div class="text4">{{ list.pbNum.kdyjl }}</div>
|
||||
</div>
|
||||
<div class="qw-group-text">
|
||||
<div class="text1">未在岗警力</div>
|
||||
<div class="text2">值班警力</div>
|
||||
<div class="text4">可抽调警力</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, onMounted, nextTick, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getItem } from "@/utils/storage";
|
||||
import {
|
||||
getPbbbByMonthBm,
|
||||
getJlByBm
|
||||
} from "@/api/service/watchmanSchedulingPbrl.js";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useStore } from "vuex";
|
||||
import { findIndex } from "ol/array";
|
||||
import { selectDeptPage } from "@/api/user-manage";
|
||||
import MOSTY from "@/components/MyComponents/Department/index";
|
||||
export default {
|
||||
components: {
|
||||
// ProgressBar
|
||||
MOSTY
|
||||
},
|
||||
setup(props, context) {
|
||||
const router = useRouter();
|
||||
const depList = ref([]); //部门数据
|
||||
const ssbmid = ref(""); //部门id
|
||||
const store = useStore();
|
||||
const calendar = ref();
|
||||
const value = ref(new Date());
|
||||
const rangeDate = ref("");
|
||||
const station = ref("");
|
||||
const stationGroup = [];
|
||||
const scheduling = ref(new Date());
|
||||
const drawer = ref(true);
|
||||
const getday = (item) => {
|
||||
drawer.value = true;
|
||||
};
|
||||
const placeholder = ref("");
|
||||
const dept = ref("");
|
||||
const direction = ref("rtl");
|
||||
const form = reactive({
|
||||
jz: "", //警组
|
||||
mjSet: "", //民警数量
|
||||
fjSet: "", //辅警数量
|
||||
zbsl: "" //装备数量
|
||||
});
|
||||
const list = reactive({
|
||||
currentVal: "",
|
||||
currentFlag: "",
|
||||
open: false,
|
||||
// title: `报备单位: ${store.state.user.user.userOrgName}`,
|
||||
// part: store.state.user.user.userOrgName,
|
||||
// partCode: store.state.user.user.userOrgCode,
|
||||
partList: [],
|
||||
// 日历数据
|
||||
calendarList: [],
|
||||
serviceList: {
|
||||
pbNum: 0,
|
||||
mNum: 0,
|
||||
fNum: 0
|
||||
},
|
||||
shiftList: {
|
||||
wzgNum: 0,
|
||||
zbNum: 0,
|
||||
bqNum: 0,
|
||||
kcdNum: 0
|
||||
},
|
||||
list0: [],
|
||||
list1: [],
|
||||
list2: [],
|
||||
apartment: "",
|
||||
pbNum: {
|
||||
wzgjl: 0,
|
||||
zbjl: 0,
|
||||
kdyjl: 0
|
||||
}
|
||||
// ssbmdm: store.state.user.user.userOrgCode,
|
||||
// gajgjgdm: store.state.user.user.userOrgCode
|
||||
});
|
||||
// 联级选择
|
||||
const cascader = ref();
|
||||
const handleChange = (data) => {
|
||||
let nodes = cascader.value.getCheckedNodes();
|
||||
if (
|
||||
cascader.value.getCheckedNodes() &&
|
||||
cascader.value.getCheckedNodes().length > 0
|
||||
) {
|
||||
list.partCode = nodes[0].value;
|
||||
list.part = nodes[0].label;
|
||||
list.ssbmdm = nodes[0].value;
|
||||
list.gajgjgdm = nodes[0].value;
|
||||
pbxx();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
dept.value = getItem("deptId");
|
||||
placeholder.value = dept.value[0].deptName;
|
||||
ssbmid.value = dept.value[0].deptId;
|
||||
});
|
||||
// 获取用户的部分
|
||||
const selectDate = (val, date) => {
|
||||
calendar.value.selectDate(val);
|
||||
pbxx();
|
||||
list.serviceList.pbNum = "";
|
||||
list.serviceList.mNum = "";
|
||||
list.serviceList.fNum = "";
|
||||
list.pbNum.wzgjl = "";
|
||||
list.pbNum.zbjl = "";
|
||||
list.pbNum.kdyjl = "";
|
||||
};
|
||||
// 截取事件
|
||||
const findStrIndex = (str, cha, num) => {
|
||||
let x = str.indexOf(cha);
|
||||
for (let i = 0; i < num; i++) {
|
||||
x = str.indexOf(cha, x + 1);
|
||||
}
|
||||
return str.substring(0, x);
|
||||
};
|
||||
// 格式化日期
|
||||
const formatDate = (time) => {
|
||||
time = time.replace(/\//g, "-"); // 格式化日期
|
||||
time = time.replace(/\//g, "");
|
||||
time = findStrIndex(time, "-", 1);
|
||||
return time;
|
||||
};
|
||||
// 获取当前时间
|
||||
const GetDate = () => {
|
||||
const date = new Date();
|
||||
const YY = date.getFullYear();
|
||||
const mm = (date.getMonth() + 1).toString().padStart(2, 0);
|
||||
const dd = date.getDate().toString().padStart(2, 0);
|
||||
return `${YY}-${mm}-${dd}`;
|
||||
};
|
||||
// 获取排班数据
|
||||
const pbxx = (val, id) => {
|
||||
let times = formatDate(value.value.toLocaleDateString()); // 获取当前日期
|
||||
getPbbbByMonthBm({
|
||||
time: times,
|
||||
ssbmid: id ? id : dept.value[0].deptId
|
||||
}).then((res) => {
|
||||
list.calendarList = res;
|
||||
if (val === 1) {
|
||||
let date = new Date();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (day < 10) {
|
||||
day = "0" + day;
|
||||
}
|
||||
let todayTime = date.getFullYear() + "-" + month + "-" + day;
|
||||
list.calendarList.forEach((element) => {
|
||||
if (element.day === todayTime) {
|
||||
list.currentFlag = todayTime;
|
||||
list.serviceList.pbNum = element.pbs;
|
||||
list.serviceList.mNum = element.mjSet;
|
||||
list.serviceList.fNum = element.fjSet;
|
||||
}
|
||||
});
|
||||
countZbrys(1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const chooseDay = ref("");
|
||||
const onDuty = (val) => {
|
||||
router.push({
|
||||
path: "/shifTscheduling/index",
|
||||
query: { time: val, bm: dept.value[0].deptId }
|
||||
});
|
||||
};
|
||||
// go to the scheduling page
|
||||
const serviceDuty = (val) => {
|
||||
router.push({
|
||||
path: "/watchmanScheduling/pbjl",
|
||||
query: { time: val, bm: dept.value[0].deptId }
|
||||
});
|
||||
};
|
||||
const showChecked = (val) => {
|
||||
if (val.pbs && val.mjSet && val.fjSet) {
|
||||
list.currentFlag = val.day;
|
||||
list.serviceList.pbNum = val.pbs;
|
||||
list.serviceList.mNum = val.mjSet;
|
||||
list.serviceList.fNum = val.fjSet;
|
||||
countZbrys(2, val);
|
||||
}
|
||||
};
|
||||
const leaveChecked = (val) => {};
|
||||
const submit = () => {
|
||||
list.open = false;
|
||||
list.list0 = [];
|
||||
list.list1 = [];
|
||||
list.list2 = [];
|
||||
};
|
||||
// 查值班数据 流程图
|
||||
const countZbrys = (val, el) => {
|
||||
let time = "";
|
||||
if (val === 1) {
|
||||
time = GetDate(); // 获取当前日期
|
||||
for (let i = 0; i < list.calendarList.length; i++) {
|
||||
const element = list.calendarList[i];
|
||||
if (element.day == time) {
|
||||
el = element;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
time = el.day;
|
||||
}
|
||||
getJlByBm({
|
||||
time: time,
|
||||
ssbmid: dept.value[0].deptId
|
||||
}).then((res) => {
|
||||
list.pbNum.wzgjl = res.wzgjl;
|
||||
list.pbNum.zbjl = res.zbjl;
|
||||
list.pbNum.kdyjl =
|
||||
res.all - (res.zbjl + res.wzgjl + el.mjSet + el.fjSet);
|
||||
});
|
||||
};
|
||||
watch(ssbmid, (val, oldval) => {
|
||||
dept.value[0].deptId = val;
|
||||
pbxx(1, dept.value[0].deptId);
|
||||
});
|
||||
return {
|
||||
rangeDate, //日期选择
|
||||
station, // 站下拉选
|
||||
stationGroup, // 站数组
|
||||
calendar,
|
||||
selectDate,
|
||||
value,
|
||||
scheduling, // 排班当前时间
|
||||
pbxx,
|
||||
formatDate,
|
||||
list,
|
||||
getday,
|
||||
direction,
|
||||
drawer,
|
||||
onDuty,
|
||||
serviceDuty,
|
||||
router,
|
||||
showChecked,
|
||||
leaveChecked,
|
||||
ssbmid,
|
||||
store,
|
||||
chooseDay,
|
||||
submit,
|
||||
countZbrys,
|
||||
handleChange,
|
||||
cascader,
|
||||
depList,
|
||||
placeholder
|
||||
// orgprops
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/index.scss";
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.datePicker {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.schedulTable {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.data-block {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
.item-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.jingzubg {
|
||||
border: 1px solid rgb(22, 213, 225);
|
||||
color: rgb(22, 213, 225);
|
||||
}
|
||||
.minjingbg {
|
||||
border: 1px solid rgb(83, 167, 233);
|
||||
color: rgb(83, 167, 233);
|
||||
}
|
||||
.fujingbg {
|
||||
// background-color: rgba(255, 178, 66, 0.2);
|
||||
border: 1px solid rgb(140, 143, 253);
|
||||
color: rgb(140, 143, 253);
|
||||
}
|
||||
// .zhuangbeibg {
|
||||
// // background-color: rgba(50, 140, 236, 0.2);
|
||||
// border: 1px solid rgb(50, 140, 236);
|
||||
// color: rgb(50, 140, 236);
|
||||
// }
|
||||
}
|
||||
.isWidth {
|
||||
width: 70%;
|
||||
}
|
||||
.drawer-box {
|
||||
color: #fff;
|
||||
}
|
||||
.current-part-box {
|
||||
display: flex;
|
||||
margin-top: 100px;
|
||||
.current-text-box {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.partFrame-box {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 1px solid rgb(25, 246, 254);
|
||||
border-radius: 50px;
|
||||
padding-left: 20px;
|
||||
color: rgb(25, 246, 254);
|
||||
}
|
||||
}
|
||||
.checked-box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.item-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.qw-box {
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: rgb(10, 158, 204);
|
||||
border-radius: 32px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.zb-box {
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: rgb(10, 158, 204);
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
.dateTxt {
|
||||
// margin: 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.is-selected {
|
||||
// position: absolute;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// line-height: 20px;
|
||||
// border-radius: 50%;
|
||||
background-color: #2b8eeb;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
float: right;
|
||||
// font-size: 12px;
|
||||
}
|
||||
|
||||
.jz-box {
|
||||
margin-top: 50px;
|
||||
height: 250px;
|
||||
background-image: url("~@/assets/images/3frame.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.qw-text {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
}
|
||||
.qw-group-num {
|
||||
margin-top: 100px;
|
||||
// height: 55px;
|
||||
// line-height: 55px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.qw-group-text {
|
||||
margin-top: 10px;
|
||||
// height: 25px;
|
||||
// line-height: 25px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left {
|
||||
width: 25%;
|
||||
}
|
||||
.center {
|
||||
width: 50%;
|
||||
}
|
||||
.right {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.zb1-box {
|
||||
margin-top: 50px;
|
||||
height: 250px;
|
||||
background-image: url("~@/assets/images/3frame.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.qw-text {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
}
|
||||
.qw-group-num {
|
||||
margin-top: 100px;
|
||||
// height: 55px;
|
||||
// line-height: 55px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.qw-group-text {
|
||||
margin-top: 10px;
|
||||
// height: 25px;
|
||||
// line-height: 25px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.text1 {
|
||||
width: 23%;
|
||||
}
|
||||
.text2 {
|
||||
width: 27%;
|
||||
}
|
||||
.text3 {
|
||||
width: 27%;
|
||||
}
|
||||
.text4 {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
.choose-month-box {
|
||||
display: flex;
|
||||
.choose-month-item-box {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid rgb(25, 246, 254);
|
||||
color: rgb(25, 246, 254);
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center-month {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
color: #fff;
|
||||
// flex-direction: column;
|
||||
.duty-box {
|
||||
height: 500px;
|
||||
color: #fff;
|
||||
.police-box {
|
||||
display: flex;
|
||||
}
|
||||
.police-center-box {
|
||||
margin: 80px 0;
|
||||
}
|
||||
.duty-text {
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.police-choose {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 30px;
|
||||
background-color: rgb(10, 158, 204);
|
||||
text-align: center;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.policeList-box {
|
||||
margin-left: 50px;
|
||||
padding: 10px;
|
||||
line-height: 25px;
|
||||
width: 800px;
|
||||
// height: 100px;
|
||||
border: 1px solid rgb(10, 158, 204);
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.choosed-box {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.police-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(17, 66, 96);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: rgb(6, 42, 72);
|
||||
}
|
||||
::v-deep .el-calendar-table thead th:before {
|
||||
content: "周";
|
||||
}
|
||||
::v-deep .el-calendar-table td.is-today {
|
||||
color: rgb(191, 241, 210);
|
||||
}
|
||||
// ::v-deep .el-calendar-table:not(.is-range) td.next{
|
||||
// visibility: hidden;
|
||||
// }
|
||||
// ::v-deep .el-calendar-table:not(.is-range) td.prev{
|
||||
// visibility: hidden;
|
||||
// }
|
||||
::v-deep .el-calendar-table td.is-selected {
|
||||
background-color: rgb(17, 66, 96);
|
||||
}
|
||||
::v-deep .el-drawer.rtl {
|
||||
background-color: rgba(12, 42, 82, 0.8);
|
||||
}
|
||||
::v-deep [data-v-e282fbea] .el-input__inner {
|
||||
background-color: rgb(3, 43, 96, 0.8);
|
||||
border: 1px solid rgb(3, 43, 96, 0.8);
|
||||
}
|
||||
::v-deep [data-v-e282fbea] .el-dialog {
|
||||
background-color: rgb(0, 19, 66);
|
||||
}
|
||||
::v-deep [data-v-e282fbea] .el-tree-node__content > .el-tree-node__expand-icon {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.drawer-contain {
|
||||
width: 25% !important;
|
||||
z-index: 2004 !important;
|
||||
position: fixed !important;
|
||||
top: 0px !important;
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
left: unset !important;
|
||||
}
|
||||
.schedulTable .el-calendar-day{
|
||||
height: 96px ;
|
||||
}
|
||||
</style>
|
||||
@ -1,51 +0,0 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="qxzbrl">
|
||||
<div class="titleBox">
|
||||
<div class="title">全县巡防排班日历</div>
|
||||
</div>
|
||||
<ZbCalendar :list="list" v-if="list.length > 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import ZbCalendar from "@/components/ZbCalendar/index";
|
||||
|
||||
//日历组件key
|
||||
//日历数据
|
||||
const list = ref([]);
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
list.value = [
|
||||
{
|
||||
title: "值班 50人",
|
||||
start: "2022-07-04",
|
||||
end: "2022-07-05",
|
||||
},
|
||||
{
|
||||
title: "值班 20人",
|
||||
start: "2022-07-05T12:00:00+00:00"
|
||||
},
|
||||
{
|
||||
title: "值班 50人",
|
||||
start: "2022-07-06T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
title: "备勤 50人",
|
||||
start: "2022-07-06T07:00:00+00:00"
|
||||
},
|
||||
{
|
||||
title: "请休假 50人",
|
||||
start: "2022-07-06T07:00:00+00:00"
|
||||
}
|
||||
];
|
||||
}, 0.3e3);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qxzbrl {
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,369 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<div class="title">巡逻方案</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button typeof="danger" @click="delBatch">
|
||||
<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="queryParams" :inline="true">
|
||||
<!-- <el-form-item label="所属部门">
|
||||
<MOSTY.Department width="200px" clearable filterable v-model="queryParams.ssbmdm" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="方案名称">
|
||||
<el-input style="width: 200px" clearable placeholder="请填写方案类型" v-model="queryParams.famc">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="方案类型">
|
||||
<el-select style="width: 200px" v-model="queryParams.falx" clearable placeholder="请选择方案类型">
|
||||
<el-option v-for="dict in D_BZ_FALX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分屏数">
|
||||
<el-select style="width: 200px" clearable v-model="queryParams.fps" placeholder="请选择分屏数">
|
||||
<el-option v-for="dict in D_BZ_FPS" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间">
|
||||
<el-time-picker style="width: 500px" v-model="time" is-range clearable range-separator=" 至 " format="HH:mm"
|
||||
value-format="HH:mm" start-placeholder="开始时间" end-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" style="width: 100%" :key="keyCount" :height="tableHeight"
|
||||
v-loading="loading" element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55" />
|
||||
<el-table-column prop="famc" show-overflow-tooltip align="center" label="方案名称" />
|
||||
<el-table-column prop="kssj" show-overflow-tooltip align="center" label="开始时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="jssj" show-overflow-tooltip align="center" label="结束时间">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip width="100" align="center" label="方案类型">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_FALX" :value="row.falx" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" label="分屏数">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_FPS" :value="row.fps" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jgsj" show-overflow-tooltip align="center" label="间隔时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cjrxm" show-overflow-tooltip align="center" label="创建人">
|
||||
</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="280px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="success" @click="pzsxt(row.id)" size="small">感知源</el-button>
|
||||
<el-button type="warning" @click="update(row)" size="small">修改</el-button>
|
||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除当前信息?"
|
||||
@confirm="delItem([row.id])">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<!-- <el-button @click="playVideo(row.id)" type="primary" 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="queryParams.pageNum" :page-sizes="[5, 10, 20]" :page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isShow" class="dialog">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button v-if="showType !== 'show'" type="primary" @click="submit">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
|
||||
<el-form-item prop="famc" label="方案名称">
|
||||
<el-input v-model="form.famc" placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="falx" label="方案类型">
|
||||
<el-select style="width: 100%" v-model="form.falx" placeholder="请选择方案类型">
|
||||
<el-option v-for="dict in D_BZ_FALX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡逻时间" style="width: 48%" prop="time1">
|
||||
<el-time-picker style="width: 100%" v-model="form.time1" is-range clearable range-separator=" 至 "
|
||||
format="HH:mm" value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="fps" label="分屏数">
|
||||
<el-select style="width: 100%" v-model="form.fps" placeholder="请选择分屏数">
|
||||
<el-option v-for="dict in D_BZ_FPS" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jgsj" label="间隔时间(秒)">
|
||||
<el-input-number v-model="form.jgsj" :min="0" placeholder="请输入间隔时间(秒)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" style="width: 100%">
|
||||
<el-input prop="bz" v-model="form.bz" type="textarea" show-word-limit placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<sxtpz v-if="pzIsShow" :pzIsShow="pzIsShow" @getIsShow="getIsShow" :faid="faid"></sxtpz>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import sxtpz from "../sxtpz/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import {
|
||||
getDataList,
|
||||
addFa,
|
||||
editFa,
|
||||
getInfo,
|
||||
deleteBatchs,
|
||||
getSpInfo
|
||||
} from "@/api/videoPatrol/index.js";
|
||||
const pzIsShow = ref(false);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_FALX, D_BZ_FPS } = proxy.$dict("D_BZ_FALX", "D_BZ_FPS");
|
||||
const searchBox = ref(null); // 搜索盒子
|
||||
const showType = ref("add");
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const tableHeight = ref(); // 表格高度
|
||||
const time = ref([]); // 时间
|
||||
const time1 = ref([]); // 时间
|
||||
const keyCount = ref(0); //tabel组件刷新值
|
||||
const title = ref("新增方案");
|
||||
const elform = ref(null);
|
||||
const total = ref(0);
|
||||
const faid = ref("");
|
||||
const isShow = ref(false); //弹窗
|
||||
const deleteRows = ref([]); //弹窗
|
||||
function getIsShow(data) {
|
||||
pzIsShow.value = data;
|
||||
}
|
||||
//搜索数据
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 批量删除
|
||||
function delBatch() {
|
||||
proxy
|
||||
.$confirm("确认删除当前选中数据？", "警告", {
|
||||
type: "warning"
|
||||
})
|
||||
.then((_) => {
|
||||
let ids = deleteRows.value.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
delItem(ids);
|
||||
})
|
||||
.catch((_) => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
//表单数据
|
||||
const form = ref({});
|
||||
//表单验证
|
||||
const rules = reactive({
|
||||
famc: [{ required: true, message: "请填写方案名称" }],
|
||||
falx: [{ required: true, message: "请选择方案类型" }],
|
||||
fps: [{ required: true, message: "请选择分屏数" }],
|
||||
jgsj: [
|
||||
{ required: true, message: "请输入间隔时间" },
|
||||
{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
|
||||
],
|
||||
time1: [{ required: true, message: "请选择巡逻时间段" }]
|
||||
});
|
||||
// 多选
|
||||
const handleSelectionChange = (val) => {
|
||||
deleteRows.value = val;
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
function showInfo(row) {
|
||||
getInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.kssj && res.jssj) {
|
||||
time1.value = [res.kssj, res.jssj];
|
||||
} else {
|
||||
time1.value = [];
|
||||
}
|
||||
title.value = "方案查看";
|
||||
isShow.value = true;
|
||||
showType.value = "show";
|
||||
});
|
||||
}
|
||||
// 播放
|
||||
function playVideo(id) {
|
||||
getSpInfo(id).then((res) => {
|
||||
if (!res.sxtzList || res.sxtzList.length == 0) {
|
||||
proxy.$message.error("未配置摄像头，无法播放，请先配置摄像头");
|
||||
} else {
|
||||
sessionStorage.removeItem("videdoList");
|
||||
sessionStorage.setItem("XLFAVIDEO", JSON.stringify(res));
|
||||
window.open(NPShref.href, "_blank");
|
||||
}
|
||||
});
|
||||
}
|
||||
//搜索
|
||||
function handleFilter() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getListData();
|
||||
}
|
||||
// 配置查看摄像头
|
||||
function pzsxt(id) {
|
||||
pzIsShow.value = true;
|
||||
faid.value = id;
|
||||
}
|
||||
//重置
|
||||
function reset() {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
time.value = [];
|
||||
getListData();
|
||||
}
|
||||
//新增
|
||||
function add() {
|
||||
title.value = "新增方案";
|
||||
showType.value = "add";
|
||||
isShow.value = true;
|
||||
}
|
||||
//修改
|
||||
function update(row) {
|
||||
getInfo(row.id).then((res) => {
|
||||
form.value = res;
|
||||
if (res.kssj && res.jssj) {
|
||||
form.value.time1 = [res.kssj, res.jssj];
|
||||
} else {
|
||||
form.value.time1 = [];
|
||||
}
|
||||
title.value = "修改方案";
|
||||
isShow.value = true;
|
||||
showType.value = "edit";
|
||||
});
|
||||
}
|
||||
//注销
|
||||
function delItem(ids) {
|
||||
deleteBatchs(ids).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功", grouping: true });
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
//获取列表数据
|
||||
function getListData() {
|
||||
loading.value = true;
|
||||
if (time.value.length === 2) {
|
||||
queryParams.value.kssj = time.value[0];
|
||||
queryParams.value.jssj = time.value[1];
|
||||
}
|
||||
getDataList(queryParams.value)
|
||||
.then((res) => {
|
||||
tableData.value = res.records;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
isShow.value = false;
|
||||
}
|
||||
//提交
|
||||
function submit() {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
falx: form.value.falx,
|
||||
famc: form.value.famc,
|
||||
fps: form.value.fps,
|
||||
jgsj: form.value.jgsj,
|
||||
kssj: form.value.time1[0],
|
||||
jssj: form.value.time1[1]
|
||||
};
|
||||
proxy.$confirm("确定当前操作？").then((_) => {
|
||||
if (!form.value.id) {
|
||||
addFa(data).then(() => {
|
||||
proxy.$message({ type: "success", message: "保存成功" });
|
||||
isShow.value = false;
|
||||
getListData();
|
||||
});
|
||||
} else {
|
||||
data.id = form.value.id;
|
||||
editFa(data).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
isShow.value = false;
|
||||
getListData();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
queryParams.value.pageSize = currentSize;
|
||||
queryParams.value.pageNum = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
queryParams.value.pageNum = currentPage;
|
||||
getListData();
|
||||
};
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
|
||||
};
|
||||
onMounted(() => {
|
||||
getListData();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<div class="dialogBox" v-if="show">
|
||||
<div class="title">
|
||||
<span>感知源</span><span @click="close" class="close">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in info" :key="index + 'gzy'">
|
||||
<div class="infoBox">
|
||||
<div class="content">{{ item.sbmc }}</div>
|
||||
<div class="other">
|
||||
<p>设备编号：{{ item.sbbh }}</p>
|
||||
<p>所属部门：{{ item.ssbm }}</p>
|
||||
<p>厂商名称：{{ item.csmc }}</p>
|
||||
</div>
|
||||
<div class="addressBox">
|
||||
<div>
|
||||
<img src="@/assets/images/dingwei.png" />
|
||||
<span>{{ item.dzmc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_bom">
|
||||
<button class="dp-default small" @click="chooceItem(item)" style="margin-right: 10px;">选择</button>
|
||||
<button class="dp-default small" @click="openVideo(item)">视频播放</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
|
||||
// 左右折叠状态
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const show = ref(false);
|
||||
const info = ref([]); //警情数据
|
||||
const emits = defineEmits(['chooseVideo'])
|
||||
onMounted(() => {
|
||||
emitter.on("showGzyInfo", (res) => {
|
||||
info.value = res;
|
||||
show.value = true;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showGzyInfo");
|
||||
});
|
||||
|
||||
function chooceItem(item) {
|
||||
console.log("xxx");
|
||||
|
||||
emits('chooseVideo', item)
|
||||
}
|
||||
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
let params = {
|
||||
...item,
|
||||
splitNum: 1
|
||||
}
|
||||
emitter.emit("openGzyVideo", params)
|
||||
}
|
||||
//关闭弹窗
|
||||
function close() {
|
||||
show.value = false;
|
||||
emitter.emit("showGzy", false);
|
||||
emitter.emit("deletePointArea", "lang");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialogBox {
|
||||
width: 360px;
|
||||
max-height: 78vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
background: #052342;
|
||||
z-index: 9;
|
||||
border-radius: 4px;
|
||||
|
||||
.title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.addressBox {
|
||||
border-top: 1px solid #162f55;
|
||||
margin: 0 10px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
border: 1px solid #275288;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_bom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 12px;
|
||||
|
||||
span {
|
||||
background: #2c7ee3;
|
||||
border-radius: 4px;
|
||||
padding: 2px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background: #497dbd;
|
||||
border-radius: 4px;
|
||||
padding: 2px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/largeScreen.scss";
|
||||
|
||||
.infoBox {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 10px 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin: 0 10px;
|
||||
padding: 0px;
|
||||
color: #779dcd;
|
||||
list-style: none;
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,479 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="pzIsShow && fa != null">
|
||||
<div class="head_box">
|
||||
<span class="title">摄像头配置</span>
|
||||
<div>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
<el-button @click="close">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="common-layout">
|
||||
<el-container style="height: calc(100vh - 170px)">
|
||||
<el-aside class="box_sp" width="300px">
|
||||
<div class="sxtz_title">摄像头组列表</div>
|
||||
<div class="sxtzList">
|
||||
<el-card class="box-card" style="margin-top: 10px" v-for="(sxtz, index) in sxtzList" :key="'a' + index">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="sxtzmc">
|
||||
<span>组名：</span><el-input v-model="sxtz.sxtzmc" size="mini"></el-input>
|
||||
</span>
|
||||
<el-icon class="close" @click="deleteSxtz(index)">
|
||||
<CloseBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="(sxt, ind) in sxtz.sxtList" :key="'o' + ind" class="sxtList">
|
||||
<div class="icon" v-if="sxt.isSelect" />
|
||||
<div>
|
||||
<el-input readonly placeholder="点击选择摄像头" size="mini" v-model="sxt.sxtmc"
|
||||
@click="clickInput(index, ind)" class="input" />
|
||||
</div>
|
||||
<div class="btns">
|
||||
<span class="btn play" @click="openVideo(sxt)">播放</span>
|
||||
<span v-if="fa.falx != '1'" class="btn sz">设置</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="sxtz_btn">
|
||||
<el-button @click="addSxtz">添加摄像头组</el-button>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-aside class="box_sp box_center_list" width="400px">
|
||||
<div class="sxtz_title">摄像头列表</div>
|
||||
<div class="search">
|
||||
<MOSTY.Department width="200px" clearable filterable v-model="queryParams.ssbmdm" />
|
||||
<el-input style="width: 180px" v-model="queryParams.sbmc" placeholder="设备编号、名称" clearable
|
||||
@clear="search"></el-input>
|
||||
<el-button @click="search">查询</el-button>
|
||||
</div>
|
||||
<div class="sxt_list">
|
||||
<div class="sxt_item" v-for="(item, index) in gzyList" :key="index + 'sxt'" @click="clickItem(item)">
|
||||
<div class="sxtmc">{{ item.sbmc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page1">
|
||||
<el-pagination @current-change="handleCurrentChange" :current-page="queryParams.pageNum"
|
||||
:page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main class="box_sp box_map">
|
||||
<GdMap />
|
||||
<gzy-info @chooseVideo="chooseVideo"></gzy-info>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
|
||||
<VideoCnt />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import VideoCnt from "@/components/video/index.vue";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
||||
import {
|
||||
getSpInfo,
|
||||
getSxtList,
|
||||
getSxtAll,
|
||||
addSxtPz,
|
||||
editSxtPz
|
||||
} from "@/api/videoPatrol/index.js";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import gzyInfo from "./gzyInfo.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_FALX } = proxy.$dict("D_BZ_FALX");
|
||||
const fa = ref(null);
|
||||
const sxtzList = ref([]);
|
||||
const gzyList = ref([]);
|
||||
const total = ref(0);
|
||||
const activeAddSxt = ref(false); //切换新增修改
|
||||
const activeIndex = reactive({
|
||||
sbzIndex: null,
|
||||
sbIndex: null
|
||||
});
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
// sblx:'01',
|
||||
});
|
||||
const props = defineProps({
|
||||
//获取组件传值
|
||||
pzIsShow: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
faid: {
|
||||
detault: "1546416261034004481",
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(["change", "delete"]);
|
||||
function handleCurrentChange(e) {
|
||||
queryParams.value.pageNum = e;
|
||||
getGzyList();
|
||||
}
|
||||
// 查询感知源
|
||||
function search() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getGzyList();
|
||||
getGzyAll();
|
||||
}
|
||||
|
||||
// 打开视频
|
||||
function openVideo(item) {
|
||||
console.log(item, "item");
|
||||
// if (item.isSelect) {
|
||||
let params = { sbbh: item.sxtid, splitNum: 1 };
|
||||
emitter.emit("openGzyVideo", params);
|
||||
// }
|
||||
}
|
||||
|
||||
// 获取感知源撒点数据
|
||||
function getGzyAll() {
|
||||
emitter.emit("deletePointArea", "sp");
|
||||
getSxtAll({ sblx: "02", ...queryParams.value }).then((res) => {
|
||||
if (res.length > 0) {
|
||||
let arr = [];
|
||||
res.forEach((el) => {
|
||||
if (el.jd && el.wd) {
|
||||
arr.push(el);
|
||||
}
|
||||
});
|
||||
emitter.emit("addPoint", {
|
||||
coords: arr,
|
||||
icon: require("@/assets/point/sp.png"),
|
||||
flag: "sp",
|
||||
fontColor: "#ff0000"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 获取感知源列表
|
||||
function getGzyList() {
|
||||
getSxtList(queryParams.value).then((res) => {
|
||||
gzyList.value = res ? res.records : [];
|
||||
total.value = res ? res.total : 0;
|
||||
});
|
||||
}
|
||||
// 删除摄像头组
|
||||
function deleteSxtz(i) {
|
||||
if (sxtzList.value.length <= 1) {
|
||||
proxy.$message.error("至少保存一个摄像头组！！");
|
||||
return;
|
||||
}
|
||||
proxy
|
||||
.$confirm("确定删除该摄像头组？", "提示")
|
||||
.then(() => {
|
||||
sxtzList.value = sxtzList.value.filter((item, index) => {
|
||||
return index != i;
|
||||
});
|
||||
})
|
||||
.catch((_) => { });
|
||||
}
|
||||
// 点击input框
|
||||
function clickInput(index, ind) {
|
||||
sxtzList.value.forEach((item) => {
|
||||
item.sxtList.forEach((it) => {
|
||||
it.isSelect = false;
|
||||
});
|
||||
});
|
||||
sxtzList.value[index].sxtList[ind].isSelect = true;
|
||||
activeIndex.sbzIndex = index;
|
||||
activeIndex.sbIndex = ind;
|
||||
}
|
||||
// 添加摄像头组
|
||||
function addSxtz() {
|
||||
let sxtList = [];
|
||||
for (let i = 0; i < Number(fa.value.fps); i++) {
|
||||
sxtList.push({});
|
||||
}
|
||||
sxtzList.value.push({
|
||||
sxtzmc: "摄像头组" + (sxtzList.value.length + 1),
|
||||
sxtList: sxtList
|
||||
});
|
||||
}
|
||||
|
||||
// 选择视频
|
||||
function chooseVideo(sxt) {
|
||||
if (null != activeIndex.sbzIndex && null != activeIndex.sbIndex) {
|
||||
sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtmc =
|
||||
sxt.sbmc;
|
||||
sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtid =
|
||||
sxt.jkdbgbh;
|
||||
}
|
||||
}
|
||||
// 点击摄像头定位弹窗
|
||||
function clickItem(sxt) {
|
||||
console.log(sxt, "sxt");
|
||||
// emitter.emit("showGzyInfo", sxt);
|
||||
emitter.emit("addPoint", {
|
||||
coords: [sxt],
|
||||
icon: require(`@/assets/point/sp.png`),
|
||||
flag: "sp",
|
||||
scale: 1.3
|
||||
});
|
||||
emitter.emit("setMapCenter", { location: [sxt.jd, sxt.wd], zoomLevel: 12 });
|
||||
}
|
||||
// 提交
|
||||
function submit() {
|
||||
const params = {
|
||||
faid: props.faid,
|
||||
sxtzList: sxtzList.value.map((item) => {
|
||||
const sxt = {
|
||||
sxtzmc: item.sxtzmc,
|
||||
sxtList: item.sxtList.map((e) => {
|
||||
return { sxtid: e.sxtid, sxtmc: e.sxtmc };
|
||||
})
|
||||
};
|
||||
return sxt;
|
||||
})
|
||||
};
|
||||
if (activeAddSxt.value) {
|
||||
addSxtPz(params).then(() => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
});
|
||||
} else {
|
||||
editSxtPz(params).then(() => {
|
||||
proxy.$message({ type: "success", message: "修改成功" });
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
function close() {
|
||||
emit("getIsShow", false);
|
||||
props.pzIsShow = false;
|
||||
}
|
||||
function getFaInfo() {
|
||||
getSpInfo(props.faid).then((res) => {
|
||||
fa.value = res;
|
||||
let sxtList = [];
|
||||
if (res.sxtzList.length > 0) {
|
||||
activeAddSxt.value = false;
|
||||
sxtzList.value = res.sxtzList.map((item) => {
|
||||
return {
|
||||
sxtzmc: item.sxtzmc,
|
||||
sxtList: item.sxtList.map((e) => {
|
||||
return {
|
||||
sxtid: e.sxtid,
|
||||
sxtmc: e.sxtmc
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
} else {
|
||||
activeAddSxt.value = true;
|
||||
for (let i = 0; i < Number(fa.value.fps); i++) {
|
||||
sxtList.push({});
|
||||
}
|
||||
sxtzList.value.push({
|
||||
sxtzmc: "摄像头组1",
|
||||
sxtList: sxtList
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getFaInfo();
|
||||
// 查询摄像头列表和撒点
|
||||
getGzyList();
|
||||
// 获取感知源撒点信息
|
||||
getGzyAll();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
keyCount.value = data;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off("mittFn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.box_center_list {
|
||||
.sxt_list {
|
||||
height: calc(100vh - 300px);
|
||||
overflow: auto;
|
||||
color: #000;
|
||||
|
||||
.sxt_item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
border: 1px solid #0065d8;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
|
||||
.sxtmc {
|
||||
// width: 70%;
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
color: #79bbff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #529b2e;
|
||||
|
||||
&:hover {
|
||||
color: #95d475;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.page1 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.box_sp {
|
||||
.sxtz_btn {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sxtz_title {
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sxtzList {
|
||||
margin-top: 10px;
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.sxtzmc {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 230px;
|
||||
|
||||
>span {
|
||||
width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sxtList {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
|
||||
.btns {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
color: #79bbff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sz {
|
||||
color: #f56c6c;
|
||||
margin-top: 5px;
|
||||
|
||||
&:hover {
|
||||
color: #f89898;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 180px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// border-right: 1px solid #07376d;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box_map {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="ech">
|
||||
<div id="linezss" 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("linezss");
|
||||
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)"
|
||||
},
|
||||
// legend: {
|
||||
// right: 20,
|
||||
// orient: 'vertical',
|
||||
// data: ['今日','昨日']
|
||||
// },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: props.data.map((item) => item.x),
|
||||
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: [
|
||||
{
|
||||
name: "今日",
|
||||
type: "line",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top"
|
||||
},
|
||||
smooth: true,
|
||||
// showSymbol: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
data: props.data.map((item) => item.y),
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
// offset: 0,
|
||||
// color: 'rgba(199, 237, 250,0.5)'
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: 'rgba(199, 237, 250,0.2)'
|
||||
// }], false)
|
||||
// }
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(4, 145, 216)"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
document.getElementById("linezss").setAttribute("_echarts_instance_", "");
|
||||
}
|
||||
onMounted(() => {
|
||||
chartFn();
|
||||
window.addEventListener("resize", () => {
|
||||
chartFn();
|
||||
});
|
||||
window.onresize = function () {
|
||||
chartFn();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.aaa {
|
||||
color: rgb(238, 6, 6);
|
||||
}
|
||||
.ech {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,441 +0,0 @@
|
||||
<!-- 界面警情统计 -->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="titleBox">
|
||||
<div class="title">警情趋势</div>
|
||||
<div class="btnBox"></div>
|
||||
</div>
|
||||
<!-- class="searchBox" ref="searchBox" -->
|
||||
<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">
|
||||
<linechart :data="jrjqSlzsData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox single-chart-box2">
|
||||
<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>
|
||||
<div class="chartAndTable-box">
|
||||
<div class="searchBox tab">
|
||||
<div class="mysearch" ref="searchBox">
|
||||
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
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
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
width="60"
|
||||
/>
|
||||
<el-table-column label="单位部门" prop="ssbm" align="center" />
|
||||
<el-table-column label="警情总数" prop="jqzs" align="center" />
|
||||
<el-table-column label="同比增长率" prop="tbzzl" align="center" />
|
||||
<el-table-column label="环比增长率" prop="hbzzl" 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>
|
||||
<!-- <div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
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"
|
||||
: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="jqzs">
|
||||
<el-input v-model="form.jqzs"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="同比增长率" prop="tbzzl">
|
||||
<el-input v-model="form.tbzzl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="环比增长率" prop="hbzzl">
|
||||
<el-input v-model="form.hbzzl"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
tbJqJqBmTj,
|
||||
getJqlxTj,
|
||||
getJrjqTj,
|
||||
getJrjqSlzs,
|
||||
getJrjqYj
|
||||
} from "@/api/patrolStatistics/interfaceAlarm.js";
|
||||
import { getJqqs } from "@/api/warningCenter/alarmTrend.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import linechart from "./components/line.vue";
|
||||
const treeHeight = ref(""); // 树高度
|
||||
const treeHeightFn = () => {
|
||||
treeHeight.value = window.innerHeight - 57 - 37 - 93 + "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: 0, y: 0 }]);
|
||||
const jrjqYjData = ref({
|
||||
total: 100,
|
||||
value: 0.0
|
||||
});
|
||||
const listQuery = ref({
|
||||
page: 1,
|
||||
size: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
||||
});
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
loadingTable.value = false;
|
||||
tbJqJqBmTj().then((res) => {
|
||||
tableData.value = res;
|
||||
// total.value = res.total;
|
||||
});
|
||||
}
|
||||
// 获取图表数据
|
||||
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) => {
|
||||
const nameArr = D_BZ_CZZT.value.map(a=>a).filter((e) => e.value == item.czzt)
|
||||
return {
|
||||
name: nameArr.length?nameArr[0]['label']:'',
|
||||
value: item.sl
|
||||
};
|
||||
});
|
||||
});
|
||||
getJqqs().then((res) => {
|
||||
jrjqSlzsData.value = res.time.map((item, index) => {
|
||||
return { x: 2 * index + 2 + "时", y: res.count[index] };
|
||||
});
|
||||
});
|
||||
getJrjqYj().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 - 57 - 37 - searchBox.value.offsetHeight - 440;
|
||||
};
|
||||
/**
|
||||
* 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: 60%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.single-chart-box2 {
|
||||
height: 280px;
|
||||
width: 38%;
|
||||
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 {
|
||||
width: 82.5%;
|
||||
}
|
||||
}
|
||||
// .container{
|
||||
// width: 1639px;
|
||||
// }
|
||||
.mysearch {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.display-box {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
.display-item {
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
margin: 12px 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
|
||||
<el-button size="small" @click="close(null)">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
|
||||
<el-form-item style="width: 100%" prop="ssbmdm" label="所属部门">
|
||||
<div class="depBox" v-if="isShowDep && listQuery.zdxlBmList" @click="isShowDep = !isShowDep">
|
||||
<el-tag style="margin:0px 2px;" v-for="it in listQuery.zdxlBmList" :key="it.id">{{it.ssbm}}</el-tag>
|
||||
</div>
|
||||
<MOSTY.Department v-if="!isShowDep" v-model="listQuery.ssbmdm" :multiple="true" :placeholder="listQuery.ssbm" filterable style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="ksrq" label="开始日期" style="width: 31%">
|
||||
<el-date-picker v-model="listQuery.ksrq" placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="jsrq" label="结束日期" style="width: 31%">
|
||||
<el-date-picker v-model="listQuery.jsrq" placeholder="请选择结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="xfsd" label="下发时段" style="width: 31%">
|
||||
<el-select style="width: 100%" multiple v-model="listQuery.xfsd">
|
||||
<el-option v-for="item in props.dic.D_BZ_SD" :key="item.value" :value="item.value" :label="item.label"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dz" label="地址" style="width: 100%" >
|
||||
<el-input v-model="listQuery.dz" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="gridType" label="网格大小" style="width: 100%" >
|
||||
<el-input-number v-model="listQuery.gridType" clearable style="width: 92%" /> ( 米 )
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="zxX" label="坐标位置">
|
||||
<div class="latlng">
|
||||
<el-input v-model="listQuery.zxX" @blur="handleBlur" clearable style="width: 45%" />
|
||||
<el-input v-model="listQuery.zxY" @blur="handleBlur" clearable style="width: 45%" />
|
||||
<el-button @click="chackLat">选取坐标</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<div class="map"> <GdMap /> </div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
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, nextTick, onMounted, onUnmounted} from 'vue';
|
||||
const validateKsrq = () =>{
|
||||
return (rule, value, callback) => {
|
||||
if (!value) return callback(new Error('请选择开始日期'));
|
||||
if(listQuery.value.jsrq){
|
||||
let start = (new Date(listQuery.value.ksrq)).getTime()
|
||||
let end = (new Date(listQuery.value.jsrq)).getTime()
|
||||
if( end < start) return callback(new Error('开始日期必须小于结束日期'));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const validatejsrq = () =>{
|
||||
return (rule, value, callback) => {
|
||||
if (!value) return callback(new Error('请选择开始日期'));
|
||||
if(listQuery.value.ksrq){
|
||||
let start = (new Date(listQuery.value.ksrq)).getTime()
|
||||
let end = (new Date(listQuery.value.jsrq)).getTime()
|
||||
if( end < start) return callback(new Error('开始日期必须小于结束日期'));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
dic:{ type:Object, default:{} }
|
||||
})
|
||||
const isShowDep = ref(false)
|
||||
const emits = defineEmits(['updateDate'])
|
||||
const { proxy } = getCurrentInstance();
|
||||
const title = ref('新增指导巡逻管理');
|
||||
const disabledFoem = ref(false) //表单禁用
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({ gridType:150}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择部门", trigger: "change" }],
|
||||
ksrq: [
|
||||
{ required: true, message: "请选择开始日期", trigger: "change" },
|
||||
{ trigger: "change", validator: validateKsrq(), required: true,}
|
||||
],
|
||||
jsrq: [
|
||||
{ required: true, message: "请选择结束日期", trigger: "change" },
|
||||
{ trigger: "change", validator: validatejsrq(), required: true,}
|
||||
],
|
||||
dz: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||||
zxX: [{ required: true, message: "请选择中心点", trigger: "change" }],
|
||||
gridType: [{ required: true, message: "请输入网格大小", trigger: ['change','blur'] }],
|
||||
});
|
||||
|
||||
onMounted(()=>{
|
||||
emitter.on("coordString", (res) => {
|
||||
if (res.type === "point") {
|
||||
listQuery.value.zxX = res.coord[0];
|
||||
listQuery.value.zxY = res.coord[1];
|
||||
getSquire()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row)=> {
|
||||
dialogForm.value = true
|
||||
disabledFoem.value = type == 'detail' ? true :false
|
||||
if(row){
|
||||
title.value = type == 'edit'?'修改指导巡逻管理':'指导巡逻管理详情'
|
||||
getDataById(row) //根据id查询详情
|
||||
}else{
|
||||
title.value = '新增指导巡逻管理'
|
||||
}
|
||||
}
|
||||
|
||||
// 根据id查询详情
|
||||
const getDataById = (row)=>{
|
||||
listQuery.value = JSON.parse(JSON.stringify(row));
|
||||
listQuery.value.ssbmdm = listQuery.value.zdxlBmList.map(v=>{return v.ssbmdm});
|
||||
listQuery.value.xfsd = listQuery.value.xfsd ? listQuery.value.xfsd.split(',') : []
|
||||
isShowDep.value = listQuery.value.ssbmdm.length > 0 ? true : fasle;
|
||||
setTimeout(()=>{
|
||||
if (row.zxX && row.zxY) {
|
||||
emitter.emit("setMapCenter", { location: [row.zxX, row.zxY], zoomLevel: 15 });
|
||||
let left = [Number(row.x1),Number(row.y1)]
|
||||
let right = [Number(row.x2),Number(row.y2)]
|
||||
let arr = [{ position:[left,right],text:'',id:row.id}]
|
||||
let data = { coords: arr, type:'rectangle', flag:'ht_squire'}
|
||||
emitter.emit("echoPlane", data);
|
||||
}
|
||||
},500)
|
||||
}
|
||||
|
||||
// 获取方块
|
||||
const getSquire = () =>{
|
||||
let params = {
|
||||
jd:listQuery.value.zxX,
|
||||
wd:listQuery.value.zxY,
|
||||
distance:listQuery.value.gridType
|
||||
}
|
||||
qcckGet(params,'/mosty-jmxf/tbZdxl/getFk').then(res=>{
|
||||
let left = [Number(res.leftTopPoint[1]),Number(res.leftTopPoint[0])]
|
||||
let right = [Number(res.rightBottomPoint[1]),Number(res.rightBottomPoint[0])]
|
||||
listQuery.value.x1 = res.leftTopPoint[1]
|
||||
listQuery.value.y1 = res.leftTopPoint[0]
|
||||
listQuery.value.x2 = res.rightBottomPoint[1]
|
||||
listQuery.value.y2 = res.rightBottomPoint[0]
|
||||
let arr = [{ position:[left,right],text:'',id:'12'}]
|
||||
let data = { coords: arr, type:'rectangle', flag:'ht_squire'}
|
||||
emitter.emit("echoPlane", data);
|
||||
emitter.emit("setMapCenter", { location: [params.jd,params.wd], zoomLevel: 15});
|
||||
})
|
||||
}
|
||||
|
||||
function handleBlur(){
|
||||
if(listQuery.value.zxX && listQuery.value.zxY) getSquire()
|
||||
}
|
||||
|
||||
|
||||
|
||||
//获取经纬度
|
||||
function chackLat(type) {
|
||||
if(!listQuery.value.gridType) return proxy.$message({type: "warning", message: "请先选择网格大小"});
|
||||
listQuery.value.zxX = "";
|
||||
listQuery.value.zxY = "";
|
||||
emitter.emit("deletePointArea", 'ht_squire');
|
||||
emitter.emit("drawShape", { type: "point", flag: "ht_zxd" ,isclear:true});
|
||||
}
|
||||
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let data = { ...listQuery.value }
|
||||
if(data.ssbmdm){
|
||||
data.zdxlBmList = data.ssbmdm.map((v)=>{ return {ssbmdm:v} })
|
||||
delete data.ssbmdm
|
||||
}
|
||||
if(data.xfsd) data.xfsd = data.xfsd.join(',')
|
||||
if(title.value == '新增指导巡逻管理'){
|
||||
qcckPost(data,'/mosty-jmxf/tbZdxl').then(res=>{
|
||||
close('新增成功')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}else{
|
||||
qcckPut(data,'/mosty-jmxf/tbZdxl').then(res=>{
|
||||
close('编辑成功')
|
||||
}).catch(()=>{ loading.value = false; })
|
||||
}
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = (val)=>{
|
||||
listQuery.value = { gridType:150}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
isShowDep.value = false;
|
||||
if(val){
|
||||
proxy.$message({type: "success", message: val});
|
||||
emits('updateDate')
|
||||
}
|
||||
}
|
||||
defineExpose({init});
|
||||
onUnmounted(()=>{
|
||||
emitter.off("coordString")
|
||||
})
|
||||
|
||||
</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;
|
||||
}
|
||||
::v-deep .el-cascader__search-input{
|
||||
background: transparent;
|
||||
}
|
||||
.depBox{
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background-color: #062a48;
|
||||
border: 1px solid #114260;
|
||||
color: #fff;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<!-- 头部 -->
|
||||
<PageTitle title="指导巡逻">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
|
||||
<el-icon style="vertical-align: middle"><Delete /> </el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #zdxlBmList="{ row }">
|
||||
<span v-for="it in row.zdxlBmList" :key="it.id">{{it.ssbm}}</span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('edit', row)">修改</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</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_SD }" @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 './components/editAddForm.vue'
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_SF,D_BZ_SD } = proxy.$dict("D_BZ_SF","D_BZ_SD");
|
||||
const addEditDialog = ref();
|
||||
const ids = ref([]);//多选
|
||||
const searchBox = ref() //搜索框
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
showType: "department",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请输入选择所属部门",
|
||||
label: "所属部门"
|
||||
},
|
||||
])
|
||||
const queryFrom = ref({})
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType:'checkBox',
|
||||
loading:false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 210, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "zdxlBmList",
|
||||
showSolt :true,
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "开始日期",
|
||||
prop: "ksrq",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "结束日期",
|
||||
prop: "jsrq",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "网格大小",
|
||||
prop: "gridType",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "dz",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getData() //获取数据
|
||||
tabHeightFn();
|
||||
proxy.mittBus.on("mittFn", (data) => {
|
||||
pageData.keyCount = data;
|
||||
});
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val)=>{
|
||||
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
|
||||
qcckPost(pramas,'/mosty-jmxf/tbZdxl/queryListPage').then(res=>{
|
||||
pageData.tableData = res.records || []
|
||||
pageData.tableConfiger.loading = false
|
||||
pageData.total = res.total
|
||||
}).catch(()=> { pageData.tableConfiger.loading = false })
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getData()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type,row)=>{
|
||||
addEditDialog.value.init(type,row)
|
||||
}
|
||||
|
||||
// 多选
|
||||
const chooseData = (val)=>{
|
||||
if(!val) return false;
|
||||
if(!Array.isArray(val)) return false;
|
||||
ids.value = val.map(v=>{ return v.id })
|
||||
}
|
||||
// 批量删除
|
||||
function delDictItem(ids) {
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(ids,'/mosty-jmxf/tbZdxl/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 - 240;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
@ -1,300 +0,0 @@
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckPut, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { ref, getCurrentInstance, onMounted } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const mxTips = ref("");
|
||||
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 dialogMcztVisible = ref(false);
|
||||
const mxztId = ref("")
|
||||
const title = ref("新增模型"); //弹窗标题
|
||||
const elform = ref(null); //新增表单容器
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
}); //搜索表单
|
||||
//表单验证
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "change" }]
|
||||
});
|
||||
|
||||
// 获取列表
|
||||
function getListData() {
|
||||
tableData.value = [];
|
||||
loadingTable.value = true;
|
||||
qcckGet(listQuery.value, "/mosty-jmxf/tbYjmx").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;
|
||||
if (chackAdd.value) {
|
||||
qcckPost(form.value, "/mosty-jmxf/tbYjmx").then(res => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "新增成功"
|
||||
});
|
||||
loading.value = false;
|
||||
close()
|
||||
}).catch(err => loading.value = false)
|
||||
} else {
|
||||
qcckPut(form.value, "/mosty-jmxf/tbYjmx").then(res => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
loading.value = false;
|
||||
close()
|
||||
}).catch(err => loading.value = false)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//修改
|
||||
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(() => {
|
||||
qcckDelete({}, `/mosty-jmxf/tbYjmx/${row.id}`).then(() => {
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
const openDialog = (row, type) => {
|
||||
if (type == 'start') {
|
||||
mxTips.value = "是否启动该模型？"
|
||||
} else {
|
||||
mxTips.value = "是否停止该模型？"
|
||||
}
|
||||
mxztId.value = row.id;
|
||||
dialogMcztVisible.value = true;
|
||||
}
|
||||
const onComfirm = () => {
|
||||
qcckGet({}, `/mosty-jmxf/tbYjmx/${mxztId.value}`).then(res => {
|
||||
dialogMcztVisible.value = false;
|
||||
proxy.$message({
|
||||
type: "success",
|
||||
message: "修改成功"
|
||||
});
|
||||
getListData();
|
||||
})
|
||||
}
|
||||
//批量删除
|
||||
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 - 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="模型名称">
|
||||
<el-input v-model="listQuery.mxmc" 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="mxmc" align="center" width="180" />
|
||||
<el-table-column label="模型说明" prop="mxsm" align="center" />
|
||||
<el-table-column label="运行周期" prop="yxzq" align="center" />
|
||||
<el-table-column label="运行次数" prop="yxcs" align="center" />
|
||||
<el-table-column label="预警次数" prop="yjcs" align="center" />
|
||||
<el-table-column label="状态" prop="mxzt" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag class="ml-2" v-if="row.mxzt == '01'">使用中</el-tag>
|
||||
<el-tag class="ml-2" v-else-if="row.mxzt == '02'">已停止</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="250px">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="openDialog(row, 'start')" v-if="row.mxzt == '02'" size="small">启动</el-button>
|
||||
<el-button @click="openDialog(row, 'stop')" v-if="row.mxzt == '01'" size="small"
|
||||
type='warning'>停止</el-button>
|
||||
<el-button type="danger" size="small" @click="delDictItem(row)">删除</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="mxmc" style="width:48%">
|
||||
<el-input v-model="form.mxmc" placeholder="请输入模型名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="运行周期(秒)" prop="yxzq" style="width:48%">
|
||||
<el-input v-model="form.yxzq" placeholder="请输入运行周期(秒)"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否运行" prop="sfyx">
|
||||
<el-select v-model="form.sfyx" placeholder="请选择是否运行">
|
||||
<el-option value="1">是</el-option>
|
||||
<el-option value="0">否</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="模型说明" prop="mxsm" style="width: 100%">
|
||||
<el-input v-model="form.mxsm" 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>
|
||||
<el-dialog title="模型" v-model="dialogMcztVisible" @close="dialogMcztVisible = false">
|
||||
<div>{{ mxTips }}</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogMcztVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user