update

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: [

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>

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,

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: [

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: [

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",

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%;
     }
   }
 }

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>

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);

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;

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>

src/views/enterpriseTopic/personSafety/keyPerson.vue

@@ -79,7 +79,7 @@ export default {
           total: 12,
         },
         {
-          name: "非防人员",
+          name: "非法上访人员",
           value: "3",
           total: 123,
         },

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");