diff --git a/src/assets/images/screen/11.png b/src/assets/images/screen/11.png
new file mode 100644
index 0000000..9c944cf
Binary files /dev/null and b/src/assets/images/screen/11.png differ
diff --git a/src/assets/images/screen/12.png b/src/assets/images/screen/12.png
new file mode 100644
index 0000000..14a3230
Binary files /dev/null and b/src/assets/images/screen/12.png differ
diff --git a/src/assets/images/screen/13.png b/src/assets/images/screen/13.png
new file mode 100644
index 0000000..f9cd04a
Binary files /dev/null and b/src/assets/images/screen/13.png differ
diff --git a/src/assets/images/screen/21.png b/src/assets/images/screen/21.png
new file mode 100644
index 0000000..df1f882
Binary files /dev/null and b/src/assets/images/screen/21.png differ
diff --git a/src/assets/images/screen/22.png b/src/assets/images/screen/22.png
new file mode 100644
index 0000000..91e271e
Binary files /dev/null and b/src/assets/images/screen/22.png differ
diff --git a/src/assets/images/screen/23.png b/src/assets/images/screen/23.png
new file mode 100644
index 0000000..86e5856
Binary files /dev/null and b/src/assets/images/screen/23.png differ
diff --git a/src/assets/images/screen/31.png b/src/assets/images/screen/31.png
new file mode 100644
index 0000000..2c279f0
Binary files /dev/null and b/src/assets/images/screen/31.png differ
diff --git a/src/assets/images/screen/32.png b/src/assets/images/screen/32.png
new file mode 100644
index 0000000..0de1d66
Binary files /dev/null and b/src/assets/images/screen/32.png differ
diff --git a/src/assets/images/screen/33.png b/src/assets/images/screen/33.png
new file mode 100644
index 0000000..c1e1ef2
Binary files /dev/null and b/src/assets/images/screen/33.png differ
diff --git a/src/assets/images/screen/error.png b/src/assets/images/screen/error.png
new file mode 100644
index 0000000..0ebe73e
Binary files /dev/null and b/src/assets/images/screen/error.png differ
diff --git a/src/assets/images/screen/right.png b/src/assets/images/screen/right.png
new file mode 100644
index 0000000..8fdede1
Binary files /dev/null and b/src/assets/images/screen/right.png differ
diff --git a/src/assets/images/screen/total.png b/src/assets/images/screen/total.png
new file mode 100644
index 0000000..3a3f563
Binary files /dev/null and b/src/assets/images/screen/total.png differ
diff --git a/src/loveflow/components/echart/bar/one.vue b/src/loveflow/components/echart/bar/one.vue
index 87cb620..4be8fcb 100644
--- a/src/loveflow/components/echart/bar/one.vue
+++ b/src/loveflow/components/echart/bar/one.vue
@@ -6,7 +6,7 @@
 <script>
 export default {
   props: {
-    lineObj: {
+    chartObj: {
       type: Object,
       default: () => {
         return {};
@@ -38,7 +38,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: this.lineObj.xData,
+          data: this.chartObj.xData,
           axisLine: {
             show: true,
             lineStyle: {
@@ -48,7 +48,6 @@ export default {
           axisLabel: {
             color: "#D0DEEE",
             fontSize: 12,
-            //interval: 0,
           },
           axisTick: {
             show: false,
@@ -71,11 +70,11 @@ export default {
         },
         series: [
           {
-            name: this.lineObj.name,
+            name: this.chartObj.name,
             type: "bar",
             barWidth: 20,
             color: "#5ED0A3",
-            data: this.lineObj.yData,
+            data: this.chartObj.yData,
             label: {
               show: false,
               position: "top",
@@ -112,7 +111,7 @@ export default {
               opacity: 1,
             },
             z: 2,
-            data: this.lineObj.yData,
+            data: this.chartObj.yData,
             animationDelay: 500,
           },
         ],
diff --git a/src/loveflow/components/echart/bar/two.vue b/src/loveflow/components/echart/bar/two.vue
new file mode 100644
index 0000000..580e919
--- /dev/null
+++ b/src/loveflow/components/echart/bar/two.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: "8%",
+          bottom: "10%",
+          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/loveflow/components/echart/line/one.vue b/src/loveflow/components/echart/line/one.vue
new file mode 100644
index 0000000..7186f34
--- /dev/null
+++ b/src/loveflow/components/echart/line/one.vue
@@ -0,0 +1,118 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let seriesArr = [];
+
+      for (let i = 0; i < this.chartObj.legend.length; i++) {
+        seriesArr.push({
+          name: this.chartObj.legend[i],
+          type: "line",
+          smooth: true, //是否平滑曲线显示
+          symbolSize: 0,
+          showSymbol: false,
+          lineStyle: {
+            width: 2,
+            color: this.chartObj.color[i][0], // 线条颜色
+          },
+          areaStyle: {
+            color: new this.$echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: this.chartObj.color[i][1] },
+                { offset: 1, color: this.chartObj.color[i][2] },
+              ],
+              false
+            ),
+          },
+          data: this.chartObj.yData[i],
+        });
+      }
+
+      this.option = {
+        legend: {
+          data: this.chartObj.legend,
+          icon: "rect",
+          right: "5%",
+          top: "2%",
+          itemWidth: 8, // 设置宽度
+          itemHeight: 8, // 设置高度
+          itemGap: 16, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: "20%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: seriesArr,
+      };
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/line/three.vue b/src/loveflow/components/echart/line/three.vue
new file mode 100644
index 0000000..5cd7c32
--- /dev/null
+++ b/src/loveflow/components/echart/line/three.vue
@@ -0,0 +1,117 @@
+<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: "10%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          data: this.chartObj.xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#D0DEEE",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#6C8097",
+            },
+          },
+          axisLabel: {
+            color: "#6C8097",
+            fontSize: 12,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            name: this.chartObj.name,
+            type: "line",
+            smooth: false, //是否平滑曲线显示
+            symbolSize: 8,
+            showSymbol: true,
+            itemStyle: {
+              borderWidth: 1,
+              shadowColor: "rgba(255,255,255,0.4)",
+              shadowBlur: 6,
+            },
+            lineStyle: {
+              width: 2,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {
+                  offset: 0,
+                  color: this.chartObj.color[0],
+                },
+                {
+                  offset: 1,
+                  color: this.chartObj.color[3],
+                },
+              ]),
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  { offset: 0, color: this.chartObj.color[1] },
+                  { offset: 1, color: this.chartObj.color[2] },
+                ],
+                false
+              ),
+            },
+            data: this.chartObj.yData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/line/two.vue b/src/loveflow/components/echart/line/two.vue
new file mode 100644
index 0000000..505d1ee
--- /dev/null
+++ b/src/loveflow/components/echart/line/two.vue
@@ -0,0 +1,104 @@
+<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: "10%",
+          bottom: "10%",
+          left: "6%",
+          right: "5%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+        },
+        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: "line",
+            smooth: true, //是否平滑曲线显示
+            symbolSize: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: this.chartObj.color[0], // 线条颜色
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: this.chartObj.color[1] },
+                  { offset: 1, color: this.chartObj.color[2] },
+                ],
+                false
+              ),
+            },
+            data: this.chartObj.yData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/loveflow/components/echart/radar/one.vue b/src/loveflow/components/echart/radar/one.vue
new file mode 100644
index 0000000..b9cc143
--- /dev/null
+++ b/src/loveflow/components/echart/radar/one.vue
@@ -0,0 +1,111 @@
+<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,
+        },
+        tooltip: {
+          show: false,
+        },
+        radar: {
+          center: ["50%", "55%"], // 外圆的位置
+          radius: "60%",
+          name: {
+            textStyle: {
+              color: "#D0DEEE",
+              fontSize: 18,
+            },
+          },
+          axisName: {
+            color: "#D0DEEE",
+          },
+          indicator: this.chartObj.indicator,
+          splitArea: {
+            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: {
+              // 分隔区域的样式设置。
+              color: ["#22403d"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            },
+          },
+          axisLine: {
+            // 指向外圈文本的分隔线样式
+            lineStyle: {
+              color: "#728AE4",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "solid",
+              color: "#445857", // 分隔线颜色
+              width: 1, // 分隔线线宽
+            },
+          },
+        },
+        series: [
+          {
+            type: "radar",
+            symbolSize: 0,
+            itemStyle: {
+              borderColor: "rgba(66, 242, 185, 1)",
+              color: "#D0DEEE",
+              borderWidth: 0.2,
+            },
+            lineStyle: {
+              width: 3,
+              color: "#71D59A",
+            },
+            data: [
+              {
+                value: [80, 80, 80, 70, 60, 50],
+                name: "男",
+                areaStyle: {
+                  color: "transparent",
+                },
+              },
+              {
+                value: [40, 70, 50, 60, 30, 80],
+                name: "女",
+                itemStyle: {
+                  borderColor: "rgba(245, 196, 85, 1)",
+                  color: "#fff",
+                  borderWidth: 0.2,
+                },
+                lineStyle: {
+                  color: "#2B82F3",
+                },
+                areaStyle: {
+                  color: "transparent",
+                },
+              },
+            ],
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseRiskIndex/abnormal.vue b/src/views/enterpriseRiskIndex/abnormal.vue
index 645d0cb..00fc07a 100644
--- a/src/views/enterpriseRiskIndex/abnormal.vue
+++ b/src/views/enterpriseRiskIndex/abnormal.vue
@@ -1,3 +1,593 @@
 <template>
-  <div>异常图表</div>
+  <div class="abnormalWrap">
+    <div class="riskRow mb18">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">风险监测项评分排行</div>
+        </div>
+        <div class="riskTotal">
+          <div>今日企业风险项量</div>
+          <div class="totalText">10000</div>
+        </div>
+        <div class="chartPanel" style="height: calc(100% - 136px)">
+          <div class="chartOpt">
+            <div
+              @click="changeTime('day')"
+              :class="{ active: curTime == 'day' }"
+            >
+              当日
+            </div>
+            <div
+              @click="changeTime('month')"
+              :class="{ active: curTime == 'month' }"
+            >
+              近三月
+            </div>
+            <div
+              @click="changeTime('year')"
+              :class="{ active: curTime == 'year' }"
+            >
+              本年度
+            </div>
+          </div>
+          <barOne :chartObj="tlObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskLine" v-for="(line, index) in dataList" :key="index">
+          <div class="riskItem" v-for="item in line" :key="item.name">
+            <div class="riskItemLeft">
+              <div class="icon">
+                <img :src="item.icon" />
+              </div>
+            </div>
+            <div class="riskItemRight">
+              <div class="riskItemName">{{ item.name }}</div>
+              <div class="riskItemValue">{{ item.value }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">流动人口管理异常</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmlObj"></lineThree>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">人员背景审核异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmmObj"></lineThree>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">重点岗位资质核查异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineThree :chartObj="tmrObj"></lineThree>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">人员涉警(案)情况异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtlObj"></lineTwo>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">装卸量差异分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtmObj"></lineTwo>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">运输车辆背景异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <lineTwo :chartObj="mtrObj"></lineTwo>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow mb18">
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">运输车辆异常预警</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mlObj"></barTwo>
+        </div>
+      </div>
+      <div class="riskCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">驾驶员押运员资质异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mmObj"></barTwo>
+        </div>
+      </div>
+      <div class="riskCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">单位检查情况异常分析</div>
+        </div>
+        <div class="chartPanel">
+          <barTwo :chartObj="mrObj"></barTwo>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import barTwo from "@/loveflow/components/echart/bar/two.vue";
+import lineTwo from "@/loveflow/components/echart/line/two.vue";
+import lineThree from "@/loveflow/components/echart/line/three.vue";
+export default {
+  components: { barOne, barTwo, lineTwo, lineThree },
+  data() {
+    return {
+      curTime: "day",
+
+      dataList: [
+        [
+          {
+            name: "流动人口管理异常",
+            value: 1321,
+            icon: require("@/assets/images/screen/11.png"),
+          },
+          {
+            name: "人员背景审核异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/12.png"),
+          },
+          {
+            name: "重点岗位资质核查异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/13.png"),
+          },
+        ],
+        [
+          {
+            name: "人员涉警(案)情况异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/21.png"),
+          },
+          {
+            name: "装卸量差异分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/22.png"),
+          },
+          {
+            name: "运输车辆背景异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/23.png"),
+          },
+        ],
+        [
+          {
+            name: "运输车辆异常预警",
+            value: 1321,
+            icon: require("@/assets/images/screen/31.png"),
+          },
+          {
+            name: "驾驶员押运员资质异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/32.png"),
+          },
+          {
+            name: "单位检查情况异常分析",
+            value: 1321,
+            icon: require("@/assets/images/screen/33.png"),
+          },
+        ],
+      ],
+
+      tlObj: {
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "风险标签排行",
+      },
+      tmlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "流动人口管理异常",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+      tmmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "人员背景审核异常分析",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+      tmrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "重点岗位资质核查异常分析",
+        color: [
+          "rgba(20,246,62,0.5)",
+          "rgba(30,147,255,0)",
+          "rgba(30,147,255,0.3)",
+          "#1E93FF",
+        ],
+      },
+
+      mtlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "人员涉警(案)情况异常分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mtmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "装卸量差异分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mtrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "运输车辆背景异常分析",
+        color: [
+          "rgba(255,193,77,0.9)",
+          "rgba(255,61,61,0.8)",
+          "rgba(255,61,61,0)",
+        ],
+      },
+      mlObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "运输车辆异常预警",
+      },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "驾驶员押运员资质异常分析",
+      },
+      mrObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12, 15, 11, 12, 13],
+        name: "单位检查情况异常分析",
+      },
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.abnormalWrap {
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .riskRow {
+    flex: 1;
+    display: flex;
+    .riskCol {
+      position: relative;
+      padding-left: 8px;
+      height: 456px;
+      flex: 1;
+      background: url("~@/assets/images/screen/line.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      .riskName {
+        height: 40px;
+        display: flex;
+        margin-top: 6px;
+        color: #d9e7ff;
+
+        .riskIcon {
+          width: 24px;
+          height: 24px;
+          background: url("~@/assets/images/screen/riskIcon.png") no-repeat
+            center center;
+          background-size: 100% 100%;
+        }
+      }
+
+      .riskTotal {
+        margin-top: 40px;
+        margin-left: 2%;
+        width: 93%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 46px;
+        background: url("~@/assets/images/screen/total.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        font-size: 18px;
+        font-weight: 500;
+        color: #d0deee;
+        .totalText {
+          margin-left: 16px;
+          font-size: 26px;
+          color: #ebf9ff;
+          line-height: 25px;
+          letter-spacing: 3px;
+          text-shadow: 0px 0px 9px #159aff;
+        }
+      }
+      .chartOpt {
+        position: absolute;
+        z-index: 12;
+        right: 5%;
+        top: 46px;
+        display: flex;
+        div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 68px;
+          height: 30px;
+          color: #8fabbf;
+          font-size: 14px;
+          background: linear-gradient(
+            0deg,
+            rgba(122, 163, 204, 0.3) 0%,
+            rgba(122, 163, 204, 0) 100%
+          );
+          &:hover {
+            cursor: pointer;
+            background: linear-gradient(
+              0deg,
+              #3cc7b0 0%,
+              rgba(51, 204, 204, 0) 100%
+            );
+          }
+          &.active {
+            color: #ffffff;
+            border-bottom: solid 2px #33cccc;
+            background: linear-gradient(
+              0deg,
+              rgba(60, 199, 176, 0.3) 0%,
+              rgba(51, 204, 204, 0) 100%
+            );
+          }
+        }
+      }
+      .chartPanel {
+        height: calc(100% - 50px);
+      }
+    }
+    .leftCol {
+      flex: auto;
+      width: calc(33.33% - 18px);
+    }
+    .rightCol {
+      padding: 24px 4px 8px 24px;
+      flex: auto;
+      width: calc(66.66% - 12px);
+      background: url("~@/assets/images/screen/right.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+
+      .riskLine {
+        display: flex;
+        .riskItem {
+          display: flex;
+          flex: 1;
+          margin-right: 18px;
+          padding-left: 10px;
+          align-items: center;
+          height: 122px;
+          background: url("~@/assets/images/screen/error.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .riskItemLeft {
+            margin-right: 10px;
+            .icon {
+              width: 90px;
+              height: 70px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+          .riskItemRight {
+            flex: 1;
+            .riskItemName {
+              font-size: 18px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 500;
+              color: #c4e5ff;
+              line-height: 25px;
+            }
+            .riskItemValue {
+              font-size: 28px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 500;
+              color: #ebf9ff;
+              line-height: 37px;
+              letter-spacing: 1px;
+              text-shadow: 0px 0px 9px #159aff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/analysis.vue b/src/views/enterpriseRiskIndex/analysis.vue
index ec9fe66..1b7cbb4 100644
--- a/src/views/enterpriseRiskIndex/analysis.vue
+++ b/src/views/enterpriseRiskIndex/analysis.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="riskWrap">
+  <div class="analysisWrap">
     <div class="riskRow mb18">
       <div class="riskCol leftCol mr18">
         <div class="riskName">
@@ -27,7 +27,7 @@
               本年度
             </div>
           </div>
-          <barOne :lineObj="tlObj"></barOne>
+          <barOne :chartObj="tlObj"></barOne>
         </div>
       </div>
       <div class="riskCol midCol mr18">
@@ -35,6 +35,9 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">频繁变化风险监测信息近一年变化趋势图</div>
         </div>
+        <div class="chartPanel">
+          <lineOne :chartObj="tmObj"></lineOne>
+        </div>
       </div>
       <div class="riskCol rightCol">
         <div class="riskName">
@@ -50,7 +53,7 @@
           <div class="riskNameText">风险标签排行</div>
         </div>
         <div class="chartPanel">
-          <barOne :lineObj="blObj"></barOne>
+          <barOne :chartObj="blObj"></barOne>
         </div>
       </div>
       <div class="riskCol midCol mr18">
@@ -58,6 +61,9 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">风险总量分析变化趋势图</div>
         </div>
+        <div class="chartPanel">
+          <lineOne :chartObj="mmObj"></lineOne>
+        </div>
       </div>
       <div class="riskCol rightCol">
         <div class="riskName">
@@ -70,8 +76,9 @@
 </template>
 <script>
 import barOne from "@/loveflow/components/echart/bar/one.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
 export default {
-  components: { barOne },
+  components: { barOne, lineOne },
   data() {
     return {
       curTime: "day",
@@ -88,6 +95,34 @@ export default {
         yData: [12, 13, 14, 15, 11, 14],
         name: "风险监测项评分排行",
       },
+      tmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+        ],
+        name: "频繁变化风险监测信息近一年变化趋势图",
+        legend: ["违规事故", "重点人员", "流动人员"],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+        ],
+      },
       blObj: {
         xData: [
           "人员安全",
@@ -102,6 +137,41 @@ export default {
         yData: [12, 11, 13, 14, 15, 11, 14, 12],
         name: "风险标签排行",
       },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        ],
+        name: "风险总量分析变化趋势图",
+        legend: [
+          "企业风险总量",
+          "企业风险标签总量",
+          "企业风险得分",
+          "风险预警提醒总量",
+        ],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+          ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
+        ],
+      },
     };
   },
   methods: {
@@ -112,7 +182,7 @@ export default {
 };
 </script>
 <style lang="less">
-.riskWrap {
+.analysisWrap {
   height: 100%;
   padding: 18px;
   box-sizing: border-box;
@@ -185,22 +255,24 @@ export default {
 </style>
 <style lang="scss">
 @import "@/loveflow/assets/index.scss";
-.riskCol {
-  padding-left: vw(8);
-  font-size: vh(16);
+.analysisWrap {
+  .riskCol {
+    padding-left: vw(8);
+    font-size: vh(16);
 
-  .riskName {
-    height: 40px;
-    display: flex;
-    margin-top: vh(6);
-    color: #d9e7ff;
+    .riskName {
+      height: 40px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
 
-    .riskIcon {
-      width: vw(24);
-      height: vh(24);
-      background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
-        center;
-      background-size: 100% 100%;
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
     }
   }
 }
diff --git a/src/views/enterpriseRiskIndex/components/timeSelect.vue b/src/views/enterpriseRiskIndex/components/timeSelect.vue
new file mode 100644
index 0000000..b57502f
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/timeSelect.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="chartOpt">
+    <div @click="changeTime('day')" :class="{ active: curTime == 'day' }">
+      当日
+    </div>
+    <div @click="changeTime('month')" :class="{ active: curTime == 'month' }">
+      近三月
+    </div>
+    <div @click="changeTime('year')" :class="{ active: curTime == 'year' }">
+      本年度
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      curTime: "day",
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+      this.$emit("ok", val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.chartOpt {
+  position: absolute;
+  z-index: 12;
+  right: 5%;
+  display: flex;
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 68px;
+    height: 30px;
+    color: #8fabbf;
+    font-size: 14px;
+    background: linear-gradient(
+      0deg,
+      rgba(122, 163, 204, 0.3) 0%,
+      rgba(122, 163, 204, 0) 100%
+    );
+    &:hover {
+      cursor: pointer;
+      background: linear-gradient(0deg, #3cc7b0 0%, rgba(51, 204, 204, 0) 100%);
+    }
+    &.active {
+      color: #ffffff;
+      border-bottom: solid 2px #33cccc;
+      background: linear-gradient(
+        0deg,
+        rgba(60, 199, 176, 0.3) 0%,
+        rgba(51, 204, 204, 0) 100%
+      );
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/synthetical.vue b/src/views/enterpriseRiskIndex/synthetical.vue
index 537eed0..40961d3 100644
--- a/src/views/enterpriseRiskIndex/synthetical.vue
+++ b/src/views/enterpriseRiskIndex/synthetical.vue
@@ -1,3 +1,251 @@
 <template>
-  <div>综合风险</div>
+  <div class="syntheticalWrap">
+    <div class="riskRow mb18">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">企业综合风险雷达图</div>
+        </div>
+        <div class="chartPanel">
+          <radarOne :chartObj="tlObj"></radarOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">企业综合风险趋势图</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="tmTime"></time-select>
+          <lineOne :chartObj="tmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签增长趋势</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="trTime"></time-select>
+        </div>
+      </div>
+    </div>
+    <div class="riskRow">
+      <div class="riskCol leftCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险预警总量</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="blTime"></time-select>
+          <barOne :chartObj="blObj"></barOne>
+        </div>
+      </div>
+      <div class="riskCol midCol mr18">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签数量变化趋势</div>
+        </div>
+        <div class="chartPanel">
+          <time-select @ok="bmTime"></time-select>
+          <lineOne :chartObj="mmObj"></lineOne>
+        </div>
+      </div>
+      <div class="riskCol rightCol">
+        <div class="riskName">
+          <div class="riskIcon"></div>
+          <div class="riskNameText">全区企业风险标签增长趋势</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import timeSelect from "./components/timeSelect.vue";
+import barOne from "@/loveflow/components/echart/bar/one.vue";
+import lineOne from "@/loveflow/components/echart/line/one.vue";
+import radarOne from "@/loveflow/components/echart/radar/one.vue";
+export default {
+  components: { barOne, lineOne, timeSelect, radarOne },
+  data() {
+    return {
+      tlObj: {
+        indicator: [
+          {
+            name: "人员安全",
+            max: 100,
+          },
+          {
+            name: "道路安全",
+            max: 100,
+          },
+          {
+            name: "列管物品",
+            max: 100,
+          },
+          {
+            name: "消防安全",
+            max: 100,
+          },
+          {
+            name: "危化品运输",
+            max: 100,
+          },
+        ],
+        yData: [12, 13, 14, 15, 11, 14],
+        name: "风险监测项评分排行",
+      },
+      tmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+        ],
+        name: "频繁变化风险监测信息近一年变化趋势图",
+        legend: ["违规事故", "重点人员", "流动人员"],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+        ],
+      },
+      blObj: {
+        xData: [
+          "人员安全",
+          "危化品运输",
+          "防攻击管理",
+          "消防安全",
+          "列管物品",
+          "道路安全",
+          "内部治安",
+          "网络安全",
+        ],
+        yData: [12, 11, 13, 14, 15, 11, 14, 12],
+        name: "风险标签排行",
+      },
+      mmObj: {
+        xData: [
+          "1月",
+          "2月",
+          "3月",
+          "4月",
+          "5月",
+          "6月",
+          "7月",
+          "8月",
+          "9月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        yData: [
+          [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
+          [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+          [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
+          [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        ],
+        name: "风险总量分析变化趋势图",
+        legend: [
+          "企业风险总量",
+          "企业风险标签总量",
+          "企业风险得分",
+          "风险预警提醒总量",
+        ],
+        color: [
+          ["#09C8F5", "rgba(9,200,245,0.1)", "rgba(9,200,245,0.1)"],
+          ["#48EEBD", "rgba(72,238,189,0.1)", "rgba(72,238,189,0.1)"],
+          ["#FFD16A", "rgba(255,209,106,0.1)", "rgba(255,209,106,0.1)"],
+          ["#FF3B3B", "rgba(255,59,59,0.1)", "rgba(255,59,59,0.1)"],
+        ],
+      },
+    };
+  },
+  methods: {
+    tmTime(val) {
+      console.log("tmTime:" + val);
+    },
+    trTime(val) {
+      console.log("trTime:" + val);
+    },
+    blTime(val) {
+      console.log("blTime:" + val);
+    },
+    bmTime(val) {
+      console.log("bmTime:" + val);
+    },
+  },
+};
+</script>
+<style lang="less">
+.syntheticalWrap {
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .riskRow {
+    flex: 1;
+    display: flex;
+    .riskCol {
+      background: url("~@/assets/images/screen/line.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+
+      .chartPanel {
+        position: relative;
+        height: calc(100% - 50px);
+      }
+    }
+    .rightCol {
+      flex: 1;
+    }
+    .midCol {
+      flex: 1.3;
+      margin-right: 18px;
+    }
+    .leftCol {
+      flex: 1;
+      margin-right: 18px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.analysisWrap {
+  .riskCol {
+    padding-left: vw(8);
+    font-size: vh(16);
+
+    .riskName {
+      height: 40px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
+
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>