更新

src/views/backOfficeSystem/ExcavationResearch/WarningModel/index.vue

@@ -1,39 +1,14 @@
 <template>
-  <div class="statistical-analysis">
-    <!-- 左侧树形菜单 -->
-    <div class="left-menu">
-      <!-- 这个部分用的是组件-后期替换 -->
-      <el-tree
-        :data="treeData"
-        :props="defaultProps"
-        @node-click="handleNodeClick"
-        default-expand-all
-      />
-    </div>
-
-    <!-- 右侧内容区 -->
-    <div class="right-content">
-      <Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
-        <template #defaultSlot>
-          <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
-        </template>
-      </Search>
-      <div class="tableCnt  mb10 pl10 pr10">
-        <PageTitle title="发掘内容" style="color:#333">
-          <el-button type="primary" size="small" @click="addEdit('add', '')">
-            <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
-            <span style="vertical-align: middle">新增</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">导入内容</span>
-          </el-button>
-          <el-button type="danger" size="small" @click="exportData">
-            <el-icon style="vertical-align: middle"><Delete /></el-icon>
-            <span style="vertical-align: middle">删除</span>
-          </el-button>
-        </PageTitle>
   <div>
+    <div class="titleBox">
+      <PageTitle title="预警列表"></PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" />
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
       <MyTable
         :tableData="pageData.tableData"
         :tableColumn="pageData.tableColumn"
@@ -41,87 +16,18 @@
         :key="pageData.keyCount"
         :tableConfiger="pageData.tableConfiger"
         :controlsWidth="pageData.controlsWidth"
-            @chooseData="chooseData">
+      >
-            <!-- 操作 -->
+        <template #image="{ row }">
-            <template #controls="{ row }">
+          <img :src="row.image" alt="">
-              <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
-              <el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
         </template>
-          </MyTable>
-          <div class="ww100 flex just-center mt8"> <el-button type="primary">智能解析</el-button> </div>
-        </div>
-      </div>
-      <div class="tableCnt mb10 pl10 pr10">
-        <PageTitle title="模型智能识别/LP解析结果" style="color:#333;"></PageTitle>
-        <div ref="searchBox" class="mb8">
-          <el-button type="primary" size="small" @click="addEdit('add', '')">
-            <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
-            <span style="vertical-align: middle">新增</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">一件布控</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">级别变更</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">警种变更</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">指定分配</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">添加标签</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">协控申请</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">撤控申请</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">移交管控</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">批量导入</span>
-          </el-button>
-          <el-button type="primary" size="small" @click="importData">
-            <el-icon style="vertical-align: middle"><Upload /></el-icon>
-            <span style="vertical-align: middle">导出</span>
-          </el-button>
-          <el-button type="danger" size="small" @click="exportData">
-            <el-icon style="vertical-align: middle"><Delete /></el-icon>
-            <span style="vertical-align: middle">批量删除</span>
-          </el-button>
-        </div>
-        <div>
-          <MyTable
-            :tableData="pageData.tableData2"
-            :tableColumn="pageData.tableColumn2"
-            :tableHeight="pageData.tableHeight2"
-            :key="pageData.keyCount"
-            :tableConfiger="pageData.tableConfiger2"
-            :controlsWidth="pageData.controlsWidth"
-            @chooseData="chooseData">
-            <!-- 操作 -->
         <template #controls="{ row }">
-              <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
+          <el-button type="primary"  size="small" >详情</el-button >
-              <el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
         </template>
       </MyTable>
       <Pages
         @changeNo="changeNo"
         @changeSize="changeSize"
-            :tableHeight="pageData.tableHeight2"
+        :tableHeight="pageData.tableHeight"
         :pageConfiger="{
           ...pageData.pageConfiger,
           total: pageData.total
@@ -129,45 +35,40 @@
       ></Pages>
     </div>
   </div>
-    </div>
-  </div>
 </template>
 
 <script setup>
-import CheckBox from "@/components/checkBox/index.vue";
+import { ElMessage } from "element-plus";
 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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
-import { Delete } from "@element-plus/icons";
+
-import { fa } from "element-plus/es/locale.mjs";
+const { proxy } = getCurrentInstance();
+
+const searchBox = ref(); //搜索框
+
 const searchConfiger = ref([
-  { label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" },
+  {
-  { label: "是否关注", prop: 'sfgz', showType: "defaultSlot" },
+    label: "所属部门",
+    prop: "department",
+    placeholder: "请选择所属部门",
+    showType: "department"
+  },
 ]);
-const checkData = reactive({
+
-  list: ["是", "否"],
-  hasChoose: ["是", "否"]
-});
-const searchBox = ref();
 const pageData = reactive({
-  tableData: [],
+  tableData: [
-  tableData2: [],
+    {image:'',yjnr:'xxxj街道抢劫xxx',hjdz:'sssss',jzdz:'22222'}
+  ],
   keyCount: 0,
   tableConfiger: {
     rowHieght: 61,
-    showSelectType: "checkBox",
+    showSelectType: "null",
     loading: false
   },
-  tableConfiger2: {
-    rowHieght: 61,
-    showSelectType: "checkBox",
-    loading: false,
-    showIndex:false
-  },
-  tableHeight:230,
   total: 0,
   pageConfiger: {
     pageSize: 20,
@@ -175,98 +76,80 @@ const pageData = reactive({
   },
   controlsWidth: 120,
   tableColumn: [
-    { label: "身份标签", prop: "nrbh" },
+    { label: "预警图片", prop: "image" ,showSolt:true},
-    { label: "行为标签", prop: "lx" },
+    { label: "预警内容", prop: "yjnr" },
-    { label: "轨迹", prop: "gj" },
+    { label: "户籍地址", prop: "hjdz" },
-    { label: "风险等级", prop: "fxdj" },
+    { label: "居住地址", prop: "jzdz" },
-    { label: "定义积分", prop: "dyjf" },
-    { label: "处置措施", prop: "czcs" },
-  ],
-  tableColumn2: [
-    { label: "积分排名", prop: "nrbh" },
-    { label: "基础信息", prop: "lx" },
-    { label: "列控信息", prop: "nr" },
-    { label: "管控信息", prop: "nr" },
-    { label: "风险积分", prop: "nr" },
-    { label: "评分项", prop: "nr" },
-    { label: "布控原因", prop: "nr" },
-    { label: "是否关注", prop: "nr" },
-  ],
-})
-
-
-// 树形菜单数据
-const treeData = ref([
-  {
-    label: "林芝市公安局（200）",
-    children: [
-      { label: "工布江达县公安局（100）" },
-      { label: "工布江达城区派出所（10）" },
-      { label: "某某某派出所（10）" },
-      { label: "某某某公安局（100）" }
   ]
-  }
+});
-]);
+onMounted(() => {
+  getList();
+  tabHeightFn();
+});
 
-const defaultProps = {
+// 搜索
-  children: "children",
+const onSearch = (val) => {
-  label: "label"
+  queryFrom.value = { ...val };
+  pageData.pageConfiger.pageCurrent = 1;
+  getList();
 };
 
-
+const changeNo = (val) => {
-// 事件处理函数
+  pageData.pageConfiger.pageNum = val;
-const handleNodeClick = (data) => {
+  getList();
-  console.log(data);
 };
 
-const handleDateChange = () => {
+const changeSize = (val) => {
-  // 处理日期变化
+  pageData.pageConfiger.pageSize = val;
+  getList();
 };
 
-const handleExport = () => {
+// 获取列表
-  // 处理导出
+const getList = () => {
+ 
 };
 
+// 表格高度计算
 const tabHeightFn = () => {
-  pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 690;
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
   window.onresize = function () {
     tabHeightFn();
   };
 };
-
-onMounted(() => {
-  tabHeightFn()
-});
 </script>
 
 <style lang="scss" scoped>
-.statistical-analysis {
+.checkbox-group {
+  display: flex;
+  gap: 20px;
+}
+
+.basic-info {
+  display: flex;
+  gap: 15px;
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    border-radius: 4px;
+
+    img {
       width: 100%;
       height: 100%;
-  .left-menu {
+      object-fit: cover;
-    float: left;
-    width: 280px;
-    height: calc(100% - 20px);
-    padding: 20px;
-    margin-top: 20px;
-    border-radius: 4px;
-    background-color: #fff;
-    border-right: 1px solid #e8e8e8;
-  }
-  .right-content {
-    float: left;
-    width: calc(100% - 290px);
-    height: 100%;
-    padding: 0 20px 0 ;
-    margin-top: 20px;
-    margin-left: 10px;
-    border-radius: 4px;
-    box-sizing: border-box;
-    .tableCnt{
-      height: calc((100vh - 253px)/2 );
-      background: #fff;
-      border-radius: 4px;
     }
   }
+
+  .info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+}
+
+.control-buttons {
+  display: flex;
+  gap: 10px;
 }
 </style>