keep-alive缓存

src/views/safetyEnvironmental/environmental/voc/vocManagement/index.vue

@@ -9,10 +9,11 @@
         <div class="itemBox">
           <div class="itemClass" v-for="(item, index) in realtimeList" :key='index'>
             <div class="itemSub">
-              <p class="itemNum">{{item.checkValue ? (item.checkValue).toFixed(2) : '-'}}</p>
+              <p class="itemNum">{{ item.checkValue ? (item.checkValue).toFixed(2) : '-' }}</p>
               <p class="itemDescribe" :title="item.name">
                 <img src="./../../../../../assets/images/detectionData.png" alt="">
-              {{item.name}}</p>
+                {{ item.name }}
+              </p>
             </div>
           </div>
         </div>
@@ -24,8 +25,8 @@
         <span>检测指标趋势图</span>
       </div>
       <!-- 搜索工作栏 -->
-      <search-area @submit="getTrend"/>
+      <search-area @submit="getTrend" />
-      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/>
+      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim" />
       <!-- 没有数据 -->
       <div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div>
     </div>
@@ -37,11 +38,11 @@ import LineChart from './../../components/lineChart'
 import SearchArea from './../../components/searchArea'
 import moment from 'moment'
 export default {
-  name: 'Voc',
+  name: 'VocManagement',
-  data(){
+  data() {
     return {
-      realtimeList:[],
+      realtimeList: [],
-      queryParams:{
+      queryParams: {
         checkType: 3,
         timeDim: null,
         timeRange: []
@@ -53,18 +54,18 @@ export default {
   mounted() {
     this.getMsg()
     this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-    this.queryParams.timeRange = [moment().startOf('day')+0, moment().endOf('day')-59*61*1000]
+    this.queryParams.timeRange = [moment().startOf('day') + 0, moment().endOf('day') - 59 * 61 * 1000]
     this.getTrend()
   },
   methods: {
     getMsg() {
-      environmentalCheckRealtime({checkType: 3}).then(res => {
+      environmentalCheckRealtime({ checkType: 3 }).then(res => {
         console.log(res)
         this.realtimeList = res.data || []
       })
     },
     getTrend() {
-      environmentalCheckRealtimeTrend({...this.queryParams}).then(res => {
+      environmentalCheckRealtimeTrend({ ...this.queryParams }).then(res => {
         if (res.code === 0) {
           this.chartData = res.data
         } else {
@@ -85,34 +86,41 @@ export default {
 <style lang='scss' scoped>
 .voc {
   background-color: #f2f4f9;
+
   .box1 {
     height: 172px;
     padding: 12px 16px 0;
     margin-bottom: 8px;
     background-color: #fff;
     border-radius: 9px;
+
     .itemBox {
       display: flex;
       flex-flow: row nowrap;
       overflow: auto;
+
       .itemClass {
         width: 198px;
         height: 88px;
         // border: 1px solid green;
         padding: 12px 0px 12px 18px;
+
         .itemSub {
           width: 176px;
           height: 65px;
           padding-right: 26px;
           border-right: 1px solid #E8E8E8;
-          P{
+
+          P {
             margin: 0;
+
             img {
               width: 24px;
               height: 24px;
               vertical-align: middle;
             }
           }
+
           .itemNum {
             font-size: 32px;
             font-weight: 600;
@@ -120,33 +128,41 @@ export default {
             color: #3E6AF7;
             text-align: right;
           }
+
           .itemDescribe {
             font-size: 16px;
             text-align: right;
-            white-space: nowrap; /* 防止换行 */
+            white-space: nowrap;
-            overflow: hidden; /* 隐藏超出部分 */
+            /* 防止换行 */
-            text-overflow: ellipsis; /* 添加省略号 */
+            overflow: hidden;
+            /* 隐藏超出部分 */
+            text-overflow: ellipsis;
+            /* 添加省略号 */
           }
         }
       }
     }
-    .itemClass:last-child > .itemSub{
+
+    .itemClass:last-child>.itemSub {
       border: none !important;
     }
   }
+
   .box2 {
     background-color: #fff;
     border-radius: 9px;
     padding: 16px;
     height: calc(100vh - 308px);
   }
+
   .boxTitle {
     display: inline-block;
     font-size: 16px;
     font-weight: 400;
     color: #000000;
-    margin:0 10px 20px 0;
+    margin: 0 10px 20px 0;
   }
+
   .blueTitle {
     content: '';
     display: inline-block;