diff --git a/src/assets/images/topic/andb.png b/src/assets/images/topic/andb.png
new file mode 100644
index 0000000..35b9e76
Binary files /dev/null and b/src/assets/images/topic/andb.png differ
diff --git a/src/assets/images/topic/andbb.png b/src/assets/images/topic/andbb.png
new file mode 100644
index 0000000..5cd39fa
Binary files /dev/null and b/src/assets/images/topic/andbb.png differ
diff --git a/src/assets/images/topic/andbi.png b/src/assets/images/topic/andbi.png
new file mode 100644
index 0000000..634116c
Binary files /dev/null and b/src/assets/images/topic/andbi.png differ
diff --git a/src/assets/images/topic/andbody.png b/src/assets/images/topic/andbody.png
new file mode 100644
index 0000000..8fe02ce
Binary files /dev/null and b/src/assets/images/topic/andbody.png differ
diff --git a/src/assets/images/topic/andhead.png b/src/assets/images/topic/andhead.png
new file mode 100644
index 0000000..0553db4
Binary files /dev/null and b/src/assets/images/topic/andhead.png differ
diff --git a/src/assets/images/topic/andm.png b/src/assets/images/topic/andm.png
new file mode 100644
index 0000000..d67b63c
Binary files /dev/null and b/src/assets/images/topic/andm.png differ
diff --git a/src/assets/images/topic/andmi.png b/src/assets/images/topic/andmi.png
new file mode 100644
index 0000000..508c9ec
Binary files /dev/null and b/src/assets/images/topic/andmi.png differ
diff --git a/src/assets/images/topic/andt.png b/src/assets/images/topic/andt.png
new file mode 100644
index 0000000..575ca2e
Binary files /dev/null and b/src/assets/images/topic/andt.png differ
diff --git a/src/assets/images/topic/形状结合.png b/src/assets/images/topic/andti.png
similarity index 100%
rename from src/assets/images/topic/形状结合.png
rename to src/assets/images/topic/andti.png
diff --git a/src/assets/images/topic/xfb.png b/src/assets/images/topic/xfb.png
new file mode 100644
index 0000000..6b900c2
Binary files /dev/null and b/src/assets/images/topic/xfb.png differ
diff --git a/src/assets/images/topic/xfib.png b/src/assets/images/topic/xfib.png
new file mode 100644
index 0000000..23e8924
Binary files /dev/null and b/src/assets/images/topic/xfib.png differ
diff --git a/src/assets/images/topic/xfl.png b/src/assets/images/topic/xfl.png
new file mode 100644
index 0000000..6c45058
Binary files /dev/null and b/src/assets/images/topic/xfl.png differ
diff --git a/src/assets/images/topic/xfr.png b/src/assets/images/topic/xfr.png
new file mode 100644
index 0000000..8bf3d77
Binary files /dev/null and b/src/assets/images/topic/xfr.png differ
diff --git a/src/assets/images/topic/xfry.png b/src/assets/images/topic/xfry.png
new file mode 100644
index 0000000..bd074b3
Binary files /dev/null and b/src/assets/images/topic/xfry.png differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index d7740eb..bafe52b 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -17,6 +17,9 @@
 .pointer {
   cursor: pointer;
 }
+.height100 {
+  height: 100%;
+}
 
 /* 间距 START*/
 .mt6 {
diff --git a/src/loveflow/mixins/tableListMixins.js b/src/loveflow/mixins/tableListMixins.js
index 4365368..22e7487 100644
--- a/src/loveflow/mixins/tableListMixins.js
+++ b/src/loveflow/mixins/tableListMixins.js
@@ -10,7 +10,7 @@ export const tableListMixins = {
       /* 分页参数 */
       ipagination: {
         currentPage: 1,
-        pageSize: 10,
+        pageSize: 20,
         pageSizes: ["10", "20", "30"],
         layout: "total, sizes, prev, pager, next, jumper",
         total: 0,
@@ -77,6 +77,8 @@ export const tableListMixins = {
               value: 9,
             },
           ],
+          detail:
+            " 宁波镇海兴达化工有限公司仓库由于易燃物品存储不当，导致易燃物品燃烧发生火灾。仓库值班人员立即启动火灾预案，组织仓库管理人员、巡逻人员和保安救火，由于火势较大，现场配备的灭火器、消防栓无法迅速扑灭。在紧急情况下值班长立即拨打“119”报警，待消防中队进场后约21点20分火势被扑灭。经消防中队确认，火灾造成仓库10公斤易燃物品XXX、2卷防水卷材被烧毁，1人轻伤。",
         });
       }
       //console.log(this.dataSource);
diff --git a/src/router/routes/enterpriseTopic.js b/src/router/routes/enterpriseTopic.js
index b240e92..4cb7a67 100644
--- a/src/router/routes/enterpriseTopic.js
+++ b/src/router/routes/enterpriseTopic.js
@@ -65,6 +65,16 @@ export default [
         },
         component: () => import("@/views/enterpriseTopic/antiAttack"),
       },
+      {
+        path: "/topic/antiAttack/indexDetail",
+        name: "antiAttack",
+        meta: {
+          head: false,
+          title: "防攻击详情",
+        },
+        component: () =>
+          import("@/views/enterpriseTopic/antiAttack/indexDetail"),
+      },
       {
         path: "/topic/fireSafety",
         name: "fireSafety",
diff --git a/src/views/enterpriseTopic/antiAttack/index.vue b/src/views/enterpriseTopic/antiAttack/index.vue
index 5146562..a059dec 100644
--- a/src/views/enterpriseTopic/antiAttack/index.vue
+++ b/src/views/enterpriseTopic/antiAttack/index.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="antiAttackPanel">
     <!-- 防攻击 -->
-    <div class="screenRow screenTopRow">
+    <div
+      class="screenRow screenTopRow"
+      @click="gotoPage('/topic/antiAttack/indexDetail')"
+    >
       <div class="screenLeft mr18">
         <div class="screenLeftTop">
           <colWrap class="mb14" title="人防数据">
@@ -453,6 +456,13 @@ export default {
       ],
     };
   },
+  methods: {
+    gotoPage(path) {
+      this.$router.push({
+        path: path,
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/enterpriseTopic/antiAttack/indexDetail.vue b/src/views/enterpriseTopic/antiAttack/indexDetail.vue
new file mode 100644
index 0000000..f53b4e0
--- /dev/null
+++ b/src/views/enterpriseTopic/antiAttack/indexDetail.vue
@@ -0,0 +1,557 @@
+<template>
+  <div class="antiAttackDetailPanel loveflow">
+    <!-- 危险品运输 -->
+    <div class="antiAttackDetailWrap">
+      <div class="flexSpaceBetween">
+        <div class="tableOperator">
+          <div class="antiAttackTop">
+            <div
+              class="filterBtnWrap"
+              v-for="item in leftList"
+              :key="item.name"
+            >
+              <div
+                class="nameWrap"
+                :class="{ nameActive: selectArr.includes(item.id) }"
+                @click="filterClick(item.id)"
+              >
+                <div class="icon"></div>
+                <div class="text">{{ item.name }}</div>
+              </div>
+
+              <div class="total">{{ item.total.toLocaleString() }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="searchWrap">
+          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+            <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="antiAttackDetailTableWrap">
+        <el-row :gutter="16">
+          <el-col :span="8" v-for="item in dataSource" :key="item.car">
+            <div class="antiAttackWrap">
+              <div class="aHead">{{ item.cmp }}</div>
+              <div class="aBody">
+                <div class="top">
+                  <div class="left">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      反恐目标单位检查数据
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">安全管理制度：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">视屏监控系统：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">出入管理：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">网络安全：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">人员安全管理：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">火灾防控措施：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">物品安全管理：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">外部环境安全：</div>
+                          <div class="value">{{ item.is }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      企业隐患
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">安全隐患：</div>
+                          <div class="value">{{ item.num }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mid">
+                  <div class="left">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      物防数据
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">灭火栓：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">防爆桶：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">逃生绳：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">防刺服：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">灭火器：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">盾牌、钢叉：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">防毒面具：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">防爆警棍：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      应急预案
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">预案数量：</div>
+                          <div class="value">{{ item.num }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="btm">
+                  <div class="left">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      技防数据
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">视屏监控：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">人行闸机：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">电子脉冲：</div>
+                          <div class="value">{{ item.mi }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">紧急报警装置：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">车辆道闸：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">人脸门禁系统：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">周界报警：</div>
+                          <div class="value">{{ item.mi }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">人脸摄像头：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">指纹识别系统：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                        <div class="item">
+                          <div class="label">楼宇对讲系统：</div>
+                          <div class="value">{{ item.tao }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="topHead">
+                      <div class="icon"></div>
+                      人防数据
+                    </div>
+                    <div class="topBody">
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">值班人员：</div>
+                          <div class="value">{{ item.num }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">巡逻人员：</div>
+                          <div class="value">{{ item.num }}</div>
+                        </div>
+                      </div>
+                      <div class="line">
+                        <div class="item">
+                          <div class="label">营救处理人员：</div>
+                          <div class="value">{{ item.num }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <gMainTable
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gMainTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      leftList: [
+        {
+          name: "反恐检查异常",
+          total: 36,
+          id: "1",
+        },
+        {
+          name: "人防数据异常",
+          total: 312,
+          id: "2",
+        },
+        {
+          name: "技防数据异常",
+          total: 54,
+          id: "3",
+        },
+        {
+          name: "物防数据异常",
+          total: 14,
+          id: "4",
+        },
+        {
+          name: "企业隐患",
+          total: 24,
+          id: "5",
+        },
+        {
+          name: "应急预案未定制",
+          total: 9,
+          id: "6",
+        },
+      ],
+      selectArr: ["1", "2", "3", "4", "5"],
+      columns: [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    for (let i = 0; i < 20; i++) {
+      this.dataSource.push({
+        cmp: "宁波安捷化工有限公司" + i,
+        is: "是",
+        num: i + 1,
+        tao: i + 10 + "套",
+        mi: i + 5 + "米",
+      });
+    }
+  },
+  methods: {
+    filterClick(id) {
+      if (this.selectArr.includes(id)) {
+        this.selectArr = this.selectArr.filter((item) => item != id);
+      } else {
+        this.selectArr.push(id);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.antiAttackDetailPanel {
+  padding: vw(16);
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  .antiAttackDetailWrap {
+    padding: vw(16);
+    height: 100%;
+    overflow: hidden;
+    background: url("~@/assets/images/topic/carb.png") no-repeat center center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    .el-table {
+      display: none;
+    }
+    .antiAttackTop {
+      display: flex;
+      .filterBtnWrap {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 vw(20) 0 vw(20);
+        height: vw(40);
+        background: url("~@/assets/images/topic/carcheck.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        font-size: vw(14);
+        color: #ffffff;
+        .nameWrap {
+          display: flex;
+          align-items: center;
+          padding-left: vw(6);
+
+          .icon {
+            width: vw(18);
+            height: vw(18);
+            margin-right: vw(6);
+            background: url("~@/assets/images/topic/uncheck.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+          }
+          .text {
+            margin-right: vw(6);
+            font-size: vw(18);
+            color: #ffffff;
+          }
+          &.nameActive {
+            padding-left: 0;
+            .icon {
+              width: vw(32);
+              height: vw(30);
+              margin-right: 0;
+              background: url("~@/assets/images/topic/check.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+          }
+          &:hover {
+            cursor: pointer;
+            opacity: 0.8;
+          }
+        }
+        .total {
+          margin-top: vw(4);
+          font-size: vw(18);
+          color: #ffffff;
+        }
+      }
+    }
+    .antiAttackDetailTableWrap {
+      overflow-y: scroll;
+      height: calc(100% - 90px);
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .antiAttackWrap {
+        margin-bottom: 14px;
+        .aHead {
+          margin-left: -8px;
+          padding-left: vw(18);
+          height: vw(30);
+          background: url("~@/assets/images/topic/andhead.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          font-weight: 500;
+          font-size: vw(16);
+          color: #edf4ff;
+        }
+        .aBody {
+          padding: vw(10) vw(18);
+          background: url("~@/assets/images/topic/andbody.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .topBody {
+            padding: vw(10);
+            height: vw(66);
+            background: url("~@/assets/images/topic/andbody.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+          }
+          .top {
+            display: flex;
+            margin-bottom: 14px;
+            .left {
+              flex: 1;
+              margin-right: vw(16);
+            }
+            .right {
+              width: vw(116);
+            }
+            .topHead {
+              display: flex;
+              align-items: center;
+              height: vw(30);
+              background: url("~@/assets/images/topic/andt.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+              font-weight: 600;
+              font-size: vw(12);
+              color: #d9e7ff;
+              .icon {
+                width: vw(32);
+                height: vw(38);
+                background: url("~@/assets/images/topic/andti.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+              }
+            }
+          }
+          .mid {
+            display: flex;
+            margin-bottom: 14px;
+            .left {
+              flex: 1;
+              margin-right: vw(16);
+            }
+            .right {
+              width: vw(116);
+            }
+            .topHead {
+              display: flex;
+              align-items: center;
+              height: vw(30);
+              background: url("~@/assets/images/topic/andm.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+              font-weight: 600;
+              font-size: vw(12);
+              color: #d9e7ff;
+              .icon {
+                width: vw(32);
+                height: vw(38);
+                background: url("~@/assets/images/topic/andmi.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+              }
+            }
+          }
+          .btm {
+            display: flex;
+            .left {
+              flex: 1;
+              margin-right: vw(16);
+            }
+            .right {
+              width: vw(116);
+            }
+            .topHead {
+              display: flex;
+              align-items: center;
+              height: vw(30);
+              background: url("~@/assets/images/topic/andbb.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+              font-weight: 600;
+              font-size: vw(12);
+              color: #d9e7ff;
+              .icon {
+                width: vw(32);
+                height: vw(38);
+                background: url("~@/assets/images/topic/andbi.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+              }
+            }
+            .topBody {
+              height: vw(94);
+            }
+          }
+          .line {
+            margin-bottom: vw(8);
+            display: flex;
+            align-items: center;
+            font-weight: 400;
+            font-size: vw(12);
+
+            .item {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              .label {
+                color: #d0deee;
+                width: vw(90);
+              }
+              .value {
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/components/tableCustom.vue b/src/views/enterpriseTopic/components/tableCustom.vue
index 62ded90..9569024 100644
--- a/src/views/enterpriseTopic/components/tableCustom.vue
+++ b/src/views/enterpriseTopic/components/tableCustom.vue
@@ -28,7 +28,7 @@
         </div>
       </div>
     </div>
-    <div class="tableWrap">
+    <div class="customTableWrap tableWrap">
       <gScreenTable
         stripe
         ref="gScreenTable"
@@ -67,7 +67,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "@/loveflow/assets/index.scss";
 .loveflowscreen {
   height: 100%;
@@ -106,10 +106,13 @@ export default {
       }
     }
   }
-  .tableWrap {
+  .customTableWrap {
     height: 100%;
     .gScreenTableWrap {
-      display: none;
+      height: auto;
+      .screenTable {
+        display: none;
+      }
     }
   }
 }
diff --git a/src/views/enterpriseTopic/components/tableWrap.vue b/src/views/enterpriseTopic/components/tableWrap.vue
index 1fd366e..5cee639 100644
--- a/src/views/enterpriseTopic/components/tableWrap.vue
+++ b/src/views/enterpriseTopic/components/tableWrap.vue
@@ -34,7 +34,7 @@ export default {
     };
   },
   created() {
-    this.ipagination.pageSize = 10;
+    this.ipagination.pageSize = 20;
     this.ipagination.pageSizes = [];
     this.ipagination.layout = "total, prev, pager, next";
     this.loadData();
diff --git a/src/views/enterpriseTopic/fireSafety/bar.vue b/src/views/enterpriseTopic/fireSafety/bar.vue
new file mode 100644
index 0000000..116fc96
--- /dev/null
+++ b/src/views/enterpriseTopic/fireSafety/bar.vue
@@ -0,0 +1,215 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let dataList = this.chartObj.data;
+      let maxArr = [];
+      let maxValue = 0;
+      let xData = [];
+      let yData = [];
+      let total = 0;
+
+      dataList.forEach((item) => {
+        xData.push(item.name);
+        yData.push(item.value);
+        if (maxValue < item.value) {
+          maxValue = item.value;
+        }
+      });
+      dataList.forEach((item) => {
+        maxArr.push(maxValue);
+        total = total + item.value;
+      });
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        grid: {
+          left: "100",
+          top: "10", // 设置条形图的边距
+          right: "50",
+          bottom: "6",
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: xData,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              width: 100,
+              padding: [0, 0, 0, -90],
+              align: "left",
+              rich: {
+                index: {
+                  padding: [4, 5, 2, 5],
+                  color: this.chartObj.color[2],
+                  borderWidth: 1,
+                  borderRadius: 2,
+                  borderColor: this.chartObj.color[2],
+                },
+                name: {
+                  width: 100,
+                  padding: [0, 0, 0, 2],
+                  color: "#ffffff",
+                  fontSize: 14,
+                },
+              },
+              formatter: (name, index) => {
+                const _index = index + 1;
+                if (name.length > 4) {
+                  name = name.substring(0, 4) + "...";
+                }
+                if (dataList.length) {
+                  return `{index|${_index}} {name|${name}}`;
+                }
+              },
+            },
+            offset: 0,
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: "bar",
+            barWidth: 6,
+            itemStyle: {
+              color: (params) => {
+                var color = {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: this.chartObj.color[0], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: this.chartObj.color[1], // 100% 处的颜色
+                    },
+                  ],
+                };
+                return color;
+              },
+            },
+            label: {
+              show: false,
+            },
+            data: dataList,
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 外边框
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barWidth: 1,
+            itemStyle: {
+              barBorderRadius: 10,
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              padding: [6, 0, 0, 4],
+              textStyle: {
+                rich: {
+                  value: {
+                    width: 54,
+                    padding: [4, 10, 0, -60],
+                    color: "#9CE0FF",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    fontSize: 14,
+                    color: this.chartObj.color[2],
+                  },
+                },
+              },
+              formatter: (params) => {
+                var text = `{rate|${params.data}次}`; // `{{f|(params.data / total) * 100 + %}`;
+                return text;
+              },
+
+              rich: {
+                a: {
+                  color: "#9CE0FF",
+                  fontSize: 16,
+                  align: "right",
+                },
+              },
+              position: "right",
+              distance: 1, // 向右偏移位置
+              show: true,
+            },
+            data: yData,
+            z: 0,
+            animationEasing: "elasticOut",
+          },
+          {
+            name: "外框",
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barGap: "-100%", // 设置外框粗细
+            data: maxArr,
+            barWidth: 6,
+            itemStyle: {
+              color: "rgba(255,255,255,0.06)", // 填充色
+              label: {
+                // 标签显示位置
+                show: false,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/fireSafety/index.vue b/src/views/enterpriseTopic/fireSafety/index.vue
index b3e724b..9757963 100644
--- a/src/views/enterpriseTopic/fireSafety/index.vue
+++ b/src/views/enterpriseTopic/fireSafety/index.vue
@@ -3,33 +3,208 @@
     <!-- 消防安全 -->
     <div class="screenRow screenRowTop">
       <div class="screenLeft mb14 mr16">
-        <colWrap class="mr16" title="消防设施数据"> </colWrap>
-        <colWrap title="消防事件发生"> </colWrap>
+        <colWrap class="mr16" title="消防设施数据">
+          <ssTable></ssTable>
+        </colWrap>
+        <colWrap title="消防事件发生">
+          <div class="xfsjWrap">
+            <div class="top">
+              <div class="left mr14">
+                <subCol title="消防事件发生区域排名"> </subCol>
+                <barWrap :chartObj="tmlObj"></barWrap>
+              </div>
+              <div class="right">
+                <subCol title="消防事件发生单位排名"> </subCol>
+                <barWrap :chartObj="tmrObj"></barWrap>
+              </div>
+            </div>
+            <div class="btm">
+              <xfsjTable></xfsjTable>
+            </div>
+          </div>
+        </colWrap>
       </div>
 
       <div class="screenRight mb14">
-        <colWrap title="消防制度执行"> </colWrap>
+        <colWrap title="消防制度执行">
+          <div class="xfzdWrap">
+            <div class="top">
+              <div class="item mr16">
+                <div class="icon">
+                  <img :src="qyObj.icon" />
+                </div>
+                <div class="value">{{ qyObj.value }}</div>
+                <div class="name">{{ qyObj.name }}</div>
+              </div>
+              <div class="item">
+                <div class="icon">
+                  <img :src="ygObj.icon" />
+                </div>
+                <div class="value">{{ ygObj.value }}</div>
+                <div class="name">{{ ygObj.name }}</div>
+              </div>
+            </div>
+            <div class="btm">
+              <div class="line" v-for="item in zdList" :key="item.name">
+                <div class="left">
+                  <pieWrap :chartObj="item"></pieWrap>
+                </div>
+                <div class="right">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="value" :style="{ color: item.color[0] }">
+                    {{ ((item.point * 100) / item.total).toFixed(0) }}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </colWrap>
       </div>
     </div>
     <div class="screenRow screenRowBtm">
       <div class="screenLeft mr16">
-        <colWrap class="" title="企业台账数据"> </colWrap>
+        <colWrap class="" title="企业台账数据">
+          <tableWrap :columns="column"></tableWrap>
+        </colWrap>
       </div>
       <div class="screenRight">
-        <colWrap title="异常企业台账"> </colWrap>
+        <colWrap title="异常企业台账">
+          <tableWrap :columns="column1"></tableWrap>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
 import colWrap from "../components/colWrap.vue";
+import ssTable from "./ssTable.vue";
+import pieWrap from "./pie.vue";
+import barWrap from "./bar.vue";
+import tableWrap from "../components/tableWrap.vue";
+import subCol from "../components/subCol.vue";
+import xfsjTable from "./xfsjTable.vue";
 
 export default {
   components: {
     colWrap,
+    ssTable,
+    tableWrap,
+    pieWrap,
+    subCol,
+    xfsjTable,
+    barWrap,
   },
   data() {
-    return {};
+    return {
+      tmlObj: {
+        data: [
+          { name: "澥浦镇", value: 9 },
+          { name: "九龙湖镇", value: 11 },
+          { name: "照宝山街道", value: 15 },
+          { name: "蛟川街道", value: 6 },
+          { name: "骆驼街道", value: 9 },
+          { name: "贵驷街道", value: 12 },
+          { name: "庄市街道", value: 8 },
+        ],
+        color: ["#FFF9E3", "#0E9FF7", "#9CE0FF"],
+      },
+      tmrObj: {
+        data: [
+          { name: "镇海化工有限公司1", value: 9 },
+          { name: "镇海化工有限公司2", value: 11 },
+          { name: "镇海化工有限公司3", value: 15 },
+          { name: "镇海化工有限公司4", value: 12 },
+          { name: "镇海化工有限公司5", value: 6 },
+          { name: "镇海化工有限公司6", value: 9 },
+        ],
+        color: ["#FAC608", "#EB5404", "#FFDE9C"],
+      },
+      qyObj: {
+        icon: require("@/assets/images/topic/xfl.png"),
+        name: "企业总数",
+        value: 91,
+      },
+      ygObj: {
+        icon: require("@/assets/images/topic/xfr.png"),
+        name: "员工总数",
+        value: 311,
+      },
+      zdList: [
+        {
+          icon: require("@/assets/images/topic/xfry.png"),
+          name: "人员培训率",
+          total: 300,
+          point: 280,
+          color: ["#E3FEFF", "#37A1CC", "#08FAC4"],
+        },
+        {
+          icon: require("@/assets/images/topic/xfry.png"),
+          name: "消防演习",
+          total: 300,
+          point: 290,
+          color: ["#FFF9E3", "#37A1CC", "#FCFD08"],
+        },
+        {
+          icon: require("@/assets/images/topic/xfry.png"),
+          name: "管理层知晓程度",
+          total: 300,
+          point: 299,
+          color: ["#FFE3E3", "#FF5B2A", "#08FAC4"],
+        },
+      ],
+      column: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "公司名称",
+        },
+        {
+          prop: "name",
+          label: "必要资源",
+        },
+        {
+          prop: "isQ",
+          label: "验收许可",
+        },
+        {
+          prop: "personType",
+          label: "防火检查记录",
+        },
+        {
+          prop: "personType",
+          label: "防火巡查记录",
+        },
+        {
+          prop: "personType",
+          label: "消防安全活动记录",
+        },
+        {
+          prop: "personType",
+          label: "消防值班记录",
+        },
+      ],
+      column1: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "公司名称",
+        },
+        {
+          prop: "name",
+          label: "异常数据",
+        },
+        {
+          prop: "isQ",
+          label: "备注",
+        },
+      ],
+    };
   },
 };
 </script>
@@ -53,6 +228,98 @@ export default {
   }
   .screenRowTop {
     height: 62%;
+
+    .xfsjWrap {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .top {
+        display: flex;
+        flex: 1;
+        .left {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        .right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+      .btm {
+        height: 240px;
+      }
+    }
+
+    .xfzdWrap {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .top {
+        display: flex;
+        justify-content: space-evenly;
+        .item {
+          width: vw(164);
+          height: vw(120);
+          background: url("~@/assets/images/topic/xfib.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .icon {
+            width: vw(20);
+            height: vw(20);
+          }
+          .value {
+            font-size: vw(16);
+            color: #fff7e3;
+            line-height: 22px;
+            text-shadow: 0px 0px 9px rgba(255, 243, 87, 0.88);
+          }
+          .name {
+            font-size: vw(14);
+            color: #d0deee;
+          }
+        }
+      }
+      .btm {
+        flex: 1;
+        display: flex;
+        justify-content: space-evenly;
+        flex-direction: column;
+        .line {
+          margin-bottom: 14px;
+          flex: 1;
+          height: 100px;
+          background: url("~@/assets/images/topic/xfb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          display: flex;
+          .left {
+            flex: 1;
+          }
+          .right {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .name {
+              font-size: vw(14);
+              color: #d9e7ff;
+            }
+            .value {
+              font-weight: 500;
+              font-size: vw(28);
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px rgba(255, 87, 87, 0.88);
+            }
+          }
+        }
+      }
+    }
   }
   .screenRowBtm {
     height: 38%;
diff --git a/src/views/enterpriseTopic/fireSafety/pie.vue b/src/views/enterpriseTopic/fireSafety/pie.vue
new file mode 100644
index 0000000..cf044a7
--- /dev/null
+++ b/src/views/enterpriseTopic/fireSafety/pie.vue
@@ -0,0 +1,143 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let point = this.chartObj.point; //环形图的具体  百分比
+      let total = this.chartObj.total;
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: {
+          // 圆环中央文字
+          show: false, // 是否显示
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: this.chartObj.icon,
+                width: 80,
+                height: 80,
+                zIndex: 1,
+              },
+              left: 100,
+              top: "center",
+            },
+          ],
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: [30, 36],
+            center: [140, "center"],
+            data: [
+              {
+                value: 100, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+            radius: [30, 36],
+            center: [140, "center"],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            data: [
+              {
+                value: (point / total) * 100,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: {
+                      // 设置渐变色
+                      type: "linear",
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: this.chartObj.color[1], // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: this.chartObj.color[2], // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+
+              {
+                value: 120, //百分比
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/fireSafety/ssTable.vue b/src/views/enterpriseTopic/fireSafety/ssTable.vue
new file mode 100644
index 0000000..958b3ce
--- /dev/null
+++ b/src/views/enterpriseTopic/fireSafety/ssTable.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">检查人：</div>
+            <div class="value">{{ item.date }}</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.qyT }}</div>
+          </div>
+          <div class="item">
+            <div class="label">配置合理性：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+          <div class="item">
+            <div class="label">日常保养及时率：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap customTableWrap">
+      <gScreenTable
+        stripe
+        ref="gScreenTable"
+        :tableData="dataSource"
+        :columns="column"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gScreenTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      column: [
+        {
+          prop: "id",
+          label: "查处点",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    this.ipagination.pageSize = 20;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+
+  .tableCustomWrap {
+    height: calc(100% - 40px);
+    overflow: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .cusWrap {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      height: vw(58);
+      background: url("~@/assets/images/topic/cust.png") no-repeat center center;
+      background-size: 100% 100%;
+      padding: 0 8px;
+      .line {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .item {
+          font-size: vw(12);
+          display: flex;
+          align-items: center;
+          flex: 1;
+          .label {
+            color: #d0deee;
+          }
+          .value {
+            flex: 1;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .customTableWrap {
+    height: 100%;
+    .gScreenTableWrap {
+      height: auto;
+      .screenTable {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/fireSafety/xfsjTable.vue b/src/views/enterpriseTopic/fireSafety/xfsjTable.vue
new file mode 100644
index 0000000..2314fac
--- /dev/null
+++ b/src/views/enterpriseTopic/fireSafety/xfsjTable.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">事件类型：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">关联企业：</div>
+            <div class="value">{{ item.date }}</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="detail">{{ item.detail }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap customTableWrap">
+      <gScreenTable
+        stripe
+        ref="gScreenTable"
+        :tableData="dataSource"
+        :columns="column"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gScreenTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      column: [
+        {
+          prop: "id",
+          label: "查处点",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    this.ipagination.pageSize = 20;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+
+  .tableCustomWrap {
+    height: calc(100% - 40px);
+    overflow: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .cusWrap {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      height: vw(58);
+      background: url("~@/assets/images/topic/cust.png") no-repeat center center;
+      background-size: 100% 100%;
+      padding: 8px;
+      .line {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .item {
+          font-size: vw(12);
+          display: flex;
+          align-items: center;
+          flex: 1;
+          .label {
+            color: #d0deee;
+          }
+          .value {
+            flex: 1;
+            color: #ffffff;
+          }
+          .detail {
+            flex: 1;
+            color: #ffffff;
+            height: vw(32);
+            overflow-y: scroll;
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  .customTableWrap {
+    height: 100%;
+    .gScreenTableWrap {
+      height: auto;
+      .screenTable {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/netSafety/index.vue b/src/views/enterpriseTopic/netSafety/index.vue
index 8329528..a0f1eeb 100644
--- a/src/views/enterpriseTopic/netSafety/index.vue
+++ b/src/views/enterpriseTopic/netSafety/index.vue
@@ -13,10 +13,15 @@
         </colWrap>
       </div>
       <div class="screenMid mr16">
-        <colWrap title="等保定级评审"> </colWrap>
+        <colWrap title="等保定级评审">
+          <div class="dbdjWrap">
+            <totalHead :dataObj="tmObj"></totalHead>
+            <div class="dbdjBody"></div>
+          </div>
+        </colWrap>
       </div>
       <div class="screenRight">
-        <colWrap title="企业应急预案与应急演练异常分析">
+        <colWrap class="height100" title="企业应急预案与应急演练异常分析">
           <div class="qyyjWrap">
             <div class="top">
               <div style="flex: 1">
@@ -36,7 +41,13 @@
 
     <div class="screenRow screenRowBtm">
       <div class="screenLeft mr16">
-        <colWrap class="" title="网站应用系统备案"> </colWrap>
+        <colWrap class="" title="网站应用系统备案">
+          <div class="wzxtWrap">
+            <div style="flex: 1" v-for="item in blList" :key="item.name">
+              <pieWrap :chartObj="item"></pieWrap>
+            </div>
+          </div>
+        </colWrap>
       </div>
       <div class="screenMid mr16">
         <colWrap title="重大网络安全事故"> </colWrap>
@@ -56,6 +67,7 @@ import ballWrap from "./ballWrap.vue";
 import barWrap from "./bar.vue";
 import totalHead from "../components/totalHead.vue";
 import tableWrap from "../components/tableWrap.vue";
+import pieWrap from "./pie.vue";
 
 export default {
   components: {
@@ -65,6 +77,7 @@ export default {
     barWrap,
     ballWrap,
     tableWrap,
+    pieWrap,
   },
   data() {
     return {
@@ -91,6 +104,10 @@ export default {
         name: "漏斗总数",
         value: 31876,
       },
+      tmObj: {
+        name: "企业总数",
+        value: 31876,
+      },
       trlObj: {
         name: "集中培训学习",
         color: [
@@ -160,6 +177,29 @@ export default {
         name: "行政案件总数",
         value: 31876,
       },
+      blList: [
+        {
+          name: "网站备案数",
+          total: 300,
+          point: 100,
+          icon: require("@/assets/images/topic/pie1b.png"),
+          color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+        },
+        {
+          name: "应用备案数",
+          total: 340,
+          point: 1000,
+          icon: require("@/assets/images/topic/pie2b.png"),
+          color: ["#FFCE57", "#EB9104", "#FAC608"],
+        },
+        {
+          name: "应用评估数",
+          total: 360,
+          point: 100,
+          icon: require("@/assets/images/topic/pie4b.png"),
+          color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+        },
+      ],
       brObj: {
         data: [
           { name: "石化工业园区周边1", value: 1123 },
@@ -213,19 +253,24 @@ export default {
       .qyyjWrap {
         display: flex;
         flex-direction: column;
-        height: calc(100% - 40px);
+        height: 100%;
         .top {
           display: flex;
           height: 140px;
         }
         .btm {
-          height: calc(100% - 180px);
+          height: calc(100% - 60px);
+          overflow: hidden;
         }
       }
     }
   }
   .screenRowBtm {
     height: 32%;
+    .wzxtWrap {
+      height: 100%;
+      display: flex;
+    }
   }
 }
 </style>
diff --git a/src/views/enterpriseTopic/netSafety/pie.vue b/src/views/enterpriseTopic/netSafety/pie.vue
index e69de29..0572ea5 100644
--- a/src/views/enterpriseTopic/netSafety/pie.vue
+++ b/src/views/enterpriseTopic/netSafety/pie.vue
@@ -0,0 +1,157 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let point = this.chartObj.point; //环形图的具体  百分比
+      let total = this.chartObj.total;
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: {
+          // 圆环中央文字
+          show: true, // 是否显示
+          text: this.chartObj.name,
+          subtext: this.chartObj.point,
+          textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
+          subtextStyle: {
+            fontSize: 18,
+            lineHeight: 10,
+            color: "#F3FFF9",
+          },
+          textAlign: "center",
+          left: "47%",
+          top: 140,
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: this.chartObj.icon,
+                width: 180,
+                height: 180,
+                zIndex: 1,
+              },
+              left: "center",
+              top: -20,
+            },
+          ],
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: [35, 45],
+            center: ["center", 70],
+            data: [
+              {
+                value: 100, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+            ],
+            label: {
+              position: "center",
+              formatter: ((100 * point) / total).toFixed(0) + "%",
+              color: this.chartObj.color[0],
+              fontSize: 18,
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+            radius: [35, 45],
+            center: ["center", 70],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            data: [
+              {
+                value: (point / total) * 100,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: {
+                      // 设置渐变色
+                      type: "linear",
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: this.chartObj.color[1], // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: this.chartObj.color[2], // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+
+              {
+                value: 120, //百分比
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/personSafety/screen.vue b/src/views/enterpriseTopic/personSafety/screen.vue
index b0f87b1..c6defac 100644
--- a/src/views/enterpriseTopic/personSafety/screen.vue
+++ b/src/views/enterpriseTopic/personSafety/screen.vue
@@ -237,7 +237,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .personSafetyWrap {
   height: 100%;
   background: url("~@/assets/images/topic/allback.png") no-repeat center center;
diff --git a/src/views/enterpriseTopic/roadSafety/index.vue b/src/views/enterpriseTopic/roadSafety/index.vue
index 0abde6a..bf3b020 100644
--- a/src/views/enterpriseTopic/roadSafety/index.vue
+++ b/src/views/enterpriseTopic/roadSafety/index.vue
@@ -395,7 +395,7 @@ export default {
           flex: 1;
         }
         .btm {
-          flex: 1;
+          flex: 1.1;
           display: flex;
           .left {
             flex: 1;
diff --git a/src/views/enterpriseTopic/roadSafety/pie.vue b/src/views/enterpriseTopic/roadSafety/pie.vue
index 5f67c45..605ac88 100644
--- a/src/views/enterpriseTopic/roadSafety/pie.vue
+++ b/src/views/enterpriseTopic/roadSafety/pie.vue
@@ -98,14 +98,14 @@ export default {
         legend: {
           data: legend,
           orient: "vertical",
-          bottom: 20,
+          bottom: 10,
           icon: "diamond",
           left: "center",
           width: "100%",
           height: 80,
           itemHeight: 8,
           itemWidth: 8,
-          itemGap: 10,
+          itemGap: 6,
           padding: 0,
           //backgroundColor: "rgba(108,128,151,0.2)",
           textStyle: {
diff --git a/src/views/enterpriseTopic/screen.vue b/src/views/enterpriseTopic/screen.vue
index 607f982..fec1d99 100644
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@@ -19,7 +19,7 @@
           </div>
         </div>
         <div class="mr16 screenColTwo">
-          <colWrap title="危险物品管理">
+          <colWrap class="height100" title="危险物品管理">
             <div class="topCol">
               <div class="left mr14">
                 <div class="wxHead">