Merge branch 'feat/v20240706-dashboard'

src/styles/element-ui.scss

@@ -1,121 +1,72 @@
-// cover some element-ui styles
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}
-
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block;
-  }
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
-}
-
-.b-shop-rate {
-  .el-form-item__content {
-    div {
-      line-height: 51px;
-    }
-  }
-}
-
-.amap-marker {
-  img {
-    width: 19px !important;
-    height: 32px !important;
-  }
-}
-
-.dashboardPage {
-  .el-table {
-    &::before {
-      display: none !important;
-    }
-  }
-
-  .cell {
-    height: 40px !important;
-    line-height: 40px;
-    // display: flex;
-    // align-items: center;
-  }
-
-  .el-table__cell {
-    padding: 0 !important;
-    border-bottom: none !important;
-  }
-  .el-table__header-wrapper {
-    .el-table__cell {
-      background-color: #f7f8fa !important;
-      border-radius: 4px;
-    }
-  }
-
-  .el-tabs__item {
-    height: 62px !important;
-    line-height: 62px !important;
-    color: #8c8c8c;
-    font-size: 20px;
-
-    &.is-active {
-      font-weight: 600;
-      color: #3d3d3d;
-    }
-  }
-
-  .el-tabs__active-bar {
-    width: 24px !important;
-    margin-left: 18px;
-    height: 4px;
-    background-color: #495fff;
-  }
-
-  .el-tabs__nav-wrap {
-    &::after {
-      height: 1px !important;
-    }
-  }
-
-  .el-select {
-    .el-input__inner {
-      background-color: #F7F8FA;
-      border: none;
-    }
-  }
-}
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block;
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.b-shop-rate {
+  .el-form-item__content {
+    div {
+      line-height: 51px;
+    }
+  }
+}
+
+.amap-marker {
+  img {
+    width: 19px !important;
+    height: 32px !important;
+  }
+}
+
+// 首页统计样式
+.dashboard-container {
+  .total-search {
+    .el-input__inner {
+      border: none !important;
+    }
+  }
+}

src/views/dashboard/components/Counter.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="counter-wrapper">
-    <div class="count">
-      <CountUp ref="countUpRef" :endVal="info.count || 0" :options="countUpOptions" />
-      <div class="trend">
-        <img v-if="[TREND_CONFIG.UP, TREND_CONFIG.DOWN].includes(trend)" :src="require(`../../../assets/images/dashboard/t-${trend}.png`)" alt="" />
-        <span v-if="trend === TREND_CONFIG.STABILIZATION" style="color: #d8d8d8; font-weight: normal">--</span>
-      </div>
-    </div>
-    <div class="tip">{{ tip }}</div>
-  </div>
-</template>
-
-<script>
-import CountUp from 'vue-countup-v2'
-import { TREND } from '../config'
-import { formatBigNumber } from '../utils'
-
-export default {
-  props: {
-    count: { type: Number, default: 0 },
-    tip: { type: String, required: true },
-    trend: { type: String, default: '' } // up/down/stabilization
-  },
-
-  components: { CountUp },
-
-  data() {
-    return {
-      TREND_CONFIG: Object.freeze(TREND),
-
-      info: { count: 0, unit: '' },
-      countUpOptions: null,
-      showCountUp: false
-    }
-  },
-
-  watch: {
-    count: {
-      handler(newCount) {
-        if (newCount > 0) {
-          const res = formatBigNumber(newCount)
-          this.info.count = res.count * 1
-
-          this.countUpOptions = {
-            useEasing: true,
-            useGrouping: true,
-            separator: ',',
-            decimal: '.',
-            prefix: '',
-            suffix: res.unit || '',
-            decimalPlaces: newCount * 1 > 10000 ? 2 : 0
-          }
-        } else {
-          this.info.count = 0
-        }
-
-        // vue-countup-v2什么傻逼组件
-        this.$nextTick(() => {
-          if (this.$refs.countUpRef) {
-            this.$refs.countUpRef.instance.options.suffix = this.countUpOptions.suffix || ''
-            this.$refs.countUpRef.instance.options.decimalPlaces = this.countUpOptions.decimalPlaces
-          }
-        })
-      },
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.counter-wrapper {
-  width: 100%;
-
-  .count {
-    line-height: 1.2;
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-    font-size: 32px;
-    font-weight: bold;
-
-    .trend {
-      margin-left: 16px;
-
-      img {
-        position: relative;
-        top: -2px;
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  .tip {
-    color: #a4a4a4;
-    font-size: 16px;
-  }
-}
-</style>

src/views/dashboard/components/DiagramsChart.vue

@@ -1,161 +0,0 @@
-<template>
-  <div ref="chartsWrapperRef" class="diagrams-chart-container" :style="{ width: containerWidth }"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-
-export default {
-  props: {
-    statisticalData: { type: Object, default: () => {} },
-    chartTitle: { type: String, default: '' }
-  },
-  data() {
-    return {
-      instance: null,
-      chartData: {},
-      containerWidth: 700
-    }
-  },
-  mounted() {
-    this.init()
-  },
-
-  watch: {
-    statisticalData: {
-      handler(newValue) {
-        this.chartData = newValue
-        this.updataCharData()
-      },
-      immediate: true,
-      deep: true
-    },
-
-    containerWidth: {
-      handler() {
-        if (this.instance) {
-          this.resize()
-        }
-      },
-
-      immediate: true
-    }
-  },
-
-  methods: {
-    init() {
-      this.instance = echarts.init(this.$refs.chartsWrapperRef)
-      this.instance.setOption({
-        title: { subtext: this.chartTitle },
-        grid: { left: '7%', right: '3%', top: '20%', bottom: '9%' },
-        tooltip: {
-          trigger: 'axis',
-          showDelay: 10,
-          padding: 0,
-          axisPointer: {
-            type: 'shadow',
-            shadowStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(225, 228, 255, 0)' },
-                { offset: 1, color: '#E1E4FF' }
-              ])
-            }
-          },
-          formatter(options) {
-            return `
-              <div style="
-              padding: 0;
-              border: 1px solid #f4f8ff;
-              padding: 8px 16px;
-              background:  linear-gradient(180deg, rgba(238, 245, 255, 0.6) 0%, rgba(219, 233, 253, 0.6) 100%);
-              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
-              border-radius: 4px;
-              color: #3d3d3d;
-              font-size: 16px;
-              font-weight: bold
-             ">${options[0].value}</div>
-            `
-          }
-        },
-        xAxis: {
-          offset: 5,
-          axisTick: { show: false },
-          axisLine: { show: false },
-          axisLabel: { color: '#A4A4A4', fontSize: 14 },
-          data: []
-        },
-        yAxis: {
-          axisLine: { show: false },
-          axisTick: { show: false },
-          axisLabel: { color: '#A4A4A4', fontSize: 14 },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              width: 1,
-              color: "#F3F4F8"
-            }
-          }
-        },
-        series: [
-          {
-            zlevel: 100,
-            name: '销量',
-            type: 'bar',
-            data: [],
-            barWidth: '24px',
-            itemStyle: {
-              borderRadius: 5,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#188df0' },
-                { offset: 1, color: '#495FFF' }
-              ])
-            }
-          }
-        ]
-      })
-    },
-
-    updataCharData(xData1, yData1) {
-      if (!this.instance || !this.instance.setOption || typeof this.chartData !== 'object') {
-        return
-      }
-      const xData = xData1 || Object.keys(this.chartData)
-      const yData = yData1 || Object.values(this.chartData)
-      this.instance.setOption({
-        xAxis: {
-          data: xData
-        },
-        series: [
-          {
-            zlevel: 100,
-            name: '销量',
-            type: 'bar',
-            data: yData,
-            barWidth: '24px',
-            itemStyle: {
-              borderRadius: 5,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#188df0' },
-                { offset: 1, color: '#495FFF' }
-              ])
-            }
-          }
-        ]
-      })
-    },
-
-    resize() {
-      this.containerWidth = this.$parent.$el.clientWidth
-      this.updataCharData()
-      this.instance.resize()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.diagrams-chart-container {
-  /* width: 700px; */
-  height: 265px;
-}
-</style>

src/views/dashboard/components/GoodsRanking.vue

@@ -1,115 +0,0 @@
-<template>
-  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-
-export default {
-  props: {
-    rankingData: { type: Array, default: () => [] },
-    categoryAlias: { type: String, default: 'productName' },
-    valueAlias: { type: String, default: 'productTransactionTotal' },
-    animate: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      instance: null,
-      chartData: {},
-      animateTimer: null,
-      startIndex: 0
-    }
-  },
-  watch: {
-    rankingData: {
-      handler(newData) {
-        this.chartData = newData
-        this.updateChartData()
-      },
-
-      immediate: true,
-      deep: true
-    }
-  },
-  mounted() {
-    this.init()
-  },
-
-  methods: {
-    init() {
-      this.instance = echarts.init(this.$refs.chartsWrapperRef)
-      this.instance.setOption({
-        grid: { left: '12%', right: '3%', top: '2%', bottom: '9%' },
-        xAxis: { type: 'value', show: false },
-        yAxis: {
-          type: 'category',
-          axisLine: { show: false },
-          axisTick: { show: false }
-        }
-      })
-      this.updateChartData()
-    },
-
-    updateChartData() {
-      if (!this.instance || !this.instance.setOption) {
-        return
-      }
-      this.instance.setOption({
-        yAxis: {
-          data: this.chartData.map((item) => item[this.categoryAlias]).slice(this.startIndex, this.startIndex + 5).reverse(),
-          axisLabel: {
-            color: '#A4A4A4',
-            fontSize: 14,
-            formatter(value) {
-              const valueStr = value.length > 5 ? value.slice(0, 5) + '...' : value
-              return '{lineHeight|' + valueStr + '}'
-            },
-            rich: { lineHeight: { lineHeight: 18, color: '#A4A4A4', fontSize: 14 } }
-          }
-        },
-        series: [
-          {
-            zlevel: 100,
-            name: '销量',
-            type: 'bar',
-            data: this.chartData.map((item) => item[this.valueAlias]).slice(this.startIndex, this.startIndex + 5).reverse(),
-            barWidth: '16px',
-            itemStyle: { borderRadius: 5, color: '#00CE7F' },
-            label: { show: true, precision: 1, position: 'right', valueAnimation: true, fontFamily: 'monospace', color: '#3d3d3d' }
-          }
-        ]
-      })
-      this.animate && this.startAnimate()
-    },
-
-    startAnimate() {
-      if (this.animateTimer) {
-        this.stopAnimate()
-      }
-      this.animateTimer = setInterval(() => {
-        if (this.startIndex >= 15) {
-          this.startIndex = -1
-        }
-        this.startIndex += 1
-        this.updateChartData()
-      }, 1000)
-    },
-
-    stopAnimate() {
-      clearInterval(this.animateTimer)
-      this.animateTimer = null
-    },
-
-    resize() {
-      this.instance.resize()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.diagrams-chart-container {
-  width: 729px;
-  height: 265px;
-}
-</style>

src/views/dashboard/components/NetworkDistribution.vue

@@ -1,100 +0,0 @@
-<template>
-  <div style="width: 100%; height: 100%" class="com-chart" ref="chartsWrapperRef"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-import chinaJson from '../data/map/china.json'
-import { getMapDataItem } from '../utils'
-
-export default {
-  props: {
-    sitesData: { type: Array, required: true }
-  },
-  watch: {
-    sitesData: {
-      handler(newValue) {
-        if (this.instance) {
-          this.instance.setOption({
-            series: [
-              {
-                type: 'map',
-                mapType: 'china', // 使用中国地图
-                data: newValue.map((item) => {
-                  return {
-                    name: item.provinces,
-                    value: JSON.stringify(item.nationalMapDataList)
-                  }
-                }),
-                label: { show: true, color: '#fff' },
-                itemStyle: {
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  normal: { areaColor: '#249eff', borderColor: '#fff' },
-                  emphasis: { areaColor: '#0f57ff', label: { color: '#fff' } }
-                }
-              }
-            ]
-          })
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  data() {
-    return {
-      instance: null
-    }
-  },
-  methods: {
-    async initCharts() {
-      this.instance = echarts.init(this.$refs.chartsWrapperRef)
-      echarts.registerMap('china', chinaJson)
-      this.instance.setOption({
-        title: {
-          text: '| 全国网点分布图',
-          left: 20,
-          top: 20
-        },
-        tooltip: {
-          padding: 0,
-          trigger: 'item',
-          formatter: function (params) {
-            let currentData = params.data
-            if (currentData && typeof currentData.value === 'string') {
-              currentData = JSON.parse(currentData.value)
-            } else {
-              currentData = [{}, {}, {}, {}]
-            }
-            return `
-            <div style="padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(238, 245, 255, 0.9) 0%, rgba(219, 233, 253, 0.9) 100%);
-              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;  border: 1px solid #fff;  border-radius: 4px">
-              <h1 style="color: #3D3D3D; font-size: 14px; line-height: 1.5; font-weight: bold">${params.name}</h1>
-              <ul>
-                  ${getMapDataItem(currentData[0].dataType || '', currentData[0].dataNumber || 0)}
-                  ${getMapDataItem(currentData[1].dataType || '', currentData[1].dataNumber) || 0}
-                  ${getMapDataItem(currentData[2].dataType || '', currentData[2].dataNumber) || 0}
-                  ${getMapDataItem(currentData[3].dataType || '', currentData[3].dataNumber) || 0}
-                </ul>
-              </div>
-            `
-          }
-        },
-        geo: {
-          type: 'map',
-          mapType: 'china'
-        }
-      })
-    },
-
-    resize() {
-      this.instance.resize()
-    }
-  },
-  mounted() {
-    this.initCharts()
-  }
-}
-</script>

src/views/dashboard/components/RankingTable.vue

@@ -1,52 +0,0 @@
-<template>
-  <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="date" label="排名" width="60" align="center">
-      <template slot-scope="scope">
-        <div class="ranking" :style="getRankingStyle(scope.row.date)">
-          {{ scope.row.date }}
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="name" label="商家名称" width="154" align="left"></el-table-column>
-    <el-table-column prop="address" label="分账金额" align="right">
-      <template slot-scope="scope">
-        <span>{{ scope.row.address }} 元</span>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { getRankingStyle } from '../utils'
-export default {
-  data() {
-    return {
-      tableData: [
-        { date: '1', name: '大石桥市鹰纪有限公司', address: '123' },
-        { date: '2', name: '大石桥市鹰纪有限公司', address: '1234' },
-        { date: '3', name: '大石桥市鹰纪有限公司', address: '1234' },
-        { date: '4', name: '大石桥市鹰纪有限公司', address: '12345' },
-        { date: '5', name: '大石桥市鹰纪有限公司', address: '12345' }
-      ]
-    }
-  },
-  methods: {
-    getRankingStyle
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ranking {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  color: #8f9aab;
-  background-color: #f7f8fa;
-  border-radius: 50%;
-  margin-top: 7px;
-  margin-left: 10px;
-}
-</style>

src/views/dashboard/components/SectionBlock.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="section-block-container">
-    <div class="title-wrapper">
-      {{ title }}
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: { type: String, default: "" },
-    selectList: { type: Array, default: () => [] },
-    showIcon: { type: Boolean, default: false },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.section-block-container {
-  .title-wrapper {
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-size: 24px;
-    font-weight: bold;
-    color: #3d3d3d;
-    line-height: 1.5;
-    padding-left: 23px;
-    margin-bottom: 8px;
-
-    &::after {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      display: block;
-      content: "";
-      width: 9px;
-      height: 20px;
-      background: url("../../../assets/images/dashboard/scetion-title-icon.png")
-        no-repeat;
-      background-size: cover;
-    }
-  }
-}
-</style>

src/views/dashboard/components/SelectionPane.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="section-pane-container" :style="{ padding: padding }">
-    <slot name="title">
-      <div class="title" v-if="title">{{ title }}</div>
-    </slot>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: { type: String,default: '' },
-    padding: { type: String, default: "0 16px 24px" },
-    titleHeight: { type: String, default: "" },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.section-pane-container {
-  width: 100%;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
-  box-sizing: border-box;
-  .title {
-    font-size: 20px;
-    color: #3d3d3d;
-    height: 62px;
-    margin-bottom: 12px;
-    line-height: 62px;
-    font-weight: 600;
-    border-bottom: 1px solid #e4e5e8;
-  }
-}
-</style>

src/views/dashboard/components/StatisticsPanel1.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="statistics-panel-1">
-    <img :style="{ 'box-shadow': iconShadow }" :src="icon" class="pane-icon" alt="" />
-    <Counter :count="amount" :tip="tip"></Counter>
-  </div>
-</template>
-
-<script>
-import Counter from './Counter.vue'
-export default {
-  components: { Counter },
-  props: {
-    icon: { type: String, required: true },
-    amount: { type: Number, default: 0 },
-    tip: { type: String, default: '' },
-    iconShadow: {
-      type: String,
-      default: '0px 7px 6px -6px rgba(1, 85, 221, 0.42), 0px 6px 10px 0px rgba(1, 85, 221, 0.24)'
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.statistics-panel-1 {
-  padding-left: 30px;
-  padding-top: 44px;
-  width: 456px;
-  height: 152px;
-  background-color: #fff;
-  display: flex;
-  border-radius: 8px;
-  box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
-
-  .pane-icon {
-    width: 64px;
-    height: 64px;
-    flex-shrink: 0;
-    border-radius: 8px;
-    margin-right: 24px;
-  }
-}
-</style>

src/views/dashboard/components/TotalShopChart.vue

@@ -1,105 +0,0 @@
-<template>
-  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-
-export default {
-  props: {
-    siteData: { type: Object, default: () => {} }
-  },
-  data() {
-    return { instance: null }
-  },
-  mounted() {
-    this.init()
-  },
-
-  watch: {
-    siteData: {
-      handler(newData) {
-        const { communityShopQuantity = 0, businessDistrictShopQuantity = 0, mallShopQuantity = 0, allStoresTotal = 0 } = newData || {}
-        this.updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity)
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-
-  methods: {
-    init() {
-      this.instance = echarts.init(this.$refs.chartsWrapperRef)
-      this.instance.setOption({
-        tooltip: { trigger: 'item' },
-        legend: { top: 'center', right: '20%', orient: 'vertical' },
-        label: { show: true }
-      })
-    },
-
-    updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity) {
-      if (!this.instance || !this.instance.setOption) {
-        return
-      }
-      this.instance.setOption({
-        series: [
-          {
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: true,
-            labelLine: { show: true },
-            center: ['30%', '50%'],
-            clockwise: false,
-            label: {
-              normal: {
-                position: 'outside',
-                formatter: '{b}\n{c} ({d}%)'
-              }
-            },
-            data: [
-              { value: communityShopQuantity, name: '社区店总量', label: { color: '#21CCFF' } },
-              { value: businessDistrictShopQuantity, name: '商圈商家总量', label: { color: '#249EFF' } },
-              { value: mallShopQuantity, name: '商城工厂总量', label: { color: '#495FFF' } }
-            ],
-            itemStyle: {
-              emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
-              normal: {
-                color: (params) => ['#21CCFF', '#249EFF', '#495FFF'][params.dataIndex],
-                label: { show: true }
-              }
-            }
-          }
-        ]
-        // graphic: [
-        //   {
-        //     type: 'text',
-        //     position: 'center',
-        //     style: {
-        //       text: `总数`,
-        //       textAlign: 'center',
-        //       fill: '#333',
-        //       fontSize: 14
-        //     }
-        //   }
-        // ]
-      })
-
-      // let model  = this.instance.getModel().getSeriesByIndex(0).getData()._itemLayouts;
-
-      //         console.log('model',model);
-    },
-
-    resize() {
-      this.instance.resize()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.diagrams-chart-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/dashboard/componets/AddresSelect.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-select :size="size" @change="handleSelectTotalAddress" :style="{ width: selectContainerWidth + 'px' }" v-model="selectValue" placeholder="请选择区域">
+    <el-option v-for="address in addressList" :key="address.value" :label="address.label" :value="address.value"></el-option>
+  </el-select>
+</template>
+
+<script>
+import { getTextWidth } from '../utils/utils'
+import selectMixin from '../mixin/select'
+
+export default {
+  mixins: [selectMixin('addressList')],
+  data() {
+    return {
+      selectContainerWidth: getTextWidth('佛山市')
+    }
+  },
+  methods: {
+    handleSelectTotalAddress(e) {
+      const currentselectValue = this.addressList.find((item) => item.value === e)
+      this.selectContainerWidth = getTextWidth(currentselectValue.label)
+    }
+  }
+}
+</script>

src/views/dashboard/componets/AnalysisChart.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
+</template>
+
+<script>
+import echartsMixin from '../mixin/echarts'
+import { generateLineGraphic, generateDiagramsHoveDom as formatter } from '../utils/echarts'
+
+export default {
+  mixins: [echartsMixin('chartsWrapperRef')],
+  data() {
+    return {
+      staticOptions: {
+        title: { subtext: '交易总额(元)' },
+        grid: { left: '7%', right: '3%', top: '20%', bottom: '12%' },
+        tooltip: { trigger: 'axis', showDelay: 10, padding: 0, axisPointer: { type: 'shadow', shadowStyle: { color: generateLineGraphic('rgba(225, 228, 255, 0)', '#E1E4FF') } }, formatter },
+        xAxis: { offset: 5, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: '#A4A4A4', fontSize: 14 }, data: [] },
+        yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#A4A4A4', fontSize: 14 }, splitLine: { show: true, lineStyle: { width: 1, color: '#F3F4F8' } } },
+        series: { zlevel: 100, name: '销量', type: 'bar', data: [], barWidth: '24px', itemStyle: { borderRadius: 5, color: generateLineGraphic('#5cc1fd', '#15c9ca') } }
+      }
+    }
+  },
+
+  methods: {
+    update(data) {
+      this.instance.setOption({ xAxis: { data: Object.keys(data) }, series: { data: Object.values(data) } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.diagrams-chart-container {
+  height: 242px;
+}
+</style>

src/views/dashboard/componets/DateSelect.vue

@@ -0,0 +1,12 @@
+<template>
+  <el-select size="small" v-model="selectValue" placeholder="请选择" style="width: 95px">
+    <el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+  </el-select>
+</template>
+
+<script>
+import selectMixin from '../mixin/select'
+export default {
+  mixins: [selectMixin('dateList')]
+}
+</script>

src/views/dashboard/componets/GoodsRankingChart.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="goods-ranking-chart" ref="goodsRankingChartRef"></div>
+</template>
+
+<script>
+import echartsMixin from '../mixin/echarts'
+export default {
+  mixins: [echartsMixin('goodsRankingChartRef')],
+  data() {
+    return {
+      staticOptions: {
+        grid: { left: '30%', right: '3%', top: '0%', bottom: '1%' },
+        xAxis: { type: 'value', show: false },
+        yAxis: {
+          type: 'category',
+          axisLine: { show: false },
+          axisTick: { show: false },
+          data: [],
+          axisLabel: {
+            color: '#A4A4A4',
+            fontSize: 12,
+            formatter(value) {
+              const MAX_LENGTH = 12
+              const SPLIT_LENGTH = 8
+              if (value.length <= MAX_LENGTH) {
+                return value
+              }
+              const pattern = new RegExp(`(.{${SPLIT_LENGTH}})(.{1,${SPLIT_LENGTH}})`)
+              const replacement = '$1\n$2'
+              return value.replace(pattern, replacement) + (value.length > SPLIT_LENGTH * 2 ? '...' : '')
+            }
+          }
+        },
+        series: {
+          zlevel: 100,
+          name: '销量',
+          type: 'bar',
+          data: [],
+          barWidth: '16px',
+          itemStyle: { borderRadius: 10, color: '#FFC117' },
+          label: { show: true, precision: 1, position: 'right', valueAnimation: true, fontFamily: 'monospace', color: '#3d3d3d' }
+        }
+      },
+
+      timer: null
+    }
+  },
+
+  methods: {
+    update(data) {
+      if (!data || (Array.isArray(data) && !data.length)) return
+      if (this.timer) this.clearTimer()
+      let index = 0
+
+      this.setChartData(data, index)
+
+      this.timer = setInterval(() => {
+        if (data.length - 9 === index) {
+          index = 0
+        }
+        this.setChartData(data, index)
+        index++
+      }, 1000)
+    },
+
+    clearTimer() {
+      clearInterval(this.timer)
+      this.timer = null
+    },
+
+    setChartData(data, index) {
+      const d = data.slice(index, index + 9)
+      const goodsName = []
+      const goodsCount = []
+
+      d.forEach((item) => {
+        goodsName.push(item.productName)
+        goodsCount.push(item.productTransactionTotal)
+      })
+
+      this.instance.setOption({
+        yAxis: { data: goodsName.reverse() },
+        series: { data: goodsCount.reverse() }
+      })
+    }
+  },
+
+  beforeDestroy() {
+    this.clearTimer()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-ranking-chart {
+  height: 370px;
+}
+</style>

src/views/dashboard/componets/LogisticsStatisticsChart.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="logistics-statistics-container" ref="logisticsStatisticsContainerRef"></div>
+</template>
+
+<script>
+import echartsMixin from '../mixin/echarts'
+
+export default {
+  mixins: [echartsMixin('logisticsStatisticsContainerRef')],
+
+  data() {
+    return {
+      staticOptions: {
+        tooltip: { trigger: 'item' },
+        legend: { orient: 'vertical', bottom: 'bottom' },
+        series: {
+          label: { normal: { position: 'outside', formatter: '{b}({c})' } },
+          center: ['50%', '40%'],
+          type: 'pie',
+          radius: '60%',
+          data: []
+        }
+      }
+    }
+  },
+
+  methods: {
+    update(data = {}) {
+      this.instance.setOption({
+        series: {
+          data: [
+            { value: data.totalQuantity, name: '总订单量', itemStyle: { color: '#14C9C9' } },
+            { value: data.totalAmount, name: '总订单金额', itemStyle: { color: '#165DFF' } }
+          ]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.logistics-statistics-container {
+  height: 370px;
+}
+</style>

src/views/dashboard/componets/PAndLWarning.vue

@@ -0,0 +1,239 @@
+<template>
+  <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.pAndLWarningVisible" :width="dialogConfig.width">
+    <main>
+      <div class="percent-container">
+        <div class="precent">108%</div>
+        <div class="name">达成率</div>
+      </div>
+
+      <section>
+        <div class="item">
+          <StatisticsItem center title="盈亏平衡点（元）" value="15896"></StatisticsItem>
+        </div>
+        <div class="item" style="margin: 0 16px">
+          <StatisticsItem center title="离盈利还差数额（元）" value="8549545"></StatisticsItem>
+        </div>
+        <div class="item">
+          <StatisticsItem center title="实收营业额（元）" value="984452"></StatisticsItem>
+        </div>
+      </section>
+
+      <div class="charts-container" ref="chartRef"></div>
+
+      <div class="btn-wrapper">
+        <el-button style="background-color: #3a68f2" type="primary">设置盈亏线</el-button>
+      </div>
+    </main>
+  </el-dialog>
+</template>
+
+<script>
+import StatisticsItem from './StatisticsItem.vue'
+export default {
+  components: {
+    StatisticsItem
+  },
+  data() {
+    return {
+      dialogConfig: {
+        width: '40%',
+        pAndLWarningVisible: false,
+        title: '盈亏红线'
+      },
+      instance: null
+    }
+  },
+  methods: {
+    open() {
+      this.init()
+    },
+    init() {
+      this.$nextTick(() => {
+        this.instance = this.$echarts.init(this.$refs.chartRef)
+        this.instance.setOption({
+          title: { subtext: '单位：元' },
+          grid: { left: '7%', right: '3%', top: '20%', bottom: '12%', containLabel: true },
+          legend: {
+            icon: 'rect',
+            data: ['日收入', '日盈亏线'],
+            orient: 'horizontal', // 水平布局
+            align: 'left', // 左对齐
+            top: '3%', // 距离上方 3%
+            right: '4%', // 距离右侧 4%
+            textStyle: {
+              color: '#3D3D3D', // 图例文本颜色
+              fontSize: 12 // 字体大小
+            },
+            itemGap: 40, // 图例项之间的间距
+            itemWidth: 12, // 图例标记的宽度
+            itemHeight: 11
+          },
+          tooltip: {
+            trigger: 'axis',
+            padding: 0,
+            axisPointer: {
+              type: 'line',
+              lineStyle: {
+                color: '#165DFF',
+                width: 1,
+                type: 'solid'
+              }
+            },
+            formatter(params) {
+              return `
+                       <div style="padding: 2px 8px; background-color: #165DFF;">${params[0].name} 实收合计: ${params[0].value}</div>
+              `
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              axisTick: { show: false },
+              axisLine: { show: false },
+              axisLabel: { color: '#A4A4A4', fontSize: 12 },
+              type: 'category',
+              boundaryGap: false,
+              data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00']
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLine: { show: false },
+              axisLabel: { color: '#A4A4A4', fontSize: 12 },
+              axisTick: { show: false }
+            }
+          ],
+          series: [
+            {
+              name: '日收入',
+              type: 'line',
+              stack: 'Total',
+              lineStyle: {
+                color: '#165DFF',
+                width: 1
+              },
+              showSymbol: false,
+              symbol: 'circle',
+              symbolSize: 4,
+              areaStyle: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#c2d5ff'
+                      //渐变色的开始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#fff'
+                      //渐变色的开始颜色
+                    }
+                  ],
+                  false
+                )
+              },
+              itemStyle: {
+                color: '#165DFF',
+                width: 1
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              data: [120, 132, 101, 134, 90, 230, 210],
+              markLine: {
+                symbol: ['none', 'none'],
+                lineStyle: {
+                  type: 'solid'
+                },
+                data: [
+                  {
+                    type: 'average',
+                    yAxis: 150,
+                    name: '日盈亏线',
+                    label: {
+                      show: false
+                    },
+                    itemStyle: {
+                      color: '#D40E0E'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              name: '日盈亏线',
+              type: 'line'
+            }
+          ]
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+main {
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .percent-container {
+    height: 110px;
+    color: #fff;
+    font-size: 48px;
+    font-weight: bold;
+    background-color: #00092c;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    border-radius: 8px;
+    background: url('../../../assets/images/dashboard/pl-common.png') no-repeat; // pl-overflow
+    background-size: cover;
+
+    .name {
+      font-weight: normal;
+      font-size: 14px;
+      margin-top: 5px;
+    }
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+
+    .item {
+      flex: 1;
+      background-color: #f7f8fa;
+      border-radius: 8px;
+      height: 114px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .charts-container {
+    height: 260px;
+    border-radius: 8px;
+    border: 1px solid #ebeef5;
+    margin: 16px 0;
+  }
+
+  .btn-wrapper {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

src/views/dashboard/componets/SetPLLine.vue

@@ -0,0 +1,238 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :title="dialogConfig.title" :visible.sync="dialogConfig.setPLVisible" :width="dialogConfig.width">
+    <div style="padding: 0 108px">
+      <main>
+        <el-form :model="addPLForm" label-width="130px">
+          <div v-show="currentTab === 1">
+            <el-form-item prop="aaa" label="上月营业收入">
+              <el-input v-model="addPLForm.aaa" placeholder="请输入"></el-input>
+            </el-form-item>
+
+            <el-row v-for="item in addPLForm.orderGoodsList" :key="item.id">
+              <el-col :span="7">
+                <el-form-item label-width="130px" prop="bbb" label="商品名称">
+                  <el-input v-model="item.bbb" placeholder="请输入" style="width: auto"></el-input>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="6">
+                <el-form-item label-width="96px" prop="ccc" label="采购成本">
+                  <el-input v-model="item.ccc" placeholder="请输入" style="width: auto"></el-input>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="6">
+                <el-form-item label-width="96px" prop="ddd" label="商品定价">
+                  <el-input v-model="item.ddd" placeholder="请输入" style="width: auto"></el-input>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="5">
+                <el-form-item label-width="72px" prop="eee" label="毛利率">
+                  <div class="merge">
+                    <el-input v-model="item.eee" placeholder="请输入" style="width: auto"></el-input>
+                    <el-tooltip v-if="addPLForm.orderGoodsList.length > 1" placement="top" content="删除当前商品">
+                      <button @click="removeGoods(item)" class="delete-btn" type="danger"></button>
+                    </el-tooltip>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-form-item label-width="130px" prop="" label="">
+                <el-button class="add-goods-btn" @click="addGoods">新增商品</el-button>
+              </el-form-item>
+            </el-row>
+
+            <el-form-item prop="aaa" label="上月营业收入">
+              <template #label>
+                <div style="white-space: nowrap">
+                  <i class="el-icon-warning-outline"></i>
+                  毛利率(自动计算)
+                </div>
+              </template>
+              <el-input v-model="addPLForm.aaa" placeholder="自动计算结果" disabled></el-input>
+            </el-form-item>
+
+            <div class="next-btn-wrapper">
+              <el-button style="background-color: #3a68f2" type="primary" @click="currentTab = 2">下一步</el-button>
+            </div>
+          </div>
+
+          <div v-show="currentTab === 2">
+            <el-form-item v-for="item in addPLForm.otherList" :key="item.label" label-width="130px" :prop="item.label" :label="item.label">
+              <el-input v-model="item.value" placeholder="请输入"></el-input>
+            </el-form-item>
+
+            <el-form-item v-show="isShowAddCustomFees">
+              <template #label>
+                <div style="white-space: nowrap">
+                  <el-input v-model="addCustomFeeForm.label" placeholder="费用名称"></el-input>
+                </div>
+              </template>
+
+              <div class="merge">
+                <el-input v-model="addCustomFeeForm.value" placeholder="请输入"></el-input>
+                <el-tooltip placement="top" content="删除当前自定义费用">
+                  <button @click="removeCustomFee" class="delete-btn" type="danger"></button>
+                </el-tooltip>
+                <el-button @click="handleAddCustomFee" class="add-custorm-fee-btn" type="text">确认添加</el-button>
+              </div>
+            </el-form-item>
+
+            <el-form-item label-width="130px" prop="" label="" v-show="!isShowAddCustomFees">
+              <el-button class="add-goods-btn" @click="addOther">新增自定义费用</el-button>
+            </el-form-item>
+
+            <div class="next-btn-wrapper">
+              <el-button class="btn prev-btn" type="info" @click="currentTab = 1">上一步</el-button>
+              <el-button style="background-color: #3a68f2" type="primary" @click="currentTab = 2">完成</el-button>
+            </div>
+          </div>
+        </el-form>
+      </main>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import StatisticsItem from './StatisticsItem.vue'
+import { generateUniqueId } from '../utils/utils'
+
+export default {
+  components: {
+    StatisticsItem
+  },
+  data() {
+    return {
+      dialogConfig: {
+        width: '55%',
+        setPLVisible: false,
+        title: '设置盈亏线'
+      },
+      addPLForm: {
+        aaa: '',
+        orderGoodsList: [],
+        otherList: [
+          {
+            label: '毛利率',
+            value: ''
+          }
+        ]
+      },
+      currentTab: 2,
+      isShowAddCustomFees: false,
+      addCustomFeeForm: {
+        label: '',
+        value: ''
+      }
+    }
+  },
+
+  mounted() {
+    this.addGoods()
+  },
+
+  methods: {
+    addGoods() {
+      this.addPLForm.orderGoodsList.push({
+        id: generateUniqueId(),
+        bbb: '',
+        ccc: '',
+        ddd: '',
+        eee: ''
+      })
+    },
+
+    addOther() {
+      this.isShowAddCustomFees = true
+    },
+
+    removeGoods(goodsInfo) {
+      this.addPLForm.orderGoodsList = this.addPLForm.orderGoodsList.filter((item) => item.id !== goodsInfo.id)
+    },
+
+    removeCustomFee() {
+      this.addCustomFeeForm.label = ''
+      this.addCustomFeeForm.value = ''
+      this.isShowAddCustomFees = false
+    },
+
+    handleAddCustomFee() {
+      const { label, value } = this.addCustomFeeForm
+      if (!label) {
+        return this.$message.warning('请填写自定义费用名称')
+      }
+      if (!value) {
+        return this.$message.warning('请填写自定义费用数值')
+      }
+      this.addPLForm.otherList.push({ label, value })
+      this.removeCustomFee()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+main {
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .add-goods-btn {
+    width: 100%;
+    height: 28px;
+    background-color: #deeaff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #1469ff;
+    border: 1px dotted #adcaff;
+  }
+
+  .next-btn-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+
+    .prev-btn {
+      color: #000;
+      font-size: 12px;
+      border: 1px solid #dcdfe6;
+      background-color: #fff;
+    }
+  }
+
+  .merge {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .delete-btn {
+      position: absolute;
+      top: 50%;
+      right: -27px;
+      width: 16px !important;
+      height: 16px !important;
+      background: url('../../../assets/images/dashboard/delete-btn.png') no-repeat;
+      background-size: cover;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    .add-custorm-fee-btn {
+      position: absolute;
+      top: 50%;
+      right: -100px;
+      transform: translateY(-50%);
+    }
+  }
+}
+</style>

src/views/dashboard/componets/SiteMapChart.vue

@@ -0,0 +1,55 @@
+<template>
+  <div style="width: 100%" ref="chartsWrapperRef"></div>
+</template>
+
+<script>
+import echartsMixin from '../mixin/echarts'
+import chinaJson from '../data/map/china.json'
+import { generateMapHoveDom as formatter } from '../utils/echarts'
+
+const mapItemAreaColor = ['#ccd9eb', '#a7c7f2', '#5c9bf1', '#2e81f3']
+
+export default {
+  mixins: [
+    echartsMixin('chartsWrapperRef', false, {
+      beforeInit(echarts) {
+        echarts.registerMap('china', chinaJson)
+      }
+    })
+  ],
+  data() {
+    return {
+      staticOptions: {
+        grid: { top: '0px', left: '0px', bottom: '0px', right: '0px' },
+        tooltip: { padding: 0, trigger: 'item', formatter },
+        geo: { type: 'map', mapType: 'china' },
+        series: {
+          type: 'map',
+          mapType: 'china', // 使用中国地图
+          data: [],
+          label: { show: true, color: '#fff' },
+          itemStyle: { top: 0, left: 0, right: 0, normal: { areaColor: '#249eff', borderColor: '#fff' }, emphasis: { areaColor: '#0f57ff', label: { color: '#fff' } } }
+        }
+      }
+    }
+  },
+  methods: {
+    async update(data) {
+      this.instance.setOption({
+        series: {
+          data: data.map((item) => {
+            const nationalMapDataList = item.nationalMapDataList
+            const sum = nationalMapDataList.reduce((acc, curr) => acc + curr.dataNumber, 0)
+            const areaColor = sum > 20 ? mapItemAreaColor[3] : sum > 10 ? mapItemAreaColor[2] : sum > 0 ? mapItemAreaColor[1] : mapItemAreaColor[0]
+            return {
+              name: item.provinces,
+              value: JSON.stringify(nationalMapDataList),
+              itemStyle: { normal: { areaColor } }
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/componets/SitePieChart.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
+</template>
+
+<script>
+import echartsMixin from '../mixin/echarts'
+export default {
+  mixins: [echartsMixin('chartsWrapperRef')],
+  data() {
+    return {
+      staticOptions: {
+        tooltip: { trigger: 'item' },
+        legend: { top: 'center', right: '15%', orient: 'vertical', itemWidth: 15, itemHeight: 15, itemGap: 16, borderRadius: [0, 0, 0, 0], shadowBlur: 0 },
+        label: { show: true },
+        series: {
+          type: 'pie',
+          radius: ['40%', '80%'],
+          avoidLabelOverlap: true,
+          labelLine: { show: true },
+          center: ['40%', '50%'],
+          clockwise: false,
+          data: [],
+          itemStyle: {
+            emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
+            normal: { color: (params) => ['#21CCFF', '#249EFF', '#495FFF'][params.dataIndex], label: { show: true } }
+          }
+        }
+      }
+    }
+  },
+
+  methods: {
+    update(data = {}) {
+      this.instance.setOption({
+        series: {
+          label: {
+            normal: {
+              position: 'outside',
+              formatter: '{b}\n{c} ({d}%)'
+            }
+          },
+          data: [
+            { value: data.communityShopQuantity || 0, name: '社区店总量', label: { show: true, color: '#21CCFF' } },
+            { value: data.businessDistrictShopQuantity || 0, name: '商圈商家总量', label: { show: true, color: '#249EFF' } },
+            { value: data.mallShopQuantity || 0, name: '商城工厂总量', label: { show: true, color: '#495FFF' } }
+          ]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.diagrams-chart-container {
+  height: 240px;
+}
+</style>

src/views/dashboard/componets/SourceChannelSelect.vue

@@ -0,0 +1,12 @@
+<template>
+  <el-select size="small" v-model="selectValue" placeholder="请选择" style="width: 95px">
+    <el-option v-for="item in sourceChannelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+  </el-select>
+</template>
+
+<script>
+import selectMixin from '../mixin/select'
+export default {
+  mixins: [selectMixin('sourceChannelList')]
+}
+</script>

src/views/dashboard/componets/StatisticsItem.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-tooltip :offset="30" :disabled="!tooltip" placement="top" effect="light">
+      <template #content>
+        <slot name="tooltip"></slot>
+      </template>
+      <div class="statistics-item-container">
+        <div :style="{ textAlign: center ? 'center' : 'left' }" class="title">{{ title }}</div>
+        <div :style="{ textAlign: center ? 'center' : 'left' }" class="value" ref="valueRef">{{ value }}</div>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { CountUp } from 'countup.js'
+import { formatBigNumber } from '../utils/utils'
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    value: {
+      type: [Number, String],
+      required: true
+    },
+
+    numberAnimate: {
+      type: Boolean,
+      default: true
+    },
+
+    center: {
+      type: Boolean,
+      default: false
+    },
+
+    tooltip: {
+      type: Boolean,
+      default: false
+    },
+
+    format: {
+      type: Function
+    }
+  },
+
+  watch: {
+    value: {
+      handler(count) {
+        count * 1 !== 0 && this.init()
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        let unit = ''
+        let count = ''
+        if (this.format && typeof this.format === 'function') {
+          const res = this.format(this.value)
+          unit = res.unit
+          count = res.count
+        } else {
+          const numberInfo = formatBigNumber(this.value)
+          unit = numberInfo.unit
+          count = numberInfo.count
+        }
+
+        const countUpOptions = {}
+        let scrollNUmber = ''
+        if (count.includes('.') && count.split('.')[1].trim() === '00') {
+          scrollNUmber = count.split('.')[0]
+        } else {
+          scrollNUmber = count
+          countUpOptions.decimalPlaces = 2
+        }
+        if (unit) {
+          countUpOptions.suffix = unit
+        }
+
+        const cu = new CountUp(this.$refs.valueRef, scrollNUmber, countUpOptions)
+        cu.start()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-item-container {
+  .title {
+    color: #424e66;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 8px;
+
+    @media (max-width: 1140px) {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @media (max-width: 1096px) {
+      width: auto;
+      white-space: none;
+    }
+  }
+
+  .value {
+    color: #141736;
+    font-size: 24px;
+    line-height: 1.5;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+}
+</style>

src/views/dashboard/componets/StatisticsPanel.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="statistics-panel-container">
+    <div class="section-header">
+      <div class="section-header-title">
+        <div class="title-text">{{ title }}</div>
+        <AddresSelect v-model="filterForm.address" style="margin-left: 8px" v-if="filters.includes('address')"></AddresSelect>
+        <SourceChannelSelect v-model="filterForm.sourceChannel" style="margin-left: 8px" v-if="filters.includes('sourceChannel')"></SourceChannelSelect>
+        <DateSelect v-model="filterForm.date" style="margin-left: 8px" v-if="filters.includes('date')"></DateSelect>
+        <slot name="filter"></slot>
+      </div>
+
+      <div>
+        <slot name="button"></slot>
+      </div>
+    </div>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import AddresSelect from './AddresSelect.vue'
+import SourceChannelSelect from './SourceChannelSelect.vue'
+import DateSelect from './DateSelect.vue'
+
+export default {
+  components: { AddresSelect, SourceChannelSelect, DateSelect },
+  props: {
+    title: { type: String, default: '统计' },
+    filters: { type: Array, default: () => [] }
+  },
+
+  data() {
+    return {
+      filterForm: {}
+    }
+  },
+
+  watch: {
+    filters: {
+      handler(list) {
+        this.filterForm = {}
+        list.forEach((key) => {
+          this.$set(this.filterForm, key, 1)
+        })
+      },
+      deep: true,
+      immediate: true
+    },
+
+    filterForm: {
+      handler(form) {
+        this.$emit('change', form)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-panel-container {
+  padding: 24px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  margin: 16px 0;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+
+    @media (max-width: 675px) {
+      display: block;
+
+      .section-header-title{
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .section-header-title {
+    position: relative;
+    padding-left: 20px;
+    display: flex;
+    align-items: center;
+
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      width: 4px;
+      height: 16px;
+      background-color: #2673ff;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .title-text {
+      color: #141736;
+      font-size: 24px;
+      font-weight: bold;
+      margin-right: 16px;
+      line-height: 1.5;
+    }
+  }
+}
+</style>

src/views/dashboard/componets/StatisticsSection.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="statistics-section-container">
+      <img class="icon" :src="meta.icon" alt="" />
+      <div class="info">
+        <div class="title">
+          {{ meta.label }}
+          <DateSelect v-model="filterForm.date" v-if="meta.filter && meta.filter.includes('date')" style="margin-left: 16px"></DateSelect>
+          <SourceChannelSelect v-model="filterForm.scourceChannel" v-if="meta.filter && meta.filter.includes('scourceChannel')" style="margin-left: 8px"></SourceChannelSelect>
+        </div>
+        <div class="list">
+          <StatisticsItem v-for="(item, index) in meta.children" :key="index" :style="meta.itemStyles" :title="item.label" :value="itemData[item.field]" :format="item.format" :tooltip="item.tooltip">
+            <template #tooltip>
+              <slot :name="item.field"></slot>
+            </template>
+          </StatisticsItem>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsItem from './StatisticsItem'
+import DateSelect from './DateSelect.vue'
+import SourceChannelSelect from './SourceChannelSelect.vue'
+
+export default {
+  components: { StatisticsItem, DateSelect, SourceChannelSelect },
+  props: {
+    meta: {
+      type: Object,
+      required: true
+    },
+
+    itemData: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      filterForm: {}
+    }
+  },
+
+  watch: {
+    meta: {
+      handler(meta) {
+        this.filterForm = {}
+        meta.filter &&
+          meta.filter.forEach((key) => {
+            this.$set(this.filterForm, key, 1)
+          })
+      },
+      immediate: true,
+      deep: true
+    },
+
+    filterForm: {
+      handler(data) {
+        this.$emit('change', { title: this.meta.label, data, meta: this.meta })
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-section-container {
+  background-color: #f7f8fa;
+  flex: 1;
+  padding-top: 24px;
+  padding-left: 24px;
+  padding-bottom: 16px;
+  box-sizing: border-box;
+  display: flex;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform ease 0.5s, box-shadow ease 0.5s;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25), 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+    margin-right: 16px;
+  }
+
+  .info {
+    flex: 1;
+    padding-top: 9px;
+    .title {
+      display: flex;
+      align-items: center;
+      color: #141736;
+      font-weight: bold;
+      font-size: 20px;
+      line-height: 1.5;
+      margin-bottom: 15px;
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/dashboard/componets/TrendPanel.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="trend-panel-container">
+    <StatisticsItem :title="label" :value="value"></StatisticsItem>
+    <!-- <div class="trend-text">
+      <span class="lable">较昨日{{ currentInfo.text }}:</span>
+      <span class="percent-text" :style="{ color: currentInfo.color }">{{ percent }}</span>
+      <img class="trend-icon" :src="currentInfo.icon" alt="" />
+    </div> -->
+  </div>
+</template>
+
+<script>
+import StatisticsItem from './StatisticsItem.vue'
+
+const up = { text: '上涨', color: '#E90808', icon: require('../../../assets/images/dashboard/up-icon.png') }
+const down = { text: '下跌', color: '#0BBD1D', icon: require('../../../assets/images/dashboard/down-icon.png') }
+
+export default {
+  components: { StatisticsItem },
+  props: {
+    type: {
+      type: String,
+      default: 'up'
+    },
+    percent: {
+      type: String,
+      default: '0%'
+    },
+    label: {
+      type: String,
+      required: true
+    },
+
+    value: {
+      type: [Number, String],
+      required: true
+    }
+  },
+
+  computed: {
+    currentInfo() {
+      return this.type === 'up' ? up : down
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@media (max-width: 1395px) {
+  ::v-deep .title {
+    width: 75px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  ::v-deep .value{
+    font-size: 18px !important;
+  }
+}
+
+
+.trend-panel-container {
+  position: relative;
+  background-color: #f7f8fa;
+  flex: 1;
+  padding: 24px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 350ms, border-radius 1s;
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+
+    .trend-text {
+      color: #fff !important;
+    }
+  }
+
+  &:hover {
+    transform: translateY(-5px);
+    border-radius: 20px;
+  }
+
+  .trend-text {
+    display: flex;
+    align-items: center;
+    color: #3d3d3d;
+    font-size: 12px;
+
+    .lable {
+      @media (max-width: 1669px) {
+        display: none;
+      }
+    }
+
+    .percent-text {
+      margin: 0 7px;
+    }
+
+    .trend-icon {
+      width: 14px;
+      height: 8px;
+    }
+  }
+}
+</style>

src/views/dashboard/config.js

@@ -1,38 +0,0 @@
-export const TREND = { UP: 'up', DOWN: 'down', STABILIZATION: 'stabilization' }
-
-// 统计区
-export const statisticalArea = [
-  {
-    name: '会员统计',
-    list: [
-      { name: '会员总数', trend: '', field: 'memberStatistics.memberTotal' },
-      { name: '普通会员统计', trend: '', field: 'memberStatistics.normalMemberTotal' },
-      { name: '团长数量', trend: '', field: 'memberStatistics.headquarterTotal' },
-      { name: '合伙人数量', trend: '', field: 'memberStatistics.partnerTotal' }
-    ]
-  },
-  {
-    name: '订单统计',
-    list: [
-      { name: '订单总量', trend: '', field: 'orderStatistics.orderTotal' },
-      { name: '今日单量', trend: '', field: 'orderStatistics.todayOrderTotal' },
-      { name: '今日完成订单', trend: '', field: 'orderStatistics.todayFinishOrderTotal' }
-    ]
-  },
-  {
-    name: '财务统计',
-    list: [
-      { decimalPlaces: 2, name: '总交易额', trend: '', field: 'financeStatistics.totalTransactionAmount' },
-      { decimalPlaces: 2, name: '代金券总支出', field: 'financeStatistics.totalCouponAmount' },
-      { decimalPlaces: 2, name: '今日交易额', trend: '', field: 'financeStatistics.todayTransactionAmount' },
-      { decimalPlaces: 2, name: '今日代金券支出', trend: '', field: 'financeStatistics.todayCouponAmount' }
-    ]
-  }
-]
-
-export const partnerTotalConfig = [
-  { name: '师傅数量', trend: '', field: 'masterWorkerQuantity' },
-  { name: '会员总量', trend: '', field: 'memberTotal' },
-  { name: '团长总量', trend: '', field: 'headquarterTotal' },
-  { name: '合伙人总量', trend: '', field: 'partnerTotal' }
-]

src/views/dashboard/data/dashboard.js

@@ -0,0 +1,118 @@
+// 统计区
+export const statisticalArea = [
+  {
+    label: '会员统计',
+    icon: require('../../../assets/images/dashboard/member.png'),
+    children: [
+      { label: '会员总数', field: 'memberTotal' },
+      {
+        label: '会员同比增长率',
+        field: 'memberIncreaseRate',
+        tooltip: true,
+        format(value) {
+          return { count: value * 100 + '', unit: '%' }
+        }
+      },
+      { label: '普通会员数量', field: 'normalMemberTotal' },
+      { label: '团长数量', field: 'headquarterTotal' },
+      { label: '合伙人数量', field: 'partnerTotal' }
+    ],
+    // styles: 'margin: 0 0 16px; flex: 0 0 32%',
+    itemStyles: 'width: 32%',
+    itemData: 'memberStatistics'
+  },
+  {
+    label: '订单统计',
+    icon: require('../../../assets/images/dashboard/order.png'),
+    children: [
+      { label: '订单总量', field: 'orderTotal' },
+      { label: '今日订单量', field: 'todayOrderTotal' },
+      { label: '今日完成订单', field: 'todayFinishOrderTotal' }
+    ],
+    // styles: 'margin: 0 16px 16px;  flex: 0 0 32%',
+    itemStyles: 'width: 50%',
+    // filter: ['date', 'scourceChannel'],
+    itemData: 'orderStatistics'
+  },
+  {
+    label: '平台交易数据统计',
+    icon: require('../../../assets/images/dashboard/admin-account.png'),
+    children: [
+      { label: '总交易额', field: 'totalTransactionAmount' },
+      { label: '今日交易额', field: 'todayTransactionAmount' },
+      { label: '总支出', field: 'totalExpense' },
+      { label: '总收入', field: 'totalIncome' }
+    ],
+    // styles: 'margin: 0 0 16px;  flex: 0 0 32%',
+    itemStyles: 'width: 50%',
+    itemData: 'platformTransactionDataStatistics'
+  },
+
+  {
+    label: '平台代金券统计',
+    icon: require('../../../assets/images/dashboard/admin-voucher.png'),
+    children: [
+      { label: '总库存', field: 'voucherTotal' },
+      { label: '新增库存', field: 'voucherStock' },
+      { label: '今日使用量', field: 'todayVoucherUseTotal' },
+      { label: '今日实收金额', field: 'todayRealAmount' },
+      { label: '今日充值量', field: 'todayRechargeTotal' }
+    ],
+    // styles: 'margin: 0 0 16px;  flex: 0 0 32%',
+    itemStyles: 'width: 32%',
+    itemData: 'voucherStatistics'
+  },
+  {
+    label: '佣金统计',
+    icon: require('../../../assets/images/dashboard/commission.png'),
+    children: [
+      { label: '累计收入佣金', field: 'totalIncome' },
+      { label: '今日总收入佣金', field: 'todayTotalIncome' },
+      { label: '团长佣金分配总额', field: 'headquarterCommission' },
+      { label: '合伙人佣金分配总额', field: 'partnerCommission' },
+      { label: '加盟商佣金分配总额', field: 'joinCommission' },
+      { label: '代理商佣金分配总额', field: 'agentCommission' }
+    ],
+    // styles: 'margin: 0 16px 16px;  flex: 0 0 32%',
+    itemStyles: 'width: 33%',
+    // filter: ['scourceChannel'],
+    itemData: 'commissionStatistics'
+  },
+  {
+    label: '消费金统计',
+    icon: require('../../../assets/images/dashboard/consumption-gold.png'),
+    children: [
+      { label: '消费金总收入', field: 'totalIncome' },
+      { label: '消费金总支付', field: 'totalConsumption' },
+      { label: '今日消费金支出订单金额', field: 'todayConsumptionOrderAmount' },
+      { label: '今日消费金支付订单数', field: 'todayConsumptionOrderTotal' }
+    ],
+    // styles: 'margin: 0 0 16px;  flex: 0 0 32%',
+    itemStyles: 'width: 50%',
+    itemData: 'consumptionStatistics'
+  }
+]
+
+// 消费画像
+export const consumerProfile = [
+  { label: '会员总消费金额', field: 'memberConsumptionTotal' },
+  { label: '会员总下单次数', field: 'memberOrderTotal', itemStyles: 'margin: 0 16px' },
+  { label: '会员总售后次数', field: 'memberAfterSaleTotal' }
+]
+
+// 财务统计
+export const financialStatistics = [
+  { label: '应收金额', field: 'receivableAmount' },
+  { label: '优免金额', field: 'discountAmount', itemStyles: 'margin: 0 16px' },
+  { label: '实收金额', field: 'realAmount', itemStyles: 'margin: 0 16px' },
+  { label: '客流量', field: 'customerFlow', itemStyles: 'margin: 0 16px' },
+  { label: '盈亏达成率', field: 'profitLossRate' }
+]
+
+// 网点统计的数据统计
+export const sitedatastatistics = [
+  { label: '师傅数量', field: 'masterWorkerQuantity', itemStyles: 'margin: 0  51px 0 16px' },
+  { label: '会员', field: 'memberTotal', itemStyles: 'margin-right: 51px' },
+  { label: '团长总量', field: 'headquarterTotal', itemStyles: 'margin-right: 51px' },
+  { label: '合伙人总量', field: 'partnerTotal', itemStyles: 'margin-right: 51px' }
+]

src/views/dashboard/index.vue

@@ -1,420 +1,663 @@
-<template>
-  <div class="dashboardPage" ref="dashboardPageRef">
-    <!-- 建行交易统计 -->
-    <!-- <SectionBlock title="建行交易统计">
-      <div class="content-1">
-        <div class="statistics-wrapper">
-          <StatisticsPanel1 :icon="require('../../assets/images/dashboard/total-amount-received.png')" tip="团蜂收款总额（元）" :amount="0"></StatisticsPanel1>
-          <StatisticsPanel1
-            iconShadow="0px 7px 6px -6px rgba(1, 184, 221, 0.42),0px 6px 10px 0px rgba(1, 184, 221, 0.24)"
-            tip="商家交易总额（元）"
-            :icon="require('../../assets/images/dashboard/ttaom.png')"
-            :amount="0"
-          ></StatisticsPanel1>
-        </div>
-
-        <SelectionPane style="height: 328px" title="交易商家明细" padding="0 32px">
-          <div style="display: flex; justify-content: space-between">
-            <RankingTable style="margin-right: 24px"></RankingTable>
-            <RankingTable></RankingTable>
-          </div>
-        </SelectionPane>
-      </div>
-    </SectionBlock> -->
-
-    <!-- 统计区 -->
-    <SectionBlock title="统计区" style="margin-top: 32px">
-      <div class="s-container" style="display: flex">
-        <SelectionPane
-          style="min-height: 278px"
-          :title="item.name"
-          padding="0 24px"
-          v-for="(item, index1) in statisticalArea"
-          :key="item.name"
-          :style="{
-            'margin-left': index1 === 1 ? '20px' : '',
-            'margin-right': index1 === 1 ? '20px' : ''
-          }"
-        >
-          <div class="statistical-wrapper">
-            <Counter
-              style="width: 50%"
-              :style="{
-                'margin-bottom': index <= 2 ? '24px' : 0,
-                'margin-top': index <= 2 ? '14px' : 0
-              }"
-              v-for="(item2, index) in item.list"
-              :key="item2.name"
-              :count="getData(item2.field)"
-              :tip="item2.name"
-              :trend="item2.trend"
-              :decimalPlaces="item2.decimalPlaces || 0"
-            ></Counter>
-          </div>
-        </SelectionPane>
-      </div>
-    </SectionBlock>
-
-    <!-- 分析图 & 商品排名 -->
-    <div style="margin-top: 32px; display: flex">
-      <SectionBlock title="分析图" style="flex: 3; margin-right: 24px; flex-shrink: 0">
-        <SelectionPane style="height: 360px" padding="0 24px">
-          <el-tabs v-model="activeName" @tab-click="handleChangeTabPane">
-            <el-tab-pane label="交易额" name="transactionAmountRef">
-              <DiagramsChart chartTitle="交易总额(元)" ref="transactionAmountRef" :statisticalData="diagramsLeftData.transactionAmount"></DiagramsChart>
-            </el-tab-pane>
-            <el-tab-pane label="订单量" name="orderQuantityRef">
-              <DiagramsChart chartTitle="订单量(单)" ref="orderQuantityRef" :statisticalData="diagramsLeftData.orderQuantity"></DiagramsChart>
-            </el-tab-pane>
-            <el-tab-pane label="会员量" name="memberQuantityRef">
-              <DiagramsChart chartTitle="会员量(个)" ref="memberQuantityRef" :statisticalData="diagramsLeftData.memberQuantity"></DiagramsChart>
-            </el-tab-pane>
-          </el-tabs>
-        </SelectionPane>
-      </SectionBlock>
-
-      <SectionBlock title="商品排名" style="flex: 2; flex-shrink: 0">
-        <SelectionPane style="height: 360px" padding="0 24px">
-          <el-tabs v-model="activeName2" @tab-click="handleChangeTabPane1">
-            <el-tab-pane label="社区" name="community">
-              <div class="btns-container">
-                <button @click="rankingData.community.activeName = 'transactionVolume'" :class="{ active: rankingData.community.activeName === 'transactionVolume' }">商品交易量</button>
-                <button @click="rankingData.community.activeName = 'aTurnover'" :class="{ active: rankingData.community.activeName === 'aTurnover' }">交易金额</button>
-              </div>
-              <GoodsRanking
-                ref="community"
-                :animate="activeName2 === 'community'"
-                :rankingData="communityRankData"
-                :valueAlias="rankingData.community.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
-              ></GoodsRanking>
-            </el-tab-pane>
-            <el-tab-pane label="商圈" name="businessDistrict">
-              <div class="btns-container">
-                <button @click="rankingData.businessDistrict.activeName = 'transactionVolume'" :class="{ active: rankingData.businessDistrict.activeName === 'transactionVolume' }">商品交易量</button>
-                <button @click="rankingData.businessDistrict.activeName = 'aTurnover'" :class="{ active: rankingData.businessDistrict.activeName === 'aTurnover' }">交易金额</button>
-              </div>
-              <GoodsRanking
-                ref="businessDistrict"
-                :animate="activeName2 === 'businessDistrict'"
-                :rankingData="businessDistrictRankData"
-                :valueAlias="rankingData.businessDistrict.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
-              ></GoodsRanking>
-            </el-tab-pane>
-            <el-tab-pane label="商城" name="shop">
-              <div class="btns-container">
-                <button @click="rankingData.shop.activeName = 'transactionVolume'" :class="{ active: rankingData.shop.activeName === 'transactionVolume' }">商品交易量</button>
-                <button @click="rankingData.shop.activeName = 'aTurnover'" :class="{ active: rankingData.shop.activeName === 'aTurnover' }">交易金额</button>
-              </div>
-              <GoodsRanking
-                ref="shop"
-                :animate="activeName2 === 'shop'"
-                :rankingData="shopRankData"
-                :valueAlias="rankingData.shop.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
-              ></GoodsRanking>
-            </el-tab-pane>
-          </el-tabs>
-        </SelectionPane>
-      </SectionBlock>
-    </div>
-
-    <!-- 网点统计 -->
-    <!-- 统计区 -->
-    <SectionBlock title="网点统计" style="margin-top: 32px">
-      <div class="total-site">
-        <div class="left-wrapper">
-          <div class="total-partner">
-            <el-select v-model="selects.sites">
-              <el-option label="全国" :value="1"></el-option>
-            </el-select>
-            <div class="wrapper">
-              <Counter style="flex: 1" :count="branchStatisticsData[item.field] || 0" :tip="item.name" :trend="item.trend" v-for="item in partnerTotalConfig" :key="item.name"></Counter>
-            </div>
-          </div>
-          <div class="total-shop">
-            <TotalShopChartVue ref="totalShopChartVueRef" :siteData="allData.dotStatistics"></TotalShopChartVue>
-          </div>
-        </div>
-        <div class="right-wrapper">
-          <NetworkDistribution :sites-data="allData.nationalMapList || []" ref="networkDistributionRef"></NetworkDistribution>
-        </div>
-      </div>
-    </SectionBlock>
-  </div>
-</template>
-
-<script>
-import * as _ from 'lodash'
-import { getHomeStatisticsData } from '@/api/home'
-import SectionBlock from './components/SectionBlock.vue'
-import StatisticsPanel1 from './components/StatisticsPanel1.vue'
-import RankingTable from './components/RankingTable.vue'
-import SelectionPane from './components/SelectionPane.vue'
-import { statisticalArea, partnerTotalConfig } from './config'
-import Counter from './components/Counter.vue'
-import DiagramsChart from './components/DiagramsChart.vue'
-import GoodsRanking from './components/GoodsRanking.vue'
-import TotalShopChartVue from './components/TotalShopChart.vue'
-import NetworkDistribution from './components/NetworkDistribution.vue'
-
-export default {
-  components: {
-    SectionBlock,
-    StatisticsPanel1,
-    RankingTable,
-    SelectionPane,
-    Counter,
-    DiagramsChart,
-    GoodsRanking,
-    TotalShopChartVue,
-    NetworkDistribution
-  },
-  data() {
-    return {
-      statisticalArea: Object.freeze(statisticalArea),
-      partnerTotalConfig: Object.freeze(partnerTotalConfig),
-      activeName: 'transactionAmountRef',
-      activeName2: 'community',
-      allData: {},
-      branchStatisticsData: {}, // 网点统计表格数据
-      diagramsLeftData: {}, // 分析图左侧柱状图数据
-      rankingData: {
-        community: {
-          activeName: 'transactionVolume',
-          transactionVolume: [], // 交易量
-          aTurnover: [] // 交易额
-        },
-        shop: {
-          activeName: 'transactionVolume',
-          transactionVolume: [], // 交易量
-          aTurnover: [] // 交易额
-        },
-        businessDistrict: {
-          activeName: 'transactionVolume',
-          transactionVolume: [], // 交易量
-          aTurnover: [] // 交易额
-        }
-      },
-      selects: { sites: 1 }
-    }
-  },
-  created() {
-    this.getHomeStatisticsData()
-  },
-  mounted() {
-    const observer = new ResizeObserver(
-      _.debounce(() => {
-        this.$refs[this.activeName].resize()
-        this.$refs.networkDistributionRef.resize()
-        this.$refs.totalShopChartVueRef.resize()
-      }, 200)
-    )
-    observer.observe(this.$refs.dashboardPageRef)
-  },
-  methods: {
-    async getHomeStatisticsData() {
-      const res = await getHomeStatisticsData()
-      if (res.code == 200) {
-        this.allData = res.data
-
-        const { dotStatistics = {}, analysisChartStatistics = {}, goodsSortStatistics = {} } = this.allData
-        this.updateBranchStatisticsData(
-          dotStatistics.masterWorkerQuantity,
-          this.getData('memberStatistics.memberTotal'),
-          this.getData('memberStatistics.headquarterTotal'),
-          this.getData('memberStatistics.partnerTotal')
-        )
-        this.updateDiagramsLeftData(analysisChartStatistics)
-        this.updateRankingData(goodsSortStatistics)
-      }
-    },
-
-    getData(path) {
-      if (!path) return 0
-      const keys = path.split('.')
-      let result = this.allData
-      for (let key of keys) {
-        if (result == null || result == undefined) {
-          return 0
-        }
-        result = result[key]
-      }
-      return result == null || result == undefined ? 0 : result
-    },
-
-    handleChangeTabPane() {
-      this.$refs[this.activeName].resize()
-    },
-
-    handleChangeTabPane1() {
-      this.$refs[this.activeName2].startAnimate()
-    },
-
-    // 监听容器宽度变化
-    startWatchContainerSize() {},
-
-    /**
-     * 设置网点统计表格数据
-     * @param {number} masterWorkerQuantity 师傅数量
-     * @param {number} memberTotal 会员总数
-     * @param {number} headquarterTotal 团长数量
-     * @param {number} partnerTotal 合伙人数量
-     */
-    updateBranchStatisticsData(masterWorkerQuantity = 0, memberTotal = 0, headquarterTotal = 0, partnerTotal = 0) {
-      this.branchStatisticsData.masterWorkerQuantity = masterWorkerQuantity
-      this.branchStatisticsData.memberTotal = memberTotal
-      this.branchStatisticsData.headquarterTotal = headquarterTotal
-      this.branchStatisticsData.partnerTotal = partnerTotal
-    },
-
-    /**
-     * 更新分析图左侧数据，交易额/订单量/会员量
-     */
-    updateDiagramsLeftData(data) {
-      this.diagramsLeftData = data || {}
-    },
-
-    /**
-     * 更新商品排名数据集
-     */
-    updateRankingData(data) {
-      this.rankingData.community.aTurnover = data.communityProductStatisticsAmountList
-      this.rankingData.community.transactionVolume = data.communityProductStatisticsTotalList
-
-      this.rankingData.shop.aTurnover = data.mallProductStatisticsAmountList
-      this.rankingData.shop.transactionVolume = data.mallProductStatisticsTotalList
-
-      this.rankingData.businessDistrict.aTurnover = data.businessDistrictProductStatisticsAmountList
-      this.rankingData.businessDistrict.transactionVolume = data.businessDistrictProductStatisticsTotalList
-    }
-  },
-
-  computed: {
-    communityRankData() {
-      return this.rankingData.community.activeName === 'transactionVolume' ? this.rankingData.community.transactionVolume : this.rankingData.community.aTurnover
-    },
-    shopRankData() {
-      return this.rankingData.shop.activeName === 'transactionVolume' ? this.rankingData.shop.transactionVolume : this.rankingData.shop.aTurnover
-    },
-    businessDistrictRankData() {
-      return this.rankingData.businessDistrict.activeName === 'transactionVolume' ? this.rankingData.businessDistrict.transactionVolume : this.rankingData.businessDistrict.aTurnover
-    }
-  },
-
-
-  destroyed(){
-    
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboardPage {
-  width: 100%;
-  min-height: calc(100vh - 50px);
-  background-color: #f7f8fa;
-  padding: 16px 24px;
-  box-sizing: border-box;
-  overflow: scroll;
-
-  .content-1 {
-    height: 328px;
-    display: flex;
-    align-items: center;
-
-    .statistics-wrapper {
-      height: 328px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      /* box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05); */
-      border-radius: 8px;
-      margin-right: 24px;
-    }
-
-    .ranking-table-wrapper {
-      flex: 1;
-    }
-  }
-
-  .btns-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-
-    button {
-      padding: 6px 8px;
-      font-size: 14px;
-      border-radius: 4px;
-      background-color: #f7f8fa;
-      margin-right: 14px;
-      cursor: pointer;
-      transition: all 350ms;
-
-      &:active {
-        opacity: 0.8;
-      }
-
-      &.active {
-        color: #fff;
-        background-color: #495fff;
-      }
-    }
-  }
-
-  .total-site {
-    display: flex;
-    align-items: center;
-    height: 496px;
-
-    .left-wrapper {
-      flex: 1;
-      margin-right: 24px;
-      height: 496px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-
-      .total-partner {
-        height: 184px;
-        width: 100%;
-        background-color: #fff;
-        box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
-        border-radius: 8px;
-        padding: 24px 32px 32px 24px;
-
-        .wrapper {
-          display: flex;
-          align-items: center;
-          margin-top: 24px;
-        }
-      }
-
-      .total-shop {
-        height: 288px;
-        width: 100%;
-        background-color: #fff;
-        box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
-        border-radius: 8px;
-      }
-    }
-
-    .right-wrapper {
-      flex: 1;
-      height: 496px;
-      background-color: #fff;
-      box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
-      border-radius: 8px;
-    }
-  }
-
-  .s-container {
-    width: 100%;
-
-    .statistical-wrapper {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-  }
-}
-</style>
+<template>
+  <div class="dashboard-container" ref="dashboardContainerRef">
+    <!-- 顶部的地区和店铺筛选 -->
+    <div class="total-search">
+      <div class="wrapper">
+        <AddresSelect size=""></AddresSelect>
+        <el-select class="shop-selector" v-model="totalSearch.selectShop" placeholder="请选择区域">
+          <el-option v-for="shop in selectOptions.shopListOptions" :key="shop.value" :label="shop.label" :value="shop.value"></el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 统计区域 -->
+    <!-- <StatisticsPanel :filters="['address']" title="统计区" @change="handleStatisticsAreaFilterChnage"> -->
+    <StatisticsPanel title="统计区" @change="handleStatisticsAreaFilterChnage">
+      <div ref="statisticalAreaRef" class="statistics-container">
+        <StatisticsSection
+          @change="handleFilterChange"
+          class="statistics-container-item"
+          style="flex-basis: calc((100% - 32px) / 3)"
+          :style="{
+            margin: [1, 4].includes(index) ? '0 16px' : '',
+            'margin-bottom': index <= 2 ? '16px' : 0
+          }"
+          v-for="(item, index) in statisticalArea"
+          :key="item.label + index"
+          :meta="item"
+          :itemData="statisticalRegionData[item.itemData]"
+        >
+          <template #memberIncreaseRate>
+            <div class="memberIncreaseRate-tooltip">
+              <div class="item">
+                <div>昨日新增会员:</div>
+                <div>{{ statisticalRegionData.memberStatistics.yesterdayMember || 0 }} 个</div>
+              </div>
+              <div class="item">
+                <div>今日新增会员:</div>
+                <div>{{ statisticalRegionData.memberStatistics.todayMember || 0 }} 个</div>
+              </div>
+            </div>
+          </template>
+        </StatisticsSection>
+      </div>
+    </StatisticsPanel>
+
+    <!-- 消费画像，财务统计 -->
+    <div class="section">
+      <StatisticsPanel class="consumer-profile-wrapper" title="消费画像">
+        <!-- <template #button>
+          <el-button type="text">
+            消费画像
+            <i class="el-icon-arrow-right el-icon--right"></i>
+          </el-button>
+        </template> -->
+        <div class="consumer-profile-container">
+          <TrendPanel class="item" v-for="item in consumerProfile" :key="item.label" :label="item.label" :value="memberConsumptionStatistics[item.field]" :style="item.itemStyles"></TrendPanel>
+        </div>
+      </StatisticsPanel>
+      <!-- <StatisticsPanel class="financial-statistics-wrapper" title="财务统计" :filters="['date']" @change="handleFinancialStatisticsFilterChange"> -->
+      <StatisticsPanel class="financial-statistics-wrapper" title="财务统计" @change="handleFinancialStatisticsFilterChange">
+        <div class="financial-statistics-container">
+          <TrendPanel class="item" v-for="item in financialStatistics" :key="item.label" :label="item.label" :value="financeStatistics[item.field]" :style="item.itemStyles"></TrendPanel>
+        </div>
+      </StatisticsPanel>
+    </div>
+
+    <!-- 图表区 -->
+    <div class="charts-container">
+      <div class="left">
+        <!-- <StatisticsPanel :filters="['address', 'sourceChannel']" title="分析图" @change="handleAnalysisChartFilterChange"> -->
+        <StatisticsPanel title="分析图" @change="handleAnalysisChartFilterChange">
+          <template #button>
+            <button @click="currentAnalysisTab = 1" :class="{ active: currentAnalysisTab === 1 }" class="analysis-chart-btn">交易额</button>
+            <button @click="currentAnalysisTab = 2" :class="{ active: currentAnalysisTab === 2 }" class="analysis-chart-btn">订单量</button>
+            <button @click="currentAnalysisTab = 3" :class="{ active: currentAnalysisTab === 3 }" class="analysis-chart-btn">会员量</button>
+          </template>
+          <AnalysisChart ref="analysisChartRef" :chartData="diagramsData"></AnalysisChart>
+        </StatisticsPanel>
+
+        <div class="left-footer">
+          <!-- <StatisticsPanel style="width: 50%" :filters="['address']" title="物流统计" @change="handlelLogisticsStatisticsChartFilterChange"> -->
+          <StatisticsPanel style="width: 50%" title="物流统计" @change="handlelLogisticsStatisticsChartFilterChange">
+            <LogisticsStatisticsChart :chartData="logisticsStatistics" ref="lLogisticsStatisticsChartRef"></LogisticsStatisticsChart>
+          </StatisticsPanel>
+          <StatisticsPanel style="width: 50%" title="商品排名">
+            <template #button>
+              <button @click="currentGoodsRankingTab = 1" :class="{ active: currentGoodsRankingTab === 1 }" class="analysis-chart-btn">社区</button>
+              <button @click="currentGoodsRankingTab = 2" :class="{ active: currentGoodsRankingTab === 2 }" class="analysis-chart-btn">商圈</button>
+              <button @click="currentGoodsRankingTab = 3" :class="{ active: currentGoodsRankingTab === 3 }" class="analysis-chart-btn">商城</button>
+            </template>
+            <GoodsRankingChart :chartData="goodsRankingData" ref="goodsRankingChartRef"></GoodsRankingChart>
+          </StatisticsPanel>
+        </div>
+      </div>
+      <div class="right">
+        <!-- <StatisticsPanel :filters="['address']" title="网点统计" style="width: 100%; height: 860px; display: flex; flex-direction: column" @change="handleSiteFilterChange"> -->
+        <StatisticsPanel title="网点统计" style="width: 100%; height: 860px; display: flex; flex-direction: column" @change="handleSiteFilterChange">
+          <div class="data-statistics">
+            <StatisticsItem v-for="item in sitedatastatistics" :key="item.label" :title="item.label" :value="dotStatistics[item.field] || 0" :style="item.itemStyles"></StatisticsItem>
+          </div>
+          <div class="map-pie-container">
+            <SiteMapChart :chartData="nationalMapList" class="map-chart" ref="siteMapChartRef"></SiteMapChart>
+            <SitePieChart :chartData="dotStatistics" class="pie-chart" ref="sitePieChartRef"></SitePieChart>
+          </div>
+        </StatisticsPanel>
+      </div>
+    </div>
+
+    <PAndLWarning></PAndLWarning>
+    <!-- 设置盈亏红线 -->
+    <SetPLLine></SetPLLine>
+  </div>
+</template>
+
+<script>
+import * as _ from 'lodash'
+import { getHomeStatisticsData } from '@/api/home'
+import { getDefaultBarData } from './utils/echarts'
+import StatisticsPanel from './componets/StatisticsPanel.vue'
+import AddresSelect from './componets/AddresSelect.vue'
+import DateSelect from './componets/DateSelect.vue'
+import StatisticsSection from './componets/StatisticsSection'
+import TrendPanel from './componets/TrendPanel.vue'
+import AnalysisChart from './componets/AnalysisChart.vue'
+import LogisticsStatisticsChart from './componets/LogisticsStatisticsChart.vue'
+import GoodsRankingChart from './componets/GoodsRankingChart.vue'
+import StatisticsItem from './componets/StatisticsItem.vue'
+import SiteMapChart from './componets/SiteMapChart.vue'
+import SitePieChart from './componets/SitePieChart.vue'
+import PAndLWarning from './componets/PAndLWarning.vue'
+import SetPLLine from './componets/SetPLLine.vue'
+
+import { statisticalArea, consumerProfile, financialStatistics, sitedatastatistics } from './data/dashboard.js'
+
+export default {
+  components: {
+    SetPLLine,
+    PAndLWarning,
+    StatisticsPanel,
+    AddresSelect,
+    StatisticsSection,
+    TrendPanel,
+    AnalysisChart,
+    LogisticsStatisticsChart,
+    GoodsRankingChart,
+    StatisticsItem,
+    SiteMapChart,
+    SitePieChart,
+    DateSelect
+  },
+  data() {
+    return {
+      statisticalArea: Object.freeze(statisticalArea),
+      consumerProfile: Object.freeze(consumerProfile),
+      financialStatistics: Object.freeze(financialStatistics),
+      sitedatastatistics: Object.freeze(sitedatastatistics),
+      totalSearch: {
+        selectAddress: 1,
+        selectShop: 1
+      },
+      dymicStyle: {
+        siteContainerHeight: '891px',
+        statisticalAreaItemWidth: '32%'
+      },
+      selectOptions: {
+        addressSelectOptions: [
+          { label: '佛山市', value: 1 }
+          // { label: '乌鲁木齐市', value: 2 }
+        ],
+        shopListOptions: [
+          { label: '全部', value: 1 }
+          // { label: '文智瑜沙雕皮业', value: 2 }
+        ],
+        dateOptions: [
+          // { label: '今天', value: 1 },
+          // { label: '近一周', value: 2 },
+          // { label: '近一月', value: 3 },
+          // { label: '近一年', value: 4 }
+        ],
+        sourceChannelOptions: [
+          // { label: '社区', value: 1 },
+          // { label: '商圈', value: 2 },
+          // { label: '商城', value: 3 }
+        ]
+      },
+
+      // 分析图相关
+      currentAnalysisTab: 1, // 交易额1，订单量2，会员量3
+
+      // 销售排名
+      currentGoodsRankingTab: 1, // 社区1，商圈2，商城3
+
+      /* 数据区域 */
+
+      statisticalRegionData: {
+        memberStatistics: {
+          // 会员统计
+          memberTotal: 0, //会员总数
+          normalMemberTotal: 0, // 普通会员数量
+          headquarterTotal: 0, // 团长数量
+          partnerTotal: 0, // 合伙人数量
+          memberIncreaseRate: 0 // 会员增长率
+        },
+        orderStatistics: {
+          // 订单统计
+          orderTotal: 0, // 订单总数
+          todayOrderTotal: 0, // 今日订单量
+          todayFinishOrderTotal: 0 // 今日完成订单
+        },
+
+        platformTransactionDataStatistics: {
+          // 平台交易数据统计
+          totalTransactionAmount: 0, // 总交易额
+          todayTransactionAmount: 0, // 今日交易额
+          totalExpense: 0, // 总支出
+          totalIncome: 0 // 总输入
+        },
+
+        voucherStatistics: {
+          // 平台代金券统计
+          voucherTotal: 0, // 总库存
+          voucherStock: 0, // 新增库存
+          todayVoucherUseTotal: 0, // 今日使用量
+          todayRealAmount: 0, // 今日使用量
+          todayRechargeTotal: 0 // 今日充值量
+        },
+
+        commissionStatistics: {
+          // 佣金统计
+          totalIncome: 0, // 累计收入佣金
+          todayTotalIncome: 0, // 今日总收入佣金
+          headquarterCommission: 0, // 团长佣金分配总额
+          partnerCommission: 0, // 合伙人佣金分配总额
+          joinCommission: 0, // 加盟商佣金分配总额
+          agentCommission: 0 // 代理商佣金分配总额
+        },
+
+        consumptionStatistics: {
+          // 消费金统计
+          totalIncome: 0, // 消费金总收入
+          totalConsumption: 0, // 消费金总支付
+          todayConsumptionOrderAmount: 0, //今日消费金支出订单金额
+          todayConsumptionOrderTotal: 0 //今日消费金支付订单数
+        }
+      },
+
+      // 消费画像
+      memberConsumptionStatistics: {
+        memberConsumptionTotal: 0, // 会员消费总额
+        memberOrderTotal: 0, // 会员总下单次数
+        memberAfterSaleTotal: 0 // 会员总售后次数
+      },
+
+      // 财务统计
+      financeStatistics: {
+        receivableAmount: 0, // 应收金额
+        discountAmount: 0, // 优免金额
+        realAmount: 0, // 实收金额
+        customerFlow: 0, // 客流量
+        profitLossRate: 0 // 盈亏达成率
+      },
+
+      // 分析图数据
+      analysisChartStatistics: {
+        memberQuantity: getDefaultBarData(), // 会员量
+        orderQuantity: getDefaultBarData(), // 订单量
+        transactionAmount: getDefaultBarData() // 交易额
+      },
+
+      // 商品排名
+      goodsRanking: {
+        community: [],
+        shop: [],
+        businessDistrict: []
+      },
+
+      // 物流统计
+      logisticsStatistics: {
+        totalAmount: 0,
+        totalQuantity: 0
+      },
+
+      // 网点统计
+      dotStatistics: {
+        masterWorkerQuantity: 0 // 师傅数量
+      },
+
+      nationalMapList: []
+    }
+  },
+
+  provide() {
+    return {
+      addressList: this.selectOptions.addressSelectOptions,
+      dateList: this.selectOptions.dateOptions,
+      sourceChannelList: this.selectOptions.sourceChannelOptions
+    }
+  },
+
+  mounted() {
+    this.getHomeData()
+    this.observeContainerSize()
+  },
+
+  methods: {
+    // 一次性获取首页数据
+    async getHomeData() {
+      const res = await getHomeStatisticsData()
+      const { data } = res
+
+      Object.assign(this.statisticalRegionData.memberStatistics, data.memberStatistics, data.memberStatistics.memberIncreaseRate)
+
+      console.log('年的', this.statisticalRegionData.memberStatistics)
+      Object.assign(this.statisticalRegionData.orderStatistics, data.orderStatistics)
+      Object.assign(this.statisticalRegionData.platformTransactionDataStatistics, data.platformTransactionDataStatistics)
+      Object.assign(this.statisticalRegionData.voucherStatistics, data.voucherStatistics)
+      Object.assign(this.statisticalRegionData.commissionStatistics, data.commissionStatistics)
+      Object.assign(this.statisticalRegionData.consumptionStatistics, data.consumptionStatistics)
+      Object.assign(this.memberConsumptionStatistics, data.memberConsumptionStatistics)
+      Object.assign(this.analysisChartStatistics, data.analysisChartStatistics)
+      Object.assign(this.logisticsStatistics, data.logisticsStatistics)
+
+      // 商品排名
+      const { mallProductStatisticsTotalList, communityProductStatisticsTotalList, businessDistrictProductStatisticsTotalList } = data.goodsSortStatistics
+      this.goodsRanking.community = communityProductStatisticsTotalList
+      this.goodsRanking.shop = mallProductStatisticsTotalList
+      this.goodsRanking.businessDistrict = businessDistrictProductStatisticsTotalList
+
+      // 网点统计
+      this.dotStatistics = {
+        ...data.dotStatistics,
+        ...this.statisticalRegionData.memberStatistics
+      }
+      // 地图数据
+      this.nationalMapList = data.nationalMapList
+    },
+
+    // 最上面的搜索区域发生变化
+    handleChangeTotalSearchAddress(addressInfo) {
+      const { label, value } = addressInfo
+      this.totalSearch.selectAddress = value
+    },
+
+    // 监听容器变化重新渲染图标
+    observeContainerSize() {
+      const _this = this
+      const observer = new ResizeObserver(
+        _.debounce(() => {
+          try {
+            _this.$refs.analysisChartRef.resize()
+            _this.$refs.lLogisticsStatisticsChartRef.resize()
+            _this.$refs.goodsRankingChartRef.resize()
+            _this.$refs.siteMapChartRef.resize()
+            _this.$refs.sitePieChartRef.resize()
+          } catch (error) {}
+        }, 500)
+      )
+      observer.observe(this.$refs.dashboardContainerRef)
+    },
+
+    // 统计区域的筛选发生变化
+    handleStatisticsAreaFilterChnage(form) {
+      console.log('统计区域的筛选发生变化', form)
+    },
+
+    // 财务统计筛选发生变化
+    handleFinancialStatisticsFilterChange(form) {
+      console.log('财务统计区域筛选发生变化', form)
+    },
+
+    // 分析图区域筛选发生变化
+    handleAnalysisChartFilterChange(form) {
+      console.log('分析图区域筛选发生变化', form)
+    },
+
+    // 物流统计区域筛选发生变化
+    handlelLogisticsStatisticsChartFilterChange(form) {
+      console.log('物流统计区域筛选发生变化', form)
+    },
+
+    // 网点统计筛选区域发生变化
+    handleSiteFilterChange(form) {
+      console.log('网点统计筛选区域发生变化', form)
+    },
+
+    // 二级区域的筛选发生变化
+    handleFilterChange(label, data) {
+      console.log('二级区域发生变化了', label, data)
+    }
+  },
+
+  computed: {
+    // 分析图数据
+    diagramsData() {
+      return this.analysisChartStatistics[{ 1: 'transactionAmount', 2: 'orderQuantity', 3: 'memberQuantity' }[this.currentAnalysisTab]]
+    },
+
+    // 商品排名数据
+    goodsRankingData() {
+      return this.goodsRanking[{ 1: 'community', 2: 'businessDistrict', 3: 'shop' }[this.currentGoodsRankingTab]]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media (max-width: 1499px) {
+    &-item {
+      flex-basis: calc((100% - 16px) / 2) !important;
+      margin: 0 16px 16px 0 !important;
+
+      &:nth-child(2n) {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
+  @media (max-width: 1096px) {
+    display: block;
+    &-item {
+      margin: 0 0 16px !important;
+    }
+  }
+}
+
+.section {
+  display: flex;
+
+  .consumer-profile-wrapper {
+    flex: 325;
+    margin-right: 24px;
+  }
+
+  .financial-statistics-wrapper {
+    flex: 481;
+  }
+
+  .consumer-profile-container,
+  .financial-statistics-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media (max-width: 1394px) {
+    .consumer-profile-wrapper,
+    .financial-statistics-wrapper {
+      width: 48%;
+    }
+    .consumer-profile-container {
+      flex-wrap: wrap;
+      .item {
+        flex: 0 0 30%;
+        height: 135px;
+        margin: 0 !important;
+      }
+    }
+
+    .financial-statistics-container {
+      position: relative;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        margin-top: 10px;
+
+        background-color: rgba(255, 68, 0, 0);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #f6f6f6;
+        border-radius: 100px;
+      }
+
+      &:last-child {
+        margin-right: 0 !important;
+      }
+
+      .item {
+        flex: 0 0 32%;
+        height: 135px;
+        margin: 0 20px 0 0 !important;
+      }
+    }
+  }
+
+  @media (max-width: 1188px) {
+    display: block;
+
+    .consumer-profile-wrapper,
+    .financial-statistics-wrapper {
+      width: 100%;
+    }
+
+    .financial-statistics-container {
+      display: flex;
+
+      .item {
+        flex: 1;
+      }
+    }
+  }
+
+  @media (max-width: 730px) {
+    .financial-statistics-container {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        flex: 0 0 48%;
+        margin-right: 0 !important;
+        margin-bottom: 20px !important;
+      }
+    }
+  }
+
+  @media (max-width: 570px) {
+    .consumer-profile-container {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        flex: 0 0 48%;
+        margin-right: 0 !important;
+        margin-bottom: 20px !important;
+      }
+    }
+  }
+}
+
+.dashboard-container {
+  width: 100%;
+  height: calc(100vh - 50px);
+  background-color: #f4f7fc;
+  padding: 24px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  .total-search {
+    height: 72px;
+    background-color: #fff;
+    padding: 16px 24px;
+    box-sizing: border-box;
+
+    .wrapper {
+      display: inline-flex;
+      border: 1px solid #dfdfdf;
+      border-radius: 4px;
+
+      .shop-selector {
+        position: relative;
+        width: 256px;
+
+        &::after {
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 20px;
+          content: '';
+          display: block;
+          position: absolute;
+          background-color: #d8d8d8;
+        }
+      }
+    }
+  }
+
+  .charts-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    @media (max-width: 1373px) {
+      display: block;
+
+      .left,
+      .right {
+        width: 100% !important;
+      }
+    }
+
+    @media (max-width: 875px) {
+      .left-footer {
+        display: block !important;
+
+        ::v-deep .statistics-panel-container {
+          width: 100% !important;
+        }
+      }
+    }
+
+    .left {
+      width: 60%;
+      margin-right: 24px;
+
+      .analysis-chart-btn {
+        font-size: 14px;
+        color: #424e66;
+        line-height: 1.5;
+        padding: 3px 12px;
+        cursor: pointer;
+        margin-left: 16px;
+        background-color: transparent;
+
+        &.active {
+          color: #0519d4;
+          background-color: #f1f4ff;
+          border-radius: 4px;
+        }
+      }
+
+      .left-footer {
+        display: flex;
+      }
+    }
+
+    .right {
+      /* flex: 1; */
+      width: 40%;
+      .data-statistics {
+        display: flex;
+        align-items: center;
+      }
+
+      .map-pie-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        .map-chart {
+          flex: 1;
+          width: 100%;
+        }
+
+        .pie-chart {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.memberIncreaseRate-tooltip {
+  .item {
+    display: flex;
+    align-items: center;
+    line-height: 1.5;
+    font-size: 14px;
+
+    div {
+      &:nth-child(2) {
+        font-weight: bold;
+        color: #f40;
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/mixin/echarts.js

@@ -0,0 +1,94 @@
+/**
+ * @description
+ * @param {string} refName 图表容器ref
+ * @param {boolean} immediateRender 是否立即渲染图表
+ * @param { EchartsMixinOption } options 其他配置项
+ *
+ * @typedef {Object} EchartsMixinOption
+ * @property {Function} beforeInit 图表示例初始化前调用
+ * @property {Function} afterInit  图表初始化后调用
+ */
+export default (refName, immediateRender, options = {}) => {
+  const { beforeInit, afterInit } = options
+  return {
+    props: {
+      chartData: {
+        type: [Object, Array], // required: true
+        default: () => []
+      }
+    },
+
+    data() {
+      return {
+        instance: null,
+        observer: null,
+        reUpdateDate: null
+      }
+    },
+
+    watch: {
+      chartData: {
+        handler(value) {
+          if (this.instance) {
+            this.update && typeof this.update === 'function' && this.update(value)
+          } else {
+            this.reUpdateDate = value
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted() {
+      this.startObserve()
+    },
+
+    methods: {
+      startObserve() {
+        if (!immediateRender) {
+          this.observer = new IntersectionObserver(this.observerCB, { threshold: 0.7 })
+          this.observer.observe(this.$refs[refName])
+        } else {
+          this.init()
+        }
+      },
+
+      observerCB(e) {
+        const { isIntersecting } = e[0]
+        if (isIntersecting) {
+          this.init()
+          this.destroyObserver()
+        }
+      },
+
+      init() {
+        if (this.instance) return
+        beforeInit && typeof beforeInit === 'function' && beforeInit(this.$echarts)
+        this.instance = this.$echarts.init(this.$refs[refName], null, { renderer: 'svg' })
+        afterInit && typeof afterInit === 'function' && afterInit()
+        this.instance.setOption(this.staticOptions)
+        this.reUpdateDate && this.update(this.reUpdateDate)
+      },
+
+      resize() {
+        if (this.instance) {
+          this.instance.resize()
+        }
+      },
+
+      destroyObserver() {
+        if (this.observer) {
+          this.observer.unobserve(this.$refs[refName])
+          this.observer = null
+        }
+      }
+    },
+
+    beforeDestroy() {
+      this.destroyObserver()
+      this.instance = null
+      this.reUpdateDate = null
+    }
+  }
+}

src/views/dashboard/mixin/select.js

@@ -0,0 +1,43 @@
+export default (injectName) => {
+  return {
+    inject: [injectName],
+    props: {
+      value: { type: Number, default: 1 },
+      size: {
+        type: String,
+        default: 'small',
+        validator(value) {
+          const validSizes = ['medium', 'small', 'mini']
+          const isValid = validSizes.includes(value) || value === ''
+          if (!isValid) {
+            console.warn(`Invalid prop: size should be one of 'medium', 'small', or 'mini', but received '${value}'.`)
+          }
+          return isValid
+        }
+      }
+    },
+    data() {
+      return {
+        selectValue: 1
+      }
+    },
+    watch: {
+      value: {
+        handler(newValue, oldValue) {
+          if (newValue !== oldValue) {
+            this.selectValue = newValue
+          }
+        },
+        immediate: true
+      },
+
+      selectValue: {
+        handler(newValue, oldValue) {
+          if (newValue !== oldValue) {
+            this.$emit('input', newValue)
+          }
+        }
+      }
+    }
+  }
+}

src/views/dashboard/utils.js

@@ -1,45 +0,0 @@
-export const getRankingStyle = (number) => {
-  if (number <= 3) {
-    return {
-      1: 'background: linear-gradient(180deg, #D40E0E 0%, #FF4D4D 100%);color: #fff',
-      2: 'background: linear-gradient(180deg, #FFBA2F 0%, #FFD47F 100%);color: #fff',
-      3: 'background: linear-gradient(180deg, #495FFF 0%, #9DA9FF 100%);color: #fff'
-    }[number]
-  }
-}
-
-export const getMapDataItem = (title, value = 0) => {
-  return `
-            <li style="width: 114px; height: 24px; background: #fff; margin-top: 8px; padding: 2px 8px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; display: flex; justify-content: space-between" >
-              <span style="color: #4E5969; font-size: 12px">${title}</span>
-              <span style="color: #4E5969; font-size: 14px; font-weight: bold">${value}</span>
-            </li>
-         `
-}
-
-/**
- * 大数转换
- * @param {number} 要转换的数字
- */
-export const formatBigNumber = (number, decimalPlaces = 2) => {
-  if (typeof number !== 'number' && typeof number !== 'string') {
-    return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
-  }
-  number = parseFloat(number)
-  if (Math.abs(number) < 10000) {
-    return { count: number.toFixed(decimalPlaces), unit: '' }
-  }
-  const units = ['', '万', '亿']
-  const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
-  const unit = units[Math.min(unitIndex, 2)]
-  let result
-  if (unitIndex > 0) {
-    result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
-  } else {
-    result = number.toFixed(decimalPlaces)
-  }
-  return {
-    count: result,
-    unit
-  }
-}

src/views/dashboard/utils/echarts.js

@@ -1,3 +1,80 @@
-export const initEcharts = (el) => {
-  
-}
+import echarts from 'echarts'
+
+/**
+ * @description 生成echarts 渐变色
+ */
+export const generateLineGraphic = (startColor, endColor) => {
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: startColor },
+    { offset: 1, color: endColor }
+  ])
+}
+
+/**
+ * 生成分析图hover dom
+ */
+export const generateDiagramsHoveDom = (options) => {
+  return `
+              <div style="
+                        padding: 0;
+              border: 1px solid #f4f8ff;
+              padding: 8px 16px;
+              background:  linear-gradient(180deg, rgba(238, 245, 255, 0.6) 0%, rgba(219, 233, 253, 0.6) 100%);
+              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
+              border-radius: 4px;
+              color: #3d3d3d;
+              font-size: 16px;
+              font-weight: bold
+             ">${options[0].value}</div>
+            `
+}
+
+/**
+ * @description 获取地图的hover item元素
+ * @param {*} title
+ * @param {*} value
+ * @returns
+ */
+export const getMapDataItem = (title, value = 0) => {
+  return `
+            <li style="width: 114px; height: 24px; background: #fff; margin-top: 8px; padding: 2px 8px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; display: flex; justify-content: space-between" >
+              <span style="color: #4E5969; font-size: 12px">${title}</span>
+              <span style="color: #4E5969; font-size: 14px; font-weight: bold">${value}</span>
+            </li>
+         `
+}
+
+/**
+ * @description
+ */
+export const generateMapHoveDom = (options) => {
+  let currentData = options.data
+  if (currentData && typeof currentData.value === 'string') {
+    currentData = JSON.parse(currentData.value)
+  } else {
+    currentData = [{}, {}, {}, {}]
+  }
+  return `
+  <div style="padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(238, 245, 255, 0.9) 0%, rgba(219, 233, 253, 0.9) 100%);
+    border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;  border: 1px solid #fff;  border-radius: 4px">
+    <h1 style="color: #3D3D3D; font-size: 14px; line-height: 1.5; font-weight: bold">${options.name}</h1>
+    <ul>
+        ${getMapDataItem(currentData[0].dataType || '', currentData[0].dataNumber || 0)}
+        ${getMapDataItem(currentData[1].dataType || '', currentData[1].dataNumber) || 0}
+        ${getMapDataItem(currentData[2].dataType || '', currentData[2].dataNumber) || 0}
+        ${getMapDataItem(currentData[3].dataType || '', currentData[3].dataNumber) || 0}
+      </ul>
+    </div>
+  `
+}
+
+/**
+ * @description 生成默认的统计数据
+ */
+export const getDefaultBarData = () => {
+  const res = {}
+  for (let i = 1; i <= 12; i++) {
+    res[i] = 0
+  }
+  return res
+}

src/views/dashboard/utils/utils.js

@@ -0,0 +1,67 @@
+const textWidthMap = new Map()
+textWidthMap.set(3, 42)
+
+/**
+ * @description 根据
+ * @param {string} text 变更后的文字
+ */
+export const getTextWidth = (text) => {
+  function calcContainerWidth(text) {
+    const tempSpan = document.createElement('span')
+    tempSpan.style.visibility = 'hidden'
+    tempSpan.style.whiteSpace = 'nowrap'
+    tempSpan.innerText = text
+    document.body.appendChild(tempSpan)
+    const containerWidth = tempSpan.offsetWidth
+    document.body.removeChild(tempSpan)
+    return containerWidth
+  }
+
+  text = text + ''
+  const len = text.length
+  const cacheWidth = textWidthMap.get(len)
+  return (cacheWidth || calcContainerWidth(text)) + 48
+}
+
+
+
+/**
+ * 大数转换
+ * @param {number} 要转换的数字
+ */
+export const formatBigNumber = (number, decimalPlaces = 2) => {
+  if (typeof number !== 'number' && typeof number !== 'string') {
+    return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
+  }
+  number = parseFloat(number)
+  if (Math.abs(number) < 10000) {
+    return { count: number.toFixed(decimalPlaces), unit: '' }
+  }
+  const units = ['', '万', '亿']
+  const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
+  const unit = units[Math.min(unitIndex, 2)]
+  let result
+  if (unitIndex > 0) {
+    result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
+  } else {
+    result = number.toFixed(decimalPlaces)
+  }
+  return {
+    count: result,
+    unit
+  }
+}
+
+/**
+ * 简单生成id
+ */
+const uniqueIds = new Set()
+
+export const generateUniqueId = () => {
+  let id
+  do {
+    id = 'id-' + Math.random().toString(36).substr(2, 9)
+  } while (uniqueIds.has(id))
+  uniqueIds.add(id)
+  return id
+}

test.html

@@ -1,38 +1,33 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <script>
-      const formatBigNumber = (number, decimalPlaces = 2) => {
-        debugger
-        if (typeof number !== 'number' && typeof number !== 'string') {
-          return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
-        }
-        number = parseFloat(number)
-        if (Math.abs(number) < 10000) {
-          return { count: number.toFixed(decimalPlaces), unit: '' }
-        }
-        const units = ['', '万', '亿']
-        const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
-        const unit = units[Math.min(unitIndex, 2)]
-        let result
-        if (unitIndex > 0) {
-          result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
-        } else {
-          result = number.toFixed(decimalPlaces)
-        }
-        return {
-          count: result,
-          unit
-        }
-      }
-
-      formatBigNumber(3323805.27)
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      .box {
+        flex-basis: calc(33.33% - 20px); /* 每个盒子的宽度 */
+        margin-bottom: 20px; /* 垂直间距 */
+        height: 100px;
+        background-color: #f40;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="box">Box 1</div>
+      <div class="box">Box 2</div>
+      <div class="box">Box 3</div>
+      <div class="box">Box 4</div>
+      <div class="box">Box 5</div>
+      <div class="box">Box 6</div>
+    </div>
+  </body>
+</html>