优化

src/views/ems/dzjk/home/index.vue

@@ -1,49 +1,53 @@
 <template>
   <div v-loading="loading">
     <el-row style="background: #fff" class="row-container" :gutter="15">
-      <el-col v-if="tableData.length > 0" :xs="24" :sm="24" :lg="24">
-        <alarm-table :tableData="tableData" />
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="6">
+      <el-col :xs="24" :sm="24" :lg="8">
         <el-card
-          shadow="always"
-          class="common-card-container common-card-container-body-no-padding"
+            shadow="always"
+            class="common-card-container common-card-container-body-no-padding"
         >
           <div slot="header">
             <span class="card-title">站点信息</span>
+            <div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
+              <i class="el-icon-message-solid"></i>
+            </div>
           </div>
           <div
-            style="box-sizing: border-box; height: 250px; padding: 20px 15px"
+              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
           >
             <el-descriptions class="home-normal-info" :column="1">
               <el-descriptions-item
-                size="mini"
-                v-for="(item, index) in singleZdInfo"
-                :key="index + 'singleZdInfo'"
-                :label="item.title"
-                >{{ info[item.attr] | formatNumber }}</el-descriptions-item
+                  size="mini"
+                  v-for="(item, index) in singleZdInfo"
+                  :key="index + 'singleZdInfo'"
+                  :label="item.title"
+              >{{ info[item.attr] | formatNumber }}
+              </el-descriptions-item
               >
             </el-descriptions>
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="16">
+        <cl-info :info="runningInfo.strategyTempInfo"/>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="12">
         <el-card
-          shadow="always"
-          class="common-card-container common-card-container-body-no-padding"
+            shadow="always"
+            class="common-card-container common-card-container-body-no-padding"
         >
           <div slot="header">
             <span class="card-title">总累计运行数据</span>
           </div>
           <div
-            style="box-sizing: border-box; height: 250px; padding: 20px 15px"
+              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
           >
             <el-row :gutter="20">
               <el-col
-                :span="12"
-                v-for="(item, index) in sjglData"
-                :key="index + 'sjglData'"
-                class="sjgl-data"
+                  :span="12"
+                  v-for="(item, index) in sjglData"
+                  :key="index + 'sjglData'"
+                  class="sjgl-data"
               >
                 <div class="sjgl-title">{{ item.title }}</div>
                 <div class="sjgl-value">
@@ -54,31 +58,57 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="10">
-        <cl-info :info="runningInfo.strategyTempInfo" />
+      <el-col :xs="24" :sm="24" :lg="12">
+        <el-card
+            shadow="always"
+            class="common-card-container common-card-container-body-no-padding"
+        >
+          <div slot="header">
+            <span class="card-title">收入对比数据</span>
+          </div>
+          <div
+              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
+          >
+            <el-row :gutter="20">
+              <el-col
+                  v-for="(item, index) in revenueData"
+                  :key="index + 'revenueData'"
+                  :span="index === 2 ? 24 : 12"
+                  class="sjgl-data"
+                  :style="{marginTop:index === 2 ? '40px' : 0}"
+              >
+                <div class="sjgl-title">{{ item.title }}</div>
+                <div class="sjgl-value">
+                  {{ runningInfo[item.attr] | formatNumber }}
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="24">
-        <week-chart ref="weekChart" />
+        <week-chart ref="weekChart"/>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="24">
-        <active-chart ref="activeChart" />
+        <active-chart ref="activeChart"/>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { getSingleSiteBaseInfo } from "@/api/ems/zddt";
-import { getDzjkHomeView } from "@/api/ems/dzjk";
+import {getSingleSiteBaseInfo} from "@/api/ems/zddt";
+import {getDzjkHomeView} from "@/api/ems/dzjk";
 import WeekChart from "./WeekChart.vue";
 import ActiveChart from "./ActiveChart.vue";
 import AlarmTable from "./AlarmTable.vue";
 import ClInfo from "./ClInfo.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
+
 export default {
   name: "DzjkSbjkHome",
-  components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
+  components: {WeekChart, ActiveChart, AlarmTable, ClInfo},
   mixins: [getQuerySiteId, intervalUpdate],
   data() {
     return {
@@ -110,6 +140,14 @@ export default {
           title: "今日放电量（kWh）",
           attr: "dayDisChargedCap",
         },
+        {
+          title: "昨日充电量（kWh）",
+          attr: "todo",
+        },
+        {
+          title: "昨日放电量（kWh）",
+          attr: "todo",
+        },
         {
           title: "总充电量（kWh）",
           attr: "totalChargedCap",
@@ -118,14 +156,20 @@ export default {
           title: "总放电量（kWh）",
           attr: "totalDischargedCap",
         },
-        {
-          title: "总收入（元）",
-          attr: "totalRevenue",
-        },
+      ],
+      revenueData: [
         {
           title: "当日实时收入（元）",
           attr: "dayRevenue",
         },
+        {
+          title: "昨日实时收入（元）",
+          attr: "todo",
+        },
+        {
+          title: "总收入（元）",
+          attr: "totalRevenue",
+        },
       ],
       info: {}, //基本信息
       runningInfo: {}, //总累计运行数据+报警表格
@@ -134,13 +178,16 @@ export default {
   computed: {
     tableData() {
       console.log(
-        "this.runningInfo?.siteMonitorHomeAlarmVo ",
-        this.runningInfo?.siteMonitorHomeAlarmVo
+          "this.runningInfo?.siteMonitorHomeAlarmVo ",
+          this.runningInfo?.siteMonitorHomeAlarmVo
       );
       return this.runningInfo?.siteMonitorHomeAlarmVo || [];
     },
   },
   methods: {
+    toAlarm() {
+      this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
+    },
     getBaseInfo() {
       return getSingleSiteBaseInfo(this.siteId).then((response) => {
         this.info = response?.data || {};
@@ -170,6 +217,21 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.alarm-msg {
+  background: #ffcec6;
+  width: 32px;
+  border-radius: 17px;
+  text-align: center;
+  font-size: 22px;
+  line-height: 30px;
+  cursor: pointer;
+  color: #ff4949;
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .row-container {
   & > .el-col {
     margin-bottom: 20px;
@@ -179,16 +241,19 @@ export default {
 //数据概览
 .sjgl-data {
   text-align: center;
+
   &:nth-child(1),
   &:nth-child(2),
   &:nth-child(3),
   &:nth-child(4) {
     margin-bottom: 25px;
   }
+
   .sjgl-title {
     color: #666666;
     line-height: 14px;
   }
+
   .sjgl-value {
     color: rgba(51, 51, 51, 1);
     font-size: 26px;
@@ -203,10 +268,12 @@ export default {
 <style lang="scss">
 .home-normal-info {
   font-size: 12px;
+
   .el-descriptions-item__container {
     .el-descriptions-item__label {
       color: #666666;
     }
+
     .el-descriptions-item__content {
       color: #333333;
     }