diff --git a/src/assets/images/screen/wxl.png b/src/assets/images/screen/wxl.png
new file mode 100644
index 0000000..f356fa7
Binary files /dev/null and b/src/assets/images/screen/wxl.png differ
diff --git a/src/assets/images/screen/wxr.png b/src/assets/images/screen/wxr.png
new file mode 100644
index 0000000..dcbfff2
Binary files /dev/null and b/src/assets/images/screen/wxr.png differ
diff --git a/src/assets/images/topic/cust.png b/src/assets/images/topic/cust.png
new file mode 100644
index 0000000..35d9631
Binary files /dev/null and b/src/assets/images/topic/cust.png differ
diff --git a/src/assets/images/topic/fgdp.png b/src/assets/images/topic/fgdp.png
new file mode 100644
index 0000000..c8fd4d1
Binary files /dev/null and b/src/assets/images/topic/fgdp.png differ
diff --git a/src/assets/images/topic/fgfbjg.png b/src/assets/images/topic/fgfbjg.png
new file mode 100644
index 0000000..c71aa53
Binary files /dev/null and b/src/assets/images/topic/fgfbjg.png differ
diff --git a/src/assets/images/topic/fgfbt.png b/src/assets/images/topic/fgfbt.png
new file mode 100644
index 0000000..c3a9180
Binary files /dev/null and b/src/assets/images/topic/fgfbt.png differ
diff --git a/src/assets/images/topic/fgfcf.png b/src/assets/images/topic/fgfcf.png
new file mode 100644
index 0000000..77059a4
Binary files /dev/null and b/src/assets/images/topic/fgfcf.png differ
diff --git a/src/assets/images/topic/fgmhq.png b/src/assets/images/topic/fgmhq.png
new file mode 100644
index 0000000..835e4e3
Binary files /dev/null and b/src/assets/images/topic/fgmhq.png differ
diff --git a/src/assets/images/topic/fgtss.png b/src/assets/images/topic/fgtss.png
new file mode 100644
index 0000000..441bd76
Binary files /dev/null and b/src/assets/images/topic/fgtss.png differ
diff --git a/src/assets/images/topic/fgxhs.png b/src/assets/images/topic/fgxhs.png
new file mode 100644
index 0000000..4bf7547
Binary files /dev/null and b/src/assets/images/topic/fgxhs.png differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index 9d8033b..d7740eb 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -14,6 +14,9 @@
   align-items: center;
 }
 /* 定位 END */
+.pointer {
+  cursor: pointer;
+}
 
 /* 间距 START*/
 .mt6 {
diff --git a/src/loveflow/components/echart/line/one.vue b/src/loveflow/components/echart/line/one.vue
index 1cc98a2..16776da 100644
--- a/src/loveflow/components/echart/line/one.vue
+++ b/src/loveflow/components/echart/line/one.vue
@@ -24,8 +24,10 @@ export default {
   methods: {
     setOption() {
       let seriesArr = [];
+      let color = [];
 
       for (let i = 0; i < this.chartObj.legend.length; i++) {
+        color.push(this.chartObj.color[i][0]);
         seriesArr.push({
           name: this.chartObj.legend[i],
           type: "line",
@@ -54,6 +56,7 @@ export default {
       }
 
       this.option = {
+        color: color,
         legend: {
           data: this.chartObj.legend,
           icon: "rect",
@@ -67,10 +70,11 @@ export default {
             color: "#D0DEEE",
             fontSize: 12,
           },
+          itemStyle: {},
         },
         grid: {
           top: this.chartObj.gridTop || "20%",
-          bottom: "10%",
+          bottom: this.chartObj.gridBtm || "10%",
           left: this.chartObj.gridLeft || "6%",
           right: "5%",
         },
diff --git a/src/loveflow/components/echart/radar/four.vue b/src/loveflow/components/echart/radar/four.vue
new file mode 100644
index 0000000..f8689f4
--- /dev/null
+++ b/src/loveflow/components/echart/radar/four.vue
@@ -0,0 +1,108 @@
+<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() {
+      this.option = {
+        color: ["#C6403E", "#FF8A5A", "#5B8FF9"],
+        legend: {
+          show: false,
+        },
+        tooltip: {
+          show: false,
+        },
+        radar: {
+          center: ["50%", "50%"], // 外圆的位置
+          radius: "45%",
+          name: {
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 4,
+            },
+          },
+          axisName: {
+            color: "#D0DEEE",
+          },
+          indicator: this.chartObj.indicator,
+          splitArea: {
+            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: {
+              // 分隔区域的样式设置。
+              color: ["transparent"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            },
+          },
+          axisLine: {
+            // 指向外圈文本的分隔线样式
+            lineStyle: {
+              color: "rgba(61,183,171,0.1)",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "solid",
+              color: "rgba(61,183,171,0.1)", // 分隔线颜色
+              width: 2, // 分隔线线宽
+            },
+          },
+        },
+        series: [
+          {
+            type: "radar",
+            symbolSize: 3,
+            itemStyle: {
+              borderColor: "#ffffff",
+              borderWidth: 1,
+            },
+            lineStyle: {
+              width: 2,
+            },
+
+            data: [
+              {
+                value: [80, 80, 80, 80, 80, 80, 80, 80],
+                name: "车辆违规数",
+                lineStyle: {
+                  color: "#2B82F3",
+                },
+                areaStyle: {
+                  color: "rgba(43,130,243,0.2)",
+                },
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/mixins/tableListMixins.js b/src/loveflow/mixins/tableListMixins.js
index 7916adf..4365368 100644
--- a/src/loveflow/mixins/tableListMixins.js
+++ b/src/loveflow/mixins/tableListMixins.js
@@ -61,6 +61,8 @@ export const tableListMixins = {
           date: "2024-02-26 22:22:22",
           sc: "正常",
           qyT: "企业类型" + i,
+          car: "浙B9871" + i,
+          yType: "GPS驻留" + params.pageNo,
           cardList: [
             {
               name: "矛盾数据",
diff --git a/src/views/enterpriseTopic/antiAttack/dpie.vue b/src/views/enterpriseTopic/antiAttack/dpie.vue
index 6390bb3..952bea1 100644
--- a/src/views/enterpriseTopic/antiAttack/dpie.vue
+++ b/src/views/enterpriseTopic/antiAttack/dpie.vue
@@ -283,7 +283,7 @@ export default {
   height: 100%;
   .dpieLegend {
     position: absolute;
-    top: vw(150);
+    top: vw(160);
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/src/views/enterpriseTopic/antiAttack/index.vue b/src/views/enterpriseTopic/antiAttack/index.vue
index 3bbca73..1d1945f 100644
--- a/src/views/enterpriseTopic/antiAttack/index.vue
+++ b/src/views/enterpriseTopic/antiAttack/index.vue
@@ -42,49 +42,45 @@
               <div class="wfsjTop">
                 <sub-col title="消防物品"></sub-col>
                 <div class="wfsjBody">
-                  <el-row :gutter="16">
-                    <el-col
-                      :span="12"
-                      v-for="item in xfwpList"
-                      :key="item.name"
-                    >
-                      <div class="line">
-                        <div class="icon">
-                          <img :src="item.icon" />
-                        </div>
-                        <div class="item">
-                          <div class="name">{{ item.name }}</div>
-                          <div class="value">
-                            {{ item.value.toLocaleString() }}<span>套</span>
-                          </div>
+                  <div
+                    class="line"
+                    v-for="(line, index) in xfwpList"
+                    :key="index"
+                  >
+                    <div class="item" v-for="item in line" :key="item.name">
+                      <div class="icon">
+                        <img :src="item.icon" />
+                      </div>
+                      <div class="nameWrap">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="value">
+                          {{ item.value.toLocaleString() }}<span>套</span>
                         </div>
                       </div>
-                    </el-col>
-                  </el-row>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div class="wfsjBtm">
                 <sub-col title="反恐防暴物品"></sub-col>
                 <div class="wfsjBody">
-                  <el-row :gutter="16">
-                    <el-col
-                      :span="12"
-                      v-for="item in xfwpList"
-                      :key="item.name"
-                    >
-                      <div class="line">
-                        <div class="icon">
-                          <img :src="item.icon" />
-                        </div>
-                        <div class="item">
-                          <div class="name">{{ item.name }}</div>
-                          <div class="value">
-                            {{ item.value.toLocaleString() }}<span>套</span>
-                          </div>
+                  <div
+                    class="line"
+                    v-for="(line, index) in fkfbList"
+                    :key="index"
+                  >
+                    <div class="item" v-for="item in line" :key="item.name">
+                      <div class="icon">
+                        <img :src="item.icon" />
+                      </div>
+                      <div class="nameWrap">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="value">
+                          {{ item.value.toLocaleString() }}<span>套</span>
                         </div>
                       </div>
-                    </el-col>
-                  </el-row>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -289,48 +285,56 @@ export default {
       },
 
       xfwpList: [
-        {
-          name: "消火栓",
-          value: 32145,
-          icon: require("@/assets/images/topic/xhs.png"),
-        },
-        {
-          name: "灭火器",
-          value: 32145,
-          icon: require("@/assets/images/topic/mhq.png"),
-        },
-        {
-          name: "逃生绳",
-          value: 32145,
-          icon: require("@/assets/images/topic/tss.png"),
-        },
-        {
-          name: "防毒面具",
-          value: 32145,
-          icon: require("@/assets/images/topic/fdmj.png"),
-        },
+        [
+          {
+            name: "消火栓",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgxhs.png"),
+          },
+          {
+            name: "灭火器",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgmhq.png"),
+          },
+        ],
+        [
+          {
+            name: "逃生绳",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgtss.png"),
+          },
+          {
+            name: "防毒面具",
+            value: 32145,
+            icon: require("@/assets/images/topic/fdmj.png"),
+          },
+        ],
       ],
       fkfbList: [
-        {
-          name: "防爆桶",
-          value: 32145,
-          icon: require("@/assets/images/topic/fbt.png"),
-        },
-        {
-          name: "盾牌钢叉",
-          value: 32145,
-          icon: require("@/assets/images/topic/dpgc.png"),
-        },
-        {
-          name: "防刺服",
-          value: 32145,
-          icon: require("@/assets/images/topic/fcf.png"),
-        },
-        {
-          name: "防爆警棍",
-          value: 32145,
-          icon: require("@/assets/images/topic/fbjg.png"),
-        },
+        [
+          {
+            name: "防爆桶",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgfbt.png"),
+          },
+          {
+            name: "盾牌钢叉",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgdp.png"),
+          },
+        ],
+        [
+          {
+            name: "防刺服",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgfcf.png"),
+          },
+          {
+            name: "防爆警棍",
+            value: 32145,
+            icon: require("@/assets/images/topic/fgfbjg.png"),
+          },
+        ],
       ],
 
       trObj: {
@@ -542,26 +546,32 @@ export default {
           }
           .wfsjBody {
             flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+
             .line {
+              height: vw(60);
+              padding-left: vw(10);
               display: flex;
               align-items: center;
-              margin-top: vw(10);
-              //height: vw(60);
-              padding: 0 12px;
-              /* background: url("~@/assets/images/topic/strfsj.png") no-repeat
-                center center;
-              background-size: 100% 100%; */
-              .icon {
-                margin-right: 6px;
-                width: vw(34);
-                height: vw(36);
-                img {
-                  width: 100%;
-                }
-              }
+              background-color: rgba(108, 151, 149, 0.2);
+
               .item {
+                display: flex;
+                align-items: center;
+                flex: 1;
+                .icon {
+                  width: vw(50);
+                  height: vw(60);
+                  margin-right: vw(8);
+                  img {
+                    width: 100%;
+                  }
+                }
+
                 .name {
-                  margin-bottom: 2px;
+                  margin-bottom: vw(4);
                   font-weight: 400;
                   font-size: vw(14);
                   color: #d0deee;
@@ -627,10 +637,12 @@ export default {
         display: flex;
         flex-direction: column;
         margin-bottom: 10px;
+        justify-content: space-evenly;
         .jfsjRow {
           flex: 1;
           display: flex;
           justify-content: space-between;
+          align-items: center;
           .item {
             height: vw(80);
             width: vw(124);
@@ -656,10 +668,10 @@ export default {
     }
   }
   .screenTopRow {
-    height: calc(100% - 200px);
+    height: calc(100% - 240px);
   }
   .screenBtmRow {
-    height: 200px;
+    height: 240px;
     .fkmbWrap {
       display: flex;
       flex-direction: column;
diff --git a/src/views/enterpriseTopic/antiAttack/pie.vue b/src/views/enterpriseTopic/antiAttack/pie.vue
index c8079d8..c9bf789 100644
--- a/src/views/enterpriseTopic/antiAttack/pie.vue
+++ b/src/views/enterpriseTopic/antiAttack/pie.vue
@@ -34,7 +34,7 @@ export default {
           // 圆环中央文字
           show: true, // 是否显示
           text: this.chartObj.name,
-          textStyle: { fontSize: 10, color: "#D0DEEE" },
+          textStyle: { fontSize: 12, color: "#D0DEEE" },
           /* subtextStyle: {
             fontSize: 18,
             fontWeight: 500,
@@ -43,7 +43,7 @@ export default {
           }, */
           textAlign: "center",
           left: "47%",
-          top: 55,
+          top: 70,
         },
         color: this.chartObj.color,
         graphic: {
@@ -52,12 +52,12 @@ export default {
               type: "image",
               style: {
                 image: this.chartObj.icon,
-                width: 80,
-                height: 80,
+                width: 100,
+                height: 100,
                 zIndex: 1,
               },
               left: "center",
-              top: -10,
+              top: -15,
             },
           ],
         },
@@ -65,8 +65,8 @@ export default {
           {
             // name: '访问来源1',
             type: "pie",
-            radius: [15, 20],
-            center: ["center", 30],
+            radius: [20, 25],
+            center: ["center", 35],
             data: [
               {
                 value: 100, //对应显示的部分数据即100%
diff --git a/src/views/enterpriseTopic/components/colWrap.vue b/src/views/enterpriseTopic/components/colWrap.vue
index 96800af..ff783ae 100644
--- a/src/views/enterpriseTopic/components/colWrap.vue
+++ b/src/views/enterpriseTopic/components/colWrap.vue
@@ -48,7 +48,7 @@ export default {
   }
 
   .screenChart {
-    padding: 12px 12px 0;
+    padding: vw(10) vw(10) 0;
     height: calc(100% - 30px);
     box-sizing: border-box;
     background: url("~@/assets/images/topic/cardbody.png") no-repeat center
diff --git a/src/views/enterpriseTopic/components/dPieOne.vue b/src/views/enterpriseTopic/components/dPieOne.vue
new file mode 100644
index 0000000..9656b0d
--- /dev/null
+++ b/src/views/enterpriseTopic/components/dPieOne.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in 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">{{ item.value }}</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 {
+  data() {
+    return {
+      data: [
+        {
+          name: "资质正常企业数",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "资质异常企业数",
+          value: 86,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      total: 1,
+    };
+  },
+  mounted() {
+    this.total = 1;
+    for (let i = 0; i < this.data.length; i++) {
+      this.total += this.data[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.data;
+      let hoveredIndex = "";
+      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: "90%",
+            center: ["30%", "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: 0,
+            top: -10, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 18, //角度
+              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 * 50) / 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(this.data, 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: ["80%", "80%"],
+        center: ["30%", "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: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: vw(200);
+      margin-bottom: vw(16);
+      //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: 160px;
+  height: 70;
+}
+.dpiebg {
+  margin-top: vw(14);
+  width: 160px;
+  height: 70px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/components/dPieTwo.vue b/src/views/enterpriseTopic/components/dPieTwo.vue
new file mode 100644
index 0000000..66265ea
--- /dev/null
+++ b/src/views/enterpriseTopic/components/dPieTwo.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in 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">{{ item.value }}</div>
+      </div>
+    </div>
+    <div class="flex-center" 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 {
+  data() {
+    return {
+      data: [
+        {
+          name: "竞技体育用枪",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "商业设计馆枪支",
+          value: 86,
+          itemStyle: {
+            color: "#FFD16A",
+          },
+        },
+        {
+          name: "猎枪",
+          value: 56,
+          itemStyle: {
+            color: "#48EEBD",
+          },
+        },
+      ],
+      total: 1,
+    };
+  },
+  mounted() {
+    this.total = 1;
+    for (let i = 0; i < this.data.length; i++) {
+      this.total += this.data[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.data;
+      let hoveredIndex = "";
+      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: "90%",
+            center: ["50%", "50%"],
+          };
+
+          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: 0,
+            top: -14, //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 * 50) / 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(this.data, 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: ["80%", "80%"],
+        center: ["50%", "50%"], //指示线的位置
+        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;
+  height: 100%;
+  .dpieLegend {
+    position: absolute;
+    top: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      width: 150px;
+      //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: 160px;
+  height: 80px;
+}
+.dpiebg {
+  margin-top: vw(14);
+  width: 160px;
+  height: 80px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/components/pieFive.vue b/src/views/enterpriseTopic/components/pieFive.vue
new file mode 100644
index 0000000..c437dfb
--- /dev/null
+++ b/src/views/enterpriseTopic/components/pieFive.vue
@@ -0,0 +1,193 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/topic/pie.png");
+let iconImg = require("@/assets/images/topic/pieIcon.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 2) - 20;
+      //console.log(height);
+      let total = 0;
+      let data = [];
+      let barChartList = this.chartObj.data;
+      let legend = [];
+      for (var i = 0; i < barChartList.length; i++) {
+        legend.push(barChartList[i]["name"]);
+        total = total + barChartList[i].value;
+        data.push(
+          {
+            value: barChartList[i].value,
+            name: barChartList[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: [
+          {
+            text: "放射源总数",
+            top: 44,
+            textAlign: "center",
+            left: "48%",
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 10,
+            },
+          },
+          {
+            text: total,
+            top: 60,
+            textAlign: "center",
+            left: "48%",
+            textStyle: {
+              fontWeight: "400",
+              color: "#92E0FF",
+              fontSize: 18,
+            },
+          },
+        ],
+        legend: {
+          data: legend,
+          orient: "vertical",
+          bottom: 20,
+          icon: "diamond",
+          left: "center",
+          width: "100%",
+          height: 40,
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 10,
+          padding: 0,
+          //backgroundColor: "rgba(108,128,151,0.2)",
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 10,
+                padding: [0, 4, 0, 0],
+                color: "#D0DEEE",
+              },
+              value: {
+                width: 32,
+                color: "#FFFFFF;",
+                fontSize: 12,
+              },
+              rate: {
+                color: "#FFFFFF;",
+                fontSize: 12,
+              },
+            },
+          },
+          formatter: function (name) {
+            const item = barChartList.filter((item) => item.name === name)[0];
+            let rate = ((100 * item.value) / total).toFixed(0);
+            console.log(rate);
+            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 80,
+                height: 80,
+                zIndex: 1,
+              },
+              left: "center",
+              top: 20,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: [38, 48],
+            center: ["center", 60],
+            clockWise: false,
+            hoverAnimation: false,
+            itemStyle: {},
+            label: {
+              show: false,
+              position: "right",
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      };
+    },
+    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/components/pieFour.vue b/src/views/enterpriseTopic/components/pieFour.vue
new file mode 100644
index 0000000..0607305
--- /dev/null
+++ b/src/views/enterpriseTopic/components/pieFour.vue
@@ -0,0 +1,164 @@
+<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 = {
+        title: {
+          // 圆环中央文字
+          show: true, // 是否显示
+          text: this.chartObj.name,
+          textStyle: {
+            fontSize: 12,
+            color: "#D0DEEE",
+          },
+          subtextStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            lineHeight: 10,
+            color: "#E3FEFF",
+          },
+          left: "center",
+          bottom: "6%",
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: ["50%", "62%"],
+            center: ["50%", "45%"],
+            data: [
+              {
+                value: 40, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+              {
+                value: 20,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            startAngle: -150, //起始角度，支持范围[0, 360]。
+            minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
+            label: {
+              show: false,
+              position: "center",
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+            radius: ["50%", "62%"],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            center: ["50%", "45%"],
+            data: [
+              {
+                value: (point / total) * 100,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: {
+                      // 设置渐变色
+                      type: "linear",
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#37A1CC", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#08FAC4", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: (point / total) * 100, //百分比
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+              {
+                value: 20, //百分比
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            startAngle: -150, //起始角度，支持范围[0, 360]。
+            // minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
+            label: {
+              show: true,
+              position: "center",
+              formatter: "{b_style|{b}}\n{c_style|{c}%}",
+              rich: {
+                b_style: {
+                  padding: [0, 0, -8, 0],
+                  fontSize: 12,
+                  fontWeight: 400,
+                  color: "#D0DEEE",
+                },
+                c_style: {
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color: "#D0DEEE",
+                },
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/components/pieThree.vue b/src/views/enterpriseTopic/components/pieThree.vue
new file mode 100644
index 0000000..1628741
--- /dev/null
+++ b/src/views/enterpriseTopic/components/pieThree.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,
+          textStyle: { fontSize: 12, color: "#D0DEEE" },
+          /* subtextStyle: {
+            fontSize: 18,
+            fontWeight: 500,
+            lineHeight: 10,
+            color: "#E3FEFF",
+          }, */
+          textAlign: "center",
+          left: "47%",
+          top: 84,
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: this.chartObj.icon,
+                width: 120,
+                height: 120,
+                zIndex: 1,
+              },
+              left: "center",
+              top: -15,
+            },
+          ],
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: [25, 30],
+            center: ["center", 45],
+            data: [
+              {
+                value: total, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+            ],
+            label: {
+              position: "center",
+              formatter: ((100 * point) / total).toFixed(0) + "%",
+              color: this.chartObj.color[0],
+              fontSize: 12,
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+            radius: [25, 30],
+            center: ["center", 45],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            data: [
+              {
+                value: total,
+                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: total, //百分比
+                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/components/pieTwo.vue b/src/views/enterpriseTopic/components/pieTwo.vue
new file mode 100644
index 0000000..9f52d7c
--- /dev/null
+++ b/src/views/enterpriseTopic/components/pieTwo.vue
@@ -0,0 +1,191 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+let bgImg = require("@/assets/images/topic/pie.png");
+let iconImg = require("@/assets/images/topic/pieIcon.png");
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 2) - 20;
+      //console.log(height);
+      let total = 0;
+      let data = [];
+      let barChartList = this.chartObj.data;
+      let legend = [];
+      for (var i = 0; i < barChartList.length; i++) {
+        legend.push(barChartList[i]["name"]);
+        total = total + barChartList[i].value;
+        data.push(
+          {
+            value: barChartList[i].value,
+            name: barChartList[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+              },
+            },
+          },
+          {
+            value: 20,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: [
+          {
+            text: "总数量",
+            top: "38%",
+            textAlign: "center",
+            left: 68,
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 12,
+            },
+          },
+          {
+            text: total,
+            top: "48%",
+            textAlign: "center",
+            left: 66,
+            textStyle: {
+              fontWeight: "400",
+              color: "#92E0FF",
+              fontSize: 22,
+            },
+          },
+        ],
+        legend: {
+          data: legend,
+          orient: "vertical",
+          top: "center",
+          icon: "diamond",
+          right: "5%",
+          itemHeight: 8,
+          itemWidth: 8,
+          itemGap: 8,
+          padding: 0,
+          //backgroundColor: "rgba(108,128,151,0.2)",
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 10,
+                width: 70,
+                color: "#D0DEEE",
+              },
+              value: {
+                width: 50,
+                color: "#FFFFFF;",
+                fontSize: 14,
+              },
+              rate: {
+                color: "#FFFFFF;",
+                fontSize: 14,
+              },
+            },
+          },
+          formatter: function (name) {
+            const item = barChartList.filter((item) => item.name === name)[0];
+            let rate = ((100 * item.value) / total).toFixed(2);
+            console.log(rate);
+            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
+          },
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: bgImg,
+                width: 100,
+                height: 100,
+                zIndex: 1,
+              },
+              left: 20,
+              top: "center",
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "pie",
+            radius: [48, 58],
+            center: [70, "center"],
+            clockWise: false,
+            hoverAnimation: false,
+            itemStyle: {},
+            label: {
+              show: false,
+              position: "right",
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      };
+    },
+    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/components/tableCustom.vue b/src/views/enterpriseTopic/components/tableCustom.vue
new file mode 100644
index 0000000..dfe2ef5
--- /dev/null
+++ b/src/views/enterpriseTopic/components/tableCustom.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="loveflowscreen">
+    <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.car }}</div>
+          </div>
+          <div class="item" style="flex: 1.5">
+            <div class="label">预警时间：</div>
+            <div class="value">{{ item.date }}</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="item" style="flex: 1.32">
+            <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>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <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 = 10;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.loveflowscreen {
+  height: 100%;
+  .tableCustomWrap {
+    height: calc(100% - 30px);
+    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;
+          }
+        }
+      }
+    }
+  }
+  .tableWrap {
+    height: 100%;
+    .gScreenTableWrap {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/dangerTransport/index.vue b/src/views/enterpriseTopic/dangerTransport/index.vue
index 277e7f7..0d366e4 100644
--- a/src/views/enterpriseTopic/dangerTransport/index.vue
+++ b/src/views/enterpriseTopic/dangerTransport/index.vue
@@ -229,14 +229,14 @@ export default {
 <style lang="scss">
 @import "@/loveflow/assets/index.scss";
 .dangerTransport {
-  padding: 16px;
+  padding: vw(16);
   display: flex;
   height: 100%;
   overflow: hidden;
   .transLeft {
     width: vw(280);
-    margin-right: 16px;
-    padding-top: 20px;
+    margin-right: vw(16);
+    padding-top: vw(20);
     background: url("~@/assets/images/topic/carnav.png") no-repeat center center;
     background-size: 100% 100%;
     .filterBtnWrap {
@@ -244,8 +244,8 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding: 0 vw(20) 0 vw(20);
-      margin-bottom: 16px;
-      height: 40px;
+      margin-bottom: vw(16);
+      height: vw(40);
       background: url("~@/assets/images/topic/carcheck.png") no-repeat center
         center;
       background-size: 100% 100%;
@@ -254,25 +254,25 @@ export default {
       .nameWrap {
         display: flex;
         align-items: center;
-        padding-left: 6px;
+        padding-left: vw(6);
 
         .icon {
-          width: 18px;
-          height: 18px;
-          margin-right: 6px;
+          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 {
-          font-size: 18px;
+          font-size: vw(18);
           color: #ffffff;
         }
         &.nameActive {
           padding-left: 0;
           .icon {
-            width: 32px;
-            height: 30px;
+            width: vw(32);
+            height: vw(30);
             margin-right: 0;
             background: url("~@/assets/images/topic/check.png") no-repeat center
               center;
@@ -306,12 +306,12 @@ export default {
       }
 
       .transCol {
-        height: 256px;
+        height: vw(280);
         background: url("~@/assets/images/topic/col.png") no-repeat center
           center;
         background-size: 100% 100%;
         display: flex;
-        margin-bottom: 16px;
+        margin-bottom: vw(16);
         .colLeft {
           padding: vw(14);
           font-size: vw(14);
diff --git a/src/views/enterpriseTopic/screen.vue b/src/views/enterpriseTopic/screen.vue
index cdaba02..607f982 100644
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@@ -4,8 +4,13 @@
     <div class="enterpriseTopicBody">
       <div class="screenRow screenRowTop mb14">
         <div class="mr16 screenColOne">
-          <div class="topCol mb14">
-            <colWrap title="人员安全风险评估"></colWrap>
+          <div
+            class="topCol mb14 pointer"
+            @click="gotoPage('/topic/personSafety/screen')"
+          >
+            <colWrap title="人员安全风险评估">
+              <pieTwo :chartObj="tlObj"></pieTwo>
+            </colWrap>
           </div>
           <div class="btmCol">
             <colWrap title="网络安全风险评估">
@@ -15,19 +20,54 @@
         </div>
         <div class="mr16 screenColTwo">
           <colWrap title="危险物品管理">
-            <div class="topCol"></div>
+            <div class="topCol">
+              <div class="left mr14">
+                <div class="wxHead">
+                  <div class="name">运输安全指数</div>
+                  <div class="value">97.66</div>
+                </div>
+                <div class="wxBody">
+                  <div class="item" v-for="item in wxlList" :key="item.name">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="value">{{ item.value }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="wxHead">
+                  <div class="name">车辆违规数</div>
+                  <div class="value">{{ carNum.toLocaleString() }}</div>
+                </div>
+                <div class="wxBody">
+                  <radarFour :chartObj="clwgObj"></radarFour>
+                </div>
+              </div>
+            </div>
             <div class="btmCol">
               <subCol title="车辆违规预警信息"></subCol>
+              <tableCustom class="tableInfoWrap"></tableCustom>
             </div>
           </colWrap>
         </div>
         <div class="mr16 screenColThree">
           <colWrap title="消防安全管理">
             <div class="topCol">
-              <subCol title="消防设施数据"></subCol>
+              <subCol title="消防设施数据"> </subCol>
+              <div class="xfssWrap">
+                <div class="item">
+                  <pieFour :chartObj="sbObj"></pieFour>
+                </div>
+                <div class="item">
+                  <pieFour :chartObj="pzObj"></pieFour>
+                </div>
+                <div class="item">
+                  <pieFour :chartObj="byObj"></pieFour>
+                </div>
+              </div>
             </div>
             <div class="topCol">
               <subCol title="企业台账数据"></subCol>
+              <dPieOne :chartObj="{}"></dPieOne>
             </div>
             <div class="midCol">
               <subCol title="消防制度执行"></subCol>
@@ -61,7 +101,29 @@
         </div>
         <div class="screenColFour">
           <div class="topCol mb14">
-            <colWrap title="道路安全管理"></colWrap>
+            <colWrap title="道路安全管理">
+              <div class="dlaqWrap">
+                <div class="line">
+                  <div class="item">
+                    <pieThree :chartObj="dlan1Obj"></pieThree>
+                  </div>
+                  <div class="item">
+                    <pieThree :chartObj="dlan2Obj"></pieThree>
+                  </div>
+                  <div class="item">
+                    <pieThree :chartObj="dlan3Obj"></pieThree>
+                  </div>
+                </div>
+                <div class="line">
+                  <div class="item">
+                    <pieThree :chartObj="dlan4Obj"></pieThree>
+                  </div>
+                  <div class="item">
+                    <pieThree :chartObj="dlan5Obj"></pieThree>
+                  </div>
+                </div>
+              </div>
+            </colWrap>
           </div>
           <div class="btmCol">
             <colWrap title="内部治安管理">
@@ -93,12 +155,15 @@
           <div class="lgwpWrap">
             <div class="leftCol">
               <subCol title="危险化学品"></subCol>
+              <lineOne :chartObj="brlObj"></lineOne>
             </div>
             <div class="midCol">
               <subCol title="放射源物品"></subCol>
+              <pie-five :chartObj="fsyObj"></pie-five>
             </div>
             <div class="rightCol">
               <subCol title="民用枪支"></subCol>
+              <dPieTwo :chartObj="{}"></dPieTwo>
             </div>
           </div>
         </colWrap>
@@ -113,11 +178,138 @@ import subCol from "./components/subCol.vue";
 import pCard from "./components/pCard.vue";
 import barOne from "./antiAttack/bar.vue";
 import pieOne from "./components/pieOne.vue";
+import pieTwo from "./components/pieTwo.vue";
+import pieThree from "./components/pieThree.vue";
+import pieFour from "./components/pieFour.vue";
+import pieFive from "./components/pieFive.vue";
+import dPieOne from "./components/dPieOne.vue";
+import dPieTwo from "./components/dPieTwo.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
+import radarFour from "@/loveflow/components/echart/radar/four.vue";
+import tableCustom from "./components/tableCustom.vue";
 
 export default {
-  components: { headWrap, colWrap, subCol, pCard, barOne, pieOne },
+  components: {
+    headWrap,
+    colWrap,
+    subCol,
+    pCard,
+    barOne,
+    pieOne,
+    pieTwo,
+    pieThree,
+    pieFour,
+    pieFive,
+    dPieOne,
+    dPieTwo,
+    lineOne,
+    tableCustom,
+    radarFour,
+  },
   data() {
     return {
+      carNum: 19766,
+      clwgObj: {
+        indicator: [
+          {
+            name: "异常",
+            max: 154,
+          },
+
+          {
+            name: "疲劳",
+            max: 135,
+          },
+          {
+            name: "超载",
+            max: 123,
+          },
+          {
+            name: "闯禁",
+            max: 213,
+          },
+          {
+            name: "车道",
+            max: 176,
+          },
+          {
+            name: "离线",
+            max: 134,
+          },
+
+          {
+            name: "超速",
+            max: 219,
+          },
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14],
+        name: "车辆违规数",
+      },
+
+      tlObj: {
+        color: [
+          "#2B82F3",
+          "#66C3FF",
+          "#E4FEF0",
+          "#19F7C3",
+          "#FF745A",
+          "#FEF699",
+        ],
+        data: [
+          { value: 484, name: "普通岗位" },
+          { value: 567, name: "重点岗位" },
+          { value: 489, name: "专家人员" },
+          { value: 512, name: "重点人员" },
+          { value: 531, name: "企业访问人员" },
+          { value: 317, name: "流动人员" },
+        ],
+        name: "人员安全风险评估",
+      },
+      fsyObj: {
+        color: ["#E4FEF0", "#2B82F3", "#66C3FF", "#FEF699"],
+        data: [
+          { value: 484, name: "存储" },
+          { value: 567, name: "使用" },
+          { value: 489, name: "运输" },
+          { value: 512, name: "其他" },
+        ],
+        name: "放射源物品",
+      },
+      dlan1Obj: {
+        name: "源头检查",
+        total: 340,
+        point: 100,
+        icon: require("@/assets/images/topic/pie1b.png"),
+        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+      },
+      dlan2Obj: {
+        name: "交通事故",
+        total: 340,
+        point: 100,
+        icon: require("@/assets/images/topic/pie2b.png"),
+        color: ["#FFCE57", "#EB9104", "#FAC608"],
+      },
+      dlan3Obj: {
+        name: "企业整改",
+        total: 340,
+        point: 100,
+        icon: require("@/assets/images/topic/pie4b.png"),
+        color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+      },
+      dlan4Obj: {
+        name: "设施检查",
+        total: 340,
+        point: 100,
+        icon: require("@/assets/images/topic/pie1b.png"),
+        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+      },
+      dlan5Obj: {
+        name: "违章数据",
+        total: 340,
+        point: 100,
+        icon: require("@/assets/images/topic/pie1b.png"),
+        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+      },
       xfzdList: [
         {
           name: "人员培训率",
@@ -204,6 +396,59 @@ export default {
         point: 120,
         name: "安全指数",
       },
+      sbObj: {
+        total: 300,
+        point: 120,
+        name: "设备录入率",
+      },
+      pzObj: {
+        total: 300,
+        point: 150,
+        name: "配置完成率",
+      },
+      byObj: {
+        total: 200,
+        point: 120,
+        name: "日常保养及时率",
+      },
+      brlObj: {
+        gridLeft: "10%",
+        gridBtm: "15%",
+        xData: ["3.1", "3.2", "3.3", "3.4", "3.5", "3.6", "3.7"],
+        yData: [
+          [1217, 1112, 1098, 987, 1312, 1512, 997],
+          [981, 871, 698, 569, 1001, 872, 786, 659],
+          [801, 987, 1021, 1056, 1301, 1109, 982],
+        ],
+        name: "危险化学品",
+        legend: ["易制爆物品", "剧毒物品"],
+        color: [
+          ["#25FF93", "rgba(255,203,106,0.4)", "rgba(255,203,106,0.1)"],
+          ["#6EF59E", "rgba(110,245,158,0.4)", "rgba(110,245,158,0.1)"],
+        ],
+      },
+      wxlList: [
+        {
+          name: "源头检查",
+          value: 2000,
+        },
+        {
+          name: "违章数据",
+          value: 2000,
+        },
+        {
+          name: "交通事故",
+          value: 2000,
+        },
+        {
+          name: "企业整改",
+          value: 2000,
+        },
+        {
+          name: "交通检查",
+          value: 2000,
+        },
+      ],
     };
   },
   methods: {
@@ -253,6 +498,74 @@ export default {
         flex: 1;
         height: 100%;
         display: flex;
+        .topCol {
+          height: 40%;
+          display: flex;
+          .left {
+            flex: 1;
+            .wxHead {
+              background: url("~@/assets/images/screen/wxl.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+          }
+          .right {
+            flex: 1;
+            .wxHead {
+              background: url("~@/assets/images/screen/wxr.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+          }
+          .wxHead {
+            padding: 0 10px;
+            height: 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .name {
+              font-size: vw(14);
+              color: #e2fbff;
+            }
+            .value {
+              font-weight: bold;
+              font-size: vw(20);
+              color: #e3fffd;
+              line-height: 22px;
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px rgba(87, 199, 255, 0.64);
+            }
+          }
+          .wxBody {
+            padding: 0 10px;
+            height: calc(100% - 48px);
+            background-color: rgba(108, 128, 151, 0.1);
+            overflow-y: scroll;
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            .item {
+              margin: vw(8) 0;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .name {
+                font-size: vw(12);
+                color: #d0deee;
+              }
+              .value {
+                font-size: vw(16);
+                color: #ffffff;
+              }
+            }
+          }
+        }
+        .btmCol {
+          height: 60%;
+          .tableInfoWrap {
+            height: calc(100% - 40px);
+          }
+        }
       }
       .screenColThree {
         flex: 1;
@@ -261,6 +574,15 @@ export default {
         flex-direction: column;
         .topCol {
           height: 120px;
+          display: flex;
+          flex-direction: column;
+          .xfssWrap {
+            height: 90px;
+            display: flex;
+            .item {
+              flex: 1;
+            }
+          }
         }
         .midCol {
           display: flex;
@@ -349,6 +671,19 @@ export default {
         .topCol {
           flex: 1;
           display: flex;
+          .dlaqWrap {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .line {
+              flex: 1;
+              display: flex;
+              justify-content: space-between;
+              .item {
+                flex: 1;
+              }
+            }
+          }
         }
         .btmCol {
           flex: 1;
@@ -388,14 +723,23 @@ export default {
       }
       .lgwpWrap {
         display: flex;
+        height: 100%;
         .leftCol {
+          height: 100%;
           flex: 1;
+          display: flex;
+          flex-direction: column;
         }
         .midCol {
+          height: 100%;
           width: vw(316);
+          display: flex;
+          flex-direction: column;
         }
         .rightCol {
-          width: vw(206);
+          width: 200px;
+          display: flex;
+          flex-direction: column;
         }
       }
     }