diff --git a/src/assets/images/topic/dljtl.png b/src/assets/images/topic/dljtl.png
new file mode 100644
index 0000000..446724e
Binary files /dev/null and b/src/assets/images/topic/dljtl.png differ
diff --git a/src/assets/images/topic/dljtr.png b/src/assets/images/topic/dljtr.png
new file mode 100644
index 0000000..718148c
Binary files /dev/null and b/src/assets/images/topic/dljtr.png differ
diff --git a/src/loveflow/assets/reset.scss b/src/loveflow/assets/reset.scss
index 46850a6..a8efc61 100644
--- a/src/loveflow/assets/reset.scss
+++ b/src/loveflow/assets/reset.scss
@@ -161,4 +161,50 @@
       }
     }
   }
+
+  .el-tabs {
+    .el-tabs__header {
+      margin: 0 0 vw(10);
+      .el-tabs__nav-wrap {
+        .el-tabs__nav {
+          .el-tabs__active-bar {
+            width: vw(108) !important;
+            background-color: #33cccc;
+          }
+          .el-tabs__item {
+            padding: 0;
+            width: vw(108);
+            height: vw(40);
+            line-height: vw(48);
+            font-size: vw(14);
+            color: #ffffff;
+            letter-spacing: 0;
+            font-weight: 400;
+            text-align: center;
+            &:hover {
+              color: #ebfff4;
+              background: linear-gradient(
+                180deg,
+                rgba(51, 204, 204, 0) 0%,
+                rgba(60, 199, 176, 0.3) 100%
+              );
+            }
+            &.is-active {
+              font-weight: 500;
+              color: #ebfff4;
+              background: linear-gradient(
+                180deg,
+                rgba(51, 204, 204, 0) 0%,
+                rgba(60, 199, 176, 0.3) 100%
+              );
+            }
+          }
+        }
+        &::after {
+          height: 0.5px;
+          background-color: #5b748c;
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/enterpriseTopic/components/tableCustom.vue b/src/views/enterpriseTopic/components/tableCustom.vue
index dfe2ef5..62ded90 100644
--- a/src/views/enterpriseTopic/components/tableCustom.vue
+++ b/src/views/enterpriseTopic/components/tableCustom.vue
@@ -67,7 +67,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/loveflow/assets/index.scss";
 .loveflowscreen {
   height: 100%;
diff --git a/src/views/enterpriseTopic/components/totalHead.vue b/src/views/enterpriseTopic/components/totalHead.vue
new file mode 100644
index 0000000..9e95a97
--- /dev/null
+++ b/src/views/enterpriseTopic/components/totalHead.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="totalWrap">
+    <div>{{ dataObj.name }}</div>
+    <div class="totalText">{{ dataObj.value }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.totalWrap {
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: vw(46);
+  background: url("~@/assets/images/screen/total.png") no-repeat center center;
+  background-size: 100% 100%;
+  font-size: vw(18);
+  font-weight: 500;
+  color: #d0deee;
+  .totalText {
+    margin-left: 16px;
+    font-size: vw(26);
+    color: #ebf9ff;
+    letter-spacing: 3px;
+    text-shadow: 0px 0px 9px #159aff;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/fireSafety/index.vue b/src/views/enterpriseTopic/fireSafety/index.vue
index 1e09c07..b3e724b 100644
--- a/src/views/enterpriseTopic/fireSafety/index.vue
+++ b/src/views/enterpriseTopic/fireSafety/index.vue
@@ -1,5 +1,61 @@
 <template>
-  <div>
+  <div class="fireSafetyWrap">
     <!-- 消防安全 -->
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mb14 mr16">
+        <colWrap class="mr16" title="消防设施数据"> </colWrap>
+        <colWrap title="消防事件发生"> </colWrap>
+      </div>
+
+      <div class="screenRight mb14">
+        <colWrap title="消防制度执行"> </colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
+        <colWrap class="" title="企业台账数据"> </colWrap>
+      </div>
+      <div class="screenRight">
+        <colWrap title="异常企业台账"> </colWrap>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import colWrap from "../components/colWrap.vue";
+
+export default {
+  components: {
+    colWrap,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.fireSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 3.4;
+      display: flex;
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+    }
+  }
+  .screenRowTop {
+    height: 62%;
+  }
+  .screenRowBtm {
+    height: 38%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/netSafety/index.vue b/src/views/enterpriseTopic/netSafety/index.vue
index 965b577..d79d09e 100644
--- a/src/views/enterpriseTopic/netSafety/index.vue
+++ b/src/views/enterpriseTopic/netSafety/index.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="netSafetyWrap">
     <!-- 网络安全 -->
-    <div class="screenRow screenRowTop mb14">
-      <div class="screenLeft">
-        <colWrap class="mb14" title="漏斗整改"> </colWrap>
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mr16">
+        <colWrap class="mb14" title="漏斗整改">
+          <div class=""></div>
+        </colWrap>
         <colWrap title="行政案件"> </colWrap>
       </div>
-      <div class="screenMid">
+      <div class="screenMid mr16">
         <colWrap title="等保定级评审"> </colWrap>
       </div>
       <div class="screenRight">
@@ -14,11 +16,11 @@
       </div>
     </div>
 
-    <div class="screenRow screenRowBtm mb14">
-      <div class="screenLeft mr18">
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
         <colWrap class="" title="网站应用系统备案"> </colWrap>
       </div>
-      <div class="screenMid mr18">
+      <div class="screenMid mr16">
         <colWrap title="重大网络安全事故"> </colWrap>
       </div>
       <div class="screenRight">
@@ -34,6 +36,42 @@ export default {
   components: {
     colWrap,
   },
-  data() {},
+  data() {
+    return {};
+  },
 };
 </script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.netSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .screenMid {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .screenRowTop {
+    padding-bottom: 16px;
+    height: 68%;
+  }
+  .screenRowBtm {
+    height: 32%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/bar.vue b/src/views/enterpriseTopic/roadSafety/bar.vue
new file mode 100644
index 0000000..c36afe3
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/bar.vue
@@ -0,0 +1,123 @@
+<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 = {
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "18%",
+          bottom: "15%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：件",
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "bar",
+            barWidth: 20,
+            color: "#5ED0A3",
+            data: this.chartObj.yData,
+            label: {
+              show: false,
+              position: "top",
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#66E1DF",
+                },
+                {
+                  offset: 1,
+                  color: " rgba(0,89,84,0)",
+                },
+              ]),
+            },
+          },
+
+          {
+            name: "外圆",
+            type: "scatter",
+            emphasis: {
+              scale: false,
+            },
+            symbol: "roundRect",
+            symbolSize: [26, 4], // 进度条白点
+            itemStyle: {
+              show: true,
+              barBorderRadius: [10, 10, 10, 10],
+              color: "#FFF",
+              shadowColor: "rgba(255, 255, 255, 1)",
+              shadowBlur: 8,
+              borderWidth: 1,
+              opacity: 1,
+            },
+            z: 2,
+            data: this.chartObj.yData,
+            animationDelay: 500,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/roadSafety/dpie.vue b/src/views/enterpriseTopic/roadSafety/dpie.vue
new file mode 100644
index 0000000..0eacfec
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/dpie.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in chartObj" :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 {
+  props: {
+    chartObj: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      total: 1,
+    };
+  },
+  mounted() {
+    this.total = 1;
+    for (let i = 0; i < this.chartObj.length; i++) {
+      this.total += this.chartObj[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.chartObj;
+      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: -16, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 20, //角度
+              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.chartObj, 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: ["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: 120px;
+}
+.dpiebg {
+  margin-top: vw(10);
+  margin-left: vw(30);
+  width: 240px;
+  height: 120px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/index.vue b/src/views/enterpriseTopic/roadSafety/index.vue
index b997910..a8d3368 100644
--- a/src/views/enterpriseTopic/roadSafety/index.vue
+++ b/src/views/enterpriseTopic/roadSafety/index.vue
@@ -1,5 +1,465 @@
 <template>
-  <div>
+  <div class="roadSafetyWrap loveflowscreen">
     <!-- 道路安全 -->
+    <div class="screenRow screenRowTop">
+      <div class="screenLeft mr16 mb14">
+        <colWrap class="" title="源头检查数据">
+          <total-head :dataObj="ytObj"></total-head>
+          <div class="dpieWrap">
+            <dpie :chartObj="ytPie"></dpie>
+          </div>
+          <div class="ytTableWrap">
+            <ytTable></ytTable>
+          </div>
+        </colWrap>
+      </div>
+
+      <div class="screenRight mb14">
+        <colWrap class="mr16" title="交通设施检查数据">
+          <total-head :dataObj="ytObj"></total-head>
+          <div class="dpieWrap">
+            <dpie :chartObj="jtssPie"></dpie>
+          </div>
+          <div class="ytTableWrap">
+            <el-tabs v-model="jtssTab" @tab-click="handleClick">
+              <el-tab-pane label="设施完善企业" name="ws">
+                <tableWrap :columns="column"></tableWrap>
+              </el-tab-pane>
+              <el-tab-pane label="设施损失企业" name="ss">
+                <tableWrap :columns="column"></tableWrap>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </colWrap>
+        <colWrap title="违章数据">
+          <div class="wzsjWrap">
+            <div class="top">
+              <barOne :chartObj="tlObj"></barOne>
+            </div>
+            <div class="btm">
+              <div class="left mr14">
+                <sub-col title="车辆异常状态分析"></sub-col>
+                <pieWrap :chartObj="carlObj"></pieWrap>
+              </div>
+              <div class="right">
+                <sub-col title="人员异常状态分析"></sub-col>
+                <pieWrap :chartObj="carrObj"></pieWrap>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenRowBtm">
+      <div class="screenLeft mr16">
+        <colWrap title="交通事故">
+          <div class="jtsgHead">
+            <div class="left">
+              <div class="icon"></div>
+              <div class="nameWrap">
+                <div class="name">交通事故数</div>
+                <div class="value">1323</div>
+              </div>
+            </div>
+            <div class="right">
+              <div class="icon"></div>
+              <div class="nameWrap">
+                <div class="name">关联车辆数</div>
+                <div class="value">2134</div>
+              </div>
+            </div>
+          </div>
+          <div class="jtsgBody">
+            <dpie :chartObj="jtPie"></dpie>
+          </div>
+        </colWrap>
+      </div>
+      <div class="screenRight">
+        <colWrap title="企业整改数据">
+          <div class="qyzgWrap">
+            <div class="left">
+              <sub-col title="企业整改进度"></sub-col>
+              <div class="flex-center" style="flex: 1">
+                <dpie :chartObj="qyzgPie"></dpie>
+              </div>
+            </div>
+            <div class="right">
+              <sub-col title="企业整改详情"></sub-col>
+              <div class="qyzgTable">
+                <el-tabs v-model="qyzgTab" @tab-click="handleClick">
+                  <el-tab-pane label="待整改" name="dzg">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                  <el-tab-pane label="整改中" name="zgz">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                  <el-tab-pane label="整改完成" name="zgwc">
+                    <qyzgTable></qyzgTable>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+    </div>
   </div>
 </template>
+<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";
+
+import ytTable from "./ytTable.vue";
+import qyzgTable from "./qyzgTable.vue";
+import tableWrap from "../components/tableWrap.vue";
+import barOne from "./bar.vue";
+
+export default {
+  components: {
+    dpie,
+    colWrap,
+    totalHead,
+    SubCol,
+    TotalHead,
+    ytTable,
+    tableWrap,
+    barOne,
+    pieWrap,
+    qyzgTable,
+  },
+  data() {
+    return {
+      qyzgTab: "dzg",
+      tlObj: {
+        xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
+        yData: [3, 4, 3, 1, 3, 4, 2],
+        name: "违章数据",
+      },
+      ytObj: {
+        name: "源头检查总数",
+        value: 31876,
+      },
+      ytPie: [
+        {
+          name: "区内检查数据",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "资质异常企业数",
+          value: 86,
+          itemStyle: {
+            color: "#49ECC9",
+          },
+        },
+      ],
+      qyzgPie: [
+        {
+          name: "待整改",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "整改中",
+          value: 86,
+          itemStyle: {
+            color: "#FEF699",
+          },
+        },
+        {
+          name: "整改完成",
+          value: 86,
+          itemStyle: {
+            color: "#49ECC9",
+          },
+        },
+      ],
+      jtPie: [
+        {
+          name: "经济损失事故",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "伤亡事故",
+          value: 86,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      jtssPie: [
+        {
+          name: "设施完善企业",
+          value: 128,
+          itemStyle: {
+            color: "#2B82F3",
+          },
+        },
+        {
+          name: "设施损失企业数",
+          value: 86,
+          itemStyle: {
+            color: "#E15A4E",
+          },
+        },
+      ],
+      jtssTab: "ws",
+      column: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "超载查处点",
+        },
+        {
+          prop: "isQ",
+          label: "超载比例",
+        },
+        {
+          prop: "personType",
+          label: "处理详情",
+        },
+        {
+          prop: "address",
+          label: "处理单位",
+        },
+      ],
+      carlObj: {
+        color: ["#2B82F3", "#66C3FF", "#FEF699"],
+        data: [
+          { value: 484, name: "超速" },
+          { value: 567, name: "闯禁" },
+          { value: 489, name: "违停" },
+        ],
+        name: "车辆违规总数",
+      },
+      carrObj: {
+        color: ["#2B82F3", "#66C3FF", "#FEF699"],
+        data: [
+          { value: 484, name: "超速" },
+          { value: 567, name: "闯禁" },
+          { value: 489, name: "违停" },
+        ],
+        name: "驾驶员违章总数",
+      },
+    };
+  },
+  methods: {
+    handleClick(tab) {
+      console.log(tab);
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.roadSafetyWrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      flex: 1;
+      display: flex;
+      .dpieWrap {
+        height: 120px;
+      }
+      .screenChart {
+        display: flex;
+        flex-direction: column;
+      }
+      .ytTableWrap {
+        height: calc(100% - 200px);
+        flex: 1;
+        margin-bottom: 6px;
+      }
+      .jtsgHead {
+        display: flex;
+        .left {
+          margin-right: vw(20);
+          flex: 1;
+          height: vw(82);
+          display: flex;
+          align-items: center;
+          background: url("~@/assets/images/topic/gunb3.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(90);
+            height: vw(70);
+            background: url("~@/assets/images/topic/dljtl.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .nameWrap {
+            .name {
+              color: #d9e7ff;
+              font-size: vw(16);
+            }
+            .value {
+              color: #ebf9ff;
+              font-size: vw(18);
+            }
+          }
+        }
+        .right {
+          flex: 1;
+          height: vw(82);
+          display: flex;
+          align-items: center;
+          background: url("~@/assets/images/topic/gunb2.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(90);
+            height: vw(70);
+            background: url("~@/assets/images/topic/dljtr.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .nameWrap {
+            .name {
+              color: #d9e7ff;
+              font-size: vw(16);
+            }
+            .value {
+              color: #ebf9ff;
+              font-size: vw(18);
+            }
+          }
+        }
+      }
+      .jtsgBody {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .screenRight {
+      flex: 2;
+      display: flex;
+    }
+  }
+  .screenRowTop {
+    height: 60%;
+    .screenRight {
+      .screenChart {
+        display: flex;
+        flex-direction: column;
+        .dpieWrap {
+          height: 120px;
+        }
+        .ytTableWrap {
+          height: calc(100% - 200px);
+          flex: 1;
+          margin-bottom: 6px;
+          .el-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .el-tabs__content {
+              flex: 1;
+              .el-tab-pane {
+                height: 100%;
+                overflow-y: scroll;
+                &::-webkit-scrollbar {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+      .wzsjWrap {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .top {
+          flex: 1;
+        }
+        .btm {
+          flex: 1;
+          display: flex;
+          .left {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(108, 128, 151, 0.1);
+            margin-bottom: 14px;
+          }
+          .right {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(108, 128, 151, 0.1);
+            margin-bottom: 14px;
+          }
+        }
+      }
+    }
+  }
+  .screenRowBtm {
+    height: 40%;
+
+    .qyzgWrap {
+      height: 100%;
+      display: flex;
+      .left {
+        margin-bottom: 14px;
+        margin-right: 14px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(108, 128, 151, 0.1);
+        margin-bottom: 14px;
+      }
+      .right {
+        padding: 14px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .qyzgTable {
+          background-color: rgba(108, 128, 151, 0.1);
+          height: calc(100% - 40px);
+          flex: 1;
+          padding: 10px 10px 0;
+          .el-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            .el-tabs__content {
+              flex: 1;
+              .el-tab-pane {
+                height: 100%;
+                overflow-y: scroll;
+                &::-webkit-scrollbar {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/pie.vue b/src/views/enterpriseTopic/roadSafety/pie.vue
new file mode 100644
index 0000000..5f67c45
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/pie.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: 80,
+          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/roadSafety/qyzgTable.vue b/src/views/enterpriseTopic/roadSafety/qyzgTable.vue
new file mode 100644
index 0000000..7012cb9
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/qyzgTable.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.car }}</div>
+          </div>
+          <div class="item">
+            <div class="label">检查人：</div>
+            <div class="value">{{ item.date }}</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="item">
+            <div class="label">检查时间：</div>
+            <div class="value">{{ item.qyT }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <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 = 6;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+  overflow: hidden;
+  .tableCustomWrap {
+    height: calc(100% - 36px);
+    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 {
+    .gScreenTableWrap {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/roadSafety/ytTable.vue b/src/views/enterpriseTopic/roadSafety/ytTable.vue
new file mode 100644
index 0000000..9210d9d
--- /dev/null
+++ b/src/views/enterpriseTopic/roadSafety/ytTable.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="loveflowscreen tableCustomPanel">
+    <div class="tableCustomWrap">
+      <div class="cusWrap" v-for="item in dataSource" :key="item.id">
+        <div class="line">
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.yType }}</div>
+          </div>
+          <div class="item">
+            <div class="label">企业名称：</div>
+            <div class="value">{{ item.car }}</div>
+          </div>
+          <div class="item">
+            <div class="label">检查人：</div>
+            <div class="value">{{ item.date }}</div>
+          </div>
+        </div>
+        <div class="line">
+          <div class="item">
+            <div class="label">检查时间：</div>
+            <div class="value">{{ item.qyT }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+          <div class="item">
+            <div class="label">危化品类型：</div>
+            <div class="value">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <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 = 6;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.tableCustomPanel {
+  height: 100%;
+
+  .tableCustomWrap {
+    height: calc(100% - 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>