Quellcode durchsuchen

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

1004749546@qq.com vor 4 Jahren
Ursprung
Commit
697b765426
3 geänderte Dateien mit 416 neuen und 392 gelöschten Zeilen
  1. 162 154
      src/components/Echarts/bar.vue
  2. 170 170
      src/components/Echarts/line.vue
  3. 84 68
      src/views/Home.vue

+ 162 - 154
src/components/Echarts/bar.vue

@@ -3,170 +3,178 @@
 </template>
 
 <script>
-  import echarts from 'echarts'
-  import tdTheme from './theme.json'
-  import {
-    on,
-    off
-  } from '@/libs/tools'
+import echarts from 'echarts'
+import tdTheme from './theme.json'
+import {
+  on,
+  off
+} from '@/libs/tools'
 
-  echarts.registerTheme('tdTheme', tdTheme)
-  export default {
-    name: 'ChartBar',
-    props: {
-      value: Object, // 单列柱状图,key为x轴,value为y轴
-      text: String,
-      subtext: String,
-      color: String,
-      // 当有多列柱状图展示时的X轴坐标数据
-      xAxisData: {
-        type: Array,
-        default: function () {
-          return []
-        }
-      },
-      // y轴坐标最大值
-      yMax: {
-        type: Number,
-        default: 100
-      },
-      // 当有多列柱状图展示时的y轴坐标数据
-      seriesData: {
-        type: Array,
-        default: function () {
-          return []
-        }
-      },
-      // x轴标签旋转角度
-      xAxisRotate: {
-        type: Number,
-        default: 0
+echarts.registerTheme('tdTheme', tdTheme)
+export default {
+  name: 'ChartBar',
+  props: {
+    value: Object, // 单列柱状图,key为x轴,value为y轴
+    text: String,
+    subtext: String,
+    color: String,
+    // 当有多列柱状图展示时的X轴坐标数据
+    xAxisData: {
+      type: Array,
+      default: function () {
+        return []
       }
     },
-    watch: {
-      xAxisData: {
-        handler (nVal, oVal) {
-          // console.log(nVal, 'nnnnnnnn')
-          if (nVal) {
-            // 根据x轴时间长度控制滚动条位置及显示状态 x轴长度大于25时,显示滚动条并且滚动条结束位置在80%
-            if (nVal.length > 25) {
-              this.isShowZoom = true
-              this.xZoomEnd = 80
-            }
-            if (nVal.length > 30) {
-              this.xZoomEnd = 70
-            }
-            if (nVal.length > 35) {
-              this.xZoomEnd = 60
-            }
-            if (nVal.length > 40) {
-              this.xZoomEnd = 50
-            }
-            if (nVal.length > 45) {
-              this.xZoomEnd = 40
-            }
-            if (nVal.length > 50) {
-              this.xZoomEnd = 30
-            }
-            this.pageInit()
-          }
-        },
-        deep: true,
-        immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
-      },
-      xAxisRotate: {
-        handler (nVal, oVal) {
-          if (nVal !== '') {
-            this.pageInit()
-          }
-        },
-        deep: true,
-        immediate: true
-      }
+    // y轴坐标最大值
+    yMax: {
+      type: Number,
+      default: 100
+    },
+    // y轴坐标单位
+    yUnit: {
+      type: String,
+      default: ''
     },
-    data () {
-      return {
-        dom: null,
-        isShowZoom: false, // 是否展示滚动条
-        xZoomEnd: 100 // x轴滚动条结束位置
+    // 当有多列柱状图展示时的y轴坐标数据
+    seriesData: {
+      type: Array,
+      default: function () {
+        return []
       }
     },
-    methods: {
-      resize () {
-        this.dom.resize()
-      },
-      pageInit () {
-        let legend = this.seriesData.map(_ => _.name)
-        this.$nextTick(() => {
-          let xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
-          let seriesData = this.value ? Object.values(this.value) : this.seriesData
-          let option = {
-            color: [this.color],
-            title: {
-              text: this.text,
-              subtext: this.subtext,
-              x: 'left'
-            },
-            legend: {
-              data: legend
-            },
-            tooltip: {
-              trigger: 'axis'
-            },
-            dataZoom: [{
-              type: 'slider',
-              show: this.isShowZoom, // flase直接隐藏图形
-              xAxisIndex: [0],
-              left: '9%', // 滚动条靠左侧的百分比
-              bottom: -5,
-              start: 0, // 滚动条的起始位置
-              end: this.xZoomEnd, // 滚动条的截止位置(按比例分割你的柱状图x轴长度)
-              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
-            }],
-            xAxis: {
-              type: 'category',
-              data: xAxisData,
-              axisLabel: {
-                interval: 0,
-                rotate: this.xAxisRotate // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
-              }
-            },
-            yAxis: {
-              type: 'value',
-              min: 0,
-              max: this.yMax,
-              // interval: 2,
-              position: 'left'
-            }
+    // x轴标签旋转角度
+    xAxisRotate: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    xAxisData: {
+      handler (nVal, oVal) {
+        // console.log(nVal, 'nnnnnnnn')
+        if (nVal) {
+          // 根据x轴时间长度控制滚动条位置及显示状态 x轴长度大于25时,显示滚动条并且滚动条结束位置在80%
+          if (nVal.length > 25) {
+            this.isShowZoom = true
+            this.xZoomEnd = 80
           }
-          if (this.value) {
-            option.series = [{
-              data: seriesData,
-              type: 'bar',
-              barWidth: 35,
-              label: {
-                normal: {
-                  show: true,
-                  position: 'top'
-                }
-              }
-            }]
-          } else {
-            // console.log(this.seriesData, '111111111')
-            option.series = this.seriesData
+          if (nVal.length > 30) {
+            this.xZoomEnd = 70
           }
-          // console.log(option.series, 'ppppppp')
-          this.dom = echarts.init(this.$refs.dom, 'tdTheme')
-          this.dom.setOption(option)
-          on(window, 'resize', this.resize)
-        })
-      }
+          if (nVal.length > 35) {
+            this.xZoomEnd = 60
+          }
+          if (nVal.length > 40) {
+            this.xZoomEnd = 50
+          }
+          if (nVal.length > 45) {
+            this.xZoomEnd = 40
+          }
+          if (nVal.length > 50) {
+            this.xZoomEnd = 30
+          }
+          this.pageInit()
+        }
+      },
+      deep: true,
+      immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
     },
-    mounted () {
-      this.pageInit()
+    xAxisRotate: {
+      handler (nVal, oVal) {
+        if (nVal !== '') {
+          this.pageInit()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      dom: null,
+      isShowZoom: false, // 是否展示滚动条
+      xZoomEnd: 100 // x轴滚动条结束位置
+    }
+  },
+  methods: {
+    resize () {
+      this.dom.resize()
     },
-    beforeDestroy () {
-      off(window, 'resize', this.resize)
+    pageInit () {
+      const legend = this.seriesData.map(_ => _.name)
+      this.$nextTick(() => {
+        const xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
+        const seriesData = this.value ? Object.values(this.value) : this.seriesData
+        const option = {
+          color: [this.color],
+          title: {
+            text: this.text,
+            subtext: this.subtext,
+            x: 'left'
+          },
+          legend: {
+            data: legend
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          dataZoom: [{
+            type: 'slider',
+            show: this.isShowZoom, // flase直接隐藏图形
+            xAxisIndex: [0],
+            left: '9%', // 滚动条靠左侧的百分比
+            bottom: -5,
+            start: 0, // 滚动条的起始位置
+            end: this.xZoomEnd, // 滚动条的截止位置(按比例分割你的柱状图x轴长度)
+            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+          }],
+          xAxis: {
+            type: 'category',
+            data: xAxisData,
+            axisLabel: {
+              interval: 0,
+              rotate: this.xAxisRotate // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
+            }
+          },
+          yAxis: {
+            type: 'value',
+            min: 0,
+            max: this.yMax,
+            axisLabel: {
+              formatter: `{value} ${this.yUnit}`
+            },
+            // interval: 2,
+            position: 'left'
+          }
+        }
+        if (this.value) {
+          option.series = [{
+            data: seriesData,
+            type: 'bar',
+            barWidth: 35,
+            label: {
+              normal: {
+                show: true,
+                position: 'top'
+              }
+            }
+          }]
+        } else {
+          // console.log(this.seriesData, '111111111')
+          option.series = this.seriesData
+        }
+        // console.log(option.series, 'ppppppp')
+        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+        this.dom.setOption(option)
+        on(window, 'resize', this.resize)
+      })
     }
+  },
+  mounted () {
+    this.pageInit()
+  },
+  beforeDestroy () {
+    off(window, 'resize', this.resize)
   }
+}
 </script>

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

@@ -3,187 +3,187 @@
 </template>
 
 <script>
-  import echarts from 'echarts'
-  import tdTheme from './theme.json'
-  import {
-    on,
-    off
-  } from '@/libs/tools'
+import echarts from 'echarts'
+import tdTheme from './theme.json'
+import {
+  on,
+  off
+} from '@/libs/tools'
 
-  echarts.registerTheme('tdTheme', tdTheme)
-  export default {
-    name: 'ChartLine',
-    props: {
-      value: Object, // 单列折线图,key为x轴,value为y轴
-      text: String,
-      subtext: String,
-      color: String,
-      // 当有多列折线图展示时的X轴坐标数据
-      xAxisData: {
-        type: Array,
-        default: function () {
-          return []
-        }
-      },
-      // 当有多列折线图展示时的y轴坐标数据
-      seriesData: {
-        type: Array,
-        default: function () {
-          return []
-        }
-      },
-      // y轴坐标最大值
-      yMax: {
-        type: Number,
-        default: 100
-      },
-      // y轴坐标单位
-      yUnit: {
-        type: String,
-        default: '元'
-      },
-      // x轴标签旋转角度
-      xAxisRotate: {
-        type: Number,
-        default: 0
+echarts.registerTheme('tdTheme', tdTheme)
+export default {
+  name: 'ChartLine',
+  props: {
+    value: Object, // 单列折线图,key为x轴,value为y轴
+    text: String,
+    subtext: String,
+    color: String,
+    // 当有多列折线图展示时的X轴坐标数据
+    xAxisData: {
+      type: Array,
+      default: function () {
+        return []
       }
     },
-    watch: {
-      xAxisData: {
-        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) {
-              this.isShowZoom = true
-              this.xZoomEnd = 80
-            }
-            // 营业额x轴长度大于20 滚动条结束位置在70%
-            if ((nVal.length > 15 && this.yMax > 100) || nVal.length > 30) {
-              this.xZoomEnd = 70
-            }
-            // 营业额x轴长度大于25 滚动条结束位置在60%
-            if ((nVal.length >= 25 && this.yMax > 100) || nVal.length > 35) {
-              this.xZoomEnd = 60
-            }
-            if (nVal.length > 40 || (nVal.length >= 30 && this.yMax > 100)) {
-              this.xZoomEnd = 50
-            }
-            if (nVal.length > 45 || (nVal.length >= 35 && this.yMax > 100)) {
-              this.xZoomEnd = 40
-            }
-            if (nVal.length > 50 || (nVal.length >= 40 && this.yMax > 100)) {
-              this.xZoomEnd = 30
-            }
-            this.pageInit()
-          }
-        },
-        deep: true,
-        immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
-      },
-      xAxisRotate: {
-        handler (nVal, oVal) {
-          if (nVal !== '') {
-            this.pageInit()
-          }
-        },
-        deep: true,
-        immediate: true
+    // 当有多列折线图展示时的y轴坐标数据
+    seriesData: {
+      type: Array,
+      default: function () {
+        return []
       }
     },
-    data () {
-      return {
-        dom: null,
-        isShowZoom: false, // 是否展示滚动条
-        xZoomEnd: 100 // x轴滚动条结束位置
-      }
+    // y轴坐标最大值
+    yMax: {
+      type: Number,
+      default: 100
+    },
+    // y轴坐标单位
+    yUnit: {
+      type: String,
+      default: ''
     },
-    methods: {
-      resize () {
-        this.dom.resize()
+    // x轴标签旋转角度
+    xAxisRotate: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    xAxisData: {
+      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) {
+            this.isShowZoom = true
+            this.xZoomEnd = 80
+          }
+          // 营业额x轴长度大于20 滚动条结束位置在70%
+          if ((nVal.length > 15 && this.yMax > 100) || nVal.length > 30) {
+            this.xZoomEnd = 70
+          }
+          // 营业额x轴长度大于25 滚动条结束位置在60%
+          if ((nVal.length >= 25 && this.yMax > 100) || nVal.length > 35) {
+            this.xZoomEnd = 60
+          }
+          if (nVal.length > 40 || (nVal.length >= 30 && this.yMax > 100)) {
+            this.xZoomEnd = 50
+          }
+          if (nVal.length > 45 || (nVal.length >= 35 && this.yMax > 100)) {
+            this.xZoomEnd = 40
+          }
+          if (nVal.length > 50 || (nVal.length >= 40 && this.yMax > 100)) {
+            this.xZoomEnd = 30
+          }
+          this.pageInit()
+        }
       },
-      pageInit () {
-        let legend = this.seriesData.map(_ => _.name)
-        this.$nextTick(() => {
-          let xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
-          let seriesData = this.value ? Object.values(this.value) : this.seriesData
-          let option = {
-            color: [this.color],
-            title: {
-              text: this.text,
-              subtext: this.subtext,
-              x: 'left'
-            },
-            legend: {
-              data: legend
-            },
-            // 鼠标放上去遮罩层提示信息
-            tooltip: {
-              trigger: 'axis'
-            },
-            dataZoom: [{ // Y轴固定,让内容滚动
-              type: 'slider',
-              show: this.isShowZoom, // flase直接隐藏图形
-              xAxisIndex: [0],
-              left: '9%', // 滚动条靠左侧的百分比
-              bottom: -5,
-              start: 0, // 滚动条的起始位置
-              end: this.xZoomEnd, // 滚动条的截止位置(按比例分割你的柱状图x轴长度)
-              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
-            }],
-            xAxis: {
-              type: 'category',
-              boundaryGap: false, // 两边是否留白
-              data: xAxisData,
-              axisLabel: {
-                interval: 0,
-                rotate: this.xAxisRotate
-              },
-              axisTick: {
-                inside: true,
-                lignWithLabel: true // 这两行代码可以让刻度正对刻度名
-              }
+      deep: true,
+      immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
+    },
+    xAxisRotate: {
+      handler (nVal, oVal) {
+        if (nVal !== '') {
+          this.pageInit()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      dom: null,
+      isShowZoom: false, // 是否展示滚动条
+      xZoomEnd: 100 // x轴滚动条结束位置
+    }
+  },
+  methods: {
+    resize () {
+      this.dom.resize()
+    },
+    pageInit () {
+      const legend = this.seriesData.map(_ => _.name)
+      this.$nextTick(() => {
+        const xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
+        const seriesData = this.value ? Object.values(this.value) : this.seriesData
+        const option = {
+          color: [this.color],
+          title: {
+            text: this.text,
+            subtext: this.subtext,
+            x: 'left'
+          },
+          legend: {
+            data: legend
+          },
+          // 鼠标放上去遮罩层提示信息
+          tooltip: {
+            trigger: 'axis'
+          },
+          dataZoom: [{ // Y轴固定,让内容滚动
+            type: 'slider',
+            show: this.isShowZoom, // flase直接隐藏图形
+            xAxisIndex: [0],
+            left: '9%', // 滚动条靠左侧的百分比
+            bottom: -5,
+            start: 0, // 滚动条的起始位置
+            end: this.xZoomEnd, // 滚动条的截止位置(按比例分割你的柱状图x轴长度)
+            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+          }],
+          xAxis: {
+            type: 'category',
+            boundaryGap: false, // 两边是否留白
+            data: xAxisData,
+            axisLabel: {
+              interval: 0,
+              rotate: this.xAxisRotate
             },
-            yAxis: {
-              type: 'value',
-              min: 0,
-              max: this.yMax,
-              axisLabel: {
-                  formatter: `{value} ${this.yUnit}`
-              },
-              // interval: 2,
-              position: 'left'
+            axisTick: {
+              inside: true,
+              lignWithLabel: true // 这两行代码可以让刻度正对刻度名
             }
+          },
+          yAxis: {
+            type: 'value',
+            min: 0,
+            max: this.yMax,
+            axisLabel: {
+              formatter: `{value} ${this.yUnit}`
+            },
+            // interval: 2,
+            position: 'left'
           }
-          if (this.value) {
-            option.series = [{
-              data: seriesData,
-              type: 'line',
-              barWidth: 35,
-              label: {
-                normal: {
-                  show: true,
-                  position: 'top'
-                }
+        }
+        if (this.value) {
+          option.series = [{
+            data: seriesData,
+            type: 'line',
+            barWidth: 35,
+            label: {
+              normal: {
+                show: true,
+                position: 'top'
               }
-            }]
-          } else {
-            // console.log(this.seriesData, '111111111')
-            option.series = this.seriesData
-          }
-          // console.log(option.series, 'ppppppp')
-          this.dom = echarts.init(this.$refs.dom, 'tdTheme')
-          this.dom.setOption(option)
-          on(window, 'resize', this.resize)
-        })
-      }
-    },
-    mounted () {
-      this.pageInit()
-    },
-    beforeDestroy () {
-      off(window, 'resize', this.resize)
+            }
+          }]
+        } else {
+          // console.log(this.seriesData, '111111111')
+          option.series = this.seriesData
+        }
+        // console.log(option.series, 'ppppppp')
+        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+        this.dom.setOption(option)
+        on(window, 'resize', this.resize)
+      })
     }
+  },
+  mounted () {
+    this.pageInit()
+  },
+  beforeDestroy () {
+    off(window, 'resize', this.resize)
   }
+}
 </script>

+ 84 - 68
src/views/Home.vue

@@ -6,9 +6,8 @@
       <a-row>
         <a-card class="search-panel">
           <div class="toolsBar">
-            <a-form ref="searchForm" :model="searchForm" :rules="ruleInline" layout="inline">
-              <a-form-item prop="queryWord">
-                统计区间:
+            <a-form ref="searchForm" :model="searchForm" layout="inline">
+              <a-form-item props="queryWord" label="统计区间">
                 <a-range-picker
                   style="width: 220px;"
                   @change="dateChange"
@@ -16,6 +15,19 @@
                   :disabledDate="disabledDate"
                 />
               </a-form-item>
+              <a-form-item props="storeIds" label="洗车网点">
+                <a-select
+                  allowClear
+                  mode="multiple"
+                  placeholder="选择网点"
+                  v-model="searchForm.storeIds"
+                  style="width: 200px"
+                >
+                  <a-select-option v-for="item in storesList" :value="item.id" :key="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
               <a-form-item>
                 <a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
               </a-form-item>
@@ -31,7 +43,7 @@
           </div>
         </a-card>
       </a-row>
-      <!-- 营业数据 -->
+      <!-- 洗车量数据 -->
       <a-card class="panel ">
         <a-row :gutter="20">
           <a-col span="24" class="panel-title">洗车量趋势</a-col>
@@ -44,10 +56,11 @@
               <chart-line
                 style="height: 300px;"
                 color="#6C6FBE"
-                :yMax="yAmountMax"
+                :yMax="1000"
+                yUnit="台"
                 :xAxisRotate="resize"
                 :xAxisData="XdaysData"
-                :seriesData="amountChartData"
+                :seriesData="washCarsChartData"
                 text="" />
               <span v-if="isNoData" class="noData">暂无数据</span>
             </a-card>
@@ -99,9 +112,10 @@
               style="height: 300px;"
               color="#6C6FBE"
               :xAxisRotate="resize"
-              :yMax="yCheckMax"
+              :yMax="1000"
+              yUnit="台"
               :xAxisData="XdaysData"
-              :seriesData="checkDetailData"
+              :seriesData="washTypeChartData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
           </a-col>
@@ -111,10 +125,10 @@
               ref="ChartLine"
               style="height: 300px;"
               color="#6C6FBE"
-              yUnit="%"
+              yUnit=""
               :xAxisRotate="resize"
               :xAxisData="XdaysData"
-              :seriesData="checkChangeData"
+              :seriesData="washTypeChartData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
           </a-col>
@@ -130,25 +144,25 @@
                 ref="chartPie"
                 class="chartPie-box"
                 :searchData="XdaysData"
-                :value="payChartData"
-                :title="payTitle"
-                :total="payCost"
-                :color="payColor"
+                :value="washTypePieData"
+                title="洗车总量(台)"
+                :total="washCarsTotal"
+                :color="washTypePieColor"
                 :xAxisRotate="resize"
                 text="" />
             </a-card>
           </a-col>
           <a-col span="12">
             <a-card shadow>
-              <!-- 服务数据展示 -->
+              <!-- 用券与未用券百分比展示 -->
               <chart-pie
                 ref="serverChartPie"
                 class="chartPie-box"
                 :searchData="XdaysData"
-                :value="serverChartData"
+                :value="couponChartData"
                 title="洗车总量(台)"
-                :total="serverTotal"
-                :color="serverColor"
+                :total="washCarsTotal"
+                :color="couponColor"
                 :xAxisRotate="resize"
                 text="" />
             </a-card>
@@ -167,6 +181,7 @@ import {
 } from '@/components/Echarts'
 import _ from 'lodash'
 import getDate from '@/libs/getDate'
+import moment from 'moment'
 export default {
   name: 'Home',
   components: {
@@ -213,11 +228,13 @@ export default {
     return {
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
       timer: false,
+      form: this.$form.createForm(this, { name: 'searchForm' }),
       isNoData: false, // 是否有每天营业额及进店量数据
+      storesList: [], // 洗车网点列表
       searchForm: {
-        queryWord: '' // 时间查询条件,默认今天
+        queryWord: null, // 时间查询条件,默认本周
+        storeIds: [] // 已选洗车网点
       },
-      ruleInline: {},
       // 快速删选tab
       tabList: [{
         name: '今天',
@@ -236,20 +253,11 @@ export default {
         type: 'thisMonth'
       }
       ],
-      curentType: 'today', // 当前所选时间查询类型
+      curentType: 'thisWeek', // 当前所选时间查询类型
       beginDate: null, // 开始时间
       endDate: null, // 结束时间
-      yAmountMax: 5000, // 营业额y轴最大值
-      // 营业数据
-      amountData: {
-        daySaleMoney: 0, // 营业额
-        dayIncome: 0, // 营业流水
-        dayCost: 0, // 支出
-        customPrice: 0 // 客单价 = 营业额/进店量
-      },
-
       // 洗车量图表数据
-      amountChartData: [{
+      washCarsChartData: [{
         name: '全部洗车量',
         type: 'line',
         data: []
@@ -261,27 +269,25 @@ export default {
       }
       ],
       // 洗车用券量占比
-      serverChartData: [{
+      couponChartData: [{
         'name': '未用券洗车量',
         'value': 0
       }, {
         'name': '用券洗车量',
         'value': 0
       }],
-      serverTotal: 0, // 服务工时费总计
-      serverColor: ['#d48265', '#ff55ff'],
-      // 进店数据
-      currentTabChart: 'tab1', // 进店量详情数据与变化趋势的tab 默认展示详情数据
+      washCarsTotal: 0, // 洗车总量
+      couponColor: ['#d48265', '#ff55ff'],
+      // 洗车类型数据
+      currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
       carData: {
         dayTotalCar: 0, // 进店量
         dayWashCar: 0, // 洗车量
-        dayCheckCar: 0, // 检测量
-        checkRate: 0 // 检测率  检测量/进店量
+        dayCheckCar: 0 // 检测量
       },
       XdaysData: [], // 图表X轴时间集合
       // 进店量,检测量 数据
-      yCheckMax: 80, // 进店量y轴最大值
-      checkDetailData: [{
+      washTypeChartData: [{
         name: '进店量',
         type: 'bar',
         data: []
@@ -292,16 +298,9 @@ export default {
         data: []
       }
       ],
-      checkChangeData: [{
-        name: '检测率',
-        type: 'line',
-        data: []
-      }],
       // 各类型占比
-      payColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
-      payTitle: '洗车总量(台)',
-      payCost: 0, // 支出总额
-      payChartData: [{
+      washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
+      washTypePieData: [{
         'name': '快速洗车',
         'value': 0
       }, {
@@ -313,9 +312,8 @@ export default {
       }],
       dayBundleSaleIncome: 0, // 套餐销售额
       databack: {
-        serverChartData: [],
-        payChartData: [],
-        amountData: {},
+        couponChartData: [],
+        washTypePieData: [],
         carData: {}
       }
     }
@@ -323,37 +321,45 @@ export default {
   created () {
   },
   methods: {
+    moment,
     // 时间改变
-    dateChange () {
+    dateChange (dates) {
+      console.log(dates, this.searchForm.queryWord, 'dddddd')
       this.curentType = ''
     },
     // 不可选日期
     disabledDate (date) {
       return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
     },
+    // 查询洗车网点
+    getListStore () {
+      // listStore().then(res => {
+      //   console.log(res)
+      //   this.storesList = res.data ? res.data : []
+      // })
+    },
     // 页面初始化
     pageInit () {
-      this.$refs.searchForm.resetFields()
+      this.form.resetFields()
       this.databack = {
-        serverChartData: _.cloneDeep(this.serverChartData),
-        payChartData: _.cloneDeep(this.payChartData),
-        amountData: _.cloneDeep(this.amountData),
+        couponChartData: _.cloneDeep(this.couponChartData),
+        washTypePieData: _.cloneDeep(this.washTypePieData),
         carData: _.cloneDeep(this.carData)
       }
       this.dayBundleSaleIncome = 0
-      this.serverTotal = 0
+      this.washCarsTotal = 0
       this.payCost = 0
     },
     // 查询
     handleSearch () {
       this.showChart = false
-      if (this.searchForm.queryWord != ',' && this.searchForm.queryWord) {
+      if (this.searchForm.queryWord != ',' && this.searchForm.queryWord.length) {
         const searchTime = this.searchForm.queryWord.toString().split(',')
         this.beginDate = this.exitTime(searchTime[0])
         this.endDate = this.exitTime(searchTime[1])
         this.getPageData()
       } else {
-        this.$Message.error('请选择查询条件')
+        this.$message.error('请选择查询条件')
       }
     },
     // 格式化时间
@@ -370,16 +376,17 @@ export default {
     getCurentSearchTime (item) {
       this.curentType = item ? item.type : this.curentType
       const quickType = {
-        lastMonth: [getDate.getLastMonthDays().starttime, getDate.getLastMonthDays().endtime],
-        thisMonth: [getDate.getCurrMonthDays().starttime, getDate.getCurrMonthDays().endtime],
-        lastWeek: [getDate.getLastWeekDays().starttime, getDate.getLastWeekDays().endtime],
-        thisWeek: [getDate.getCurrWeekDays().starttime, getDate.getCurrWeekDays().endtime],
-        yesterday: [getDate.getYesterday().starttime, getDate.getYesterday().endtime],
-        today: [getDate.getToday().starttime, getDate.getToday().endtime]
+        lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
+        thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
+        lastWeek: [moment(getDate.getLastWeekDays().starttime), moment(getDate.getLastWeekDays().endtime)],
+        thisWeek: [moment(getDate.getCurrWeekDays().starttime), moment(getDate.getCurrWeekDays().endtime)],
+        yesterday: [moment(getDate.getYesterday().starttime), moment(getDate.getYesterday().endtime)],
+        today: [moment(getDate.getToday().starttime), moment(getDate.getToday().endtime)]
       }
       this.searchForm.queryWord = quickType[this.curentType]
-      this.beginDate = quickType[this.curentType][0]
-      this.endDate = quickType[this.curentType][1]
+      this.beginDate = quickType[this.curentType][0].format('YYYY-MM-DD')
+      this.endDate = quickType[this.curentType][1].format('YYYY-MM-DD')
+      console.log(this.searchForm.queryWord, '1111111')
       this.getPageData()
     },
     // 根据查询条件获取所有数据
@@ -389,12 +396,21 @@ export default {
         beginDate: this.beginDate,
         endDate: this.endDate
       }
+      console.log(_date, '_date')
       // this.getAmount(_date)
       // this.getServerData(_date)
       // this.getBundelData(_date)
       // this.getChartData(_date)
       // this.getPayData(_date)
     }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.pageInit()
+      vm.getListStore()
+      vm.curentType = 'thisWeek'
+      vm.getCurentSearchTime()
+    })
   }
 }
 </script>