wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

电子围栏

pull/1/head
dearlin 2024-01-30 15:22:17 +08:00
parent 71eea9850c
commit 253e5ae799
10 changed files with 583 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/js/asyncRouter.js
View File

@ -71,6 +71,17 @@ export default [
},
],
},
{
path: "/enterprise_management/information/electronic_fence",
meta: { title: "电子围栏", isSubMenu: false },
component: "children",
children: [
{
path: "",
component: "enterprise_management/electronic_fence/index",
},
],
},
],
},
{

6
src/assets/js/data_dictionary.js
View File

@ -5,6 +5,7 @@ import {
getRegulatoryType,
getDepartmentTree,
getLevelsCorp,
getElectronicFenceTree,
} from "@/request/data_dictionary.js";
import { ref } from "vue";
@ -354,6 +355,11 @@ export const layoutFnGetDepartmentTree = async (params) => {
const resData = await getDepartmentTree(params);
return ref(JSON.parse(resData.zTreeNodes));
};
// 电子围栏树
export const layoutFnGetElectronicFenceTree = async (params) => {
const resData = await getElectronicFenceTree(params);
return ref(JSON.parse(resData.zTreeNodes));
};
// 无法确定DICTIONARIES_ID的数据字典
export const layoutFnGetLevels = async (DICTIONARIES_ID) => {
const resData = await getLevels({ DICTIONARIES_ID });

4
src/views/risk_control/identifying_parts/components/electronic_fence.vue → src/components/electronic_fence/index.vue
View File

@ -74,8 +74,8 @@ const props = defineProps({
const emits = defineEmits(["update:visible", "update:form"]);
const { visible, form } = useVModels(props, emits);
const handleJoin = (row) => {
form.value.ELECTRONIC_FENCE = row.regName;
form.value.ELECTRONIC_FENCE_ID = row.uuid;
form.value.ELECTRONIC_FENCE_NAME = row.regName;
form.value.ELECTRONIC_FENCE_ID = row.id;
visible.value = false;
};
</script>

65
src/components/electronic_fence_tree/index.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<el-input
v-model="filterText"
placeholder="输入关键字进行过滤"
class="mb-10"
/>
<el-tree
ref="treeRef"
:props="{
children: 'nodes',
label: 'name',
}"
node-key="id"
accordion
:data="treeData"
:filter-node-method="fnFilterNode"
@node-click="nodeClick"
:default-expanded-keys="[electronicFenceAreaId]"
/>
</template>
<script setup>
import { ref, watch, watchEffect } from "vue";
import { layoutFnGetElectronicFenceTree } from "@/assets/js/data_dictionary.js";
defineOptions({
name: "LayoutDepartmentTree",
});
const props = defineProps({
refresh: {
type: Boolean,
default: false,
},
electronicFenceAreaId: {
type: String,
default: "",
},
});
const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
const treeRef = ref(null);
const filterText = ref("");
const treeData = ref([]);
watch(filterText, (val) => {
treeRef.value.filter(val);
});
watchEffect(() => {
if (props.refresh) fnGetTreeData();
});
const fnFilterNode = (value, data) => {
if (!value) return true;
return data.name.includes(value);
};
const fnGetTreeData = async () => {
const { value } = await layoutFnGetElectronicFenceTree();
treeData.value = value;
emits("throw-data", value);
emits("update:refresh", false);
};
fnGetTreeData();
const nodeClick = (data) => {
emits("node-click", data);
};
</script>
<style scoped lang="scss"></style>

6
src/request/data_dictionary.js
View File

@ -45,6 +45,12 @@ export const getDepartmentTree = (params) =>
loading: false,
...params,
});
// 部门树
export const getElectronicFenceTree = (params) =>
post("/electronicfence/listTree", {
loading: false,
...params,
});
// 获取岗位
export const getPostListAll = (params) =>
post("/post/listAll", {

11
src/request/enterprise_management.js
View File

@ -43,3 +43,14 @@ export const setDictionaryDelete = (params) =>
export const setUserAdd = (params) => post("/user/saveUser", params); // 用户管理添加
export const setUserEdit = (params) => post("/user/editUser", params); // 用户管理修改
export const getUserView = (params) => post("/user/goEditUser", params); // 用户管理查看
export const getElectronicFenceList = (params) =>
post("/electronicfence/list", params); // 电子围栏区域列表
export const setElectronicFenceData = (params) =>
post("/electronicfence/save", params); // 电子围栏区域新增
export const setElectronicFenceDelete = (params) =>
post("/electronicfence/removeByIds", params); // 电子围栏区域新增
export const setElectronicFenceEdit = (params) =>
post("/electronicfence/edit", params); // 电子围栏区域新增
export const getElectronicFenceView = (params) =>
post("/electronicfence/goEdit", params); // 电子围栏区域详情

143
src/views/enterprise_management/electronic_fence/components/add.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<el-dialog
v-model="visible"
:title="type === 'add' ? '新增' : '修改'"
:before-close="fnClose"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="上级电子围栏">
<el-tag>{{ parentName }}</el-tag>
</el-form-item>
<el-form-item label="所属电子围栏" prop="ELECTRONIC_FENCE_NAME">
<el-input
v-model="form.ELECTRONIC_FENCE_NAME"
style="width: 240px"
disabled
/>
<el-button
type="primary"
@click="data.drawer = true"
style="margin-left: 10px"
>添加</el-button
>
<el-button
type="danger"
@click="fnRemoveRegName"
style="margin-left: 10px"
>移除</el-button
>
</el-form-item>
<el-form-item label="电子围栏区域" prop="ELECTRONIC_FENCE_AREA_NAME">
<el-input
v-model="form.ELECTRONIC_FENCE_AREA_NAME"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="负责人" prop="HEADMAN">
<el-input v-model="form.HEADMAN" placeholder="请输入" />
</el-form-item>
<el-form-item label="电话" prop="TEL">
<el-input v-model="form.TEL" placeholder="请输入" />
</el-form-item>
<el-form-item label="备注" prop="BZ">
<el-input
:autosize="{
minRows: 3,
}"
v-model="form.BZ"
type="textarea"
placeholder="请输入"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="fnSubmit">确认</el-button>
<el-button @click="fnClose">关闭</el-button>
</template>
<electronic-fence v-model:visible="data.drawer" v-model:form="form" />
</el-dialog>
</template>
<script setup>
import { useVModels } from "@vueuse/core";
import { ref, reactive } from "vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import {
setElectronicFenceEdit,
setElectronicFenceData,
} from "@/request/enterprise_management.js";
import ElectronicFence from "@/components/electronic_fence/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
form: {
type: Object,
required: true,
default: () => ({}),
},
type: {
type: String,
required: true,
default: "",
},
parentName: {
type: String,
required: true,
default: "",
},
parentId: {
type: String,
required: true,
default: "",
},
});
const data = reactive({
drawer: false,
});
const emits = defineEmits(["update:visible", "update:form", "get-data"]);
const { visible, form } = useVModels(props, emits);
const rules = {
ELECTRONIC_FENCE_AREA_NAME: [
{ required: true, message: "电子围栏区域名称", trigger: "blur" },
],
};
const formRef = ref(null);
const fnClose = () => {
formRef.value.resetFields();
visible.value = false;
};
const fnRemoveRegName = debounce(
1000,
async () => {
form.value.ELECTRONIC_FENCE_NAME = "";
form.value.ELECTRONIC_FENCE_ID = "";
},
{ atBegin: true }
);
const fnSubmit = debounce(
1000,
async () => {
await useFormValidate(formRef);
props.type === "add"
? await setElectronicFenceData({
...form.value,
PARENT_ID: props.parentId,
})
: await setElectronicFenceEdit({
...form.value,
});
ElMessage.success("操作成功");
fnClose();
emits("get-data");
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>

112
src/views/enterprise_management/electronic_fence/components/structural_diagram.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<el-dialog v-model="visible" title="组织机构结构图" width="80%">
<div style="height: calc(100vh - 200px)">
<RelationGraph ref="relationGraphRef" :options="graphOptions" />
</div>
</el-dialog>
</template>
<script setup>
import { useVModel } from "@vueuse/core";
import RelationGraph from "relation-graph/vue3";
import { nextTick, ref, watchEffect } from "vue";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
treeData: {
type: Array,
required: true,
default: () => [],
},
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const relationGraphRef = ref(null);
const graphOptions = ref({
disableDragNode: "false",
layouts: [
{
label: "中心",
layoutName: "tree",
layoutClassName: "seeks-layout-center",
defaultJunctionPoint: "border",
defaultNodeShape: 0,
defaultLineShape: 1,
min_per_width: 40,
max_per_width: 70,
min_per_height: 200,
},
],
buttonloading: false,
defaultLineMarker: {
markerWidth: 12,
markerHeight: 12,
refX: 6,
refY: 6,
data: "M2,2 L10,6 L2,10 L6,6 L2,2",
},
defaultNodeShape: 1,
defaultLineShape: 2,
defaultJunctionPoint: "tb",
defaultNodeBorderWidth: 0,
backgroundColor: "#08163b",
defaultLineColor: "rgba(0, 186, 189, 1)",
defaultNodeColor: "rgba(0, 206, 209, 1)",
defaultNodeHeight: 150,
defaultNodeWidth: 60,
});
const fnRecursion = (data) => {
let arr = [];
for (let i = 0; i < data.length; i++) {
if (data[i].nodes && data[i].nodes.length > 0) {
arr.push(data[i]);
arr = arr.concat(fnRecursion(data[i].nodes));
} else {
arr.push(data[i]);
}
}
return arr;
};
const fnSeeksGraph = async () => {
await nextTick();
const treeData = fnRecursion(props.treeData);
const __graph_json_data = {
rootId: props.treeData[0].name,
nodes: [],
links: [],
};
for (let i = 0; i < treeData.length; i++) {
if (i === 0) {
__graph_json_data.nodes.push({
id: treeData[i].name,
text: treeData[i].name,
width: 150,
height: 60,
});
} else {
__graph_json_data.nodes.push({
id: treeData[i].name,
text: treeData[i].name,
});
}
for (let j = 0; j < treeData.length; j++) {
if (treeData[i].id === treeData[j].pId) {
__graph_json_data.links.push({
from: treeData[i].name,
to: treeData[j].name,
});
}
}
}
relationGraphRef.value.setJsonData(__graph_json_data, () => {});
};
watchEffect(() => {
if (visible.value) fnSeeksGraph();
});
</script>
<style scoped lang="scss"></style>

225
src/views/enterprise_management/electronic_fence/index.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div>
<layout-card>
<el-row :gutter="12">
<el-col :span="5">
<electronic-fence-tree
:electronic-fence-area-id="ELECTRONIC_FENCE_AREA_ID"
@throw-data="data.treeData = $event"
@node-click="
router.push({
path: '/enterprise_management/information/electronic_fence',
query: {
ELECTRONIC_FENCE_AREA_ID: $event.id,
ELECTRONIC_FENCE_AREA_NAME: $event.name,
},
})
"
v-model:refresh="data.refreshTreeData"
/>
</el-col>
<el-col :span="19">
<el-button
class="mb-10"
@click="data.structuralDiagramVisible = true"
>
结构图
</el-button>
<layout-table
:data="list"
v-model:pagination="pagination"
@get-data="fnGetDataTransfer"
>
<el-table-column label="序号" width="70">
<template v-slot="{ $index }">
{{ serialNumber(pagination, $index) }}
</template>
</el-table-column>
<el-table-column label="电子围栏区域名称">
<template v-slot="{ row }">
<el-button
type="primary"
text
link
@click="
router.push({
path: '/enterprise_management/information/electronic_fence',
query: {
ELECTRONIC_FENCE_AREA_ID: row.ELECTRONIC_FENCE_AREA_ID,
ELECTRONIC_FENCE_AREA_NAME:
row.ELECTRONIC_FENCE_AREA_NAME,
},
})
"
>
{{ row.ELECTRONIC_FENCE_AREA_NAME
}}<el-icon><ArrowRight /></el-icon>
</el-button>
</template>
</el-table-column>
<template v-if="ELECTRONIC_FENCE_AREA_ID !== '0'">
<el-table-column prop="HEADMAN" label="负责人" />
<el-table-column
prop="ELECTRONIC_FENCE_NAME"
label="所属电子围栏"
/>
<el-table-column prop="TEL" label="电话" />
<el-table-column prop="BZ" label="备注" />
<el-table-column label="操作" width="100">
<template v-slot="{ row }">
<el-button
type="primary"
text
link
v-if="buttonJurisdiction.edit"
@click="fnAddOrEdit(row.ELECTRONIC_FENCE_AREA_ID, 'edit')"
>
编辑
</el-button>
<el-button
type="primary"
text
link
v-if="buttonJurisdiction.del"
@click="
fnDelete(
row.ELECTRONIC_FENCE_AREA_ID,
row.ELECTRONIC_FENCE_AREA_NAME
)
"
>
删除
</el-button>
</template>
</el-table-column>
</template>
<template #button v-if="ELECTRONIC_FENCE_AREA_ID !== '0'">
<el-button
type="primary"
v-if="buttonJurisdiction.add"
@click="fnAddOrEdit('', 'add')"
>
新增
</el-button>
<el-button @click="router.back"> 返回 </el-button>
</template>
</layout-table>
</el-col>
</el-row>
</layout-card>
<structural-diagram
v-model:visible="data.structuralDiagramVisible"
:tree-data="data.treeData"
/>
<add
v-model:visible="data.addOrEditDialog.visible"
v-model:form="data.addOrEditDialog.form"
:type="data.addOrEditDialog.type"
:parent-name="ELECTRONIC_FENCE_AREA_NAME"
:parent-id="ELECTRONIC_FENCE_AREA_ID"
@get-data="fnResetPaginationTransfer"
/>
</div>
</template>
<script setup>
import { serialNumber } from "@/assets/js/utils.js";
import useListData from "@/assets/js/useListData.js";
import {
getElectronicFenceList,
getElectronicFenceView,
setElectronicFenceDelete,
} from "@/request/enterprise_management.js";
import { nextTick, reactive, ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import StructuralDiagram from "./components/structural_diagram.vue";
import ElectronicFenceTree from "@/components/electronic_fence_tree/index.vue";
import Add from "./components/add.vue";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
const router = useRouter();
const route = useRoute();
const parentIdDefault = "0";
const parentNameDefault = "（无）此项为顶级部门";
const ELECTRONIC_FENCE_AREA_ID = ref(
route.query.ELECTRONIC_FENCE_AREA_ID || parentIdDefault
);
const ELECTRONIC_FENCE_AREA_NAME = ref(
route.query.ELECTRONIC_FENCE_AREA_NAME || parentNameDefault
);
const { list, pagination, fnGetData, fnResetPagination } = useListData(
getElectronicFenceList,
{
otherParams: { ELECTRONIC_FENCE_AREA_ID: ELECTRONIC_FENCE_AREA_ID.value },
}
);
const data = reactive({
treeData: [],
refreshTreeData: false,
structuralDiagramVisible: false,
addOrEditDialog: {
visible: false,
type: "",
form: {
NAME: "",
LEVEL: "",
DEP_ORDER: "",
HEADMAN: "",
TEL: "",
FUNCTIONS: "",
BZ: "",
ISSUPERVISE: "0",
checkedIds: [],
},
},
});
const buttonJurisdiction = await useButtonJurisdiction("department");
const fnGetDataTransfer = () => {
data.refreshTreeData = true;
fnGetData({
ELECTRONIC_FENCE_AREA_ID: ELECTRONIC_FENCE_AREA_ID.value,
});
};
const fnResetPaginationTransfer = () => {
data.refreshTreeData = true;
fnResetPagination({
ELECTRONIC_FENCE_AREA_ID: ELECTRONIC_FENCE_AREA_ID.value,
});
};
onBeforeRouteUpdate((to) => {
ELECTRONIC_FENCE_AREA_ID.value =
to.query.ELECTRONIC_FENCE_AREA_ID || parentIdDefault;
ELECTRONIC_FENCE_AREA_NAME.value =
to.query.ELECTRONIC_FENCE_AREA_NAME || parentNameDefault;
fnResetPaginationTransfer();
});
const fnAddOrEdit = async (ELECTRONIC_FENCE_AREA_ID, type) => {
data.addOrEditDialog.visible = true;
await nextTick();
data.addOrEditDialog.type = type;
if (type === "edit") {
const resData = await getElectronicFenceView({
ELECTRONIC_FENCE_AREA_ID,
});
data.addOrEditDialog.form = resData.pd;
}
};
const fnDelete = debounce(
1000,
async (ELECTRONIC_FENCE_AREA_ID, NAME) => {
await ElMessageBox.confirm(`确定要删除【${NAME}】吗？`, {
type: "warning",
});
await setElectronicFenceDelete({ ELECTRONIC_FENCE_AREA_ID });
ElMessage.success("删除成功");
fnResetPaginationTransfer();
data.refreshTreeData = true;
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>

4
src/views/risk_control/identifying_parts/components/add.vue
View File

@ -29,7 +29,7 @@
</el-form-item>
<el-form-item label="电子围栏" prop="ELECTRONIC_FENCE">
<el-input
v-model="form.ELECTRONIC_FENCE"
v-model="form.ELECTRONIC_FENCE_NAME"
style="width: 240px"
disabled
/>
@ -67,7 +67,7 @@ import {
setIdentifyingPartsEdit,
} from "@/request/risk_control.js";
import LayoutUpload from "@/components/upload/index.vue";
import ElectronicFence from "./electronic_fence.vue";
import ElectronicFence from "@/components/electronic_fence/index.vue";
const props = defineProps({
visible: {