diff --git a/src/assets/images/risk/body.png b/src/assets/images/risk/body.png
new file mode 100644
index 0000000..dd32b5e
Binary files /dev/null and b/src/assets/images/risk/body.png differ
diff --git a/src/assets/images/risk/head.png b/src/assets/images/risk/head.png
new file mode 100644
index 0000000..40852f8
Binary files /dev/null and b/src/assets/images/risk/head.png differ
diff --git a/src/assets/images/risk/icon.png b/src/assets/images/risk/icon.png
new file mode 100644
index 0000000..85dba4e
Binary files /dev/null and b/src/assets/images/risk/icon.png differ
diff --git a/src/assets/images/risk/tab.png b/src/assets/images/risk/tab.png
new file mode 100644
index 0000000..ef35b0e
Binary files /dev/null and b/src/assets/images/risk/tab.png differ
diff --git a/src/loveflow/components/echart/bar/one.vue b/src/loveflow/components/echart/bar/one.vue
index d35d497..f43d0b1 100644
--- a/src/loveflow/components/echart/bar/one.vue
+++ b/src/loveflow/components/echart/bar/one.vue
@@ -28,7 +28,7 @@ export default {
           show: false,
         },
         grid: {
-          top: this.chartObj.gridTop || "20%",
+          top: this.chartObj.gridTop || "15%",
           bottom: this.chartObj.gridBtm || "10%",
           left: this.chartObj.gridLeft || "6%",
           right: "5%",
@@ -66,6 +66,13 @@ export default {
             color: "#6C8097",
             fontSize: 12,
             interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return (value / 1000).toFixed(1) + "k";
+              } else {
+                return value;
+              }
+            },
           },
         },
         series: [
diff --git a/src/loveflow/components/echart/bar/two.vue b/src/loveflow/components/echart/bar/two.vue
index 580e919..71c4fa4 100644
--- a/src/loveflow/components/echart/bar/two.vue
+++ b/src/loveflow/components/echart/bar/two.vue
@@ -19,6 +19,7 @@ export default {
     };
   },
   mounted() {
+    console.log("。。。。。:", this.chartObj);
     this.setOption();
   },
   methods: {
@@ -67,6 +68,13 @@ export default {
             color: "#6C8097",
             fontSize: 12,
             interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return (value / 1000).toFixed(1) + "k";
+              } else {
+                return value;
+              }
+            },
           },
         },
         series: [
@@ -119,5 +127,14 @@ export default {
       };
     },
   },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
 };
 </script>
diff --git a/src/loveflow/components/echart/line/one.vue b/src/loveflow/components/echart/line/one.vue
index 16776da..8b59a5c 100644
--- a/src/loveflow/components/echart/line/one.vue
+++ b/src/loveflow/components/echart/line/one.vue
@@ -113,6 +113,13 @@ export default {
             color: "#6C8097",
             fontSize: 12,
             interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return (value / 1000).toFixed(1) + "k";
+              } else {
+                return value;
+              }
+            },
           },
         },
         series: seriesArr,
diff --git a/src/loveflow/components/echart/line/three.vue b/src/loveflow/components/echart/line/three.vue
index 182db3e..a9232a9 100644
--- a/src/loveflow/components/echart/line/three.vue
+++ b/src/loveflow/components/echart/line/three.vue
@@ -67,6 +67,13 @@ export default {
             color: "#6C8097",
             fontSize: 12,
             interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return (value / 1000).toFixed(1) + "k";
+              } else {
+                return value;
+              }
+            },
           },
         },
         series: [
diff --git a/src/loveflow/components/echart/line/two.vue b/src/loveflow/components/echart/line/two.vue
index aee7628..ba2ab61 100644
--- a/src/loveflow/components/echart/line/two.vue
+++ b/src/loveflow/components/echart/line/two.vue
@@ -68,6 +68,13 @@ export default {
             color: "#6C8097",
             fontSize: 12,
             interval: 0,
+            formatter: function (value) {
+              if (value >= 1000) {
+                return (value / 1000).toFixed(1) + "k";
+              } else {
+                return value;
+              }
+            },
           },
         },
         series: [
diff --git a/src/loveflow/components/echart/radar/one.vue b/src/loveflow/components/echart/radar/one.vue
index 639d7df..895600c 100644
--- a/src/loveflow/components/echart/radar/one.vue
+++ b/src/loveflow/components/echart/radar/one.vue
@@ -28,7 +28,8 @@ export default {
           show: false,
         },
         tooltip: {
-          show: false,
+          show: true,
+          position: ["50%", "20px"],
         },
         radar: {
           center: ["50%", "50%"], // 外圆的位置
@@ -80,15 +81,8 @@ export default {
             },
             data: [
               {
-                value: [80, 80, 80, 70, 60, 50],
-                name: "男",
-                areaStyle: {
-                  color: "transparent",
-                },
-              },
-              {
-                value: [40, 70, 50, 60, 30, 80],
-                name: "女",
+                value: this.chartObj.yData,
+                name: this.chartObj.name,
                 itemStyle: {
                   borderColor: "rgba(245, 196, 85, 1)",
                   color: "#fff",
diff --git a/src/views/enterpriseRiskIndex/abnormal.vue b/src/views/enterpriseRiskIndex/abnormal.vue
index 8b63094..b3fc420 100644
--- a/src/views/enterpriseRiskIndex/abnormal.vue
+++ b/src/views/enterpriseRiskIndex/abnormal.vue
@@ -1,145 +1,101 @@
 <template>
   <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>{{ total.name }}</div>
-          <div class="totalText">{{ total.value }}</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 class="leftCol">
+      <div class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="企业风险项趋势分析图" @changeTime="tlTime">
+            <div class="riskTotal">
+              <div>{{ total.name }}</div>
+              <div class="totalText">{{ total.value }}</div>
             </div>
-            <div
-              @click="changeTime('year')"
-              :class="{ active: curTime == 'year' }"
-            >
-              本年度
+            <div class="chartPanel">
+              <barOne :chartObj="tlObj"></barOne>
             </div>
-          </div>
-          <barOne :chartObj="tlObj"></barOne>
+          </colWrap>
         </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 class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="流口人员管理异常" @changeTime="ttlTime">
+            <lineThree :chartObj="ttlObj"></lineThree>
+          </colWrap>
         </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 class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="人员涉警(案)情况异常分析" @changeTime="bblTime">
+            <lineTwo :chartObj="bblObj"></lineTwo>
+          </colWrap>
         </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 class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="运输车辆异常预警" @changeTime="blTime">
+            <barTwo ref="blObjRef" :chartObj="blObj"></barTwo>
+          </colWrap>
         </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 class="rightCol">
+      <div class="screenRow pb14">
+        <div class="screenCol rightCardCol">
+          <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>
-    <div class="riskRow mb18">
-      <div class="riskCol mr18">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">运输车辆异常预警</div>
+      <div class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="人员背景审核异常分析" @changeTime="ttmTime">
+            <lineThree :chartObj="ttmObj"></lineThree>
+          </colWrap>
         </div>
-        <div class="chartPanel">
-          <barTwo :chartObj="mlObj"></barTwo>
+        <div class="screenCol">
+          <colWrap title="重点岗位资质核查异常分析" @changeTime="ttrTime">
+            <lineThree :chartObj="ttmObj"></lineThree>
+          </colWrap>
         </div>
       </div>
-      <div class="riskCol mr18">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">驾驶员押运员资质异常分析</div>
+      <div class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="装卸量差异分析" @changeTime="bbmTime">
+            <lineTwo :chartObj="bbmObj"></lineTwo>
+          </colWrap>
         </div>
-        <div class="chartPanel">
-          <barTwo :chartObj="mmObj"></barTwo>
+        <div class="screenCol">
+          <colWrap title="运输车辆背景异常分析" @changeTime="bbrTime">
+            <lineTwo :chartObj="bblObj"></lineTwo>
+          </colWrap>
         </div>
       </div>
-      <div class="riskCol">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">单位检查情况异常分析</div>
+      <div class="screenRow pb14">
+        <div class="screenCol mr14">
+          <colWrap title="驾驶员押运员资质异常分析" @changeTime="bmTime">
+            <barTwo ref="bmObjRef" :chartObj="bmObj"></barTwo>
+          </colWrap>
         </div>
-        <div class="chartPanel">
-          <barTwo :chartObj="mrObj"></barTwo>
+        <div class="screenCol">
+          <colWrap title="单位检查情况异常分析" @changeTime="brTime">
+            <barTwo ref="brObjRef" :chartObj="brObj"></barTwo>
+          </colWrap>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import colWrap from "./components/col.vue";
+
 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";
@@ -159,12 +115,11 @@ import {
 } from "@/api/enterpriseRiskIndex/abnormal/index.js";
 
 export default {
-  components: { barOne, barTwo, lineTwo, lineThree },
+  components: { colWrap, barOne, barTwo, lineTwo, lineThree },
   data() {
     return {
-      curTime: "day",
       total: {
-        name: "今日企业风险项量",
+        name: "企业风险总量",
         value: 0,
       },
       tlObj: {
@@ -172,9 +127,9 @@ export default {
         xData: [],
         yData: [],
         list: [],
-        name: "风险标签排行",
+        name: "企业风险项趋势",
       },
-      tmlObj: {
+      ttlObj: {
         xData: [],
         yData: [],
         name: "流口人员管理异常",
@@ -184,8 +139,9 @@ export default {
           "rgba(30,147,255,0.3)",
           "#1E93FF",
         ],
+        list: [],
       },
-      tmmObj: {
+      ttmObj: {
         xData: [],
         yData: [],
         name: "人员背景审核异常分析",
@@ -195,8 +151,9 @@ export default {
           "rgba(30,147,255,0.3)",
           "#1E93FF",
         ],
+        list: [],
       },
-      tmrObj: {
+      ttrObj: {
         xData: [],
         yData: [],
         name: "重点岗位资质核查异常分析",
@@ -206,9 +163,10 @@ export default {
           "rgba(30,147,255,0.3)",
           "#1E93FF",
         ],
+        list: [],
       },
 
-      mtlObj: {
+      bblObj: {
         xData: [],
         yData: [],
         name: "人员涉警(案)情况异常分析",
@@ -217,8 +175,9 @@ export default {
           "rgba(255,61,61,0.8)",
           "rgba(255,61,61,0)",
         ],
+        list: [],
       },
-      mtmObj: {
+      bbmObj: {
         xData: [],
         yData: [],
         name: "装卸量差异分析",
@@ -227,8 +186,9 @@ export default {
           "rgba(255,61,61,0.8)",
           "rgba(255,61,61,0)",
         ],
+        list: [],
       },
-      mtrObj: {
+      bbrObj: {
         xData: [],
         yData: [],
         name: "运输车辆背景异常分析",
@@ -237,21 +197,25 @@ export default {
           "rgba(255,61,61,0.8)",
           "rgba(255,61,61,0)",
         ],
+        list: [],
       },
-      mlObj: {
+      blObj: {
         xData: [],
         yData: [],
         name: "运输车辆异常预警",
+        list: [],
       },
-      mmObj: {
+      bmObj: {
         xData: [],
         yData: [],
         name: "驾驶员押运员资质异常分析",
+        list: [],
       },
-      mrObj: {
+      brObj: {
         xData: [],
         yData: [],
         name: "单位检查情况异常分析",
+        list: [],
       },
       dataList: [
         [
@@ -312,279 +276,421 @@ export default {
     this.getData();
   },
   methods: {
-    changeTime(val) {
-      this.curTime = val;
-
-      this.tlObj.yData = [];
-      this.tlObj.xData = [];
-
-      let list = [];
-
-      if (val == "day") {
-        this.total.name = "今日企业风险项量";
-        list = this.tlObj.list[0];
-      }
-      if (val == "month") {
-        this.total.name = "近三月企业风险项量";
-        list = this.tlObj.list[1];
-      }
-      if (val == "year") {
-        this.total.name = "本年度企业风险项量";
-        list = this.tlObj.list[2];
-      }
-
-      for (let i = 0; i < list.length; i++) {
-        if (list[i]["riskName"] == "企业风险项量") {
-          this.total.value = list[i]["score"];
-        } else {
-          this.tlObj.yData.push(list[i]["score"]);
-          let name = list[i]["riskName"].replace(/异常分析/, "");
-          name = name.replace(/异常/, "");
-          this.tlObj.xData.push(name);
-        }
-      }
-    },
-
     getData() {
       enterpriseComprehensiveRisk().then((res) => {
         if (res.code == 200) {
           let data = res.data || [];
           this.tlObj.list = data;
-          this.changeTime("day");
+          this.tlTime("day");
         }
       });
       abnormalFloatingPopulation().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.tmlObj.xData.push(list[i]["month"] + "月");
-            this.tmlObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[0][0]["value"] = total;
+          let data = res.data || [];
+          this.ttlObj.list = data;
+          this.ttlTime("day");
         }
       });
       personnelBackground().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.tmmObj.xData.push(list[i]["month"] + "月");
-            this.tmmObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[0][1]["value"] = total;
+          let data = res.data || [];
+          this.ttmObj.list = data;
+          this.ttmTime("day");
         }
       });
       keyPosition().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.tmrObj.xData.push(list[i]["month"] + "月");
-            this.tmrObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[0][2]["value"] = total;
+          let data = res.data || [];
+          this.ttrObj.list = data;
+          this.ttrTime("day");
         }
       });
       policeInvolvement().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mtlObj.xData.push(list[i]["month"] + "月");
-            this.mtlObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[1][0]["value"] = total;
+          let data = res.data || [];
+          this.bblObj.list = data;
+          this.bblTime("day");
         }
       });
       zXDifference().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mtmObj.xData.push(list[i]["month"] + "月");
-            this.mtmObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[1][1]["value"] = total;
+          let data = res.data || [];
+          this.bbmObj.list = data;
+          this.bbmTime("day");
         }
       });
       transportVehicleBj().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mtrObj.xData.push(list[i]["month"] + "月");
-            this.mtrObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[1][2]["value"] = total;
+          let data = res.data || [];
+          this.bbrObj.list = data;
+          this.bbrTime("day");
         }
       });
 
       transportVehicleAnomaly().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mlObj.xData.push(list[i]["month"] + "月");
-            this.mlObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[2][0]["value"] = total;
+          let data = res.data || [];
+          this.blObj.list = data;
+          this.blTime("day");
         }
       });
       transportVehicle().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mmObj.xData.push(list[i]["month"] + "月");
-            this.mmObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[2][1]["value"] = total;
+          let data = res.data || [];
+          this.bmObj.list = data;
+          this.bmTime("day");
         }
       });
       unitInspection().then((res) => {
         if (res.code == 200) {
-          let list = res.data || [];
-          let total = 0;
-          for (let i = 0; i < list.length; i++) {
-            total = total + list[i]["score"];
-            this.mrObj.xData.push(list[i]["month"] + "月");
-            this.mrObj.yData.push(list[i]["score"]);
-          }
-          this.dataList[2][2]["value"] = total;
+          let data = res.data || [];
+          this.brObj.list = data;
+          this.brTime("day");
         }
       });
     },
+
+    tlTime(val) {
+      this.tlObj.yData = [];
+      this.tlObj.xData = [];
+      let list = [];
+      if (val == "day") {
+        list = this.tlObj.list[0];
+      }
+      if (val == "month") {
+        list = this.tlObj.list[1];
+      }
+      if (val == "year") {
+        list = this.tlObj.list[2];
+      }
+      for (let i = 0; i < list.length; i++) {
+        if (list[i]["riskName"] == "企业风险项量") {
+          this.total.value = list[i]["score"];
+        } else {
+          this.tlObj.yData.push(list[i]["score"]);
+          let name = list[i]["riskName"].replace(/异常分析/, "");
+          name = name.replace(/异常/, "");
+          this.tlObj.xData.push(name);
+        }
+      }
+    },
+    ttlTime(val) {
+      this.ttlObj.yData = [];
+      this.ttlObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.ttlObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.ttlObj.xData.push(list[i]["month"]);
+        this.ttlObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[0][0]["value"] = total;
+    },
+    ttmTime(val) {
+      this.ttmObj.yData = [];
+      this.ttmObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.ttmObj.list;
+
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.ttmObj.xData.push(list[i]["month"]);
+        this.ttmObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[0][1]["value"] = total;
+    },
+    ttrTime(val) {
+      this.ttrObj.yData = [];
+      this.ttrObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.ttrObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.ttrObj.xData.push(list[i]["month"]);
+        this.ttrObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[0][2]["value"] = total;
+    },
+
+    bblTime(val) {
+      this.bblObj.yData = [];
+      this.bblObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.bblObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.bblObj.xData.push(list[i]["month"]);
+        this.bblObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[1][0]["value"] = total;
+    },
+    bbmTime(val) {
+      this.bbmObj.yData = [];
+      this.bbmObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.bbmObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.bbmObj.xData.push(list[i]["month"]);
+        this.bbmObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[1][1]["value"] = total;
+    },
+    bbrTime(val) {
+      this.bblObj.yData = [];
+      this.bblObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.bblObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.bblObj.xData.push(list[i]["month"]);
+        this.bblObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[1][2]["value"] = total;
+    },
+    blTime(val) {
+      this.blObj.yData = [];
+      this.blObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.blObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.blObj.xData.push(list[i]["month"]);
+        this.blObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[2][0]["value"] = total;
+    },
+    bmTime(val) {
+      this.bmObj.yData = [];
+      this.bmObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.bmObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.bmObj.xData.push(list[i]["month"]);
+        this.bmObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[2][1]["value"] = total;
+    },
+    brTime(val) {
+      this.brObj.yData = [];
+      this.brObj.xData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 1;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 3;
+      }
+      if (val == "year") {
+        index = 4;
+      }
+      list = this.brObj.list;
+      let total = 0;
+      for (let i = 0; i < list.length; i++) {
+        total = total + list[i]["score"];
+        this.brObj.xData.push(list[i]["month"]);
+        this.brObj.yData.push(list[i]["score"]);
+      }
+      this.dataList[2][2]["value"] = total;
+    },
   },
 };
 </script>
 <style lang="less">
 .abnormalWrap {
   height: 100%;
-  padding: 18px;
+  padding: 14px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   overflow-y: scroll;
   overflow-x: hidden;
+  display: flex;
   &::-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%;
-        }
-      }
+  .leftCol {
+    width: 34%;
 
-      .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);
+    .riskTotal {
+      margin-left: 2%;
+      width: 96%;
+      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;
       }
     }
-    .leftCol {
-      flex: auto;
-      width: calc(33.33% - 18px);
+
+    .chartPanel {
+      height: calc(100% - 50px);
     }
-    .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%;
+  }
+  .rightCol {
+    width: 66%;
+  }
 
-      display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
+  .screenRow {
+    display: flex;
+    .screenCol {
+      flex: 1;
+      height: 456px;
 
       .riskLine {
         display: flex;
@@ -631,6 +737,54 @@ export default {
         }
       }
     }
+
+    .rightCardCol {
+      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;
+      .cardTimeOpt {
+        display: flex;
+        .timeBtn {
+          font-size: vw(14);
+          padding: 0 12px;
+          height: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #8fabbf;
+          background: linear-gradient(
+            0deg,
+            rgba(122, 163, 204, 0.3) 0%,
+            rgba(122, 163, 204, 0) 100%
+          );
+          &:hover {
+            cursor: pointer;
+            color: #ffffff;
+            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/analysis.vue b/src/views/enterpriseRiskIndex/analysis.vue
index 8fcdc2b..c97f16d 100644
--- a/src/views/enterpriseRiskIndex/analysis.vue
+++ b/src/views/enterpriseRiskIndex/analysis.vue
@@ -1,86 +1,43 @@
 <template>
   <div class="analysisWrap">
-    <div class="riskRow mb14">
-      <div class="riskCol leftCol mr14">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">风险监测项评分排行</div>
-        </div>
-        <div class="chartPanel">
-          <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>
+    <div class="screenRow pb14">
+      <div class="screenCol mr14">
+        <colWrap title="风险监测项评分排行" @changeTime="tlTime">
           <barOne :chartObj="tlObj"></barOne>
-        </div>
+        </colWrap>
       </div>
-      <div class="riskCol midCol mr14">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">频繁变化风险监测信息近一年变化趋势图</div>
-        </div>
-        <div class="chartPanel">
-          <lineOne :chartObj="tmObj"></lineOne>
-        </div>
+      <div class="screenCol mr14">
+        <colWrap title="频繁变化风险监测信息变化趋势图" @changeTime="tmTime">
+          <lineOne :chartObj="tmObj"></lineOne
+        ></colWrap>
       </div>
-      <div class="riskCol rightCol">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">异常风险项得分占比</div>
-        </div>
-        <div class="chartPanel flex-center">
+      <div class="screenCol">
+        <colWrap title="异常风险项得分占比" @changeTime="trTime">
           <dPie :chartObj="trObj"></dPie>
-        </div>
+        </colWrap>
       </div>
     </div>
-    <div class="riskRow">
-      <div class="riskCol leftCol mr14">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">风险标签排行</div>
-        </div>
-        <div class="chartPanel">
+    <div class="screenRow">
+      <div class="screenCol mr14">
+        <colWrap title="风险标签排行" @changeTime="blTime">
           <barOne :chartObj="blObj"></barOne>
-        </div>
+        </colWrap>
       </div>
-      <div class="riskCol midCol mr14">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">风险总量分析变化趋势图</div>
-        </div>
-        <div class="chartPanel">
+      <div class="screenCol mr14">
+        <colWrap title="风险总量分析变化趋势图" @changeTime="bmTime">
           <lineOne :chartObj="bmObj"></lineOne>
-        </div>
+        </colWrap>
       </div>
-      <div class="riskCol rightCol canvasDefault">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">风险标签排行</div>
-        </div>
-        <div class="chartPanel">
+      <div class="screenCol">
+        <colWrap title="异常风险得分对比" @changeTime="brTime">
           <barThree :chartObj="brObj"></barThree>
-        </div>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
+import colWrap from "./components/col.vue";
 import barOne from "@/loveflow/components/echart/bar/one.vue";
 import barThree from "@/loveflow/components/echart/bar/three.vue";
 import dPie from "@/loveflow/components/echart/pie/dPie.vue";
@@ -98,7 +55,7 @@ import {
 } from "@/api/enterpriseRiskIndex/analysis/index.js";
 
 export default {
-  components: { barOne, lineOne, barThree, dPie },
+  components: { colWrap, barOne, lineOne, barThree, dPie },
   data() {
     return {
       curTime: "",
@@ -119,6 +76,7 @@ export default {
           ["#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)"],
         ],
+        list: [],
       },
       blObj: {
         xData: [
@@ -133,6 +91,7 @@ export default {
         ],
         yData: [212, 211, 313, 149, 195, 11, 164, 172],
         name: "风险标签排行",
+        list: [],
       },
       bmObj: {
         xData: [],
@@ -145,6 +104,7 @@ export default {
           ["#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)"],
         ],
+        list: [],
       },
       brObj: {
         data: [
@@ -166,6 +126,7 @@ export default {
           },
         ],
         name: "风险标签排行",
+        list: [],
       },
     };
   },
@@ -173,38 +134,13 @@ export default {
     this.getData();
   },
   methods: {
-    changeTime(val) {
-      this.curTime = val;
-      if (this.tlObj.list.length < 2) {
-        return;
-      }
-      this.tlObj.yData = [];
-      this.tlObj.xData = [];
-
-      let list = [];
-      if (val == "day") {
-        list = this.tlObj.list[0];
-      }
-      if (val == "month") {
-        list = this.tlObj.list[1];
-      }
-      if (val == "year") {
-        list = this.tlObj.list[2];
-      }
-
-      for (let i = 0; i < list.length; i++) {
-        this.tlObj.yData.push(list[i]["score"]);
-        this.tlObj.xData.push(list[i]["riskName"]);
-      }
-    },
-
     //注释看api文件接口
     getData() {
       riskDetection().then((res) => {
         if (res.code == 200) {
           let data = res.data || [];
           this.tlObj.list = data;
-          this.changeTime("day");
+          this.tlTime("day");
         }
       });
 
@@ -213,37 +149,16 @@ export default {
       frequentChangeRisk().then((res) => {
         if (res.code == 200) {
           let data = res.data || [];
-          for (let i = 0; i < data.length; i++) {
-            if (!this.tmObj.xData.includes(data[i]["month"] + "月")) {
-              this.tmObj.xData.push(data[i]["month"] + "月");
-            }
-            if (!this.tmObj.legend.includes(data[i]["riskName"])) {
-              this.tmObj.legend.push(data[i]["riskName"]);
-            }
-          }
-          let temp = groupByReduce(data, "riskName", "score");
-          for (let i = 0; i < this.tmObj.legend.length; i++) {
-            this.tmObj.yData.push(temp[this.tmObj.legend[i]]);
-          }
+          this.tmObj.list = data;
+          this.tmTime("day");
         }
       });
 
       aggregateRiskAnalysis().then((res) => {
         if (res.code == 200) {
           let data = res.data || [];
-          console.log(data);
-          for (let i = 0; i < data.length; i++) {
-            if (!this.bmObj.xData.includes(data[i]["month"] + "月")) {
-              this.bmObj.xData.push(data[i]["month"] + "月");
-            }
-            if (!this.bmObj.legend.includes(data[i]["riskName"])) {
-              this.bmObj.legend.push(data[i]["riskName"]);
-            }
-          }
-          let temp = groupByReduce(data, "riskName", "score");
-          for (let i = 0; i < this.bmObj.legend.length; i++) {
-            this.bmObj.yData.push(temp[this.bmObj.legend[i]]);
-          }
+          this.bmObj.list = data;
+          this.bmTime("day");
         }
       });
 
@@ -251,101 +166,133 @@ export default {
 
       abnormalRiskScore().then((res) => {});
     },
+
+    tlTime(val) {
+      this.curTime = val;
+      if (this.tlObj.list.length < 2) {
+        return;
+      }
+      this.tlObj.yData = [];
+      this.tlObj.xData = [];
+
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
+      }
+      if (val == "month") {
+        index = 1;
+      }
+      if (val == "season") {
+        index = 1;
+      }
+      if (val == "year") {
+        index = 2;
+      }
+      list = this.tlObj.list[index];
+
+      for (let i = 0; i < list.length; i++) {
+        this.tlObj.yData.push(list[i]["score"]);
+        this.tlObj.xData.push(list[i]["riskName"]);
+      }
+    },
+    tmTime(val) {
+      this.tmObj.yData = [];
+      this.tmObj.xData = [];
+      this.tmObj.legend = [];
+
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
+      }
+      if (val == "month") {
+        index = 1;
+      }
+      if (val == "season") {
+        index = 1;
+      }
+      if (val == "year") {
+        index = 2;
+      }
+      list = this.tmObj.list;
+
+      for (let i = 0; i < list.length; i++) {
+        if (!this.tmObj.xData.includes(list[i]["month"] + "月")) {
+          this.tmObj.xData.push(list[i]["month"] + "月");
+        }
+        if (!this.tmObj.legend.includes(list[i]["riskName"])) {
+          this.tmObj.legend.push(list[i]["riskName"]);
+        }
+      }
+      let temp = groupByReduce(list, "riskName", "score");
+      for (let i = 0; i < this.tmObj.legend.length; i++) {
+        this.tmObj.yData.push(temp[this.tmObj.legend[i]]);
+      }
+    },
+    trTime(val) {},
+    blTime(val) {},
+    bmTime(val) {
+      this.bmObj.yData = [];
+      this.bmObj.xData = [];
+      this.bmObj.legend = [];
+
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
+      }
+      if (val == "month") {
+        index = 1;
+      }
+      if (val == "season") {
+        index = 1;
+      }
+      if (val == "year") {
+        index = 2;
+      }
+      list = this.bmObj.list;
+      for (let i = 0; i < list.length; i++) {
+        if (!this.bmObj.xData.includes(list[i]["month"] + "月")) {
+          this.bmObj.xData.push(list[i]["month"] + "月");
+        }
+        if (!this.bmObj.legend.includes(list[i]["riskName"])) {
+          this.bmObj.legend.push(list[i]["riskName"]);
+        }
+      }
+      let temp = groupByReduce(list, "riskName", "score");
+      for (let i = 0; i < this.bmObj.legend.length; i++) {
+        this.bmObj.yData.push(temp[this.bmObj.legend[i]]);
+      }
+      console.log(this.bmObj);
+    },
+    brTime(val) {},
   },
 };
 </script>
-<style lang="less">
+
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
 .analysisWrap {
   height: 100%;
   padding: 14px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  .riskRow {
-    flex: 1;
+  overflow: hidden;
+  .screenRow {
+    height: 50%;
     display: flex;
-    .riskCol {
-      background: url("~@/assets/images/screen/line.png") no-repeat center
-        center;
-      background-size: 100% 100%;
-
-      .chartPanel {
-        position: relative;
-        height: calc(100% - 40px);
-        .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%
-              );
-            }
-          }
-        }
-      }
-    }
-    .rightCol {
+    .screenCol {
       flex: 1;
-    }
-    .midCol {
-      flex: 1.4;
-      margin-right: 14px;
-    }
-    .leftCol {
-      flex: 1.2;
-      margin-right: 14px;
-    }
-  }
-}
-</style>
-<style lang="scss">
-@import "@/loveflow/assets/index.scss";
-.analysisWrap {
-  .riskCol {
-    padding-left: vw(8);
-    font-size: vw(16);
-
-    .riskName {
-      height: 30px;
-      display: flex;
-      margin-top: vw(6);
-      color: #d9e7ff;
-
-      .riskIcon {
-        width: vw(24);
-        height: vw(24);
-        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
-          center;
-        background-size: 100% 100%;
-      }
+      height: 100%;
     }
   }
 }
diff --git a/src/views/enterpriseRiskIndex/components/col.vue b/src/views/enterpriseRiskIndex/components/col.vue
new file mode 100644
index 0000000..cb704ae
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/col.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="screenColWrap">
+    <div class="headWrap">
+      <div class="screenName">
+        <div class="screenIcon"></div>
+        <div class="screenNameText">{{ title }}</div>
+      </div>
+      <div class="optTimeWrap" v-if="time">
+        <div
+          class="timeBtn"
+          v-for="item in timeList"
+          :key="item.value"
+          @click="changeTime(item.value)"
+          :class="{ active: curTime == item.value }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+
+    <div class="screenChart">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    time: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+    url: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {
+      curTime: "day",
+      timeList: [
+        {
+          name: "当天",
+          value: "day",
+        },
+        {
+          name: "本周",
+          value: "week",
+        },
+        {
+          name: "本月",
+          value: "month",
+        },
+        {
+          name: "本季度",
+          value: "season",
+        },
+        {
+          name: "本年",
+          value: "year",
+        },
+      ],
+    };
+  },
+  methods: {
+    changeTime(val) {
+      this.curTime = val;
+      this.$emit("changeTime", val);
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.screenColWrap {
+  height: 100%;
+  .headWrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 0 6px;
+    height: 30px;
+
+    color: #d9e7ff;
+    background: url("~@/assets/images/risk/head.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .screenName {
+    display: flex;
+    align-items: center;
+    font-size: vw(16);
+    .screenIcon {
+      width: 24px;
+      height: 24px;
+      background: url("~@/assets/images/risk/icon.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+  }
+
+  .optTimeWrap {
+    display: flex;
+    .timeBtn {
+      font-size: vw(14);
+      padding: 0 12px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #8fabbf;
+      background: linear-gradient(
+        0deg,
+        rgba(122, 163, 204, 0.3) 0%,
+        rgba(122, 163, 204, 0) 100%
+      );
+      &:hover {
+        cursor: pointer;
+        color: #ffffff;
+        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%
+        );
+      }
+    }
+  }
+
+  .screenChart {
+    padding: vw(10) vw(10) 0;
+    height: calc(100% - 30px);
+    box-sizing: border-box;
+    background: url("~@/assets/images/risk/body.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/leftCard.vue b/src/views/enterpriseRiskIndex/components/leftCard.vue
index aa77008..942ed07 100644
--- a/src/views/enterpriseRiskIndex/components/leftCard.vue
+++ b/src/views/enterpriseRiskIndex/components/leftCard.vue
@@ -32,8 +32,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 20px;
-  margin-left: 3%;
+  margin: vw(6);
   padding-left: 20px;
   flex: 1;
   height: vw(80);
diff --git a/src/views/enterpriseRiskIndex/components/rightCard.vue b/src/views/enterpriseRiskIndex/components/rightCard.vue
index 007a62c..4eebae9 100644
--- a/src/views/enterpriseRiskIndex/components/rightCard.vue
+++ b/src/views/enterpriseRiskIndex/components/rightCard.vue
@@ -34,9 +34,8 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 20px;
+  margin: vw(6);
   padding-left: 20px;
-  margin-right: 5%;
   flex: 2;
   height: vw(80);
   background: url("~@/assets/images/screen/zz.png") no-repeat center center;
diff --git a/src/views/enterpriseRiskIndex/synthetical.vue b/src/views/enterpriseRiskIndex/synthetical.vue
index f0c66c3..bb245a7 100644
--- a/src/views/enterpriseRiskIndex/synthetical.vue
+++ b/src/views/enterpriseRiskIndex/synthetical.vue
@@ -1,160 +1,182 @@
 <template>
   <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">
+    <div class="screenRow pb14">
+      <div class="screenCol mr14">
+        <colWrap title="企业综合风险雷达图" @changeTime="tlTime">
           <radarOne :chartObj="tlObj"></radarOne>
-        </div>
+        </colWrap>
       </div>
-      <div class="riskCol midCol mr18">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">企业综合风险趋势图</div>
-        </div>
-        <div class="totalWrap">
-          <left-card :dataObj="leftData"></left-card>
-          <right-card :dataObj="rightData"></right-card>
-        </div>
-        <time-select @ok="tmTime"></time-select>
-        <div class="chartPanel" style="height: 26vh">
-          <barOne :chartObj="tmObj"></barOne>
-        </div>
+      <div class="screenCol mr14">
+        <colWrap title="企业综合风险趋势图" @changeTime="tmTime">
+          <div class="totalWrap">
+            <left-card :dataObj="leftData"></left-card>
+            <right-card :dataObj="rightData"></right-card>
+          </div>
+          <div class="chartPanel">
+            <barOne :chartObj="tmObj"></barOne>
+          </div>
+        </colWrap>
       </div>
-      <div class="riskCol rightCol">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">高风险企业增长趋势分析</div>
-        </div>
-        <div class="totalWrap">
-          <left-card :dataObj="lefData"></left-card>
-          <right-card :dataObj="righData"></right-card>
-        </div>
-        <time-select @ok="trTime"></time-select>
-        <div class="chartPanel" style="height: 26vh">
-          <pieOne :chartObj="trObj"></pieOne>
-        </div>
+      <div class="screenCol">
+        <colWrap title="高风险企业增长趋势分析" @changeTime="trTime">
+          <div class="totalWrap">
+            <left-card :dataObj="lefData"></left-card>
+            <right-card :dataObj="righData"></right-card>
+          </div>
+          <div class="chartPanel">
+            <pieOne :chartObj="trObj"></pieOne>
+          </div>
+        </colWrap>
       </div>
     </div>
-    <div class="riskRow">
-      <div class="riskCol leftCol mr18">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">全区企业风险预警总量</div>
-        </div>
-        <div class="riskTotalPanel">
-          <total-card :dataObj="totalData"></total-card>
-        </div>
-        <!-- <div class="chartPanelBg"></div> -->
-        <div
-          class="chartPanel"
-          style="height: calc(100% - 12vh); width: 88%; margin-left: 2%"
-        >
-          <time-select @ok="blTime"></time-select>
-          <pieOne :chartObj="blObj"></pieOne>
-        </div>
+    <div class="screenRow">
+      <div class="screenCol mr14">
+        <colWrap title="风险标签排行" @changeTime="blTime">
+          <div class="riskTotalPanel">
+            <total-card :dataObj="totalData"></total-card>
+          </div>
+          <div class="chartPanel">
+            <pieOne :chartObj="blObj"></pieOne>
+          </div>
+        </colWrap>
       </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>
+      <div class="screenCol mr14">
+        <colWrap title="风险总量分析变化趋势图" @changeTime="bmTime">
           <lineOne :chartObj="bmObj"></lineOne>
-        </div>
+        </colWrap>
       </div>
-      <div class="riskCol rightCol">
-        <div class="riskName">
-          <div class="riskIcon"></div>
-          <div class="riskNameText">全区企业风险标签增长趋势</div>
-        </div>
-        <div class="riskUpWrap">
-          <div class="totalTop">
-            <div class="left">
-              <div class="totalName fontsize16">本年度风险标签总量</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="value fontsize22">
-                    {{ total.toLocaleString() }}
+      <div class="screenCol">
+        <colWrap title="异常风险得分对比" :time="false">
+          <div class="riskUpWrap">
+            <div class="totalTop">
+              <div class="left">
+                <div class="totalName fontsize16">本年风险标签总量</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="value fontsize22">
+                      {{ total.toLocaleString() }}
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="right">
-              <div class="totalName">增长趋势</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">2%</div>
-                </div>
-                <div class="item">
-                  <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">3%</div>
+              <div class="right">
+                <div class="totalName">增长趋势</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="label fontsize14">同比增长</div>
+                    <div class="value fontsize22">2%</div>
+                  </div>
+                  <div class="item">
+                    <div class="label fontsize14">环比增长</div>
+                    <div class="value fontsize22">3%</div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="totalMid">
-            <div class="left">
-              <div class="totalName fontsize16">近三月风险标签总量</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="value fontsize22">
-                    {{ total2.toLocaleString() }}
+            <div class="totalMid">
+              <div class="left">
+                <div class="totalName fontsize16">本季度风险标签总量</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="value fontsize22">
+                      {{ total2.toLocaleString() }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="totalName fontsize16">增长趋势</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="label fontsize14">同比增长</div>
+                    <div class="value fontsize22">4%</div>
+                  </div>
+                  <div class="item">
+                    <div class="label fontsize14">环比增长</div>
+                    <div class="value fontsize22">3%</div>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="right">
-              <div class="totalName fontsize16">增长趋势</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">4%</div>
+            <div class="totalBtm">
+              <div class="left">
+                <div class="totalName fontsize16">当月风险标签总量</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="value fontsize22">
+                      {{ total1.toLocaleString() }}
+                    </div>
+                  </div>
                 </div>
-                <div class="item">
-                  <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">3%</div>
+              </div>
+              <div class="right">
+                <div class="totalName fontsize16">增长趋势</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="label fontsize14">同比增长</div>
+                    <div class="value fontsize22">2%</div>
+                  </div>
+                  <div class="item">
+                    <div class="label fontsize14">环比增长</div>
+                    <div class="value fontsize22">1%</div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="totalBtm">
-            <div class="left">
-              <div class="totalName fontsize16">当月风险标签总量</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="value fontsize22">
-                    {{ total1.toLocaleString() }}
+            <div class="totalBtm">
+              <div class="left">
+                <div class="totalName fontsize16">本周风险标签总量</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="value fontsize22">32</div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="totalName fontsize16">增长趋势</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="label fontsize14">同比增长</div>
+                    <div class="value fontsize22">2%</div>
+                  </div>
+                  <div class="item">
+                    <div class="label fontsize14">环比增长</div>
+                    <div class="value fontsize22">1%</div>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="right">
-              <div class="totalName fontsize16">增长趋势</div>
-              <div class="totalValue">
-                <div class="item">
-                  <div class="label fontsize14">同比增长</div>
-                  <div class="value fontsize22">2%</div>
+            <div class="totalBtm">
+              <div class="left">
+                <div class="totalName fontsize16">当日风险标签总量</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="value fontsize22">12</div>
+                  </div>
                 </div>
-                <div class="item">
-                  <div class="label fontsize14">环比增长</div>
-                  <div class="value fontsize22">1%</div>
+              </div>
+              <div class="right">
+                <div class="totalName fontsize16">增长趋势</div>
+                <div class="totalValue">
+                  <div class="item">
+                    <div class="label fontsize14">同比增长</div>
+                    <div class="value fontsize22">2%</div>
+                  </div>
+                  <div class="item">
+                    <div class="label fontsize14">环比增长</div>
+                    <div class="value fontsize22">1%</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
-import timeSelect from "./components/timeSelect.vue";
+import colWrap from "./components/col.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";
@@ -176,9 +198,9 @@ import { groupByReduce } from "@/loveflow/util.js";
 
 export default {
   components: {
+    colWrap,
     barOne,
     lineOne,
-    timeSelect,
     radarOne,
     pieOne,
     leftCard,
@@ -204,37 +226,17 @@ export default {
         hb: 2,
       },
       totalData: {
-        name: "今日企业风险项量",
+        name: "风险标签总量",
         value: 7,
       },
-      total: 21345,
+      total: 1345,
       total1: 198,
       total2: 879,
       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: "风险监测项评分排行",
+        indicator: [],
+        yData: [],
+        name: "企业综合风险",
+        list: [],
       },
       tmObj: {
         gridTop: "15%",
@@ -309,6 +311,8 @@ export default {
       enterpriseComprehensiveRisk().then((res) => {
         if (res.code == 200) {
           let data = res.data || [];
+          this.tlObj.list = data;
+          this.tlTime("day");
         }
       });
       tendencyChart().then((res) => {
@@ -341,7 +345,40 @@ export default {
         }
       });
     },
+    tlTime(val) {
+      this.tlObj.indicator = [];
+      this.tlObj.yData = [];
+      let list = [];
+      let index = 0;
+      if (val == "day") {
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
+      }
+      if (val == "month") {
+        index = 2;
+      }
+      if (val == "season") {
+        index = 2;
+      }
+      if (val == "year") {
+        index = 2;
+      }
+      list = this.tlObj.list[index];
 
+      for (let i = 0; i < list.length; i++) {
+        let name = list[i]["riskName"].replace(/分析/, "");
+        name = name.replace(/异常/, "");
+        name = name.replace(/情况/, "");
+        if (name.indexOf("企业风险") == -1) {
+          this.tlObj.yData.push(list[i]["score"]);
+          this.tlObj.indicator.push({
+            name: name,
+          });
+        }
+      }
+    },
     tmTime(val) {
       if (val == "day") {
         this.leftData.value = 78;
@@ -380,24 +417,25 @@ export default {
       }
     },
     blTime(val) {
-      if (this.blObj.list.length < 2) {
-        return;
-      }
-      console.log(val)
       this.blObj.data = [];
       let list = [];
+      let index = 0;
       if (val == "day") {
-        this.totalData.name = "今日企业风险项量";
-        list = this.blObj.list[0];
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
       }
       if (val == "month") {
-        this.totalData.name = "近三月企业风险项量";
-        list = this.blObj.list[1];
+        index = 2;
+      }
+      if (val == "season") {
+        index = 2;
       }
       if (val == "year") {
-        this.totalData.name = "本年度企业风险项量";
-        list = this.blObj.list[2];
+        index = 2;
       }
+      list = this.blObj.list[index];
 
       let total = 0;
       for (let i = 0; i < list.length; i++) {
@@ -410,77 +448,78 @@ export default {
       this.totalData.value = total;
     },
     bmTime(val) {
-      if (this.bmObj.list.length < 2) {
-        return;
-      }
       this.bmObj.yData = [];
       this.bmObj.xData = [];
       this.bmObj.legend = [];
-      let data = [];
+      let list = [];
+      let index = 0;
       if (val == "day") {
-        data = this.bmObj.list[0];
+        index = 0;
+      }
+      if (val == "week") {
+        index = 0;
       }
       if (val == "month") {
-        data = this.bmObj.list[1];
+        index = 1;
+      }
+      if (val == "season") {
+        index = 1;
       }
       if (val == "year") {
-        data = this.bmObj.list[2];
+        index = 2;
       }
+      list = this.bmObj.list[index];
 
-      for (let i = 0; i < data.length; i++) {
-        if (!this.bmObj.xData.includes(data[i]["month"] + "月")) {
-          this.bmObj.xData.push(data[i]["month"] + "月");
+      for (let i = 0; i < list.length; i++) {
+        if (!this.bmObj.xData.includes(list[i]["month"] || i + "月")) {
+          this.bmObj.xData.push(list[i]["month"] || i + "月");
         }
-        if (!this.bmObj.legend.includes(data[i]["riskName"])) {
-          this.bmObj.legend.push(data[i]["riskName"]);
+        if (!this.bmObj.legend.includes(list[i]["riskName"])) {
+          this.bmObj.legend.push(list[i]["riskName"]);
         }
       }
-      let temp = groupByReduce(data, "riskName", "score");
+      let temp = groupByReduce(list, "riskName", "score");
+      console.log(temp);
       for (let i = 0; i < this.bmObj.legend.length; i++) {
         this.bmObj.yData.push(temp[this.bmObj.legend[i]]);
       }
+
+      console.log(this.bmObj);
     },
   },
 };
 </script>
-<style lang="less">
+
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
 .syntheticalWrap {
   height: 100%;
-  padding: 18px;
+  padding: 14px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
-
-  .riskRow {
-    flex: 1;
+  .screenRow {
+    height: 50%;
     display: flex;
-    .riskCol {
-      position: relative;
-      background: url("~@/assets/images/screen/line.png") no-repeat center
-        center;
-      background-size: 100% 100%;
+    .screenCol {
+      flex: 1;
+      height: 100%;
 
-      .chartPanel {
-        height: calc(100% - 40px);
-      }
-      .chartPanelBg {
-        position: absolute;
-        width: 60%;
-        height: 28px;
-        top: calc(50% - 44px);
-        left: 30%;
-        background-color: rgba(108, 128, 151, 0.1);
-      }
       .totalWrap {
         display: flex;
       }
+      .chartPanel {
+        height: calc(100% - 4.5vw);
+      }
+
+      .riskTotalPanel {
+        margin-top: 10px;
+      }
+
       .riskUpWrap {
+        height: 100%;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        height: calc(100% - 4vh);
-        display: flex;
+        justify-content: space-around;
         .left {
           width: 220px;
         }
@@ -491,9 +530,9 @@ export default {
           justify-content: center;
         }
         .totalTop {
+          flex: 1;
           display: flex;
           padding-left: 20px;
-          flex: 1;
           background: url("~@/assets/images/screen/zb1.png") no-repeat center
             center;
           background-size: 100% 100%;
@@ -503,9 +542,9 @@ export default {
           }
         }
         .totalMid {
+          flex: 1;
           display: flex;
           padding-left: 20px;
-          flex: 1;
           background: url("~@/assets/images/screen/zb2.png") no-repeat center
             center;
           background-size: 100% 100%;
@@ -515,9 +554,9 @@ export default {
           }
         }
         .totalBtm {
+          flex: 1;
           display: flex;
           padding-left: 20px;
-          flex: 1;
           background: url("~@/assets/images/screen/zb3.png") no-repeat center
             center;
           background-size: 100% 100%;
@@ -551,48 +590,6 @@ export default {
         }
       }
     }
-    .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";
-.syntheticalWrap {
-  .riskCol {
-    padding-left: vw(8);
-    font-size: vw(16);
-
-    .riskName {
-      height: vw(30);
-      display: flex;
-      margin-top: vw(6);
-      color: #d9e7ff;
-
-      .riskIcon {
-        width: vw(24);
-        height: vw(24);
-        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
-          center;
-        background-size: 100% 100%;
-      }
-    }
-    .totalWrap {
-      display: flex;
-      margin-top: vw(40);
-    }
-    .riskTotalPanel {
-      margin-top: vw(40);
-    }
   }
 }
 </style>
diff --git a/src/views/enterpriseTopic/personSafety/keyPerson.vue b/src/views/enterpriseTopic/personSafety/keyPerson.vue
index bb986bc..f2525f8 100644
--- a/src/views/enterpriseTopic/personSafety/keyPerson.vue
+++ b/src/views/enterpriseTopic/personSafety/keyPerson.vue
@@ -79,7 +79,7 @@ export default {
           total: 12,
         },
         {
-          name: "非防人员",
+          name: "非法上访人员",
           value: "3",
           total: 123,
         },
diff --git a/src/views/home/workspace.vue b/src/views/home/workspace.vue
index 4c32aa9..ff58aff 100644
--- a/src/views/home/workspace.vue
+++ b/src/views/home/workspace.vue
@@ -52,7 +52,7 @@
 <script>
 import rotateWrap from "@/loveflow/components/animate/rotate.vue";
 
-import { getCheckCode } from "@/utils/login";
+import { getInfo } from "@/utils/login";
 import headWrap from "./head.vue";
 export default {
   components: { headWrap, rotateWrap },
@@ -60,8 +60,7 @@ export default {
     return {};
   },
   created() {
-    let random = Math.random();
-    getCheckCode({ type: "math", s: random });
+    getInfo();
   },
   mounted() {
     let items = document.getElementsByClassName("ball");