1.面包屑增加浏览器回退事件 2. 智享生活模块筛选框与核心指标外框样式调整

src/components/breadcrumb/iotBreadcrumb.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="home-breadcrumb">
-    <a-breadcrumb :separator="' 丨 '" style="cursor: default;">
-      <a-breadcrumb-item >
-        <span @click="toHome" style="cursor:pointer;">首页</span>
+    <div class="arrow-left" @click="backEvent">
+      <a-icon type="left">
+      </a-icon>
+    </div>
+
+    <a-breadcrumb :separator="' 丨 '" style="cursor: default">
+      <a-breadcrumb-item>
+        <span @click="toHome" style="cursor: pointer">首页</span>
       </a-breadcrumb-item>
       <a-breadcrumb-item v-for="item in levelList" :key="item.name">
-        <span >{{ item.meta.breadcrumb }}</span>
+        <span>{{ item.meta.breadcrumb }}</span>
       </a-breadcrumb-item>
     </a-breadcrumb>
     <br />
@@ -28,6 +33,9 @@ export default {
     this.getBreadcrumb();
   },
   methods: {
+    backEvent() {
+      window.history.back()
+    },
     getBreadcrumb() {
       this.levelList = [];
       let arr = this.$route.matched;
@@ -36,7 +44,7 @@ export default {
       }
     },
     toHome() {
-      this.$router.push({name: "dashboard"});
+      this.$router.push({ name: "dashboard" });
     },
     handleLink(item) {
       let path = item;
@@ -48,12 +56,21 @@ export default {
 
 <style lang="less" scoped>
 .home-breadcrumb {
-  height: 40px; 
+  height: 40px;
   margin: 10px 10px;
   border-radius: 4px;
-  // background-color: #ffffff;
+  background-color: #ffffff;
   padding-top: 10px;
   padding-left: 30px;
   font-size: 14px;
+  position: relative;
+  .arrow-left {
+    position: absolute;
+    width:10px;
+    height: 10px;
+    left: 8px;
+    top: 10px;
+    cursor: pointer;
+  }
 }
 </style>

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -10,48 +10,48 @@ export default {
   data() {
     let range = this.$util.dateUtil.getNearlyMonthRange();
     return {
-      today: this.$moment(range.endDate, 'YYYY/MM/DD'),
+      today: this.$moment(range.endDate, "YYYY/MM/DD"),
       envData: [],
       queryData: {
-        companyId: '0',
-        deptId: '0',
-        timeRange: range
+        companyId: "0",
+        deptId: "0",
+        timeRange: range,
       },
       coreData: [
         {
-          title: '累计检查人数(人/月)',
+          title: "累计检查人数(人/月)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
-          title: '健康人数(人/月)',
+          title: "健康人数(人/月)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
-          title: '亚健康人数(人/月)',
+          title: "亚健康人数(人/月)",
           num: 0,
-          unit: '元',
-          historyDesc: '同比',
-          historyNum: 0
+          unit: "元",
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
           type: 1,
           isHighLight: false,
-          title: '最多患病问题',
-          content: ''
+          title: "最多患病问题",
+          content: "",
         },
         {
           type: 1,
           isHighLight: false,
-          title: '值得关注',
+          title: "值得关注",
           showStar: true,
-          content: ''
+          content: "",
         },
-      ]
-    }
+      ],
+    };
   },
   components: {
     Query,
@@ -65,86 +65,92 @@ export default {
   },
   methods: {
     init() {
-      this.$util.asyncPromise(
-          this.getCoreData(),
-          this.getEnvInfo(),
-      );
-    },
-    reset() {
+      this.$util.asyncPromise(this.getCoreData(), this.getEnvInfo());
     },
+    reset() {},
     search(data) {
       this.$util.asyncPromise(
-          this.getCoreData(),
-          this.$refs.LifeHealthyHomeChart.getData(),
-      )
+        this.getCoreData(),
+        this.$refs.LifeHealthyHomeChart.getData()
+      );
     },
     getCoreData() {
-      return apiLifeHealthyHome.getCoreData(this.queryData).then(res=>{
-        this.coreData[0].num = res.list[0].value
-        this.coreData[0].historyNum = res.list[0].compare
-        this.coreData[1].num = res.list[1].value
-        this.coreData[1].historyNum = res.list[1].compare
-        this.coreData[2].num = res.list[2].value
-        this.coreData[2].historyNum = res.list[2].compare
-        this.coreData[3].content = res.list[3].value
-        this.coreData[4].content = res.worthAttention
-      })
+      return apiLifeHealthyHome.getCoreData(this.queryData).then((res) => {
+        this.coreData[0].num = res.list[0].value;
+        this.coreData[0].historyNum = res.list[0].compare;
+        this.coreData[1].num = res.list[1].value;
+        this.coreData[1].historyNum = res.list[1].compare;
+        this.coreData[2].num = res.list[2].value;
+        this.coreData[2].historyNum = res.list[2].compare;
+        this.coreData[3].content = res.list[3].value;
+        this.coreData[4].content = res.worthAttention;
+      });
     },
     getEnvInfo(date) {
       if (date) {
-        this.queryData['date'] = date;
+        this.queryData["date"] = date;
       } else {
-        this.queryData['date'] = this.today;
+        this.queryData["date"] = this.today;
       }
 
-      return apiLifeHealthyHome.getEnvironmentalDetection(this.queryData).then(res=>{
-        let envData = [];
-        res.forEach(item=>{
-          let obj = {};
-          obj['title'] = item.title.toUpperCase();
-          obj['value'] = item.value;
-          if (item.type == '1') {
-            obj['icon'] = 'life/'+item.key+'_green.png';
-          } else {
-            obj['icon'] = 'life/'+item.key+'_blue.png';
-          }
-          envData.push(obj)
+      return apiLifeHealthyHome
+        .getEnvironmentalDetection(this.queryData)
+        .then((res) => {
+          let envData = [];
+          res.forEach((item) => {
+            let obj = {};
+            obj["title"] = item.title.toUpperCase();
+            obj["value"] = item.value;
+            if (item.type == "1") {
+              obj["icon"] = "life/" + item.key + "_green.png";
+            } else {
+              obj["icon"] = "life/" + item.key + "_blue.png";
+            }
+            envData.push(obj);
+          });
+          this.envData = envData;
         });
-        this.envData = envData;
-      })
     },
     onEnvDateChange(val) {
       this.getEnvInfo(val);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <template>
   <div class="lifeHealthyHome">
-   <div class="page-query-core">
-     <a-row>
-       <a-col>
-         <div class="lifeHealthyHome-query">
-           <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
-                  :search="search"></Query>
-         </div>
-       </a-col>
-       <a-col>
-         <div class="lifeHealthyHome-core">
-           <Card title="核心指标">
-             <CoreData :data-list="coreData"></CoreData>
-           </Card>
-         </div>
-       </a-col>
-     </a-row>
-   </div>
-    <a-row >
+    <div class="page-query-core">
+      <a-row>
+        <a-col style="margin-bottom: 10px">
+          <div class="lifeHealthyHome-query">
+            <Query
+              :query-data.sync="queryData"
+              :show="['company', 'dept', 'time']"
+              :reset="reset"
+              :search="search"
+            ></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div class="lifeHealthyHome-core">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-row>
       <a-col :span="18">
         <div class="lifeHealthyHome-left">
           <div class="lifeHealthyHome-detail ioc-card-content">
             <Card title="小屋分析">
-              <LifeHealthyHomeChart ref="LifeHealthyHomeChart" :query-data="queryData" :height="430"></LifeHealthyHomeChart>
+              <LifeHealthyHomeChart
+                ref="LifeHealthyHomeChart"
+                :query-data="queryData"
+                :height="430"
+              ></LifeHealthyHomeChart>
             </Card>
           </div>
         </div>
@@ -154,32 +160,79 @@ export default {
           <div class="lifeHealthyHome-top ioc-card-content">
             <Card title="环境监测">
               <template #title-extra>
-                <a-date-picker size="small" style="width: 120px" :default-value="today" :valueFormat="'YYYY/MM/DD'" @change="onEnvDateChange" />
+                <a-date-picker
+                  size="small"
+                  style="width: 120px"
+                  :default-value="today"
+                  :valueFormat="'YYYY/MM/DD'"
+                  @change="onEnvDateChange"
+                />
               </template>
 
-              <a-row :gutter="[12,18]" style="padding: 12px">
-                <a-col style="color: #B3B3B3">
-                  <div style="width: 50%;display: inline-block;text-align: center">
-                    <span style="background-color: #73e6ac;display: inline-block;width: 14px;height: 14px;"></span>
-                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室内</span>
+              <a-row :gutter="[12, 18]" style="padding: 12px">
+                <a-col style="color: #b3b3b3">
+                  <div
+                    style="
+                      width: 50%;
+                      display: inline-block;
+                      text-align: center;
+                    "
+                  >
+                    <span
+                      style="
+                        background-color: #73e6ac;
+                        display: inline-block;
+                        width: 14px;
+                        height: 14px;
+                      "
+                    ></span>
+                    <span
+                      style="
+                        display: inline-block;
+                        vertical-align: text-bottom;
+                        margin-left: 12px;
+                      "
+                      >室内</span
+                    >
                   </div>
-                  <div style="width: 50%;display: inline-block;text-align: center">
-                    <span style="background-color: #80d4ff;display: inline-block;width: 14px;height: 14px"></span>
-                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室外</span>
+                  <div
+                    style="
+                      width: 50%;
+                      display: inline-block;
+                      text-align: center;
+                    "
+                  >
+                    <span
+                      style="
+                        background-color: #80d4ff;
+                        display: inline-block;
+                        width: 14px;
+                        height: 14px;
+                      "
+                    ></span>
+                    <span
+                      style="
+                        display: inline-block;
+                        vertical-align: text-bottom;
+                        margin-left: 12px;
+                      "
+                      >室外</span
+                    >
                   </div>
                 </a-col>
-                <a-col :span="12" v-for="(item,index) in envData" :key="index" >
-                  <LifeHealthyHomeMonitor :title="item.title" :value="item.value" :icon="item.icon"></LifeHealthyHomeMonitor>
+                <a-col :span="12" v-for="(item, index) in envData" :key="index">
+                  <LifeHealthyHomeMonitor
+                    :title="item.title"
+                    :value="item.value"
+                    :icon="item.icon"
+                  ></LifeHealthyHomeMonitor>
                 </a-col>
               </a-row>
             </Card>
           </div>
         </div>
       </a-col>
-
-
     </a-row>
-
   </div>
 </template>
 
@@ -191,6 +244,10 @@ export default {
   vertical-align: top;
   .lifeHealthyHome-query {
     width: 100%;
+    background: #fff;
+    height: 60px;
+    padding: 10px;
+    border-radius: 5px;
   }
   .lifeHealthyHome-core {
     width: 100%;
@@ -218,4 +275,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/life/parking/lifeParking.vue

@@ -14,50 +14,50 @@ export default {
     let range = this.$util.dateUtil.getNearlyMonthRange();
     return {
       chartsHeight: 290,
-      topSelect: '5',
+      topSelect: "5",
       queryData: {
-        companyId: '0',
-        deptId: '0',
-        timeRange: range
+        companyId: "0",
+        deptId: "0",
+        timeRange: range,
       },
       coreData: [
         {
-          title: '车位数量(个)',
+          title: "车位数量(个)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
-          title: '平均停车数量(辆/天)',
+          title: "平均停车数量(辆/天)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
-          title: '违停数量(辆)',
+          title: "违停数量(辆)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
-          title: '车位使用率',
+          title: "车位使用率",
           num: 0,
           unit: "%",
-          historyDesc: '同比',
-          historyNum: 0
+          historyDesc: "同比",
+          historyNum: 0,
         },
         {
           type: 1,
           isHighLight: false,
-          title: '值得关注',
+          title: "值得关注",
           showStar: true,
-          content: ''
+          content: "",
         },
       ],
       oriEmptyParks: [],
       emptyParks: [],
       parkDetails: [],
-    }
+    };
   },
   components: {
     Query,
@@ -69,70 +69,72 @@ export default {
     LifeParkingTopChart,
     LifeParkDetailTable,
   },
-  created() {
-  },
+  created() {},
   mounted() {
     this.init();
   },
   methods: {
     init() {
       this.$util.asyncPromise(
-          this.getCoreData(),
-          this.getEmptyPark(),
-          this.getParkDetail()
-      )
-    },
-    reset() {
+        this.getCoreData(),
+        this.getEmptyPark(),
+        this.getParkDetail()
+      );
     },
+    reset() {},
     search(data) {
       this.$util.asyncPromise(
-          this.getCoreData(),
-          this.getEmptyPark(),
-          this.getParkDetail(),
-          this.$refs.LifeParkConsumeChart.getData(),
-          this.$refs.LifeParkTrendChart.getData(),
-          this.$refs.LifeParkUnNormalChart.getData(),
-      )
+        this.getCoreData(),
+        this.getEmptyPark(),
+        this.getParkDetail(),
+        this.$refs.LifeParkConsumeChart.getData(),
+        this.$refs.LifeParkTrendChart.getData(),
+        this.$refs.LifeParkUnNormalChart.getData()
+      );
     },
     getCoreData() {
-      return apiLifePark.getCoreData(this.queryData).then(res => {
-        this.coreData[0].num = res.list[0].value
-        this.coreData[0].historyNum = res.list[0].compare
-        this.coreData[1].num = res.list[1].value
-        this.coreData[1].historyNum = res.list[1].compare
-        this.coreData[2].num = res.list[2].value
-        this.coreData[2].historyNum = res.list[2].compare
-        this.coreData[3].num = res.list[3].value
-        this.coreData[3].historyNum = res.list[3].compare
-        this.coreData[4].content = res.worthAttention
-      })
+      return apiLifePark.getCoreData(this.queryData).then((res) => {
+        this.coreData[0].num = res.list[0].value;
+        this.coreData[0].historyNum = res.list[0].compare;
+        this.coreData[1].num = res.list[1].value;
+        this.coreData[1].historyNum = res.list[1].compare;
+        this.coreData[2].num = res.list[2].value;
+        this.coreData[2].historyNum = res.list[2].compare;
+        this.coreData[3].num = res.list[3].value;
+        this.coreData[3].historyNum = res.list[3].compare;
+        this.coreData[4].content = res.worthAttention;
+      });
     },
     getEmptyPark() {
-      return apiLifePark.getVacantParkingSpace(this.queryData).then(res=>{
-        this.oriEmptyParks = res
+      return apiLifePark.getVacantParkingSpace(this.queryData).then((res) => {
+        this.oriEmptyParks = res;
         this.handleTopChange();
-      })
+      });
     },
     handleTopChange() {
-      this.emptyParks = this.oriEmptyParks.slice(0, this.topSelect)
+      this.emptyParks = this.oriEmptyParks.slice(0, this.topSelect);
     },
     getParkDetail() {
-      return apiLifePark.getParkingSpaceDetails(this.queryData).then(res=>{
-        this.parkDetails = res
-      })
+      return apiLifePark.getParkingSpaceDetails(this.queryData).then((res) => {
+        this.parkDetails = res;
+      });
     },
-  }
-}
+  },
+};
 </script>
 
 <template>
   <div class="lifeParking">
     <div class="page-query-core">
       <a-row>
-        <a-col>
+        <a-col style="margin-bottom: 10px">
           <div class="lifeParking-query">
-            <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
-                   :search="search"></Query>
+            <Query
+              :query-data.sync="queryData"
+              :show="['company', 'dept', 'time']"
+              :reset="reset"
+              :search="search"
+            ></Query>
           </div>
         </a-col>
         <a-col>
@@ -145,22 +147,34 @@ export default {
       </a-row>
     </div>
     <div style="margin-top: 12px">
-      <a-row :gutter="[12,12]" >
+      <a-row :gutter="[12, 12]">
         <a-col :span="18">
           <div class="lifeParking-trend ioc-card-content">
             <Card title="车流态势">
-              <LifeParkTrendChart ref="LifeParkTrendChart" :queryData="queryData" :height="320"></LifeParkTrendChart>
+              <LifeParkTrendChart
+                ref="LifeParkTrendChart"
+                :queryData="queryData"
+                :height="320"
+              ></LifeParkTrendChart>
             </Card>
           </div>
         </a-col>
         <a-col :span="6">
           <div class="lifeParking-top ioc-card-content">
             <Card title="空置车位">
-              <div style="height: 340px;overflow-y: auto">
-                <LifeParkingTopChart :tableData="emptyParks"></LifeParkingTopChart>
+              <div style="height: 340px; overflow-y: auto">
+                <LifeParkingTopChart
+                  :tableData="emptyParks"
+                ></LifeParkingTopChart>
               </div>
               <template #title-extra>
-                <a-select v-model="topSelect" default-value="5" style="width: 100px;" size="small" @change="handleTopChange">
+                <a-select
+                  v-model="topSelect"
+                  default-value="5"
+                  style="width: 100px"
+                  size="small"
+                  @change="handleTopChange"
+                >
                   <a-select-option value="5">TOP5</a-select-option>
                   <a-select-option value="10">TOP10</a-select-option>
                   <a-select-option value="15">TOP15</a-select-option>
@@ -170,34 +184,38 @@ export default {
           </div>
         </a-col>
         <a-col :span="9">
-          <div class="lifeParking-unNormal  ioc-card-content">
+          <div class="lifeParking-unNormal ioc-card-content">
             <Card title="违停情况">
-              <LifeParkUnNormalChart ref="LifeParkUnNormalChart" :queryData="queryData" :height="390"></LifeParkUnNormalChart>
+              <LifeParkUnNormalChart
+                ref="LifeParkUnNormalChart"
+                :queryData="queryData"
+                :height="390"
+              ></LifeParkUnNormalChart>
             </Card>
           </div>
         </a-col>
         <a-col :span="9">
-          <div class="lifeParking-consume  ioc-card-content">
+          <div class="lifeParking-consume ioc-card-content">
             <Card title="占用车位数量">
-              <LifeParkConsumeChart ref="LifeParkConsumeChart" :queryData="queryData" :height="390"></LifeParkConsumeChart>
+              <LifeParkConsumeChart
+                ref="LifeParkConsumeChart"
+                :queryData="queryData"
+                :height="390"
+              ></LifeParkConsumeChart>
             </Card>
           </div>
         </a-col>
         <a-col :span="6">
           <div class="lifeParking-detail ioc-card-content">
             <Card title="车位详情">
-              <div style="height: 340px;overflow-y: auto">
+              <div style="height: 340px; overflow-y: auto">
                 <LifeParkDetailTable :data="parkDetails"></LifeParkDetailTable>
               </div>
             </Card>
           </div>
         </a-col>
-
-
       </a-row>
     </div>
-
-
   </div>
 </template>
 
@@ -211,6 +229,10 @@ export default {
 
   .lifeParking-query {
     width: 100%;
+    background: #fff;
+    height: 60px;
+    padding: 10px;
+    border-radius: 5px;
   }
 
   .lifeParking-core {
@@ -242,7 +264,6 @@ export default {
     height: 390px;
     overflow-y: hidden;
   }
-
 }
 
 /deep/ .lifeParking-top .ant-select-selection {
@@ -250,6 +271,6 @@ export default {
   border: none;
   border-radius: 6px;
   padding: 0px 12px;
-  color: #B2B2B2;
+  color: #b2b2b2;
 }
-</style>
+</style>

src/components/life/restaurant/lifeRestaurant.vue

@@ -269,8 +269,7 @@ export default {
     background: #fff;
     height: 60px;
     padding: 10px;
-    border-radius: 3px;
-    box-shadow: 1px 1px 4px #ccc;
+    border-radius: 5px;
   }
   .lifeRestaurant-core {
     width: 100%;

src/components/life/supermarket/lifeSupermarket.vue

@@ -10,50 +10,50 @@ export default {
   data() {
     let range = this.$util.dateUtil.getNearlyMonthRange();
     return {
-      orderSelect: 'desc',
+      orderSelect: "desc",
       queryData: {
-        companyId: '0',
-        deptId: '0',
-        timeRange: range
+        companyId: "0",
+        deptId: "0",
+        timeRange: range,
       },
       productRanks: [],
       coreData: [
         {
           type: 0,
-          title: '消费总额(万元)',
+          title: "消费总额(万元)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: '0'
+          historyDesc: "同比",
+          historyNum: "0",
         },
         {
           type: 0,
-          title: '交易单数',
+          title: "交易单数",
           num: 0,
-          historyDesc: '同比',
-          historyNum: '0'
+          historyDesc: "同比",
+          historyNum: "0",
         },
         {
           type: 0,
-          title: '人均消费金额(元)',
+          title: "人均消费金额(元)",
           num: 0,
-          historyDesc: '同比',
-          historyNum: '0'
+          historyDesc: "同比",
+          historyNum: "0",
         },
         {
           type: 0,
-          title: '平均单价(元)',
+          title: "平均单价(元)",
           num: 0,
-          historyDesc: '环比',
-          historyNum: '0'
+          historyDesc: "环比",
+          historyNum: "0",
         },
         {
           type: 1,
-          title: '值得关注',
+          title: "值得关注",
           showStar: true,
-          content: ''
+          content: "",
         },
-      ]
-    }
+      ],
+    };
   },
   components: {
     Query,
@@ -62,69 +62,71 @@ export default {
     LifeSupermarketAnalysisChart,
     LifeSupermarketTopTable,
   },
-  created() {
-  },
+  created() {},
   mounted() {
     this.init();
   },
   methods: {
     init() {
-      this.$util.asyncPromise(
-          this.getCoreData(),
-          this.getProductRanking()
-      )
-    },
-    reset() {
+      this.$util.asyncPromise(this.getCoreData(), this.getProductRanking());
     },
+    reset() {},
     search(data) {
       this.$util.asyncPromise(
-          this.getCoreData(),
-          this.$refs.LifeSupermarketAnalysisChart.getData(),
-          this.getProductRanking(),
-      )
-      this.$forceUpdate()
+        this.getCoreData(),
+        this.$refs.LifeSupermarketAnalysisChart.getData(),
+        this.getProductRanking()
+      );
+      this.$forceUpdate();
     },
     getCoreData() {
-      return apiLifeSupermarket.getCoreData(this.queryData).then(res=>{
-        this.coreData[0].num = res.list[0].value
-        this.coreData[0].historyNum = res.list[0].compare
-        this.coreData[1].num = res.list[1].value
-        this.coreData[1].historyNum = res.list[1].compare
-        this.coreData[2].num = res.list[2].value
-        this.coreData[2].historyNum = res.list[2].compare
-        this.coreData[3].num = res.list[3].value
-        this.coreData[3].historyNum = res.list[3].compare
-        this.coreData[4].content = res.worthAttention
-      })
+      return apiLifeSupermarket.getCoreData(this.queryData).then((res) => {
+        this.coreData[0].num = res.list[0].value;
+        this.coreData[0].historyNum = res.list[0].compare;
+        this.coreData[1].num = res.list[1].value;
+        this.coreData[1].historyNum = res.list[1].compare;
+        this.coreData[2].num = res.list[2].value;
+        this.coreData[2].historyNum = res.list[2].compare;
+        this.coreData[3].num = res.list[3].value;
+        this.coreData[3].historyNum = res.list[3].compare;
+        this.coreData[4].content = res.worthAttention;
+      });
     },
     getProductRanking() {
-      return apiLifeSupermarket.getProductRanking(this.queryData).then(res=>{
-        this.productRanks = res;
-        this.handleRankOrder()
-      })
+      return apiLifeSupermarket
+        .getProductRanking(this.queryData)
+        .then((res) => {
+          this.productRanks = res;
+          this.handleRankOrder();
+        });
     },
     handleRankOrder() {
-      if (this.orderSelect == 'asc') {
-        this.productRanks = this.productRanks.sort((a,b)=>{
-          return Number(a.salesvolume)-Number(b.salesvolume);
-        })
+      if (this.orderSelect == "asc") {
+        this.productRanks = this.productRanks.sort((a, b) => {
+          return Number(a.salesvolume) - Number(b.salesvolume);
+        });
       } else {
-        this.productRanks = this.productRanks.sort((a,b)=>{
-          return Number(b.salesvolume)-Number(a.salesvolume);
-        })
+        this.productRanks = this.productRanks.sort((a, b) => {
+          return Number(b.salesvolume) - Number(a.salesvolume);
+        });
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <template>
   <div class="lifeSupermarket">
     <div class="page-query-core">
       <a-row>
-        <a-col>
+        <a-col style="margin-bottom: 10px">
           <div class="lifeSupermarket-query">
-            <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset" :search="search"></Query>
+            <Query
+              :query-data.sync="queryData"
+              :show="['company', 'dept', 'time']"
+              :reset="reset"
+              :search="search"
+            ></Query>
           </div>
         </a-col>
         <a-col>
@@ -136,12 +138,16 @@ export default {
         </a-col>
       </a-row>
     </div>
-    <a-row >
+    <a-row>
       <a-col :span="18">
         <div class="lifeSupermarket-left">
           <div class="lifeSupermarket-detail ioc-card-content">
             <Card title="商超分析">
-              <LifeSupermarketAnalysisChart ref="LifeSupermarketAnalysisChart" :query-data="queryData" :height="430"></LifeSupermarketAnalysisChart>
+              <LifeSupermarketAnalysisChart
+                ref="LifeSupermarketAnalysisChart"
+                :query-data="queryData"
+                :height="430"
+              ></LifeSupermarketAnalysisChart>
             </Card>
           </div>
         </div>
@@ -150,11 +156,20 @@ export default {
         <div class="lifeSupermarket-right">
           <div class="lifeSupermarket-top ioc-card-content">
             <Card title="商品排行">
-              <div style="height: 440px;overflow-y: auto">
-                <LifeSupermarketTopTable :tableData="productRanks" style="padding: 0 8px;"></LifeSupermarketTopTable>
+              <div style="height: 440px; overflow-y: auto">
+                <LifeSupermarketTopTable
+                  :tableData="productRanks"
+                  style="padding: 0 8px"
+                ></LifeSupermarketTopTable>
               </div>
               <template #title-extra>
-                <a-select v-model="orderSelect" default-value="5" style="width: 100px;" size="small" @change="handleRankOrder">
+                <a-select
+                  v-model="orderSelect"
+                  default-value="5"
+                  style="width: 100px"
+                  size="small"
+                  @change="handleRankOrder"
+                >
                   <a-select-option value="asc">正序</a-select-option>
                   <a-select-option value="desc">倒序</a-select-option>
                 </a-select>
@@ -163,10 +178,7 @@ export default {
           </div>
         </div>
       </a-col>
-
-
     </a-row>
-
   </div>
 </template>
 
@@ -179,6 +191,10 @@ export default {
   padding-bottom: 12px;
   .lifeSupermarket-query {
     width: 100%;
+    background: #fff;
+    height: 60px;
+    padding: 10px;
+    border-radius: 5px;
   }
   .lifeSupermarket-core {
     width: 100%;
@@ -212,6 +228,6 @@ export default {
   border: none;
   border-radius: 6px;
   padding: 0px 12px;
-  color: #B2B2B2;
+  color: #b2b2b2;
 }
-</style>
+</style>