电子围栏

src/assets/js/asyncRouter.js

@@ -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",
+              },
+            ],
+          },
         ],
       },
       {

src/assets/js/data_dictionary.js

@@ -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 });

src/components/electronic_fence/index.vue

@@ -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_NAME = row.regName;
-  form.value.ELECTRONIC_FENCE_ID = row.uuid;
+  form.value.ELECTRONIC_FENCE_ID = row.id;
   visible.value = false;
 };
 </script>

src/components/electronic_fence_tree/index.vue

@@ -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>

src/request/data_dictionary.js

@@ -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", {

src/request/enterprise_management.js

@@ -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); // 电子围栏区域详情
+

src/views/enterprise_management/electronic_fence/components/add.vue

@@ -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>

src/views/enterprise_management/electronic_fence/components/structural_diagram.vue

@@ -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>

src/views/enterprise_management/electronic_fence/index.vue

@@ -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>

src/views/risk_control/identifying_parts/components/add.vue

@@ -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: {