调整数据首页样式

src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js

@@ -56,6 +56,7 @@ const actions = {
       })
       .catch(err => {
         console.error(err);
+        commit(FETCH_DATA, false);
       });
   },
 };

src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js

@@ -55,6 +55,7 @@ const actions = {
       })
       .catch(err => {
         console.error(err);
+        commit(FETCH_DATA, false);
       });
   },
 };

src/containers/Dashboard/Dashboard.js

@@ -103,20 +103,25 @@ const actions = {
       data: {
         ...entity,
       },
-    }).then(res => {
-      let list = res.data;
-      if (data && data.updatePercentList) {
-        commit(GET_PERCENT_DATA, list);
-        commit(GET_EUIPMENT_DATA, list);
-        commit(LOADING_SERVICE, false);
-      } else if (data && data.updateEuipmentList) {
-        commit(GET_EUIPMENT_DATA, list);
-        commit(LOADING_EQUIPMENT, false);
-      } else {
-        commit(GET_CONSUME_DATA, list);
+    })
+      .then(res => {
+        let list = res.data;
+        if (data && data.updatePercentList) {
+          commit(GET_PERCENT_DATA, list);
+          commit(GET_EUIPMENT_DATA, list);
+          commit(LOADING_SERVICE, false);
+        } else if (data && data.updateEuipmentList) {
+          commit(GET_EUIPMENT_DATA, list);
+          commit(LOADING_EQUIPMENT, false);
+        } else {
+          commit(GET_CONSUME_DATA, list);
+          commit(LOADING_AREA, false);
+        }
+      })
+      .catch(err => {
+        console.error(err);
         commit(LOADING_AREA, false);
-      }
-    });
+      });
   },
   fetchReportList({ commit }, entity) {
     commit(LOADING_REGIST, true);

src/containers/Dashboard/Dashboard.vue

@@ -95,14 +95,18 @@ export default {
     }
     .el-input,
     .filter-item-label {
-      width: auto;
+      min-width: 40px;
     }
     .Dashboard-Radio {
       display: flex;
       align-items: center;
       justify-self: flex-end;
       .Dashboard-Radio-item {
-        margin: 0 10px 0 0;
+        font-size: 12px;
+        margin: 0 5px 0 0;
+        .el-radio__label {
+          padding-left: 2px;
+        }
       }
     }
   }
@@ -113,12 +117,17 @@ export default {
       border-bottom: 1px solid #f1f1f1;
       .filter-item {
         margin: 0 0 0 10px;
+        .filter-item-input {
+          width: auto;
+        }
       }
     }
     .Dashboard-DataCard {
-      flex: 2;
+      &:first-child {
+        flex: 2;
+      }
       &:nth-child(2) {
-        flex: 2.5;
+        flex: 2;
       }
       &:last-child {
         flex: 1;
@@ -168,12 +177,12 @@ export default {
     // height: 400px;
     .Dashboard-SearchBar {
       align-items: center;
-      justify-content: space-around;
+      justify-content: space-between;
       padding: 0;
       height: 70px;
       border-bottom: 1px solid #f1f1f1;
       .filter-item {
-        margin: 0 10px 0 0;
+        margin: 0 0 0 10px;
         .filter-item-input---normal {
           width: 113px;
         }
@@ -205,17 +214,22 @@ export default {
       }
     }
     .Dashboard-DataCard {
-      flex: 2;
+      &:first-child {
+        flex: 2;
+      }
       &:nth-child(2) {
         flex: 1.5;
       }
+      &:last-child {
+        flex: 1.5;
+      }
     }
   }
 }
 @media screen and (max-width: $bigScreenWidth) {
   .Dashboard {
     .Dashboard-title {
-      font-size: 16px;
+      font-size: 14px;
     }
     .Dashboard-SearchBar {
       padding: 10px 0 10px;

src/containers/Dashboard/EquipmentList/EquipmentListChart.vue

 <template>
-  <div class="Dashboard-Equipment">
-    <div
-      v-for="(item, index) in data.slice(0, 5)"
-      :key="index"
-      class="Dashboard-Equipment-item"
-    >
+  <div
+    class="Dashboard-Equipment"
+    :style="`width:${width}px`"
+  >
+    <template v-if="show">
       <div
-        class="Dashboard-Equipment-icon"
-        v-if="index === 0"
+        v-for="(item, index) in data.slice(0, 5)"
+        :key="index"
+        class="Dashboard-Equipment-item"
       >
-        <img src="@/assets/images/dashboard/icon_no.1@2x.png" />
+        <div
+          class="Dashboard-Equipment-icon"
+          v-if="index === 0"
+        >
+          <img src="@/assets/images/dashboard/icon_no.1@2x.png" />
+        </div>
+        <div
+          class="Dashboard-Equipment-icon"
+          v-else-if="index === 1"
+        >
+          <img src="@/assets/images/dashboard/icon_no.2@2x.png" />
+        </div>
+        <div
+          class="Dashboard-Equipment-icon"
+          v-else-if="index === 2"
+        >
+          <img src="@/assets/images/dashboard/icon_no.3@2x.png" />
+        </div>
+        <div
+          class="Dashboard-Equipment-icon"
+          v-else-if="index === 3"
+        >
+          <img src="@/assets/images/dashboard/icon_4@2x.png" />
+        </div>
+        <div
+          class="Dashboard-Equipment-icon"
+          v-else
+        >
+          <img src="@/assets/images/dashboard/icon_5@2x.png" />
+        </div>
+        <div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
+        <div
+          class="Dashboard-Equipment-location"
+          :title="item.equipmentPosition"
+        >
+          {{ item.equipmentPosition }}
+        </div>
+        <div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div>
       </div>
-      <div
-        class="Dashboard-Equipment-icon"
-        v-else-if="index === 1"
-      >
-        <img src="@/assets/images/dashboard/icon_no.2@2x.png" />
-      </div>
-      <div
-        class="Dashboard-Equipment-icon"
-        v-else-if="index === 2"
-      >
-        <img src="@/assets/images/dashboard/icon_no.3@2x.png" />
-      </div>
-      <div
-        class="Dashboard-Equipment-icon"
-        v-else
-      >NO.{{ index + 1 }}</div>
-      <div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
-      <div
-        class="Dashboard-Equipment-location"
-        :title="item.equipmentPosition"
-      >
-        {{ item.equipmentPosition }}
-      </div>
-      <div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -48,6 +61,19 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      show: false,
+      width: 0,
+    };
+  },
+  mounted() {
+    let boxDom = document.querySelector('.EquipmentList');
+    let listDom = document.querySelector('.Dashboard-Equipment');
+    this.width = boxDom.clientWidth;
+
+    this.show = true;
+  },
 };
 </script>
 
@@ -80,7 +106,7 @@ export default {
       width: 64px;
     }
     .Dashboard-Equipment-location {
-      width: 200px;
+      width: 160px;
       height: 1em;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -89,7 +115,7 @@ export default {
     .Dashboard-Equipment-money {
       font-size: 16px;
       text-align: right;
-      width: 116px;
+      width: 100px;
     }
   }
 }