我的布控。四色预警

src/views/backOfficeManage/ControlManage/myControl/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="我的布控">
+        <el-button type="primary" @click="addEdit('add', '')">
+          发起布控
+        </el-button>
+        <el-button type="primary" @click="addEdit('add', '')">导出</el-button>
+        <el-button type="danger" @click="addEdit('add', '')"
+          >批量删除</el-button
+        >
+        <el-button type="primary" @click="openAddMxFn">
+          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
+          <span style="vertical-align: middle">添加标签模型</span>
+        </el-button>
+        <el-button type="primary" @click="openAddMxFn">
+          <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"
+      >
+      </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 #sfjs="{ row }">
+          <DictTag :value="row.sfjs" :options="list.sf" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :value="row.xxlx" :options="list.xxlx" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
+          <el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+    <!-- 编辑详情 -->
+    <EditAddForm
+      ref="detailDiloag"
+      :dic="{ xxlx: list.xxlx, sf: list.sf }"
+      @updateDate="getList"
+    />
+    <Drawer ref="drawerDiloag" />
+    <AddMx ref="addmxDiloag" />
+  </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 Drawer from "./components/drawer.vue";
+import AddMx from "./components/AddMx.vue";
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const qypzDialog = ref();
+const detailDiloag = ref();
+const searchBox = ref(); //搜索框
+const chooseType = ref("学校"); //选择的类型
+const list = reactive({
+  chooseList: ["学校", "医院", "娱乐场所", "民爆库房"],
+  xxlx: [
+    { label: "职业学校", value: "01" },
+    { label: "大专", value: "02" },
+    { label: "本科", value: "03" },
+    { label: "研究生", value: "04" },
+    { label: "博士", value: "05" }
+  ],
+  sf: [
+    { label: "是", value: "1" },
+    { label: "否", value: "0" }
+  ]
+});
+const addmxDiloag=ref()
+const drawerDiloag=ref()
+const searchConfiger = ref([
+  {
+    label: "布控级别",
+    prop: "sfbqdl",
+    placeholder: "请选择布控级别",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控对象",
+    prop: "sfbqdl",
+    placeholder: "请选择布控对象",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控状态",
+    prop: "sfbqdl",
+    placeholder: "请选择布控状态",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "布控时间",
+    prop: "sfbqdl",
+    placeholder: "请选择布控时间",
+    showType: "datetimerange",
+    options: list.xxlx
+  },
+  {
+    label: "预警标签模型",
+    prop: "sfbqdl",
+    placeholder: "请选择预警标签模型",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "最近预警时间",
+    prop: "sfbqdl",
+    placeholder: "请选择最近预警时间",
+    showType: "date",
+    options: list.xxlx
+  },
+  {
+    label: "布控对象信息",
+    prop: "sfbqdl",
+    placeholder: "请选择布控对象信息",
+    showType: "select",
+    options: list.xxlx
+  },
+  {
+    label: "处置接收部门",
+    prop: "sfbqdl",
+    placeholder: "请选择处置接收部门",
+    showType: "select",
+    options: list.xxlx
+  }
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  // 布控级别 布控标题 布控对象 布控对象信息 预警标签模型 布控范围 预警信息 处置接收单位 处置要求 开始时间 结束时间 最近预警时间 失效时间 布控发起人 布控状态
+  tableColumn: [
+    { label: "布控级别", prop: "name" },
+    { label: "布控标题", prop: "xxrs" },
+    { label: "布控对象", prop: "sfjs", showSolt: true },
+    { label: "布控对象信息", prop: "dxxx", showSolt: true },
+    { label: "预警标签模型", prop: "xzxm" },
+    { label: "布控范围", prop: "bkfw" },
+    { label: "预警信息", prop: "yjxx", showSolt: true },
+    { label: "处置接收单位", prop: "jsdw", showSolt: true },
+    { label: " 处置要求", prop: "czyq", showSolt: true },
+    { label: " 开始时间", prop: "kssj", showSolt: true },
+    { label: " 结束时间", prop: "jssj", showSolt: true },
+    { label: " 最近预警时间", prop: "yjsj", showSolt: true },
+    { label: " 失效时间", prop: "sxsj", showSolt: true },
+    { label: " 布控发起人", prop: "fqr", showSolt: true },
+    { label: " 布控状态", prop: "bkzt", showSolt: true }
+  ]
+});
+onMounted(() => {
+  getList(chooseType.value);
+  tabHeightFn();
+});
+
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val };
+  pageData.pageConfiger.pageCurrent = 1;
+  getList(chooseType.value);
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageNum = val;
+  getList(chooseType.value);
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList(chooseType.value);
+};
+const openAddMxFn=()=>{
+  addmxDiloag.value.init();
+  // drawerDiloag.value.init();打开侧边组件
+}
+// 获取列表
+const getList = (val) => {
+  let url = "";
+  switch (val) {
+    case "学校":
+      url = "/mosty-lzcj/tbDwXx/queryList";
+      break;
+    case "医院":
+      url = "/mosty-lzcj/tbDwYy/queryList";
+      break;
+    case "娱乐场所":
+      url = "/mosty-lzcj/TbDwYlth/queryList";
+      break;
+    case "民爆库房":
+      url = "/mosty-lzcj/tbDwMbkf/queryList";
+      break;
+  }
+  pageData.tableConfiger.loading = true;
+  let data = { ...pageData.pageConfiger, ...queryFrom.value };
+  qcckPost(data, url)
+    .then((res) => {
+      pageData.tableData = res.records || [];
+      pageData.total = res.total;
+      pageData.tableConfiger.loading = false;
+    })
+    .catch(() => {
+      pageData.tableConfiger.loading = false;
+    });
+};
+// 删除
+const delDictItem = (ids) => {
+  let url = "";
+  switch (chooseType.value) {
+    case "学校":
+      url = "/mosty-lzcj/tbDwXx/delete";
+      break;
+    case "医院":
+      url = "/mosty-lzcj/tbDwYy/delete";
+      break;
+    case "娱乐场所":
+      url = "/mosty-lzcj/TbDwYlth/delete";
+      break;
+    case "民爆库房":
+      url = "/mosty-lzcj/tbDwMbkf/delete";
+      break;
+  }
+  // proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
+  //   qcckPost(ids,url).then(()=>{
+  //     proxy.$message({ type: "success",  message: "删除成功" });
+  //     getList(chooseType.value);
+  //   })
+  // }).catch(() => {});
+};
+
+// 新增
+const addEdit = (type, row) => {
+  detailDiloag.value.init(type, row, chooseType.value);
+};
+
+// 表格高度计算
+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>