From 81fd8c87374a6e665ea56475f04366fc65db5e94 Mon Sep 17 00:00:00 2001
From: wangjie <931696759@qq.com>
Date: Fri, 25 Apr 2025 17:06:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=A0=94=E5=88=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ZdryFjyp/components/deepIn.vue            | 304 +++++++++++++---
 .../ExcavationResearch/ZdryFjyp/index.vue     | 324 +++++++++---------
 2 files changed, 430 insertions(+), 198 deletions(-)

diff --git a/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/components/deepIn.vue b/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/components/deepIn.vue
index 397de41..454e171 100644
--- a/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/components/deepIn.vue
+++ b/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/components/deepIn.vue
@@ -1,60 +1,278 @@
 <template>
-  <div class="deepIn-box">
-    <el-dialog v-model="modelValue" custom-class="zdy_sdyp_dialog" width="100%" :modal="false" :show-close="false">
-        <template #title>
-            <div class="topHead flex just-between align-center">
-                <span class="f30">深度研判</span>
-                <el-icon class="pointer" @click="handleClose" size="30px"><Close/></el-icon> 
+  <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">
+      <div class="left">
+        <div class="top" ref="topBox">
+          <div class="title">图像信息</div>
+          <MyTable
+            :tableData="pageData.tableData"
+            :tableColumn="pageData.tableColumn"
+            :tableHeight="250"
+            :key="pageData.keyCount"
+            :tableConfiger="pageData.tableConfiger"
+            :controlsWidth="pageData.controlsWidth"
+            @chooseData="chooseData"
+          >
+            <template #controls="{ row }">
+              <el-link size="small" type="success" @click="addEdit('edit', row)">研判确认</el-link>
+              <el-link size="small" type="primary">查看</el-link>
+              <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
+            </template>
+          </MyTable>
+        </div>
+        <div class="mt20">
+          <div class="title">人员信息</div>
+          <MyTable
+            :tableData="pageData.tableDataPeople"
+            :tableColumn="pageData.tableColumnPeople"
+            :tableHeight="pageData.tableHeight"
+            :key="pageData.keyCount"
+            :tableConfiger="pageData.tableConfiger"
+            :controlsWidth="pageData.controlsWidth"
+            @chooseData="chooseData"
+          >
+            <template #controls="{ row }">
+              <el-link size="small" type="primary" @click="addEdit('edit', row)">关联重点人</el-link>
+              <el-link size="small" type="primary">查看</el-link>
+              <el-link size="small" type="primary" @click="deleteRow(row)">修改</el-link>
+            </template>
+          </MyTable>
+          <Pages
+            class="mt10"
+            @changeNo="changeNo"
+            @changeSize="changeSize"
+            :tableHeight="pageData.tableHeight"
+            :pageConfiger="{
+              ...pageData.pageConfiger,
+              total: pageData.total
+            }"
+          ></Pages>
+        </div>
+      </div>
+      <el-divider direction="vertical" style="height: 100%" />
+      <div class="right">
+        <div class="title">轨迹信息</div>
+
+        <div>
+          <div class="step" v-for="(item, index) in stepList" :key="`${index}stepList`">
+            <div class="icon">
+              <div class="circle"></div>
+              <div class="line"></div>
             </div>
-            <div class="deepIn-cnt"></div>
-        </template>
-    </el-dialog>
+
+            <div>
+              <div>{{ item.time }}</div>
+              <div class="desc">
+                <div class="ellipsis mb5">是由：{{ item.sy }}</div>
+                <div class="ellipsis mb5">数据来源：{{ item.sjly }}</div>
+                <div class="ellipsis">所在地址：{{ item.szdz }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref,defineEmits } from "vue";
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-    modelValue: {
-        type: Boolean,
-        default: false, 
+  import { ref, reactive, onMounted, nextTick } from "vue";
+  import MyTable from "@/components/aboutTable/MyTable.vue";
+  import Pages from "@/components/aboutTable/Pages.vue";
+  const dialogForm = ref(false);
+  const activeName = ref("basic");
+  const title = ref("深度研判");
+  const listQuery = ref({});
+  const topBox = ref();
+  const areaOptions = ref([]); // 区域选项数据
+
+  // 初始化数据
+  const init = (type, row) => {
+    dialogForm.value = true;
+    tabHeightFn();
+    // 根据type和row初始化表单数据
+  };
+
+  const close = () => {
+    dialogForm.value = false;
+  };
+  const pageData = reactive({
+    tableData: [
+      {
+        tpzy: "GBJD01",
+        dwmc: "工布江达重点人",
+        zylyxz: "涉稳",
+        cjhx: "系统新增",
+        ytp: "低级",
+        rxxsd: "2025/05/05"
+      }
+    ],
+    tableDataPeople: [
+      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" }
+    ],
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "checkBox",
+      loading: false
+    },
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    },
+    controlsWidth: 220,
+    tableColumn: [
+      { label: "图片资源", prop: "tpzy" },
+      { label: "单位名称", prop: "dwmc" },
+      { label: "资源来源详址", prop: "zylyxz" },
+      { label: "采集画像", prop: "cjhx" },
+      { label: "原图片", prop: "ytp" },
+      { label: "人像相似度", prop: "rxxsd" }
+    ],
+
+    tableColumnPeople: [
+      { label: "姓名", prop: "xm" },
+      { label: "性别", prop: "xb" },
+      { label: "身份证号", prop: "sfzh" },
+      { label: "户籍地", prop: "hjd" },
+      { label: "现居地", prop: "xjd" },
+      { label: "手机号", prop: "sjh" },
+      { label: "车牌号", prop: "cph" },
+      { label: "管控状态", prop: "gkzt" }
+    ]
+  });
+  const stepList = ref([
+    {
+      time: "2025-4-25 16:40",
+      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
+      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
+      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
+    },
+    {
+      time: "2025-4-25 16:40",
+      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
+      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
+      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
     }
-});
-// 关闭弹窗
-const handleClose = () => {
-  emit('update:modelValue', false);
-};
+  ]);
+  // 表格高度计算
+  const tabHeightFn = () => {
+    nextTick(() => {
+      console.log("topBox.value", topBox.value.offsetHeight);
+      pageData.tableHeight = window.innerHeight - 410 - 250;
+      console.log("pageData.tableHeight", pageData.tableHeight);
+    });
+    console.log("pageData.tableHeight", pageData.tableHeight);
+    window.onresize = function () {
+      tabHeightFn();
+    };
+  };
+
+  defineExpose({ init });
 </script>
 
 <style lang="scss" scoped>
-.deepIn-box {
-    width: 100%;
-    height: 100vh;
-    .topHead{
-        color: #000;
-        height: 60px;
-        background: pink;
+  .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;
+      display: flex;
+      .title {
+        font-size: 20px;
+
+        font-weight: 700;
+        margin-bottom: 20px;
+      }
+      .left {
+        width: calc(100% - 400px);
+      }
+      .right {
+        width: 400px;
         padding: 10px;
-        box-sizing: border-box;
+        .step {
+          //   position: relative;
+          display: flex;
+          gap: 5px;
+          box-sizing: border-box;
+          .desc {
+            margin: 5px;
+            color: #929090;
+            width: 350px;
+          }
+          .icon {
+            // position: absolute;
+            // top: 0;
+            // left: 0;
+            text-align: center;
+            .circle {
+              height: 14px;
+              width: 14px;
+              border-radius: 50%;
+              background-color: rgb(3, 134, 251);
+            }
+            .line {
+              margin: 0 auto;
+              width: 0;
+              height: calc(100% - 14px);
+              border: 1px dashed rgb(3, 134, 251);
+            }
+          }
+        }
+      }
     }
-    .deepIn-cnt{
-        height: calc(100vh - 60px);
-        background: #000;
-        overflow: hidden;
-        overflow-y: auto;
+
+    .form-row {
+      display: flex;
+
+      .el-form-item {
+        flex: 1;
+      }
     }
-    ::v-deep .el-dialog{
-        margin: 0;
+
+    .upload-group {
+      display: flex;
+      // gap: 20px;
+
+      .el-form-item {
+        flex: 1;
+      }
     }
-    ::v-deep .el-dialog__body{
-        padding: 0;
+
+    .unit {
+      margin-left: 5px;
     }
-    ::v-deep .el-dialog__header{
-        padding: 0;
+    ::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>
-<style lang="scss">
-.zdy_sdyp_dialog{}
-</style>
\ No newline at end of file
diff --git a/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue b/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue
index dac4211..6707460 100644
--- a/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue
+++ b/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue
@@ -3,12 +3,7 @@
     <!-- 左侧树形菜单 -->
     <div class="left-menu">
       <!-- 这个部分用的是组件-后期替换 -->
-      <el-tree
-        :data="treeData"
-        :props="defaultProps"
-        @node-click="handleNodeClick"
-        default-expand-all
-      />
+      <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all />
     </div>
 
     <!-- 右侧内容区 -->
@@ -18,8 +13,8 @@
           <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
         </template>
       </Search>
-      <div class="tableCnt  mb10 pl10 pr10">
-        <PageTitle title="发掘内容" style="color:#333">
+      <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>
@@ -41,20 +36,28 @@
             :key="pageData.keyCount"
             :tableConfiger="pageData.tableConfiger"
             :controlsWidth="pageData.controlsWidth"
-            @chooseData="chooseData">
+            @chooseData="chooseData"
+          >
             <!-- 操作 -->
             <template #controls="{ row }">
               <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 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>
+        <PageTitle title="模型智能识别/LP解析结果" style="color: #333"></PageTitle>
         <div ref="searchBox" class="mb8">
-          <el-button  v-for="(it,idx) in btns" :key="idx" :type="it.type" :icon="it.icon" size="small" @click="importData">
+          <el-button
+            v-for="(it, idx) in btns"
+            :key="idx"
+            :type="it.type"
+            :icon="it.icon"
+            size="small"
+            @click="importData"
+          >
             {{ it.label }}
           </el-button>
         </div>
@@ -66,7 +69,8 @@
             :key="pageData.keyCount"
             :tableConfiger="pageData.tableConfiger2"
             :controlsWidth="pageData.controlsWidth2"
-            @chooseData="chooseData">
+            @chooseData="chooseData"
+          >
             <!-- 操作 -->
             <template #controls="{ row }">
               <el-link size="small" type="primary" @click="handleDeepIn(row.id)">深度研判</el-link>
@@ -88,162 +92,172 @@
       </div>
     </div>
   </div>
-  <teleport to="#app" v-if="showScreen">
-    <!-- 深度研判 -->
-    <DeepIn v-model="showScreen"></DeepIn>
-  </teleport>
+  <DeepIn ref="deepIn"></DeepIn>
 </template>
 
 <script setup>
-import DeepIn from './components/deepIn.vue'
-import CheckBox from "@/components/checkBox/index.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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
-import { reactive, ref, onMounted, getCurrentInstance } from "vue";
-const showScreen = ref(false);
-const searchConfiger = ref([
-  { label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" },
-  { label: "是否关注", prop: 'sfgz', showType: "defaultSlot" },
-]);
-const checkData = reactive({
-  list: ["是", "否"],
-  hasChoose: ["是", "否"]
-});
-const pageData = reactive({
-  tableData: [
-    {nrbh:'测试内容',lx:'1',nr:'测试内容'},
-    {nrbh:'测试内容',lx:'1',nr:'测试内容'},
-  ],
-  tableData2: [
-    {pm:'1',lx:'1',zp:'xx',xm:'张三',sfzh:'12345619900101001X',jzdz:'浙江省杭州市西湖区',rylb:'xx',bkyy:'xx',fxdj:'xx',fxjf:'xx',mxbq:'xx',sfgz:'是'},
-  ],
-  keyCount: 0,
-  tableConfiger: {
-    rowHieght: 61,
-    showSelectType: "checkBox",
-    loading: false
-  },
-  tableConfiger2: {
-    rowHieght: 61,
-    showSelectType: "checkBox",
-    loading: false,
-    showIndex:false
-  },
-  tableHeight:230,
-  total: 0,
-  pageConfiger: {
-    pageSize: 20,
-    pageCurrent: 1
-  },
-  controlsWidth: 120,
-  controlsWidth2:220,
-  tableColumn: [
-    { label: "内容编号", prop: "nrbh" },
-    { label: "类型", prop: "lx" },
-    { label: "内容", prop: "nr" },
-  ],
-  tableColumn2: [
-    { label: "积分排名", prop: "pm" },
-    { label: "照片", prop: "zp" },
-    { label: "姓名", prop: "xm" },
-    { label: "身份证号", prop: "sfzh" ,showOverflowTooltip:true},
-    { label: "居住地址", prop: "jzdz" ,showOverflowTooltip:true},
-    { label: "人员类别", prop: "rylb" ,showOverflowTooltip:true},
-    { label: "布控原因", prop: "bkyy" ,showOverflowTooltip:true},
-    { label: "风险等级", prop: "fxdj" ,showOverflowTooltip:true},
-    { label: "风险积分", prop: "fxjf" ,showOverflowTooltip:true},
-    { label: "模型标签", prop: "mxbq" ,showOverflowTooltip:true},
-    { label: "是否关注", prop: "sfgz" ,showOverflowTooltip:true},
-  ],
-})
-const btns = reactive([
-  { label: "新增", type: "primary", icon: "CirclePlus" },
-  { label: "一件布控", type: "primary"},
-  { label: "级别变更", type: "primary"},
-  { label: "警种变更", type: "primary"},
-  { label: "指定分配", type: "primary"},
-  { label: "添加标签", type: "primary"},
-  { label: "协控申请", type: "primary"},
-  { label: "撤控申请", type: "primary"},
-  { label: "移交管控", type: "primary"},
-  { label: "批量导入", type: "primary"},
-  { label: "导出", type: "primary"},
-  { label: "批量删除", type: "danger", icon: "Delete"},
-])
+  import DeepIn from "./components/deepIn.vue";
+  import CheckBox from "@/components/checkBox/index.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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 
-const searchBox = ref();
-
-// 树形菜单数据
-const treeData = ref([
-  {
-    label: "林芝市公安局（200）",
-    children: [
-      { label: "工布江达县公安局（100）" },
-      { label: "工布江达城区派出所（10）" },
-      { label: "某某某派出所（10）" },
-      { label: "某某某公安局（100）" }
+  const searchConfiger = ref([
+    { label: "管辖部门", prop: "department", placeholder: "请选择管辖部门", showType: "select" },
+    { label: "是否关注", prop: "sfgz", showType: "defaultSlot" }
+  ]);
+  const checkData = reactive({
+    list: ["是", "否"],
+    hasChoose: ["是", "否"]
+  });
+  const pageData = reactive({
+    tableData: [
+      { nrbh: "测试内容", lx: "1", nr: "测试内容" },
+      { nrbh: "测试内容", lx: "1", nr: "测试内容" }
+    ],
+    tableData2: [
+      {
+        pm: "1",
+        lx: "1",
+        zp: "xx",
+        xm: "张三",
+        sfzh: "12345619900101001X",
+        jzdz: "浙江省杭州市西湖区",
+        rylb: "xx",
+        bkyy: "xx",
+        fxdj: "xx",
+        fxjf: "xx",
+        mxbq: "xx",
+        sfgz: "是"
+      }
+    ],
+    keyCount: 0,
+    tableConfiger: {
+      rowHieght: 61,
+      showSelectType: "checkBox",
+      loading: false
+    },
+    tableConfiger2: {
+      rowHieght: 61,
+      showSelectType: "checkBox",
+      loading: false,
+      showIndex: false
+    },
+    tableHeight: 230,
+    total: 0,
+    pageConfiger: {
+      pageSize: 20,
+      pageCurrent: 1
+    },
+    controlsWidth: 120,
+    controlsWidth2: 220,
+    tableColumn: [
+      { label: "内容编号", prop: "nrbh" },
+      { label: "类型", prop: "lx" },
+      { label: "内容", prop: "nr" }
+    ],
+    tableColumn2: [
+      { label: "积分排名", prop: "pm" },
+      { label: "照片", prop: "zp" },
+      { label: "姓名", prop: "xm" },
+      { label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
+      { label: "居住地址", prop: "jzdz", showOverflowTooltip: true },
+      { label: "人员类别", prop: "rylb", showOverflowTooltip: true },
+      { label: "布控原因", prop: "bkyy", showOverflowTooltip: true },
+      { label: "风险等级", prop: "fxdj", showOverflowTooltip: true },
+      { label: "风险积分", prop: "fxjf", showOverflowTooltip: true },
+      { label: "模型标签", prop: "mxbq", showOverflowTooltip: true },
+      { label: "是否关注", prop: "sfgz", showOverflowTooltip: true }
     ]
-  }
-]);
-const defaultProps = {
-  children: "children",
-  label: "label"
-};
+  });
+  const btns = reactive([
+    { label: "新增", type: "primary", icon: "CirclePlus" },
+    { label: "一件布控", type: "primary" },
+    { label: "级别变更", type: "primary" },
+    { label: "警种变更", type: "primary" },
+    { label: "指定分配", type: "primary" },
+    { label: "添加标签", type: "primary" },
+    { label: "协控申请", type: "primary" },
+    { label: "撤控申请", type: "primary" },
+    { label: "移交管控", type: "primary" },
+    { label: "批量导入", type: "primary" },
+    { label: "导出", type: "primary" },
+    { label: "批量删除", type: "danger", icon: "Delete" }
+  ]);
 
-// 事件处理函数
-const handleNodeClick = (data) => {
-  console.log(data);
-};
+  const searchBox = ref();
 
-// 处理深度研判
-const handleDeepIn = (id) => {
-  showScreen.value = true;
-};
-
-
-const tabHeightFn = () => {
-  pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 690;
-  window.onresize = function () {
-    tabHeightFn();
+  // 树形菜单数据
+  const treeData = ref([
+    {
+      label: "林芝市公安局（200）",
+      children: [
+        { label: "工布江达县公安局（100）" },
+        { label: "工布江达城区派出所（10）" },
+        { label: "某某某派出所（10）" },
+        { label: "某某某公安局（100）" }
+      ]
+    }
+  ]);
+  const defaultProps = {
+    children: "children",
+    label: "label"
   };
-};
 
-onMounted(() => {
-  tabHeightFn()
-});
+  // 事件处理函数
+  const handleNodeClick = data => {
+    console.log(data);
+  };
+
+  const deepIn = ref();
+  // 处理深度研判
+  const handleDeepIn = id => {
+    deepIn.value.init();
+  };
+
+  const tabHeightFn = () => {
+    pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 690;
+    window.onresize = function () {
+      tabHeightFn();
+    };
+  };
+
+  onMounted(() => {
+    tabHeightFn();
+  });
 </script>
 
 <style lang="scss" scoped>
-.statistical-analysis {
-  width: 100%;
-  height: 100%;
-  .left-menu {
-    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);
+  .statistical-analysis {
+    width: 100%;
     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;
+    .left-menu {
+      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;
+      }
     }
   }
-}
 </style>