From 3dbcd07a54e6e419f15984f6b53e5e01a620357f Mon Sep 17 00:00:00 2001
From: e <2538815847@qq.com>
Date: Fri, 8 Mar 2024 17:26:27 +0800
Subject: [PATCH] update

---
 src/router/routes/enterpriseTopic.js          |   5 +
 .../enterpriseTopic/inSecurity/cmyDetail.vue  |  62 ++
 .../enterpriseTopic/inSecurity/index.vue      | 935 +++++++++++++----
 .../inSecurity/indexDetail.vue                | 938 ++++--------------
 4 files changed, 1007 insertions(+), 933 deletions(-)
 create mode 100644 src/views/enterpriseTopic/inSecurity/cmyDetail.vue

diff --git a/src/router/routes/enterpriseTopic.js b/src/router/routes/enterpriseTopic.js
index 4cb7a67..fe9607a 100644
--- a/src/router/routes/enterpriseTopic.js
+++ b/src/router/routes/enterpriseTopic.js
@@ -13,6 +13,11 @@ export default [
     name: "personSafety",
     component: () => import("@/views/enterpriseTopic/personSafety/screen"),
   },
+  {
+    path: "/topic/inSecurity/cmyDetail",
+    name: "inSecurityCmyDetail",
+    component: () => import("@/views/enterpriseTopic/inSecurity/cmyDetail"),
+  },
   {
     path: "/topic",
     name: "topic",
diff --git a/src/views/enterpriseTopic/inSecurity/cmyDetail.vue b/src/views/enterpriseTopic/inSecurity/cmyDetail.vue
new file mode 100644
index 0000000..d649958
--- /dev/null
+++ b/src/views/enterpriseTopic/inSecurity/cmyDetail.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="inSecurityCmyDetailPanel loveflowscreen">
+    <head-wrap :title="companyName"></head-wrap>
+    <div class="inSecurityCmyDetailWrap">
+      <div class="screenRow screenRowTop mb14">
+        <div class="screenLeft mr16">
+          <colWrap title="矛盾纠纷"></colWrap>
+        </div>
+        <div class="screenMid mr16"></div>
+        <div class="screenRight"></div>
+      </div>
+      <div class="screenRow screenRowMid mb14">
+        <div class="screenLeft mr16"></div>
+        <div class="screenMid mr16"></div>
+        <div class="screenRight"></div>
+      </div>
+      <div class="screenRow screenRowBtm">
+        <div class="screenLeft mr16"></div>
+        <div class="screenMid mr16"></div>
+        <div class="screenRight mr16"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import headWrap from "@/views/home/head.vue";
+import colWrap from "../components/colWrap.vue";
+//import subCol from "../components/subCol.vue";
+
+export default {
+  components: { colWrap, headWrap },
+  data() {
+    return {
+      companyName: "",
+    };
+  },
+  mounted() {
+    this.companyName = this.$route.query.car;
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.inSecurityCmyDetailPanel {
+  height: 100%;
+  background: url("~@/assets/images/topic/allback.png") no-repeat center center;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  .inSecurityCmyDetailWrap {
+    position: absolute;
+    top: 100px;
+    left: 16px;
+    width: calc(100% - 32px);
+    height: calc(100% - 110px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/inSecurity/index.vue b/src/views/enterpriseTopic/inSecurity/index.vue
index 7253e4f..9aafbd6 100644
--- a/src/views/enterpriseTopic/inSecurity/index.vue
+++ b/src/views/enterpriseTopic/inSecurity/index.vue
@@ -1,263 +1,810 @@
 <template>
-  <div class="inSecurityContent loveflow">
-    <div class="inSecurityPanel">
-      <div class="flexSpaceBetween">
-        <div class="tableOperator"></div>
-        <div class="searchWrap">
-          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
-            <el-form-item label="企业类型">
-              <el-select v-model="queryParam.region" placeholder="企业类型">
-                <el-option label="类型一" value="shanghai"></el-option>
-                <el-option label="类型二" value="beijing"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="关键字">
-              <el-input
-                v-model="queryParam.key"
-                placeholder="请输入公司名称、信用代码等"
-              ></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="searchQuery">查询</el-button>
-              <el-button type="primary" plain @click="searchReset"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-
-      <div class="inSecurityTableWrap">
-        <div class="inSecurityTable">
-          <el-row :gutter="20">
-            <el-col
-              class="mb16"
-              :span="8"
-              v-for="item in dataSource"
-              :key="item.id"
-            >
-              <div class="inSecurityThead">{{ item.cmy }}</div>
-              <div class="inSecurityTbody" @click="gotoPage(item.cmy)">
-                <div class="line">
-                  <div class="item">
-                    <div class="label">信用代码：</div>
-                    <div class="value">{{ item.phone }}</div>
-                  </div>
-                  <div class="item">
-                    <div class="label">企业类型：</div>
-                    <div class="value">{{ item.qyT }}</div>
-                  </div>
-                </div>
-                <div class="line">
-                  <div class="item">
-                    <div class="label">注册地址：</div>
-                    <div class="value">{{ item.address }}</div>
-                  </div>
+  <div class="inSecurityDetail" @click="gotoPage()">
+    <div class="screenRow screenTopRow">
+      <div class="screenLeft mr18">
+        <colWrap class="mb14" title="企业三防异常分析">
+          <div class="qysfWrap">
+            <div class="qysfCol">
+              <pie-wrap :chartObj="mllObj"></pie-wrap>
+            </div>
+            <div class="qysfCol">
+              <pie-wrap :chartObj="mlmObj"></pie-wrap>
+            </div>
+            <div class="qysfCol">
+              <pie-wrap :chartObj="mlrObj"></pie-wrap>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="技防数据概览">
+          <el-row :gutter="16">
+            <el-col :span="6" v-for="item in jssjList" :key="item.name">
+              <div class="line">
+                <div class="icon">
+                  <img :src="item.icon" />
                 </div>
-                <div class="line">
-                  <div class="item">
-                    <div class="label">经营范围：</div>
-                    <div class="value">{{ item.address }}</div>
+                <div class="item">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="value">
+                    {{ item.value }}
                   </div>
                 </div>
-                <div class="line mt20">
-                  <div class="item">
-                    <div class="label">内部治安：</div>
-                    <div class="value">
-                      <div
-                        class="zaCard"
-                        v-for="info in item.cardList"
-                        :key="info.name"
-                      >
-                        {{ info.name }}({{ info.value || 0 }})
-                      </div>
+              </div>
+            </el-col>
+          </el-row>
+        </colWrap>
+      </div>
+      <div class="screenMid mr18">
+        <div class="screenMTop">{{ title }}</div>
+        <div class="screenMMid">
+          <div class="midTotalWrap">
+            <stmWrap></stmWrap>
+          </div>
+        </div>
+        <div class="screenMBtm">
+          <div
+            class="item"
+            v-for="item in tmList"
+            :key="item.name"
+            :style="{ backgroundImage: 'url(' + item.icon + ')' }"
+          >
+            <div class="value">{{ item.value }}</div>
+            <div class="name">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="screenRight">
+        <colWrap class="mb14" title="企业应急预案与应急演练异常分析">
+          <div class="ycfxWrap">
+            <div class="ycfxCol">
+              <ballWrap :chartObj="trlObj"></ballWrap>
+            </div>
+            <div class="ycfxCol">
+              <ballWrap :chartObj="trrObj"></ballWrap>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="部门检查及系统研判异常分析">
+          <div class="bmjcWrap">
+            <div class="bmjcLeft">
+              <sevenWrap :chartObj="bmjcLeft"></sevenWrap>
+            </div>
+            <div class="bmjcRight">
+              <barOne :chartObj="bmjcObj"></barOne>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenBtmRow">
+      <div class="screenBLeft mr18">
+        <colWrap class="mr18" title="应急预案">
+          <div class="yjYuAn">
+            <div class="line" v-for="(item, index) in yjList" :key="item.name">
+              <div class="item">
+                <div class="icon">{{ index + 1 }}</div>
+                <div class="name">{{ item.name }}</div>
+              </div>
+              <div class="value">{{ item.value.toLocaleString() }}份</div>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="人防数据概览">
+          <div class="rfShuJu">
+            <div class="line" v-for="item in zbrList" :key="item.name">
+              <div class="icon">
+                <img :src="item.icon" />
+              </div>
+              <div class="item">
+                <div class="name">{{ item.name }}</div>
+                <div class="value">{{ item.value.toLocaleString() }}</div>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+      <div class="screenBMid mr18">
+        <colWrap class="mr18" title="物防数据概览">
+          <div class="wfsjWrap">
+            <div class="xfsjHead">
+              <div class="xfsjIcon"></div>
+              <div class="xfsjTitle">消防物品</div>
+            </div>
+            <div class="xfsjBody">
+              <el-row :gutter="10">
+                <el-col :span="12" v-for="item in xfwpList" :key="item.name">
+                  <div class="line">
+                    <div class="icon">
+                      <img :src="item.icon" />
                     </div>
-                  </div>
-                </div>
-                <div class="line mt20">
-                  <div class="item">
-                    <div class="label">内部管理：</div>
-                    <div class="value">
-                      <div
-                        class="glCard"
-                        v-for="info in item.cardList"
-                        :key="info.name"
-                      >
-                        {{ info.name }}({{ info.value || 0 }})
+                    <div class="item">
+                      <div class="name">{{ item.name }}</div>
+                      <div class="value">
+                        {{ item.value.toLocaleString() }}<span>套</span>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div class="line mt20">
-                  <div class="item">
-                    <div class="label">异常信息：</div>
-                    <div class="value">
-                      <div
-                        class="ycCard"
-                        v-for="info in item.cardList"
-                        :key="info.name"
-                      >
-                        {{ info.name }}({{ info.value || 0 }})
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div class="wfsjWrap">
+            <div class="xfsjHead">
+              <div class="xfsjIcon"></div>
+              <div class="xfsjTitle">反恐防爆</div>
+            </div>
+            <div class="xfsjBody">
+              <el-row :gutter="10">
+                <el-col :span="12" v-for="item in fkfbList" :key="item.name">
+                  <div class="line">
+                    <div class="icon">
+                      <img :src="item.icon" />
+                    </div>
+                    <div class="item">
+                      <div class="name">{{ item.name }}</div>
+                      <div class="value">
+                        {{ item.value.toLocaleString() }}<span>套</span>
                       </div>
                     </div>
                   </div>
-                </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="重点岗位人员身份">
+          <div class="zdgwWrap">
+            <div class="line" v-for="item in zdgwList" :key="item.name">
+              <div class="icon">
+                <img :src="item.icon" />
               </div>
-            </el-col>
-          </el-row>
-        </div>
+              <div class="name">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+        </colWrap>
       </div>
-
-      <div class="tableWrap">
-        <gMainTable
-          ref="gMainTable"
-          :tableData="dataSource"
-          :columns="columns"
-          rowKey="id"
-          :pagination="ipagination"
-          @pageSizeChange="handlePageSizeChange"
-          @currentPageChange="handleCurrentPageChange"
-        >
-        </gMainTable>
+      <div class="screenBRight">
+        <colWrap class="mr18" title="案件信息">
+          <barWrap :chartObj="barOneObj"></barWrap>
+        </colWrap>
+        <colWrap class="" title="企业整改异常分析">
+          <dPie :chartObj="{}"></dPie>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
-
+import colWrap from "../components/colWrap.vue";
+import barWrap from "../components/bar.vue";
+import barOne from "../components/barOne.vue";
+import dPie from "../components/dPie.vue";
+import pieWrap from "../components/pie.vue";
+import stmWrap from "../components/stm.vue";
+import ballWrap from "@/loveflow/components/echart/other/ball.vue";
+import sevenWrap from "@/loveflow/components/echart/pie/seven.vue";
 export default {
-  mixins: [tableListMixins],
+  components: {
+    colWrap,
+    barWrap,
+    barOne,
+    dPie,
+    pieWrap,
+    ballWrap,
+    sevenWrap,
+    stmWrap,
+  },
   data() {
     return {
-      columns: [
+      title: "内部治安安全指数",
+      mllObj: {
+        name: "人防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie1b.png"),
+        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+      },
+      mlmObj: {
+        name: "物防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie2b.png"),
+        color: ["#FFCE57", "#EB9104", "#FAC608"],
+      },
+      mlrObj: {
+        name: "技防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie4b.png"),
+        color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+      },
+      tmList: [
+        {
+          name: "矛盾纠纷",
+          value: 32145,
+          icon: require("@/assets/images/topic/stmdjf.png"),
+        },
+        {
+          name: "劳资纠纷",
+          value: 32145,
+          icon: require("@/assets/images/topic/stlzjf.png"),
+        },
+        {
+          name: "特种设备",
+          value: 32145,
+          icon: require("@/assets/images/topic/sttzsb.png"),
+        },
+        {
+          name: "原材料被盗",
+          value: 32145,
+          icon: require("@/assets/images/topic/stycl.png"),
+        },
+      ],
+      trlObj: {
+        name: "企业应急预案完善率",
+        color: [
+          "#D9E7FF",
+          "#D0DEEE",
+          "rgba(29,172,180,1)",
+          "rgba(29,172,180,0.8)",
+          "rgba(29,172,180,0.5)",
+          "rgba(29,172,180,0)",
+        ],
+      },
+      trrObj: {
+        name: "应急演练异常比例",
+        color: [
+          "#D9E7FF",
+          "#D0DEEE",
+          "rgba(253,141,39,1)",
+          "rgba(253,141,39,0.8)",
+          "rgba(253,141,39,0.5)",
+          "rgba(253,141,39,0)",
+        ],
+      },
+      bmjcLeft: {
+        total: 300,
+        point: 120,
+        name: "企业治安准备情况",
+      },
+      bmjcObj: {
+        data: [
+          { name: "制度完善比例", value: 1123 },
+          { name: "设施完善比例", value: 808 },
+        ],
+        color: [
+          ["#FFDE9C", "#0E9FF7"],
+          ["#f9c407", "#FFDE9C"],
+        ],
+      },
+      yjList: [
+        {
+          name: "消防应急预案",
+          value: 32145,
+        },
+        {
+          name: "食品卫生应急预案",
+          value: 32145,
+        },
+        {
+          name: "停水停电应急预案",
+          value: 32145,
+        },
+        {
+          name: "防范被盗应急预案",
+          value: 32145,
+        },
+        {
+          name: "自然灾害应急预案",
+          value: 32145,
+        },
+        {
+          name: "作业事故应急预案",
+          value: 32145,
+        },
+        {
+          name: "反恐防暴应急预案",
+          value: 32145,
+        },
+      ],
+      zbrList: [
+        {
+          name: "值班人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/stzbr.png"),
+        },
+        {
+          name: "巡逻人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/stxlr.png"),
+        },
+        {
+          name: "应急处理人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/styjr.png"),
+        },
+      ],
+      xfwpList: [
+        {
+          name: "消火栓",
+          value: 32145,
+          icon: require("@/assets/images/topic/xhs.png"),
+        },
+        {
+          name: "灭火器",
+          value: 32145,
+          icon: require("@/assets/images/topic/mhq.png"),
+        },
+        {
+          name: "逃生绳",
+          value: 32145,
+          icon: require("@/assets/images/topic/tss.png"),
+        },
+        {
+          name: "防毒面具",
+          value: 32145,
+          icon: require("@/assets/images/topic/fdmj.png"),
+        },
+      ],
+      fkfbList: [
+        {
+          name: "防爆桶",
+          value: 32145,
+          icon: require("@/assets/images/topic/fbt.png"),
+        },
+        {
+          name: "盾牌钢叉",
+          value: 32145,
+          icon: require("@/assets/images/topic/dpgc.png"),
+        },
+        {
+          name: "防刺服",
+          value: 32145,
+          icon: require("@/assets/images/topic/fcf.png"),
+        },
+        {
+          name: "防爆警棍",
+          value: 32145,
+          icon: require("@/assets/images/topic/fbjg.png"),
+        },
+      ],
+      jssjList: [
+        {
+          name: "视频监控",
+          value: 32145,
+          icon: require("@/assets/images/topic/spjk.png"),
+        },
+        {
+          name: "人行闸机",
+          value: 32145,
+          icon: require("@/assets/images/topic/rxzj.png"),
+        },
+        {
+          name: "楼宇对讲",
+          value: 32145,
+          icon: require("@/assets/images/topic/lydj.png"),
+        },
+        {
+          name: "人脸门禁",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlmj.png"),
+        },
+        {
+          name: "电子脉冲",
+          value: 32145,
+          icon: require("@/assets/images/topic/dzmc.png"),
+        },
+        {
+          name: "人脸摄像头",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlsxt.png"),
+        },
         {
-          prop: "name",
-          label: "姓名",
+          name: "车辆闸道",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlmj.png"),
+        },
+        {
+          name: "指纹识别",
+          value: 32145,
+          icon: require("@/assets/images/topic/zwsb.png"),
+        },
+        {
+          name: "周界报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/zjbj.png"),
+        },
+        {
+          name: "紧急报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/jjbj.png"),
+        },
+      ],
+      zdgwList: [
+        {
+          name: "危险品领用人员",
+          icon: require("@/assets/images/topic/wxpl.png"),
+        },
+        {
+          name: "危险品保管人员",
+          icon: require("@/assets/images/topic/wxpb.png"),
+        },
+        {
+          name: "危险品使用人员",
+          icon: require("@/assets/images/topic/wxps.png"),
+        },
+        {
+          name: "危险品技术资质人员",
+          icon: require("@/assets/images/topic/wxpj.png"),
         },
       ],
+      barOneObj: {
+        data: [
+          { name: "民事案件", value: 1123 },
+          { name: "刑事案件", value: 808 },
+          { name: "行政案件", value: 703 },
+          { name: "经济案件", value: 613 },
+          { name: "非诉讼案件", value: 933 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
     };
   },
+  mounted() {
+    //this.title = this.$route.query.cmy;
+  },
   methods: {
-    gotoPage(val) {
+    gotoPage() {
       this.$router.push({
         path: "/topic/inSecurity/indexDetail",
-        query: {
-          cmy: val,
-        },
       });
     },
   },
 };
 </script>
-<style lang="less" scoped>
-.inSecurityContent {
-  padding: 16px;
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.inSecurityDetail {
   height: 100%;
-  box-sizing: border-box;
-}
-.inSecurityPanel {
   padding: 16px;
-  height: 100%;
-  overflow-y: hidden;
   box-sizing: border-box;
-  background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
-  background-size: 100% 100%;
-
-  .inSecurityTableWrap {
-    height: calc(100% - 90px);
-    .inSecurityTable {
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
       height: 100%;
-      overflow-y: scroll;
-      &::-webkit-scrollbar {
-        display: none;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      /*       .el-row {
+        margin-top: -10px;
+        padding-top: vw(6);
+        background-color: rgba(108, 151, 149, 0.2);
+      } */
+
+      .qysfWrap {
+        height: 100%;
+        display: flex;
+        .qysfCol {
+          flex: 1;
+        }
       }
 
-      .inSecurityThead {
-        margin-left: -10px;
-        padding-left: 24px;
-        height: 46px;
-        line-height: 36px;
-        background: url("~@/assets/images/topic/sttop.png") no-repeat center
+      .line {
+        display: flex;
+        align-items: center;
+        height: vw(50);
+        padding: vw(2) vw(6);
+        margin-bottom: vw(6);
+        background: url("~@/assets/images/topic/strfsj.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        .icon {
+          margin-right: 6px;
+          width: vw(34);
+          height: vw(36);
+          img {
+            width: 100%;
+          }
+        }
+        .item {
+          .name {
+            margin-bottom: 2px;
+            font-weight: 400;
+            font-size: vw(14);
+            color: #d0deee;
+          }
+
+          .value {
+            font-weight: 400;
+            font-size: vw(18);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .screenMid {
+      position: relative;
+      flex: 1;
+      background: url("~@/assets/images/topic/stmbg.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+      .screenMTop {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: vw(60);
+        background: url("~@/assets/images/topic/stmt.png") no-repeat center
           center;
         background-size: 100% 100%;
-        font-weight: 500;
-        font-size: 16px;
-        color: #edf4ff;
+        font-weight: bold;
+        font-size: vw(20);
+        color: #ffffff;
       }
-      .inSecurityTbody {
-        padding: 16px;
-        margin-top: -10px;
-        height: 344px;
-        background: url("~@/assets/images/topic/stbtm.png") no-repeat center
+      .screenMMid {
+        position: absolute;
+        bottom: vw(50);
+        width: 100%;
+        height: vw(300);
+        background: url("~@/assets/images/topic/stzp.png") no-repeat center
           center;
         background-size: 100% 100%;
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-          display: none;
+        display: flex;
+        justify-content: center;
+        .midTotalWrap {
+          position: absolute;
+          bottom: vw(100);
+          width: vw(250);
+          height: vw(250);
         }
-        &:hover {
-          opacity: 0.8;
-          cursor: pointer;
+      }
+      .screenMBtm {
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        width: 100%;
+        bottom: vw(40);
+        .item {
+          height: vw(106);
+          width: vw(150);
+          background-repeat: no-repeat;
+          background-position: center center;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-end;
+          .value {
+            font-weight: 500;
+            font-size: vw(16);
+            color: #e3feff;
+          }
+          .name {
+            font-weight: 400;
+            font-size: vw(14);
+            color: #d0deee;
+          }
         }
+      }
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      .ycfxWrap {
+        height: 100%;
+        display: flex;
 
+        .ycfxCol {
+          flex: 1;
+        }
+      }
+      .bmjcWrap {
+        height: 100%;
+        display: flex;
+        .bmjcLeft {
+          flex: 1;
+        }
+        .bmjcRight {
+          flex: 2;
+        }
+      }
+    }
+    .screenBLeft {
+      flex: 1;
+      display: flex;
+      .yjYuAn {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        justify-content: space-between;
+        height: 100%;
+        padding-bottom: 12px;
+        box-sizing: border-box;
         .line {
           display: flex;
           align-items: center;
+          justify-content: space-between;
+          height: vw(48);
+          padding: 0 12px;
           .item {
-            flex: 1;
             display: flex;
             align-items: center;
-            margin-bottom: 16px;
-            .label {
-              width: 70px;
+            .icon {
+              display: flex;
+              justify-content: center;
+              margin-right: 4px;
+              width: vw(18);
+              height: vw(18);
               font-size: 14px;
-              color: #d0deee;
+              font-weight: 600;
+              font-size: vw(14);
+              color: #9cffc8;
+              border: solid 1px #9cffc8;
+              border-radius: 2px;
             }
-            .value {
-              flex: 1;
-              font-size: 14px;
+            .name {
+              font-weight: 400;
+              font-size: vw(14);
               color: #ffffff;
-              display: flex;
-              .zaCard {
-                padding: 6px 10px;
-                margin-right: 12px;
-                margin-bottom: 4px;
-                background: url("~@/assets/images/topic/stmd.png") no-repeat
-                  center center;
-                background-size: 100% 100%;
-                font-size: 14px;
-                color: #b5ffe4;
+            }
+          }
+          .value {
+            font-weight: 400;
+            font-size: vw(16);
+            color: #9cffc8;
+          }
+          &:nth-child(odd) {
+            background-color: rgba(108, 128, 151, 0.1);
+          }
+        }
+      }
+      .rfShuJu {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        justify-content: space-between;
+        height: 100%;
+        padding-bottom: 12px;
+        box-sizing: border-box;
+        .line {
+          display: flex;
+          align-items: center;
+          height: vw(96);
+          padding: 0 12px;
+          background: url("~@/assets/images/topic/strfsj.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            margin-right: 4px;
+            width: vw(76);
+            height: vw(76);
+            img {
+              width: 100%;
+            }
+          }
+          .item {
+            .name {
+              margin-bottom: 8px;
+              font-weight: 400;
+              font-size: vw(16);
+              color: #ffffff;
+            }
+
+            .value {
+              font-weight: 400;
+              font-size: vw(18);
+              color: #f3fff9;
+            }
+          }
+          &:hover {
+          }
+        }
+      }
+    }
+    .screenBMid {
+      flex: 1;
+      display: flex;
+      .wfsjWrap {
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        .xfsjHead {
+          display: flex;
+          align-items: center;
+          height: 30px;
+          background: url("~@/assets/images/topic/fsT.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .xfsjIcon {
+            width: 34px;
+            height: 36px;
+            background: url("~@/assets/images/topic/fsIcon.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+          }
+          .xfsjTitle {
+            font-size: 14px;
+            color: #d9e7ff;
+          }
+        }
+        .xfsjBody {
+          flex: 1;
+          .line {
+            display: flex;
+            align-items: center;
+            margin-top: vw(10);
+            height: vw(60);
+            padding: 0 vw(12);
+            background: url("~@/assets/images/topic/strfsj.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+            .icon {
+              margin-right: vw(6);
+              width: vw(34);
+              height: vw(36);
+              img {
+                width: 100%;
               }
-              .glCard {
-                padding: 6px 10px;
-                margin-right: 12px;
-                margin-bottom: 4px;
-                background: url("~@/assets/images/topic/stgl.png") no-repeat
-                  center center;
-                background-size: 100% 100%;
-                font-size: 14px;
-                color: #b5ebff;
+            }
+            .item {
+              .name {
+                margin-bottom: 2px;
+                font-weight: 400;
+                font-size: vw(14);
+                color: #d0deee;
               }
-              .ycCard {
-                padding: 6px 10px;
-                margin-right: 12px;
-                margin-bottom: 4px;
-                background: url("~@/assets/images/topic/styc.png") no-repeat
-                  center center;
-                background-size: 100% 100%;
-                font-size: 14px;
-                color: #e3deff;
+
+              .value {
+                font-weight: 400;
+                font-size: vw(14);
+                color: #ffffff;
+                span {
+                  font-size: 12px;
+                }
               }
             }
           }
         }
       }
+      .zdgwWrap {
+        padding-bottom: 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        .line {
+          height: vw(70);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(35);
+            width: vw(34);
+            margin-right: vw(6);
+          }
+          .name {
+            font-size: vw(16);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .screenBRight {
+      flex: 1;
+      display: flex;
     }
   }
-
-  /deep/.el-table {
-    display: none;
+  .screenTopRow {
+    height: 54%;
+    padding-bottom: 14px;
+  }
+  .screenBtmRow {
+    height: 46%;
   }
 }
 </style>
diff --git a/src/views/enterpriseTopic/inSecurity/indexDetail.vue b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
index a025789..2424dbe 100644
--- a/src/views/enterpriseTopic/inSecurity/indexDetail.vue
+++ b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
@@ -1,803 +1,263 @@
 <template>
-  <div class="inSecurityDetail">
-    <div class="screenRow screenTopRow">
-      <div class="screenLeft mr18">
-        <colWrap class="mb14" title="企业三防异常分析">
-          <div class="qysfWrap">
-            <div class="qysfCol">
-              <pie-wrap :chartObj="mllObj"></pie-wrap>
-            </div>
-            <div class="qysfCol">
-              <pie-wrap :chartObj="mlmObj"></pie-wrap>
-            </div>
-            <div class="qysfCol">
-              <pie-wrap :chartObj="mlrObj"></pie-wrap>
-            </div>
-          </div>
-        </colWrap>
-        <colWrap class="" title="技防数据概览">
-          <el-row :gutter="16">
-            <el-col :span="6" v-for="item in jssjList" :key="item.name">
-              <div class="line">
-                <div class="icon">
-                  <img :src="item.icon" />
+  <div class="inSecurityContent loveflow">
+    <div class="inSecurityPanel">
+      <div class="flexSpaceBetween">
+        <div class="tableOperator"></div>
+        <div class="searchWrap">
+          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+            <el-form-item label="企业类型">
+              <el-select v-model="queryParam.region" placeholder="企业类型">
+                <el-option label="类型一" value="shanghai"></el-option>
+                <el-option label="类型二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关键字">
+              <el-input
+                v-model="queryParam.key"
+                placeholder="请输入公司名称、信用代码等"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="searchQuery">查询</el-button>
+              <el-button type="primary" plain @click="searchReset"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="inSecurityTableWrap">
+        <div class="inSecurityTable">
+          <el-row :gutter="20">
+            <el-col
+              class="mb16"
+              :span="8"
+              v-for="item in dataSource"
+              :key="item.id"
+            >
+              <div class="inSecurityThead">{{ item.cmy }}</div>
+              <div class="inSecurityTbody" @click="gotoPage(item.cmy)">
+                <div class="line">
+                  <div class="item">
+                    <div class="label">信用代码：</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </div>
+                  <div class="item">
+                    <div class="label">企业类型：</div>
+                    <div class="value">{{ item.qyT }}</div>
+                  </div>
                 </div>
-                <div class="item">
-                  <div class="name">{{ item.name }}</div>
-                  <div class="value">
-                    {{ item.value }}
+                <div class="line">
+                  <div class="item">
+                    <div class="label">注册地址：</div>
+                    <div class="value">{{ item.address }}</div>
                   </div>
                 </div>
-              </div>
-            </el-col>
-          </el-row>
-        </colWrap>
-      </div>
-      <div class="screenMid mr18">
-        <div class="screenMTop">{{ title }}</div>
-        <div class="screenMMid">
-          <div class="midTotalWrap">
-            <stmWrap></stmWrap>
-          </div>
-        </div>
-        <div class="screenMBtm">
-          <div
-            class="item"
-            v-for="item in tmList"
-            :key="item.name"
-            :style="{ backgroundImage: 'url(' + item.icon + ')' }"
-          >
-            <div class="value">{{ item.value }}</div>
-            <div class="name">{{ item.name }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="screenRight">
-        <colWrap class="mb14" title="企业应急预案与应急演练异常分析">
-          <div class="ycfxWrap">
-            <div class="ycfxCol">
-              <ballWrap :chartObj="trlObj"></ballWrap>
-            </div>
-            <div class="ycfxCol">
-              <ballWrap :chartObj="trrObj"></ballWrap>
-            </div>
-          </div>
-        </colWrap>
-        <colWrap class="" title="部门检查及系统研判异常分析">
-          <div class="bmjcWrap">
-            <div class="bmjcLeft">
-              <sevenWrap :chartObj="bmjcLeft"></sevenWrap>
-            </div>
-            <div class="bmjcRight">
-              <barOne :chartObj="bmjcObj"></barOne>
-            </div>
-          </div>
-        </colWrap>
-      </div>
-    </div>
-    <div class="screenRow screenBtmRow">
-      <div class="screenBLeft mr18">
-        <colWrap class="mr18" title="应急预案">
-          <div class="yjYuAn">
-            <div class="line" v-for="(item, index) in yjList" :key="item.name">
-              <div class="item">
-                <div class="icon">{{ index + 1 }}</div>
-                <div class="name">{{ item.name }}</div>
-              </div>
-              <div class="value">{{ item.value.toLocaleString() }}份</div>
-            </div>
-          </div>
-        </colWrap>
-        <colWrap class="" title="人防数据概览">
-          <div class="rfShuJu">
-            <div class="line" v-for="item in zbrList" :key="item.name">
-              <div class="icon">
-                <img :src="item.icon" />
-              </div>
-              <div class="item">
-                <div class="name">{{ item.name }}</div>
-                <div class="value">{{ item.value.toLocaleString() }}</div>
-              </div>
-            </div>
-          </div>
-        </colWrap>
-      </div>
-      <div class="screenBMid mr18">
-        <colWrap class="mr18" title="物防数据概览">
-          <div class="wfsjWrap">
-            <div class="xfsjHead">
-              <div class="xfsjIcon"></div>
-              <div class="xfsjTitle">消防物品</div>
-            </div>
-            <div class="xfsjBody">
-              <el-row :gutter="10">
-                <el-col :span="12" v-for="item in xfwpList" :key="item.name">
-                  <div class="line">
-                    <div class="icon">
-                      <img :src="item.icon" />
-                    </div>
-                    <div class="item">
-                      <div class="name">{{ item.name }}</div>
-                      <div class="value">
-                        {{ item.value.toLocaleString() }}<span>套</span>
+                <div class="line">
+                  <div class="item">
+                    <div class="label">经营范围：</div>
+                    <div class="value">{{ item.address }}</div>
+                  </div>
+                </div>
+                <div class="line mt20">
+                  <div class="item">
+                    <div class="label">内部治安：</div>
+                    <div class="value">
+                      <div
+                        class="zaCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
                       </div>
                     </div>
                   </div>
-                </el-col>
-              </el-row>
-            </div>
-          </div>
-          <div class="wfsjWrap">
-            <div class="xfsjHead">
-              <div class="xfsjIcon"></div>
-              <div class="xfsjTitle">反恐防爆</div>
-            </div>
-            <div class="xfsjBody">
-              <el-row :gutter="10">
-                <el-col :span="12" v-for="item in fkfbList" :key="item.name">
-                  <div class="line">
-                    <div class="icon">
-                      <img :src="item.icon" />
+                </div>
+                <div class="line mt20">
+                  <div class="item">
+                    <div class="label">内部管理：</div>
+                    <div class="value">
+                      <div
+                        class="glCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
+                      </div>
                     </div>
-                    <div class="item">
-                      <div class="name">{{ item.name }}</div>
-                      <div class="value">
-                        {{ item.value.toLocaleString() }}<span>套</span>
+                  </div>
+                </div>
+                <div class="line mt20">
+                  <div class="item">
+                    <div class="label">异常信息：</div>
+                    <div class="value">
+                      <div
+                        class="ycCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
                       </div>
                     </div>
                   </div>
-                </el-col>
-              </el-row>
-            </div>
-          </div>
-        </colWrap>
-        <colWrap class="" title="重点岗位人员身份">
-          <div class="zdgwWrap">
-            <div class="line" v-for="item in zdgwList" :key="item.name">
-              <div class="icon">
-                <img :src="item.icon" />
-              </div>
-              <div class="name">
-                {{ item.name }}
+                </div>
               </div>
-            </div>
-          </div>
-        </colWrap>
+            </el-col>
+          </el-row>
+        </div>
       </div>
-      <div class="screenBRight">
-        <colWrap class="mr18" title="案件信息">
-          <barWrap :chartObj="barOneObj"></barWrap>
-        </colWrap>
-        <colWrap class="" title="企业整改异常分析">
-          <dPie :chartObj="{}"></dPie>
-        </colWrap>
+
+      <div class="tableWrap">
+        <gMainTable
+          ref="gMainTable"
+          :tableData="dataSource"
+          :columns="columns"
+          rowKey="id"
+          :pagination="ipagination"
+          @pageSizeChange="handlePageSizeChange"
+          @currentPageChange="handleCurrentPageChange"
+        >
+        </gMainTable>
       </div>
     </div>
   </div>
 </template>
 <script>
-import colWrap from "../components/colWrap.vue";
-import barWrap from "../components/bar.vue";
-import barOne from "../components/barOne.vue";
-import dPie from "../components/dPie.vue";
-import pieWrap from "../components/pie.vue";
-import stmWrap from "../components/stm.vue";
-import ballWrap from "@/loveflow/components/echart/other/ball.vue";
-import sevenWrap from "@/loveflow/components/echart/pie/seven.vue";
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
 export default {
-  components: {
-    colWrap,
-    barWrap,
-    barOne,
-    dPie,
-    pieWrap,
-    ballWrap,
-    sevenWrap,
-    stmWrap,
-  },
+  mixins: [tableListMixins],
   data() {
     return {
-      title: "",
-      mllObj: {
-        name: "人防异常单位占比",
-        total: 3400,
-        point: 1000,
-        icon: require("@/assets/images/topic/pie1b.png"),
-        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
-      },
-      mlmObj: {
-        name: "物防异常单位占比",
-        total: 3400,
-        point: 1000,
-        icon: require("@/assets/images/topic/pie2b.png"),
-        color: ["#FFCE57", "#EB9104", "#FAC608"],
-      },
-      mlrObj: {
-        name: "技防异常单位占比",
-        total: 3400,
-        point: 1000,
-        icon: require("@/assets/images/topic/pie4b.png"),
-        color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
-      },
-      tmList: [
-        {
-          name: "矛盾纠纷",
-          value: 32145,
-          icon: require("@/assets/images/topic/stmdjf.png"),
-        },
-        {
-          name: "劳资纠纷",
-          value: 32145,
-          icon: require("@/assets/images/topic/stlzjf.png"),
-        },
-        {
-          name: "特种设备",
-          value: 32145,
-          icon: require("@/assets/images/topic/sttzsb.png"),
-        },
-        {
-          name: "原材料被盗",
-          value: 32145,
-          icon: require("@/assets/images/topic/stycl.png"),
-        },
-      ],
-      trlObj: {
-        name: "企业应急预案完善率",
-        color: [
-          "#D9E7FF",
-          "#D0DEEE",
-          "rgba(29,172,180,1)",
-          "rgba(29,172,180,0.8)",
-          "rgba(29,172,180,0.5)",
-          "rgba(29,172,180,0)",
-        ],
-      },
-      trrObj: {
-        name: "应急演练异常比例",
-        color: [
-          "#D9E7FF",
-          "#D0DEEE",
-          "rgba(253,141,39,1)",
-          "rgba(253,141,39,0.8)",
-          "rgba(253,141,39,0.5)",
-          "rgba(253,141,39,0)",
-        ],
-      },
-      bmjcLeft: {
-        total: 300,
-        point: 120,
-        name: "企业治安准备情况",
-      },
-      bmjcObj: {
-        data: [
-          { name: "制度完善比例", value: 1123 },
-          { name: "设施完善比例", value: 808 },
-        ],
-        color: [
-          ["#FFDE9C", "#0E9FF7"],
-          ["#f9c407", "#FFDE9C"],
-        ],
-      },
-      yjList: [
-        {
-          name: "消防应急预案",
-          value: 32145,
-        },
-        {
-          name: "食品卫生应急预案",
-          value: 32145,
-        },
-        {
-          name: "停水停电应急预案",
-          value: 32145,
-        },
-        {
-          name: "防范被盗应急预案",
-          value: 32145,
-        },
-        {
-          name: "自然灾害应急预案",
-          value: 32145,
-        },
-        {
-          name: "作业事故应急预案",
-          value: 32145,
-        },
-        {
-          name: "反恐防暴应急预案",
-          value: 32145,
-        },
-      ],
-      zbrList: [
-        {
-          name: "值班人员",
-          value: 32145,
-          icon: require("@/assets/images/topic/stzbr.png"),
-        },
-        {
-          name: "巡逻人员",
-          value: 32145,
-          icon: require("@/assets/images/topic/stxlr.png"),
-        },
-        {
-          name: "应急处理人员",
-          value: 32145,
-          icon: require("@/assets/images/topic/styjr.png"),
-        },
-      ],
-      xfwpList: [
-        {
-          name: "消火栓",
-          value: 32145,
-          icon: require("@/assets/images/topic/xhs.png"),
-        },
-        {
-          name: "灭火器",
-          value: 32145,
-          icon: require("@/assets/images/topic/mhq.png"),
-        },
-        {
-          name: "逃生绳",
-          value: 32145,
-          icon: require("@/assets/images/topic/tss.png"),
-        },
-        {
-          name: "防毒面具",
-          value: 32145,
-          icon: require("@/assets/images/topic/fdmj.png"),
-        },
-      ],
-      fkfbList: [
-        {
-          name: "防爆桶",
-          value: 32145,
-          icon: require("@/assets/images/topic/fbt.png"),
-        },
-        {
-          name: "盾牌钢叉",
-          value: 32145,
-          icon: require("@/assets/images/topic/dpgc.png"),
-        },
-        {
-          name: "防刺服",
-          value: 32145,
-          icon: require("@/assets/images/topic/fcf.png"),
-        },
-        {
-          name: "防爆警棍",
-          value: 32145,
-          icon: require("@/assets/images/topic/fbjg.png"),
-        },
-      ],
-      jssjList: [
-        {
-          name: "视频监控",
-          value: 32145,
-          icon: require("@/assets/images/topic/spjk.png"),
-        },
-        {
-          name: "人行闸机",
-          value: 32145,
-          icon: require("@/assets/images/topic/rxzj.png"),
-        },
-        {
-          name: "楼宇对讲",
-          value: 32145,
-          icon: require("@/assets/images/topic/lydj.png"),
-        },
-        {
-          name: "人脸门禁",
-          value: 32145,
-          icon: require("@/assets/images/topic/rlmj.png"),
-        },
-        {
-          name: "电子脉冲",
-          value: 32145,
-          icon: require("@/assets/images/topic/dzmc.png"),
-        },
-        {
-          name: "人脸摄像头",
-          value: 32145,
-          icon: require("@/assets/images/topic/rlsxt.png"),
-        },
-        {
-          name: "车辆闸道",
-          value: 32145,
-          icon: require("@/assets/images/topic/rlmj.png"),
-        },
-        {
-          name: "指纹识别",
-          value: 32145,
-          icon: require("@/assets/images/topic/zwsb.png"),
-        },
-        {
-          name: "周界报警",
-          value: 32145,
-          icon: require("@/assets/images/topic/zjbj.png"),
-        },
-        {
-          name: "紧急报警",
-          value: 32145,
-          icon: require("@/assets/images/topic/jjbj.png"),
-        },
-      ],
-      zdgwList: [
-        {
-          name: "危险品领用人员",
-          icon: require("@/assets/images/topic/wxpl.png"),
-        },
+      columns: [
         {
-          name: "危险品保管人员",
-          icon: require("@/assets/images/topic/wxpb.png"),
-        },
-        {
-          name: "危险品使用人员",
-          icon: require("@/assets/images/topic/wxps.png"),
-        },
-        {
-          name: "危险品技术资质人员",
-          icon: require("@/assets/images/topic/wxpj.png"),
+          prop: "name",
+          label: "姓名",
         },
       ],
-      barOneObj: {
-        data: [
-          { name: "民事案件", value: 1123 },
-          { name: "刑事案件", value: 808 },
-          { name: "行政案件", value: 703 },
-          { name: "经济案件", value: 613 },
-          { name: "非诉讼案件", value: 933 },
-        ],
-        color: ["#FFDE9C", "#0E9FF7"],
-      },
     };
   },
-  mounted() {
-    this.title = this.$route.query.cmy;
+  methods: {
+    gotoPage(val) {
+      this.$router.push({
+        path: "/topic/inSecurity/cmyDetail",
+        query: {
+          cmy: val,
+        },
+      });
+    },
   },
 };
 </script>
-<style lang="scss" scoped>
-@import "@/loveflow/assets/index.scss";
-.inSecurityDetail {
+<style lang="less" scoped>
+.inSecurityContent {
+  padding: 16px;
   height: 100%;
+  box-sizing: border-box;
+}
+.inSecurityPanel {
   padding: 16px;
+  height: 100%;
+  overflow-y: hidden;
   box-sizing: border-box;
-  overflow: hidden;
-  .screenRow {
-    display: flex;
-    .screenLeft {
-      height: 100%;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      /*       .el-row {
-        margin-top: -10px;
-        padding-top: vw(6);
-        background-color: rgba(108, 151, 149, 0.2);
-      } */
+  background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
+  background-size: 100% 100%;
 
-      .qysfWrap {
-        height: 100%;
-        display: flex;
-        .qysfCol {
-          flex: 1;
-        }
+  .inSecurityTableWrap {
+    height: calc(100% - 90px);
+    .inSecurityTable {
+      height: 100%;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
       }
 
-      .line {
-        display: flex;
-        align-items: center;
-        height: vw(50);
-        padding: vw(2) vw(6);
-        margin-bottom: vw(6);
-        background: url("~@/assets/images/topic/strfsj.png") no-repeat center
+      .inSecurityThead {
+        margin-left: -10px;
+        padding-left: 24px;
+        height: 46px;
+        line-height: 36px;
+        background: url("~@/assets/images/topic/sttop.png") no-repeat center
           center;
         background-size: 100% 100%;
-        .icon {
-          margin-right: 6px;
-          width: vw(34);
-          height: vw(36);
-          img {
-            width: 100%;
-          }
-        }
-        .item {
-          .name {
-            margin-bottom: 2px;
-            font-weight: 400;
-            font-size: vw(14);
-            color: #d0deee;
-          }
-
-          .value {
-            font-weight: 400;
-            font-size: vw(18);
-            color: #ffffff;
-          }
-        }
+        font-weight: 500;
+        font-size: 16px;
+        color: #edf4ff;
       }
-    }
-    .screenMid {
-      position: relative;
-      flex: 1;
-      background: url("~@/assets/images/topic/stmbg.png") no-repeat center
-        center;
-      background-size: 100% 100%;
-      .screenMTop {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: vw(60);
-        background: url("~@/assets/images/topic/stmt.png") no-repeat center
-          center;
-        background-size: 100% 100%;
-        font-weight: bold;
-        font-size: vw(20);
-        color: #ffffff;
-      }
-      .screenMMid {
-        position: absolute;
-        bottom: vw(50);
-        width: 100%;
-        height: vw(300);
-        background: url("~@/assets/images/topic/stzp.png") no-repeat center
+      .inSecurityTbody {
+        padding: 16px;
+        margin-top: -10px;
+        height: 344px;
+        background: url("~@/assets/images/topic/stbtm.png") no-repeat center
           center;
         background-size: 100% 100%;
-        display: flex;
-        justify-content: center;
-        .midTotalWrap {
-          position: absolute;
-          bottom: vw(100);
-          width: vw(250);
-          height: vw(250);
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          display: none;
         }
-      }
-      .screenMBtm {
-        display: flex;
-        justify-content: space-between;
-        position: absolute;
-        width: 100%;
-        bottom: vw(40);
-        .item {
-          height: vw(106);
-          width: vw(150);
-          background-repeat: no-repeat;
-          background-position: center center;
-          background-size: 100% 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: flex-end;
-          .value {
-            font-weight: 500;
-            font-size: vw(16);
-            color: #e3feff;
-          }
-          .name {
-            font-weight: 400;
-            font-size: vw(14);
-            color: #d0deee;
-          }
+        &:hover {
+          opacity: 0.8;
+          cursor: pointer;
         }
-      }
-    }
-    .screenRight {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      .ycfxWrap {
-        height: 100%;
-        display: flex;
 
-        .ycfxCol {
-          flex: 1;
-        }
-      }
-      .bmjcWrap {
-        height: 100%;
-        display: flex;
-        .bmjcLeft {
-          flex: 1;
-        }
-        .bmjcRight {
-          flex: 2;
-        }
-      }
-    }
-    .screenBLeft {
-      flex: 1;
-      display: flex;
-      .yjYuAn {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        justify-content: space-between;
-        height: 100%;
-        padding-bottom: 12px;
-        box-sizing: border-box;
         .line {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          height: vw(48);
-          padding: 0 12px;
           .item {
+            flex: 1;
             display: flex;
             align-items: center;
-            .icon {
-              display: flex;
-              justify-content: center;
-              margin-right: 4px;
-              width: vw(18);
-              height: vw(18);
+            margin-bottom: 16px;
+            .label {
+              width: 70px;
               font-size: 14px;
-              font-weight: 600;
-              font-size: vw(14);
-              color: #9cffc8;
-              border: solid 1px #9cffc8;
-              border-radius: 2px;
-            }
-            .name {
-              font-weight: 400;
-              font-size: vw(14);
-              color: #ffffff;
+              color: #d0deee;
             }
-          }
-          .value {
-            font-weight: 400;
-            font-size: vw(16);
-            color: #9cffc8;
-          }
-          &:nth-child(odd) {
-            background-color: rgba(108, 128, 151, 0.1);
-          }
-        }
-      }
-      .rfShuJu {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        justify-content: space-between;
-        height: 100%;
-        padding-bottom: 12px;
-        box-sizing: border-box;
-        .line {
-          display: flex;
-          align-items: center;
-          height: vw(96);
-          padding: 0 12px;
-          background: url("~@/assets/images/topic/strfsj.png") no-repeat center
-            center;
-          background-size: 100% 100%;
-          .icon {
-            margin-right: 4px;
-            width: vw(76);
-            height: vw(76);
-            img {
-              width: 100%;
-            }
-          }
-          .item {
-            .name {
-              margin-bottom: 8px;
-              font-weight: 400;
-              font-size: vw(16);
-              color: #ffffff;
-            }
-
             .value {
-              font-weight: 400;
-              font-size: vw(18);
-              color: #f3fff9;
-            }
-          }
-          &:hover {
-          }
-        }
-      }
-    }
-    .screenBMid {
-      flex: 1;
-      display: flex;
-      .wfsjWrap {
-        height: 50%;
-        display: flex;
-        flex-direction: column;
-        .xfsjHead {
-          display: flex;
-          align-items: center;
-          height: 30px;
-          background: url("~@/assets/images/topic/fsT.png") no-repeat center
-            center;
-          background-size: 100% 100%;
-          .xfsjIcon {
-            width: 34px;
-            height: 36px;
-            background: url("~@/assets/images/topic/fsIcon.png") no-repeat
-              center center;
-            background-size: 100% 100%;
-          }
-          .xfsjTitle {
-            font-size: 14px;
-            color: #d9e7ff;
-          }
-        }
-        .xfsjBody {
-          flex: 1;
-          .line {
-            display: flex;
-            align-items: center;
-            margin-top: vw(10);
-            height: vw(60);
-            padding: 0 vw(12);
-            background: url("~@/assets/images/topic/strfsj.png") no-repeat
-              center center;
-            background-size: 100% 100%;
-            .icon {
-              margin-right: vw(6);
-              width: vw(34);
-              height: vw(36);
-              img {
-                width: 100%;
+              flex: 1;
+              font-size: 14px;
+              color: #ffffff;
+              display: flex;
+              .zaCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/stmd.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #b5ffe4;
               }
-            }
-            .item {
-              .name {
-                margin-bottom: 2px;
-                font-weight: 400;
-                font-size: vw(14);
-                color: #d0deee;
+              .glCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/stgl.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #b5ebff;
               }
-
-              .value {
-                font-weight: 400;
-                font-size: vw(14);
-                color: #ffffff;
-                span {
-                  font-size: 12px;
-                }
+              .ycCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/styc.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #e3deff;
               }
             }
           }
         }
       }
-      .zdgwWrap {
-        padding-bottom: 12px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        .line {
-          height: vw(70);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
-            center;
-          background-size: 100% 100%;
-          .icon {
-            width: vw(35);
-            width: vw(34);
-            margin-right: vw(6);
-          }
-          .name {
-            font-size: vw(16);
-            color: #ffffff;
-          }
-        }
-      }
-    }
-    .screenBRight {
-      flex: 1;
-      display: flex;
     }
   }
-  .screenTopRow {
-    height: 54%;
-    padding-bottom: 14px;
-  }
-  .screenBtmRow {
-    height: 46%;
+
+  /deep/.el-table {
+    display: none;
   }
 }
 </style>