From 90cdd2ff63477e3acd87dc5085e15271068bac36 Mon Sep 17 00:00:00 2001
From: e <2538815847@qq.com>
Date: Fri, 23 Feb 2024 17:06:32 +0800
Subject: [PATCH] update

---
 .../components/iconCard.vue                   |  79 ++++++++++
 .../components/leftCard.vue                   |  70 +++++++++
 .../components/rightCard.vue                  |  72 +++++++++
 .../components/timeSelect.vue                 |  27 +++-
 .../components/totalCard.vue                  |  45 ++++++
 src/views/enterpriseRiskIndex/synthetical.vue | 138 ++++--------------
 6 files changed, 318 insertions(+), 113 deletions(-)
 create mode 100644 src/views/enterpriseRiskIndex/components/iconCard.vue
 create mode 100644 src/views/enterpriseRiskIndex/components/leftCard.vue
 create mode 100644 src/views/enterpriseRiskIndex/components/rightCard.vue
 create mode 100644 src/views/enterpriseRiskIndex/components/totalCard.vue

diff --git a/src/views/enterpriseRiskIndex/components/iconCard.vue b/src/views/enterpriseRiskIndex/components/iconCard.vue
new file mode 100644
index 0000000..e707e20
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/iconCard.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="iconCardWrap">
+    <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>
+</template>
+<script>
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.iconCardWrap {
+  .riskLine {
+    display: flex;
+    .riskItem {
+      display: flex;
+      flex: 1;
+      margin-right: 18px;
+      padding-left: 10px;
+      align-items: center;
+      height: vh(122);
+      background: url("~@/assets/images/screen/error.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+      .riskItemLeft {
+        margin-right: 10px;
+        .icon {
+          width: vw(90);
+          height: vh(70);
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .riskItemRight {
+        flex: 1;
+        font-weight: 500;
+        font-family: PingFangSC, PingFang SC;
+        .riskItemName {
+          font-size: vh(18);
+          color: #c4e5ff;
+          line-height: vh(25);
+        }
+        .riskItemValue {
+          font-size: vh(28);
+          color: #ebf9ff;
+          line-height: vh(36);
+          letter-spacing: 1px;
+          text-shadow: 0px 0px 9px #159aff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/leftCard.vue b/src/views/enterpriseRiskIndex/components/leftCard.vue
new file mode 100644
index 0000000..fadd7bc
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/leftCard.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="leftCardWrap">
+    <div class="totalName">{{ dataObj.name }}</div>
+    <div class="totalValue">
+      <div class="item">
+        <div class="value">
+          {{ dataObj.value.toLocaleString() }}
+        </div>
+        <div class="label">个</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.leftCardWrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 20px;
+  margin-left: 3%;
+  padding-left: 20px;
+  flex: 1;
+  height: vh(80);
+  background: url("~@/assets/images/screen/zh.png") no-repeat center center;
+  background-size: 100% 100%;
+  .totalName {
+    margin-bottom: 4px;
+    font-size: vh(16);
+    font-weight: 500;
+    color: #d0deee;
+  }
+  .totalValue {
+    display: flex;
+    .item {
+      display: flex;
+      align-items: baseline;
+      margin-right: 20px;
+      font-weight: 500;
+      .label {
+        font-size: vh(14);
+        margin-right: 8px;
+        color: #ffffff;
+      }
+      .value {
+        font-size: vh(22);
+        margin-right: 4px;
+        color: #80d9ff;
+        letter-spacing: 1px;
+        text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/rightCard.vue b/src/views/enterpriseRiskIndex/components/rightCard.vue
new file mode 100644
index 0000000..0d66c21
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/rightCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="rightCardWrap">
+    <div class="totalName">增长趋势</div>
+    <div class="totalValue">
+      <div class="item">
+        <div class="label">同比增长</div>
+        <div class="value">{{ dataObj.tb }}%</div>
+      </div>
+      <div class="item">
+        <div class="label">环比增长</div>
+        <div class="value">{{ dataObj.hb }}%</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.rightCardWrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 20px;
+  padding-left: 20px;
+  margin-right: 5%;
+  flex: 2;
+  height: vh(80);
+  background: url("~@/assets/images/screen/zz.png") no-repeat center center;
+  background-size: 100% 100%;
+  .totalName {
+    margin-bottom: 4px;
+    font-size: vh(16);
+    font-weight: 500;
+    color: #d0deee;
+  }
+  .totalValue {
+    display: flex;
+    .item {
+      display: flex;
+      align-items: baseline;
+      margin-right: 20px;
+      font-weight: 500;
+      .label {
+        font-size: vh(14);
+        margin-right: 8px;
+        color: #ffffff;
+      }
+      .value {
+        font-size: vh(22);
+        margin-right: 4px;
+        color: #80fff0;
+        letter-spacing: 1px;
+        text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/timeSelect.vue b/src/views/enterpriseRiskIndex/components/timeSelect.vue
index b57502f..cdf74f1 100644
--- a/src/views/enterpriseRiskIndex/components/timeSelect.vue
+++ b/src/views/enterpriseRiskIndex/components/timeSelect.vue
@@ -1,12 +1,24 @@
 <template>
   <div class="chartOpt">
-    <div @click="changeTime('day')" :class="{ active: curTime == 'day' }">
+    <div
+      class="fontSize14"
+      @click="changeTime('day')"
+      :class="{ active: curTime == 'day' }"
+    >
       当日
     </div>
-    <div @click="changeTime('month')" :class="{ active: curTime == 'month' }">
+    <div
+      class="fontSize14"
+      @click="changeTime('month')"
+      :class="{ active: curTime == 'month' }"
+    >
       近三月
     </div>
-    <div @click="changeTime('year')" :class="{ active: curTime == 'year' }">
+    <div
+      class="fontSize14"
+      @click="changeTime('year')"
+      :class="{ active: curTime == 'year' }"
+    >
       本年度
     </div>
   </div>
@@ -38,9 +50,7 @@ export default {
     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%,
@@ -62,3 +72,10 @@ export default {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.chartOpt {
+  @import "@/loveflow/assets/index.scss";
+  height: vh(30);
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/components/totalCard.vue b/src/views/enterpriseRiskIndex/components/totalCard.vue
new file mode 100644
index 0000000..0201584
--- /dev/null
+++ b/src/views/enterpriseRiskIndex/components/totalCard.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="riskTotalWrap">
+    <div>{{ dataObj.name }}</div>
+    <div class="totalText">10000</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.riskTotalWrap {
+  margin-top: 46px;
+  margin-left: 2%;
+  width: 93%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: vh(46);
+  background: url("~@/assets/images/screen/total.png") no-repeat center center;
+  background-size: 100% 100%;
+  font-size: vh(18);
+  font-weight: 500;
+  color: #d0deee;
+  .totalText {
+    margin-left: 16px;
+    font-size: vh(26);
+    color: #ebf9ff;
+    letter-spacing: 3px;
+    text-shadow: 0px 0px 9px #159aff;
+  }
+}
+</style>
diff --git a/src/views/enterpriseRiskIndex/synthetical.vue b/src/views/enterpriseRiskIndex/synthetical.vue
index 699500d..e2b17a6 100644
--- a/src/views/enterpriseRiskIndex/synthetical.vue
+++ b/src/views/enterpriseRiskIndex/synthetical.vue
@@ -16,30 +16,8 @@
           <div class="riskNameText">企业综合风险趋势图</div>
         </div>
         <div class="totalWrap">
-          <div class="totalLeft">
-            <div class="totalName">综合风险总量</div>
-            <div class="totalValue">
-              <div class="item">
-                <div class="value">
-                  {{ total.toLocaleString() }}
-                </div>
-                <div class="label">个</div>
-              </div>
-            </div>
-          </div>
-          <div class="totalRight">
-            <div class="totalName">增长趋势</div>
-            <div class="totalValue">
-              <div class="item">
-                <div class="label">同比增长</div>
-                <div class="value">23%</div>
-              </div>
-              <div class="item">
-                <div class="label">环比增长</div>
-                <div class="value">23%</div>
-              </div>
-            </div>
-          </div>
+          <left-card :dataObj="leftData"></left-card>
+          <right-card :dataObj="rightData"></right-card>
         </div>
         <time-select @ok="tmTime" style="top: 35px"></time-select>
         <div class="chartPanel" style="height: calc(100% - 160px)">
@@ -63,10 +41,7 @@
           <div class="riskIcon"></div>
           <div class="riskNameText">全区企业风险预警总量</div>
         </div>
-        <div class="riskTotal">
-          <div>今日企业风险项量</div>
-          <div class="totalText">10000</div>
-        </div>
+        <total-card :dataObj="totalData"></total-card>
         <div class="chartPanelBg"></div>
         <div
           class="chartPanel"
@@ -178,10 +153,35 @@ 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";
 import pieOne from "@/loveflow/components/echart/pie/one.vue";
+import leftCard from "./components/leftCard.vue";
+import rightCard from "./components/rightCard.vue";
+import totalCard from "./components/totalCard.vue";
+
 export default {
-  components: { barOne, lineOne, timeSelect, radarOne, pieOne },
+  components: {
+    barOne,
+    lineOne,
+    timeSelect,
+    radarOne,
+    pieOne,
+    leftCard,
+    rightCard,
+    totalCard,
+  },
   data() {
     return {
+      leftData: {
+        name: "综合风险总量",
+        value: "21135",
+      },
+      rightData: {
+        tb: 12,
+        hb: 23,
+      },
+      totalData: {
+        name: "今日企业风险项量",
+        value: 10000,
+      },
       total: 21345,
       tlObj: {
         indicator: [
@@ -327,29 +327,7 @@ export default {
       background: url("~@/assets/images/screen/line.png") no-repeat center
         center;
       background-size: 100% 100%;
-      .riskTotal {
-        margin-top: 46px;
-        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;
-        }
-      }
+
       .chartPanel {
         height: calc(100% - 40px);
       }
@@ -364,62 +342,6 @@ export default {
       .totalWrap {
         display: flex;
         margin-top: 38px;
-        .totalLeft {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          margin-right: 20px;
-          margin-left: 3%;
-          padding-left: 20px;
-          flex: 1;
-          height: 80px;
-          background: url("~@/assets/images/screen/zh.png") no-repeat center
-            center;
-          background-size: 100% 100%;
-          .totalValue {
-            .item {
-              .value {
-                color: #80d9ff;
-              }
-            }
-          }
-        }
-        .totalRight {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          padding-left: 20px;
-          margin-right: 5%;
-          flex: 2;
-          height: 80px;
-          background: url("~@/assets/images/screen/zz.png") no-repeat center
-            center;
-          background-size: 100% 100%;
-        }
-        .totalName {
-          font-weight: 500;
-          color: #d0deee;
-        }
-        .totalValue {
-          display: flex;
-          .item {
-            display: flex;
-            align-items: baseline;
-            margin-right: 20px;
-            .label {
-              margin-right: 8px;
-              font-weight: 500;
-              color: #ffffff;
-            }
-            .value {
-              margin-right: 4px;
-              font-weight: 500;
-              color: #80fff0;
-              letter-spacing: 1px;
-              text-shadow: 0px 0px 8px rgba(21, 154, 255, 0.5);
-            }
-          }
-        }
       }
       .riskUpWrap {
         display: flex;