diff --git a/src/loveflow/components/echart/pie/dPie.vue b/src/loveflow/components/echart/pie/dPie.vue
index ec58207..adda418 100644
--- a/src/loveflow/components/echart/pie/dPie.vue
+++ b/src/loveflow/components/echart/pie/dPie.vue
@@ -63,10 +63,10 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/loveflow/components/echart/pie/dpieOne.vue b/src/loveflow/components/echart/pie/dpieOne.vue
index c4dbca3..d80089d 100644
--- a/src/loveflow/components/echart/pie/dpieOne.vue
+++ b/src/loveflow/components/echart/pie/dpieOne.vue
@@ -48,10 +48,10 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/views/enterpriseTopic/antiAttack/dpie.vue b/src/views/enterpriseTopic/antiAttack/dpie.vue
index 952bea1..0eb45bc 100644
--- a/src/views/enterpriseTopic/antiAttack/dpie.vue
+++ b/src/views/enterpriseTopic/antiAttack/dpie.vue
@@ -39,16 +39,16 @@ export default {
     };
   },
   mounted() {
-    this.data = this.chartObj.data;
+    this.data = JSON.parse(JSON.stringify(this.chartObj.data));
     this.total = 1;
     for (let i = 0; i < this.data.length; i++) {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/views/enterpriseTopic/antiAttack/index.vue b/src/views/enterpriseTopic/antiAttack/index.vue
index 1d1945f..5146562 100644
--- a/src/views/enterpriseTopic/antiAttack/index.vue
+++ b/src/views/enterpriseTopic/antiAttack/index.vue
@@ -118,32 +118,9 @@
       <div class="screenBLeft mr18">
         <colWrap class="" title="反恐目标单位检查数据">
           <div class="fkmbWrap">
-            <div class="line">
-              <div class="item">
-                <pie-wrap :chartObj="mllObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mlmObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mlrObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mllObj"></pie-wrap>
-              </div>
-            </div>
-            <div class="line">
-              <div class="item">
-                <pie-wrap :chartObj="mllObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mlmObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mlrObj"></pie-wrap>
-              </div>
-              <div class="item">
-                <pie-wrap :chartObj="mllObj"></pie-wrap>
+            <div class="line" v-for="(line, index) in fkmbList" :key="index">
+              <div class="item" v-for="item in line" :key="item.name">
+                <pie-wrap :chartObj="item"></pie-wrap>
               </div>
             </div>
           </div>
@@ -179,7 +156,7 @@
               </div>
             </div>
           </div>
-          <el-row :gutter="16">
+          <!-- <el-row :gutter="16">
             <el-col :span="6" v-for="item in jssjList" :key="item.name">
               <div class="line">
                 <div class="icon">
@@ -193,7 +170,7 @@
                 </div>
               </div>
             </el-col>
-          </el-row>
+          </el-row> -->
         </colWrap>
       </div>
     </div>
@@ -234,27 +211,70 @@ export default {
           icon: require("@/assets/images/topic/anyjr.png"),
         },
       ],
-      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"],
-      },
+
+      fkmbList: [
+        [
+          {
+            name: "安全管理制度",
+            total: 340,
+            point: 100,
+            icon: require("@/assets/images/topic/pie1b.png"),
+            color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+          },
+          {
+            name: "人员安全管理",
+            total: 328,
+            point: 186,
+            icon: require("@/assets/images/topic/pie2b.png"),
+            color: ["#FFCE57", "#EB9104", "#FAC608"],
+          },
+          {
+            name: "出入管理",
+            total: 435,
+            point: 261,
+            icon: require("@/assets/images/topic/pie4b.png"),
+            color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+          },
+          {
+            name: "物品安全管理",
+            total: 340,
+            point: 100,
+            icon: require("@/assets/images/topic/pie1b.png"),
+            color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+          },
+        ],
+        [
+          {
+            name: "视频监控系统",
+            total: 340,
+            point: 100,
+            icon: require("@/assets/images/topic/pie1b.png"),
+            color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+          },
+          {
+            name: "火灾防控措施",
+            total: 328,
+            point: 186,
+            icon: require("@/assets/images/topic/pie2b.png"),
+            color: ["#FFCE57", "#EB9104", "#FAC608"],
+          },
+          {
+            name: "网络安全",
+            total: 435,
+            point: 261,
+            icon: require("@/assets/images/topic/pie4b.png"),
+            color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+          },
+          {
+            name: "外部环境安全",
+            total: 340,
+            point: 100,
+            icon: require("@/assets/images/topic/pie1b.png"),
+            color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+          },
+        ],
+      ],
+
       tmlObj: {
         data: [
           { name: "石化工业园区周边1", value: 1123 },
diff --git a/src/views/enterpriseTopic/components/dPie.vue b/src/views/enterpriseTopic/components/dPie.vue
index f67d2e6..e35e7ad 100644
--- a/src/views/enterpriseTopic/components/dPie.vue
+++ b/src/views/enterpriseTopic/components/dPie.vue
@@ -50,10 +50,10 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/views/enterpriseTopic/components/dPieOne.vue b/src/views/enterpriseTopic/components/dPieOne.vue
index 9656b0d..5b0a113 100644
--- a/src/views/enterpriseTopic/components/dPieOne.vue
+++ b/src/views/enterpriseTopic/components/dPieOne.vue
@@ -50,10 +50,10 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/views/enterpriseTopic/components/dPieTwo.vue b/src/views/enterpriseTopic/components/dPieTwo.vue
index 66265ea..bb989e7 100644
--- a/src/views/enterpriseTopic/components/dPieTwo.vue
+++ b/src/views/enterpriseTopic/components/dPieTwo.vue
@@ -57,10 +57,10 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
+    setOption() {
       let optionsData = this.data;
       let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
diff --git a/src/views/enterpriseTopic/netSafety/ballWrap.vue b/src/views/enterpriseTopic/netSafety/ballWrap.vue
new file mode 100644
index 0000000..7747c5f
--- /dev/null
+++ b/src/views/enterpriseTopic/netSafety/ballWrap.vue
@@ -0,0 +1,150 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+import "echarts-liquidfill";
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let datas = [0.6, 0.6, 0.6];
+      this.option = {
+        title: {
+          show: true, // 是否显示
+          text: this.chartObj.name,
+          textStyle: {
+            fontSize: 12,
+            lineHeight: 12,
+            color: this.chartObj.color[1],
+          },
+          left: "34%",
+          bottom: "15%",
+        },
+        series: [
+          {
+            type: "liquidFill",
+            radius: "50%",
+            center: ["50%", "40%"],
+            data: datas,
+            backgroundStyle: {
+              color: {
+                type: "linear",
+                x: 1,
+                y: 0,
+                x2: 0.5,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: this.chartObj.color[3],
+                  },
+                  {
+                    offset: 0.5,
+                    color: this.chartObj.color[4],
+                  },
+                  {
+                    offset: 0,
+                    color: this.chartObj.color[5],
+                  },
+                ],
+                globalCoord: false,
+              },
+            },
+            outline: {
+              borderDistance: 1,
+              itemStyle: {
+                borderWidth: 1,
+                //borderColor: "#27FDA5",
+                borderColor: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 1,
+                      color: this.chartObj.color[4],
+                    },
+                    {
+                      offset: 0.5,
+                      color: this.chartObj.color[3],
+                    },
+                    {
+                      offset: 0,
+                      color: this.chartObj.color[2],
+                    },
+                  ],
+                  globalCoord: false,
+                },
+              },
+            },
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: this.chartObj.color[4],
+                  },
+                  {
+                    offset: 0.5,
+                    color: this.chartObj.color[3],
+                  },
+                  {
+                    offset: 0,
+                    color: this.chartObj.color[2],
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              //此处没有生效，本地生效
+              textStyle: {
+                fontSize: 14,
+                color: this.chartObj.color[0],
+              },
+              formatter: (item) => {
+                console.log(item);
+                //`{index|${_index}.} {name|${name}}`;
+                return `完成率\n ${100 * this.chartObj.rate}%`;
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/netSafety/bar.vue b/src/views/enterpriseTopic/netSafety/bar.vue
new file mode 100644
index 0000000..8dd7653
--- /dev/null
+++ b/src/views/enterpriseTopic/netSafety/bar.vue
@@ -0,0 +1,219 @@
+<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: "14",
+          top: "5%", // 设置条形图的边距
+          right: "0",
+          bottom: "0",
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: xData,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: "bottom",
+                color: "#299CD4",
+                fontSize: 14,
+                fontFamily: "Microsoft YaHei",
+                align: "left",
+                padding: [0, 0, 5, 0],
+                rich: {
+                  index: {
+                    padding: [4, 0, 0, 8],
+                    color: "#ffffff",
+                  },
+                  name: {
+                    padding: [4, 8, 0, 2],
+                    color: "#ffffff",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    align: "right",
+                    color: "rgba(255,255,255,0.9)",
+                    fontSize: 12,
+                  },
+                },
+              },
+              formatter: (name, index) => {
+                const _index = index + 1;
+                if (dataList.length) {
+                  const item = dataList.filter((item) => item.name == name)[0];
+                  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: [-20, 10, 0, -40],
+              textStyle: {
+                rich: {
+                  value: {
+                    width: 54,
+                    padding: [4, 10, 0, -60],
+                    color: "#9CE0FF",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    fontSize: 14,
+                    color: "#9CE0FF",
+                  },
+                },
+              },
+              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/netSafety/dpie.vue b/src/views/enterpriseTopic/netSafety/dpie.vue
new file mode 100644
index 0000000..c55a520
--- /dev/null
+++ b/src/views/enterpriseTopic/netSafety/dpie.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in chartObj.data || []" :key="item.name">
+        <div class="flex-center">
+          <div
+            class="dpieIcon"
+            :style="{ backgroundColor: item.itemStyle.color }"
+          ></div>
+          <div class="dpieName">{{ item.name }}</div>
+        </div>
+        <div class="dpieValue">
+          {{ ((100 * item.value) / (chartObj.total || 1)).toFixed(0) }}%
+        </div>
+      </div>
+    </div>
+    <div class="" style="flex: 1">
+      <div class="dpiebg">
+        <div ref="dpieWrapRef" class="dpieWrap"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let optionData = JSON.parse(JSON.stringify(this.chartObj.data));
+      let chartDom = this.$refs["dpieWrapRef"];
+      let myChart = echarts.init(chartDom);
+      const getPie3D = (pieData, internalDiameterRatio) => {
+        //internalDiameterRatio:透明的空心占比
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let k = 1 / 5;
+        pieData.sort((a, b) => {
+          return b.value - a.value;
+        });
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+            radius: "80%",
+            center: ["32%", "40%"],
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+          startValue = endValue;
+        }
+        let boxHeight = getHeight3D(series, 6); //通过传参设定3d饼/环的高度，26代表26px
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          // backgroundColor: "#fff",
+          tooltip: {
+            show: false,
+          },
+          legend: {
+            show: false,
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            left: 2,
+            top: -24, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 24, //角度
+              distance: 120, //调整视角到主体的距离，类似调整zoom
+              rotateSensitivity: 0, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: false, //自动旋转
+            },
+          },
+          series: series,
+        };
+        return option;
+      };
+
+      //获取3d丙图的最高扇区的高度
+      const getHeight3D = (series, height) => {
+        series.sort((a, b) => {
+          return b.pieData.value - a.pieData.value;
+        });
+        return (height * 70) / series[0].pieData.value;
+      };
+
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      const getParametricEquation = (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) => {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      };
+
+      let option = getPie3D(optionData, 0.8);
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      option.series.push({
+        // name: "pie3d",
+        type: "pie",
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{c}%",
+        },
+        // startAngle: -25, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["70%", "70%"],
+        center: ["40%", "40%"], //指示线的位置
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      option && myChart.setOption(option);
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dpiePanel {
+  position: relative;
+  flex: 1;
+  .dpieLegend {
+    position: absolute;
+    top: 10px;
+    right: vw(50);
+    width: vw(240);
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: vw(16);
+      padding: 0 vw(12);
+      width: 100%;
+      height: 32px;
+      background-color: rgba(108, 128, 151, 0.1);
+      .dpieIcon {
+        margin-right: 6px;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .dpieName {
+        margin-right: 18px;
+        font-size: 12px;
+        color: #d0deee;
+      }
+      .dpieValue {
+        font-size: 16px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.dpieWrap {
+  width: 240px;
+  height: 130px;
+}
+.dpiebg {
+  margin-top: vw(10);
+  margin-left: vw(30);
+  width: 240px;
+  height: 130px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/netSafety/index.vue b/src/views/enterpriseTopic/netSafety/index.vue
index d79d09e..8329528 100644
--- a/src/views/enterpriseTopic/netSafety/index.vue
+++ b/src/views/enterpriseTopic/netSafety/index.vue
@@ -4,15 +4,33 @@
     <div class="screenRow screenRowTop">
       <div class="screenLeft mr16">
         <colWrap class="mb14" title="漏斗整改">
-          <div class=""></div>
+          <totalHead :dataObj="tlObj"></totalHead>
+          <dpie :chartObj="jtssPie"></dpie>
+        </colWrap>
+        <colWrap title="行政案件">
+          <totalHead :dataObj="tlbObj"></totalHead>
+          <dpie :chartObj="xzajPie"></dpie>
         </colWrap>
-        <colWrap title="行政案件"> </colWrap>
       </div>
       <div class="screenMid mr16">
         <colWrap title="等保定级评审"> </colWrap>
       </div>
       <div class="screenRight">
-        <colWrap title="企业应急预案与应急演练异常分析"> </colWrap>
+        <colWrap title="企业应急预案与应急演练异常分析">
+          <div class="qyyjWrap">
+            <div class="top">
+              <div style="flex: 1">
+                <ballWrap :chartObj="trlObj"></ballWrap>
+              </div>
+              <div style="flex: 1">
+                <ballWrap :chartObj="trrObj"></ballWrap>
+              </div>
+            </div>
+            <div class="btm">
+              <tableWrap :columns="column"></tableWrap>
+            </div>
+          </div>
+        </colWrap>
       </div>
     </div>
 
@@ -24,24 +42,139 @@
         <colWrap title="重大网络安全事故"> </colWrap>
       </div>
       <div class="screenRight">
-        <colWrap title="网络安全事件TOP5"> </colWrap>
+        <colWrap title="网络安全事件TOP5">
+          <barWrap :chartObj="brObj"></barWrap>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
 import colWrap from "../components/colWrap.vue";
+import dpie from "./dpie.vue";
+import ballWrap from "./ballWrap.vue";
+import barWrap from "./bar.vue";
+import totalHead from "../components/totalHead.vue";
+import tableWrap from "../components/tableWrap.vue";
 
 export default {
   components: {
     colWrap,
+    dpie,
+    totalHead,
+    barWrap,
+    ballWrap,
+    tableWrap,
   },
   data() {
-    return {};
+    return {
+      jtssPie: {
+        total: 214,
+        data: [
+          {
+            name: "已完成整改企业",
+            value: 128,
+            itemStyle: {
+              color: "#2B82F3",
+            },
+          },
+          {
+            name: "未完成整改企业",
+            value: 86,
+            itemStyle: {
+              color: "#E15A4E",
+            },
+          },
+        ],
+      },
+      tlObj: {
+        name: "漏斗总数",
+        value: 31876,
+      },
+      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)",
+        ],
+        rate: 0.9,
+      },
+      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)",
+        ],
+        rate: 0.8,
+      },
+      column: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "公司名称",
+        },
+        {
+          prop: "name",
+          label: "集中培训学习",
+        },
+        {
+          prop: "isQ",
+          label: "开展应急演练",
+        },
+        {
+          prop: "personType",
+          label: "备注",
+        },
+      ],
+      xzajPie: {
+        total: 214,
+        data: [
+          {
+            name: "无行政处罚",
+            value: 128,
+            itemStyle: {
+              color: "#2B82F3",
+            },
+          },
+          {
+            name: "有行政处罚",
+            value: 86,
+            itemStyle: {
+              color: "#E15A4E",
+            },
+          },
+        ],
+      },
+      tlbObj: {
+        name: "行政案件总数",
+        value: 31876,
+      },
+      brObj: {
+        data: [
+          { name: "石化工业园区周边1", value: 1123 },
+          { name: "石化工业园区周边2", value: 808 },
+          { name: "石化工业园区周边3", value: 703 },
+          { name: "石化工业园区周边4", value: 613 },
+          { name: "石化工业园区周边5", value: 433 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
+    };
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "@/loveflow/assets/index.scss";
 .netSafetyWrap {
   height: 100%;
@@ -54,6 +187,10 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
+      .screenChart {
+        display: flex;
+        flex-direction: column;
+      }
     }
     .screenMid {
       flex: 1;
@@ -69,6 +206,23 @@ export default {
   .screenRowTop {
     padding-bottom: 16px;
     height: 68%;
+    .screenRight {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      .qyyjWrap {
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - 40px);
+        .top {
+          display: flex;
+          height: 140px;
+        }
+        .btm {
+          height: calc(100% - 180px);
+        }
+      }
+    }
   }
   .screenRowBtm {
     height: 32%;
diff --git a/src/views/enterpriseTopic/netSafety/pie.vue b/src/views/enterpriseTopic/netSafety/pie.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/enterpriseTopic/roadSafety/dpie.vue b/src/views/enterpriseTopic/roadSafety/dpie.vue
index 0eacfec..e6896d2 100644
--- a/src/views/enterpriseTopic/roadSafety/dpie.vue
+++ b/src/views/enterpriseTopic/roadSafety/dpie.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dpiePanel">
     <div class="dpieLegend">
-      <div class="dpieRow" v-for="item in chartObj" :key="item.name">
+      <div class="dpieRow" v-for="item in data" :key="item.name">
         <div class="flex-center">
           <div
             class="dpieIcon"
@@ -34,20 +34,20 @@ export default {
   data() {
     return {
       total: 1,
+      data: [],
     };
   },
   mounted() {
+    this.data = JSON.parse(JSON.stringify(this.chartObj));
     this.total = 1;
-    for (let i = 0; i < this.chartObj.length; i++) {
-      this.total += this.chartObj[i].value;
+    for (let i = 0; i < this.data.length; i++) {
+      this.total += this.data[i].value;
     }
 
-    this.echartsPie();
+    this.setOption();
   },
   methods: {
-    echartsPie() {
-      let optionsData = this.chartObj;
-      let hoveredIndex = "";
+    setOption() {
       let chartDom = this.$refs["dpieWrapRef"];
       let myChart = echarts.init(chartDom);
       const getPie3D = (pieData, internalDiameterRatio) => {
@@ -241,7 +241,7 @@ export default {
         };
       };
 
-      let option = getPie3D(this.chartObj, 0.8);
+      let option = getPie3D(this.data, 0.8);
       //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
       option.series.push({
         // name: "pie3d",
diff --git a/src/views/enterpriseTopic/roadSafety/index.vue b/src/views/enterpriseTopic/roadSafety/index.vue
index a8d3368..0abde6a 100644
--- a/src/views/enterpriseTopic/roadSafety/index.vue
+++ b/src/views/enterpriseTopic/roadSafety/index.vue
@@ -4,7 +4,7 @@
     <div class="screenRow screenRowTop">
       <div class="screenLeft mr16 mb14">
         <colWrap class="" title="源头检查数据">
-          <total-head :dataObj="ytObj"></total-head>
+          <totalHead :dataObj="ytObj"></totalHead>
           <div class="dpieWrap">
             <dpie :chartObj="ytPie"></dpie>
           </div>
@@ -16,7 +16,7 @@
 
       <div class="screenRight mb14">
         <colWrap class="mr16" title="交通设施检查数据">
-          <total-head :dataObj="ytObj"></total-head>
+          <totalHead :dataObj="ytObj"></totalHead>
           <div class="dpieWrap">
             <dpie :chartObj="jtssPie"></dpie>
           </div>
@@ -108,7 +108,6 @@
 <script>
 import colWrap from "../components/colWrap.vue";
 import SubCol from "../components/subCol.vue";
-import TotalHead from "../components/totalHead.vue";
 import totalHead from "../components/totalHead.vue";
 import dpie from "./dpie.vue";
 import pieWrap from "./pie.vue";
@@ -124,7 +123,6 @@ export default {
     colWrap,
     totalHead,
     SubCol,
-    TotalHead,
     ytTable,
     tableWrap,
     barOne,