Browse Source

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
首页图表修改

1004749546@qq.com 4 years ago
parent
commit
b248006176
4 changed files with 204 additions and 176 deletions
  1. 4 1
      src/components/Echarts/bar.vue
  2. 11 11
      src/components/Echarts/line.vue
  3. 51 50
      src/components/Echarts/pie.vue
  4. 138 114
      src/views/Home.vue

+ 4 - 1
src/components/Echarts/bar.vue

@@ -27,7 +27,7 @@ export default {
     },
     // y轴坐标最大值
     yMax: {
-      type: Number,
+      type: [Number, String],
       default: 100
     },
     // y轴坐标单位
@@ -57,6 +57,8 @@ export default {
           if (nVal.length > 25) {
             this.isShowZoom = true
             this.xZoomEnd = 80
+          } else {
+            this.isShowZoom = false
           }
           if (nVal.length > 30) {
             this.xZoomEnd = 70
@@ -166,6 +168,7 @@ export default {
         // console.log(option.series, 'ppppppp')
         this.dom = echarts.init(this.$refs.dom, 'tdTheme')
         this.dom.setOption(option)
+        this.dom.resize() // 解决首次加载宽度超出容器bug
         on(window, 'resize', this.resize)
       })
     }

+ 11 - 11
src/components/Echarts/line.vue

@@ -53,27 +53,26 @@ export default {
       handler (nVal, oVal) {
         // console.log(nVal, 'nnnnnnnn')
         if (nVal) {
-          // 根据x轴时间长度控制滚动条位置及显示状态 营业额x轴长度大于15 或者 检测率x轴长度大于25时,显示滚动条并且滚动条结束位置在80%
-          // this.yMax > 100 为营业数据 营业数据宽近为右侧屏幕的1/2
-          if ((nVal.length > 10 && this.yMax > 100) || nVal.length > 25) {
+          // 根据x轴时间长度控制滚动条位置及显示状态 x轴长度大于25时,显示滚动条并且滚动条结束位置在80%
+          if (nVal.length > 25) {
             this.isShowZoom = true
             this.xZoomEnd = 80
+          } else {
+            this.isShowZoom = false
           }
-          // 营业额x轴长度大于20 滚动条结束位置在70%
-          if ((nVal.length > 15 && this.yMax > 100) || nVal.length > 30) {
+          if (nVal.length > 30) {
             this.xZoomEnd = 70
           }
-          // 营业额x轴长度大于25 滚动条结束位置在60%
-          if ((nVal.length >= 25 && this.yMax > 100) || nVal.length > 35) {
+          if (nVal.length > 35) {
             this.xZoomEnd = 60
           }
-          if (nVal.length > 40 || (nVal.length >= 30 && this.yMax > 100)) {
+          if (nVal.length > 40) {
             this.xZoomEnd = 50
           }
-          if (nVal.length > 45 || (nVal.length >= 35 && this.yMax > 100)) {
+          if (nVal.length > 45) {
             this.xZoomEnd = 40
           }
-          if (nVal.length > 50 || (nVal.length >= 40 && this.yMax > 100)) {
+          if (nVal.length > 50) {
             this.xZoomEnd = 30
           }
           this.pageInit()
@@ -94,7 +93,7 @@ export default {
   },
   data () {
     return {
-      dom: null,
+      dom: null, // echarts实例对象
       isShowZoom: false, // 是否展示滚动条
       xZoomEnd: 100 // x轴滚动条结束位置
     }
@@ -175,6 +174,7 @@ export default {
         // console.log(option.series, 'ppppppp')
         this.dom = echarts.init(this.$refs.dom, 'tdTheme')
         this.dom.setOption(option)
+        this.dom.resize()
         on(window, 'resize', this.resize)
       })
     }

+ 51 - 50
src/components/Echarts/pie.vue

@@ -37,7 +37,7 @@ export default {
     },
     // 圆环中心金额
     total: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     // 圆环各类型颜色
@@ -68,7 +68,7 @@ export default {
   },
   data () {
     return {
-      dom: null
+      dom: null // echarts实例
     }
   },
   methods: {
@@ -77,28 +77,28 @@ export default {
     },
     pageInit () {
       this.$nextTick(() => {
-        let legend = this.value.map(_ => _.name)
-        let option = {
+        const legend = this.value.map(_ => _.name)
+        const option = {
           color: this.color,
           title: [{
-              text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
-              top: 'center',
-              left: 'center',
-              textStyle: {
-                  rich: {
-                      name: {
-                          fontSize: 14,
-                          fontWeight: 'normal',
-                          color: '#666666',
-                          padding: [10, 0]
-                      },
-                      val: {
-                          fontSize: 32,
-                          fontWeight: 'bold',
-                          color: '#333333'
-                      }
-                  }
+            text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
+            top: 'center',
+            left: 'center',
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: 'normal',
+                  color: '#666666',
+                  padding: [10, 0]
+                },
+                val: {
+                  fontSize: 24,
+                  fontWeight: 'bold',
+                  color: '#333333'
+                }
               }
+            }
           }],
           tooltip: {
             trigger: 'item',
@@ -120,38 +120,38 @@ export default {
               hoverAnimation: false,
               label: {
                 normal: {
-                    formatter: params => {
-                        return (
-                            '{icon|●}{name|' + params.name + '}{value|' +
+                  formatter: params => {
+                    return (
+                      '{icon|●}{name|' + params.name + '}{value|' +
                             this.formatNumber(params.value) + '}'
-                        )
+                    )
+                  },
+                  padding: [0, -100, 25, -130],
+                  rich: {
+                    icon: {
+                      fontSize: 12
+                    },
+                    name: {
+                      fontSize: 14,
+                      padding: [0, 10, 0, 4],
+                      color: '#666666'
                     },
-                    padding: [0, -100, 25, -130],
-                    rich: {
-                        icon: {
-                            fontSize: 12
-                        },
-                        name: {
-                            fontSize: 14,
-                            padding: [0, 10, 0, 4],
-                            color: '#666666'
-                        },
-                        value: {
-                            fontSize: 16,
-                            fontWeight: 'bold',
-                            color: '#333333'
-                        }
+                    value: {
+                      fontSize: 16,
+                      fontWeight: 'bold',
+                      color: '#333333'
                     }
+                  }
                 }
               },
               labelLine: {
-                  normal: {
-                      length: 20,
-                      length2: 120,
-                      lineStyle: {
-                          color: '#e6e6e6'
-                      }
+                normal: {
+                  length: 20,
+                  length2: 120,
+                  lineStyle: {
+                    color: '#e6e6e6'
                   }
+                }
               },
               data: this.value,
               itemStyle: {
@@ -161,8 +161,8 @@ export default {
                   shadowColor: 'rgba(255, 170, 0, 0.5)'
                 },
                 normal: {
-                    borderColor: '#fff',
-                    borderWidth: 2
+                  borderColor: '#fff',
+                  borderWidth: 2
                 }
               }
             }
@@ -171,12 +171,13 @@ export default {
         this.dom = echarts.init(this.$refs.dom, 'tdTheme')
         console.log(option, 'option')
         this.dom.setOption(option)
+        this.dom.resize()
         on(window, 'resize', this.resize)
       })
     },
     // 格式化金额
-    formatNumber (num){
-      let reg = /(?=(\B)(\d{3})+$)/g
+    formatNumber (num) {
+      const reg = /(?=(\B)(\d{3})+$)/g
       return num.toString().replace(reg, ',')
     }
   },

+ 138 - 114
src/views/Home.vue

@@ -20,7 +20,7 @@
                   allowClear
                   mode="multiple"
                   placeholder="选择网点"
-                  v-model="searchForm.storeIds"
+                  v-model="searchForm.storeIdList"
                   style="width: 200px"
                 >
                   <a-select-option v-for="item in storesList" :value="item.id" :key="item.id">
@@ -30,6 +30,7 @@
               </a-form-item>
               <a-form-item>
                 <a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
+                <a-button type="" style="margin-left: 10px;" @click="handleReset()">重置</a-button>
               </a-form-item>
               <a-form-item>
                 快捷筛选:
@@ -44,35 +45,22 @@
         </a-card>
       </a-row>
       <!-- 洗车量数据 -->
-      <a-card class="panel ">
-        <a-row :gutter="20">
-          <a-col span="24" class="panel-title">洗车量趋势</a-col>
-          <a-divider />
-        </a-row>
-        <a-row :gutter="20">
-          <a-col :md="24" :lg="24">
-            <a-card shadow>
-              <!-- 洗车量趋势图表展示 -->
-              <chart-line
-                style="height: 300px;"
-                color="#6C6FBE"
-                :yMax="1000"
-                yUnit="台"
-                :xAxisRotate="resize"
-                :xAxisData="XdaysData"
-                :seriesData="washCarsChartData"
-                text="" />
-              <span v-if="isNoData" class="noData">暂无数据</span>
-            </a-card>
-
-          </a-col>
-        </a-row>
+      <a-card class="panel" title="洗车量趋势">
+        <!-- 洗车量趋势图表展示 -->
+        <chart-line
+          style="height: 300px;"
+          color="#6C6FBE"
+          :yMax="1000"
+          yUnit="台"
+          :xAxisRotate="resize"
+          :xAxisData="XdaysData"
+          :seriesData="washCarsChartData"
+          text="" />
+        <span v-if="isNoData" class="noData">暂无数据</span>
       </a-card>
       <!-- 各洗车类型数据 -->
-      <a-card class="panel ">
+      <a-card class="panel " title="各洗车类型数据">
         <a-row :gutter="24">
-          <a-col span="24" class="panel-title">各洗车类型数据</a-col>
-          <a-divider />
           <a-col :md="4" :lg="4">
             <a-card class="border-radius background-skyblue">
               <div class="module-list ">
@@ -100,13 +88,13 @@
           </a-col>
         </a-row>
         <!-- 洗车类型数据图表展示 -->
-        <a-row :gutter="20">
+        <a-row :gutter="24">
           <a-col class="tab-card">
             <span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
             <span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
           </a-col>
           <!-- 详情数据 -->
-          <a-col :md="24" :lg="24" v-if="currentTabChart=='tab1'">
+          <a-col span="24" v-if="currentTabChart=='tab1'">
             <chart-bar
               ref="ChartBar"
               style="height: 300px;"
@@ -115,12 +103,12 @@
               :yMax="1000"
               yUnit="台"
               :xAxisData="XdaysData"
-              :seriesData="washTypeChartData"
+              :seriesData="washTypeBarData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
           </a-col>
           <!-- 变化趋势 -->
-          <a-col :md="24" :lg="24" v-if="currentTabChart=='tab2'">
+          <a-col span="24" v-if="currentTabChart=='tab2'">
             <chart-line
               ref="ChartLine"
               style="height: 300px;"
@@ -128,44 +116,38 @@
               yUnit="台"
               :xAxisRotate="resize"
               :xAxisData="XdaysData"
-              :seriesData="washTypeChartData"
+              :seriesData="washTypeLineData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
           </a-col>
         </a-row>
       </a-card>
-      <a-card class="panel ">
-        <a-row :gutter="20">
-          <a-col span="24" class="panel-title">各类型占比</a-col>
-          <a-divider />
+      <a-card class="panel chart-pie" title="各类型占比">
+        <a-row :gutter="24">
           <a-col span="12">
-            <a-card shadow>
-              <chart-pie
-                ref="chartPie"
-                class="chartPie-box"
-                :searchData="XdaysData"
-                :value="washTypePieData"
-                title="洗车总量(台)"
-                :total="chartData.allOrderNum.toFixed(2)"
-                :color="washTypePieColor"
-                :xAxisRotate="resize"
-                text="" />
-            </a-card>
+            <chart-pie
+              ref="chartPie"
+              class="chartPie-box"
+              :searchData="XdaysData"
+              :value="washTypePieData"
+              title="洗车总量(台)"
+              :total="chartData.allOrderNum.toFixed(2)"
+              :color="washTypePieColor"
+              :xAxisRotate="resize"
+              text="" />
           </a-col>
           <a-col span="12">
-            <a-card shadow>
-              <!-- 用券与未用券百分比展示 -->
-              <chart-pie
-                ref="serverChartPie"
-                class="chartPie-box"
-                :searchData="XdaysData"
-                :value="couponChartData"
-                title="洗车总量(台)"
-                :total="chartData.allOrderNum.toFixed(2)"
-                :color="couponColor"
-                :xAxisRotate="resize"
-                text="" />
-            </a-card>
+            <!-- 用券与未用券百分比展示 -->
+            <chart-pie
+              ref="serverChartPie"
+              class="chartPie-box"
+              :searchData="XdaysData"
+              :value="couponChartData"
+              title="洗车总量(台)"
+              :total="chartData.allOrderNum.toFixed(2)"
+              :color="couponColor"
+              :xAxisRotate="resize"
+              text="" />
           </a-col>
         </a-row>
       </a-card>
@@ -243,16 +225,7 @@ export default {
       return data
     }
   },
-  // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
-  mounted () {
-    const that = this
-    window.onresize = () => {
-      return (() => {
-        window.screenWidth = document.body.clientWidth
-        that.screenWidth = window.screenWidth
-      })()
-    }
-  },
+
   data () {
     return {
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
@@ -262,7 +235,7 @@ export default {
       storesList: [], // 洗车网点列表
       searchForm: {
         queryWord: null, // 时间查询条件,默认本周
-        storeIds: [] // 已选洗车网点
+        storeIdList: [] // 已选洗车网点
       },
       chartData: {
         KX: 0, // 快洗
@@ -309,18 +282,40 @@ export default {
       // 洗车类型数据
       currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
       XdaysData: [], // 图表X轴时间集合
-      // 洗车类型数据
-      washTypeChartData: [{
-        name: '',
+      // 洗车类型柱状图表数据
+      washTypeBarData: [{
+        name: '快速洗车',
+        type: 'bar',
+        data: []
+      },
+      {
+        name: '精致洗车',
         type: 'bar',
         data: []
       },
       {
-        name: '',
+        name: '打蜡精洗',
         type: 'bar',
         data: []
       }
       ],
+      // 洗车类型折线图表数据
+      washTypeLineData: [{
+        name: '快速洗车',
+        type: 'line',
+        data: []
+      },
+      {
+        name: '精致洗车',
+        type: 'line',
+        data: []
+      },
+      {
+        name: '打蜡精洗',
+        type: 'line',
+        data: []
+      }
+      ],
       // 各类型占比
       washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
       databack: {
@@ -368,9 +363,15 @@ export default {
         this.endDate = this.exitTime(searchTime[1])
         this.getPageData()
       } else {
-        this.$message.error('请选择查询条件')
+        this.$message.error('请选择统计区间')
       }
     },
+    // 重置
+    handleReset () {
+      this.searchForm.storeIdList = []
+      this.curentType = 'thisWeek'
+      this.getCurentSearchTime()
+    },
     // 格式化时间
     exitTime (time) {
       const D = new Date(time)
@@ -403,20 +404,59 @@ export default {
       this.XdaysData = [] // x轴置空
       const _date = {
         beginDate: this.beginDate,
-        endDate: this.endDate
+        endDate: this.endDate,
+        storeIdList: this.searchForm.storeIdList
       }
       console.log(_date, '_date')
       getOrderstatistics(_date).then(res => {
         console.log(res, 'rrrrrrr')
         if (res.status == 200) {
           this.chartData = res.data
-          this.filterData()
+          if (res.data.dateList && res.data.dateList.length) {
+            this.isNoData = false
+            this.filterData(res.data.dateList)
+          } else {
+            this.isNoData = true
+          }
+        } else {
+          this.isNoData = true
         }
       })
     },
-    // 整合图表数据
-    filterData () {
-
+    // 整合图表每天数据
+    filterData (data) {
+      const days = [] // 日期合集
+      const kxData = [] // 快速洗车数据
+      const jxData = [] // 精致洗车数据
+      const dlxData = [] // 打蜡洗车数据
+      const totalData = [] // 全部洗车量数据
+      const useCouponData = [] // 用券洗车量数据
+      data.map(item => {
+        const itemDay = item.date.split('-')
+        const month = Number(itemDay[1])
+        const day = Number(itemDay[2])
+        const time = month + '月' + day + '日'
+        days.push(time)
+        kxData.push(item.KX)
+        jxData.push(item.JX)
+        dlxData.push(item.DLX)
+        totalData.push(item.allOrderNum)
+        useCouponData.push(item.useCouponOrderNum)
+      })
+      this.XdaysData = days
+      const washTypeData = [kxData, jxData, dlxData]
+      console.log(washTypeData, 'washTypeData')
+      // 洗车类型柱状图表数据
+      this.washTypeBarData.map((item, index) => {
+        item.data = washTypeData[index]
+      })
+      // 洗车类型折线图表数据
+      this.washTypeLineData.map((item, index) => {
+        item.data = washTypeData[index]
+      })
+      // 洗车量图表数据赋值
+      this.washCarsChartData[0].data = totalData
+      this.washCarsChartData[1].data = useCouponData
     }
   },
   beforeRouteEnter (to, from, next) {
@@ -426,15 +466,28 @@ export default {
       vm.curentType = 'thisWeek'
       vm.getCurentSearchTime()
     })
+  },
+  // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
+  mounted () {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        that.screenWidth = window.screenWidth
+      })()
+    }
   }
 }
 </script>
 <style lang="less" scoped>
+  .home{
+    width: 100%;
+  }
   .report-page {
-    position: relative;
     margin-top: 10px;
     height: calc(100vh - 285px);
     overflow-y: scroll;
+    overflow-x: hidden;
     .search-panel {
       .ivu-card-body>div {
         display: inline-block;
@@ -472,7 +525,8 @@ export default {
         left: 40%;
       }
       .chartPie-box{
-        height: 350px;
+        height: 300px;
+        width: 100%;
       }
       .panel-title {
         font-size: 18px;
@@ -540,36 +594,6 @@ export default {
       }
     }
 
-    .count-div {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .count-card {
-      width: 49%;
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-
-    .home-card-title {
-      text-align: center;
-    }
-
-    .home-list {
-      margin: 0;
-    }
-
-    .home-list-li {
-      list-style: none;
-      display: flex;
-      justify-content: space-between;
-      padding: 5px 0;
-
-      i {
-        color: #B2B2B2;
-      }
-    }
-
     .module-list {
       display: flex;
       justify-content: center;