2024.07.13 - 首页统计(90%)

.gitignore

@@ -13,3 +13,4 @@ tests/**/coverage/
 *.njsproj
 *.sln
 dist/
+.prettierrc

package.json

@@ -17,6 +17,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "countup.js": "^2.8.0",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.12",
     "es6-promise": "^4.2.8",
@@ -32,6 +33,7 @@
     "swiper": "^5.4.5",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-countup-v2": "^4.0.0",
     "vue-lang": "^0.2.5",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",

src/api/home.js

@@ -25,3 +25,14 @@ export function homeGetFormData() {
     method: 'post'
   })
 }
+
+
+/**
+ * @description 获取首页统计信息
+ */
+export function getHomeStatisticsData() {
+  return request({
+    url: '/home/statistics',
+    method: 'get'
+  })
+}

src/styles/element-ui.scss

@@ -61,3 +61,61 @@
     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;
+    }
+  }
+}

src/views/dashboard/components/Counter.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="counter-wrapper">
+    <div class="count">
+      <CountUp :endVal="count" :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'
+
+export default {
+  props: {
+    count: { type: Number, required: true },
+    tip: { type: String, required: true },
+    trend: { type: String, default: '' }, // up/down/stabilization
+    decimalPlaces: { type: Number, default: 0 } // 支持几位小数
+  },
+
+  components: { CountUp },
+
+  data() {
+    return {
+      TREND_CONFIG: Object.freeze(TREND),
+      countUpOptions: {
+        useEasing: true,
+        useGrouping: true,
+        separator: ',',
+        decimal: '.',
+        prefix: '',
+        suffix: '',
+        decimalPlaces: this.decimalPlaces
+      }
+    }
+  }
+}
+</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

@@ -0,0 +1,161 @@
+<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

@@ -0,0 +1,115 @@
+<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/HomeCard.vue

@@ -1,165 +0,0 @@
-<template>
-  <div ref="cardComponent" class="homeCardComponent">
-    <div class="top">
-      <span class="fs22" :style="{ color: `${color}` }">{{ title }}</span>
-      <span class="today" :style="{ color: `${color}`, borderColor: `${todayColor}` }">今日</span>
-    </div>
-    <div class="nums" :style="{ color: `${color}` }">{{ cardData.nums }}</div>
-    <div class="footer">
-      <div class="item">
-        <div class="precent">
-          周环比
-          <span
-            class="precent" :class="{
-              redP: cardData.precent > 0,
-              greenP: cardData.precent < 0
-            }"
-          >
-            {{ cardData.precent || 0 }}%
-          </span>
-          <span v-if="cardData.precent > 0" class="triangle up"></span>
-          <span v-if="cardData.precent < 0" class="triangle down"></span>
-        </div>
-      </div>
-      <div class="item">
-        <span>昨日数据</span>
-        <span>{{ cardData.lastNums }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    cardData: {
-      type: Object,
-      default: () => ({
-        nums: '',
-        precent: 0,
-        lastNums: ''
-      })
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    nums: {
-      type: Number,
-      default: 0
-    },
-    precent: {
-      type: Number,
-      default: 0
-    },
-    lastNums: {
-      type: Number,
-      default: 0
-    },
-    color: {
-      type: String,
-      default: null
-    },
-    backgroundColor: {
-      type: String,
-      default: null
-    },
-    todayColor: {
-      type: String,
-      default: null
-    }
-  },
-  mounted() {
-    this.$refs.cardComponent.style.backgroundColor = this.backgroundColor
-  }
-}
-</script>
-
-<style lang="scss">
-.homeCardComponent {
-	padding: 15px;
-	display: inline-flex;
-	flex-direction: column;
-	min-width: 200px;
-	min-height: 200px;
-	border-radius: 16px;
-
-	.top {
-		font-size: 22px;
-		margin: 12px 0 12px 12px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.today {
-			font-size: 14px;
-			padding: 8px 16px;
-			border: 1px solid;
-			border-radius: 4px;
-		}
-	}
-
-	.nums {
-		margin: 8px;
-		font-size: 48px;
-	}
-
-	.footer {
-		height: 115px;
-		font-size: 16px;
-		padding: 12px 0;
-		border-radius: 8px;
-		background-color: rgba($color: #FFF, $alpha: .8);
-		box-shadow: 0px 10px 20px 1px rgba(27, 85, 175, 0.05000000074505806);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-around;
-
-		.item {
-			margin: 0 12px;
-			// line-height: 40px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			color: #333;
-
-			// opacity: .5;
-			.precent {
-				$red: #D04A41;
-				$green: #427A0A;
-
-				span {
-					margin-left: 18px;
-					// opacity: 1;
-				}
-
-				.redP {
-					color: $red;
-				}
-
-				.greenP {
-					color: $green;
-				}
-
-				.triangle {
-					width: 0;
-					height: 0;
-					position: relative;
-					border: 8px solid;
-				}
-
-				.up {
-					position: relative;
-					top: -12px;
-					border-color: transparent transparent $red transparent;
-				}
-
-				.down {
-					position: relative;
-					top: 12px;
-					border-color: $green transparent transparent transparent;
-				}
-			}
-		}
-	}
-}</style>

src/views/dashboard/components/NetworkDistribution.vue

@@ -0,0 +1,99 @@
+<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.replace('省', ''),
+                    value: JSON.stringify(item.nationalMapDataList)
+                  }
+                }),
+                itemStyle: {
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  normal: { areaColor: '#249eff', borderColor: '#fff' },
+                  emphasis: { areaColor: '#0f57ff', label: { show: false } }
+                }
+              }
+            ]
+          })
+        }
+      },
+      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

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,105 @@
+<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/components/miniCard.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="miniCardComponents">
-    <span class="title">{{ title }}</span>
-    <h2>{{ nums }}</h2>
-    <span class="gray">{{ precent }}：</span>
-    <span
-      class="precent" :class="{
-        redP: precentData > 0,
-        greenP: precentData < 0
-      }"
-    >
-      {{ precentData || 0 }}%
-    </span>
-    <span v-if="precentData > 0" class="triangle up"></span>
-    <span v-if="precentData < 0" class="triangle down"></span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    precent: {
-      type: String,
-      default: ''
-    },
-    nums: {
-      type: Number,
-      default: 0
-    },
-    precentData: {
-      type: Number,
-      default: 0
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.miniCardComponents {
-	$red: #D04A41;
-	$green: #427A0A;
-	margin-right: 50px;
-
-	h2 {
-		margin: 12px 0;
-		font-weight: bold;
-	}
-
-	.title {
-		font-size: 16px;
-		font-weight: 700;
-	}
-
-	.gray {
-		color: #929292;
-	}
-
-	.precent {
-		margin: 0 8px;
-	}
-
-	.redP {
-		color: $red;
-	}
-
-	.greenP {
-		color: $green;
-	}
-
-	.triangle {
-		width: 0;
-		height: 0;
-		position: relative;
-		border: 8px solid;
-	}
-
-	.up {
-		position: relative;
-		top: -12px;
-		border-color: transparent transparent $red transparent;
-	}
-
-	.down {
-		position: relative;
-		top: 12px;
-		border-color: $green transparent transparent transparent;
-	}
-}</style>

src/views/dashboard/config.js

@@ -0,0 +1,38 @@
+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/map/province/aomen.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"id":"820001","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LADC^umZ@DONWE@DALBBF@H@DFBBTC"],["@@P@LC@AGM@OECMBABBTCD@DDH"]],"encodeOffsets":[[[116285,22746]],[[116303,22746]]]},"properties":{"cp":[113.552965,22.207882],"name":"花地玛堂区","childNum":2}},{"id":"820002","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MK@CA@AAGDEB@NVFJG"],"encodeOffsets":[[116281,22734]]},"properties":{"cp":[113.549052,22.199175],"name":"花王堂区","childNum":1}},{"id":"820003","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@EGOB@DNLHE@C"],"encodeOffsets":[[116285,22729]]},"properties":{"cp":[113.550252,22.193791],"name":"望德堂区","childNum":1}},{"id":"820004","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ŸYMVAN@BFCBBDAFHDBBFDHIJJEFDPCHHlYJQ"],"encodeOffsets":[[116313,22707]]},"properties":{"cp":[113.55374,22.188119],"name":"大堂区","childNum":1}},{"id":"820005","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@JICGAECACGEBAAEDBFNXB@"],"encodeOffsets":[[116266,22728]]},"properties":{"cp":[113.54167,22.187778],"name":"风顺堂区","childNum":1}},{"id":"820006","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ ZNWRquZCBCC@AEA@@ADCDCAACEAGBQ@INEL"],"encodeOffsets":[[116265,22694]]},"properties":{"cp":[113.558783,22.154124],"name":"嘉模堂区","childNum":1}},{"id":"820007","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MOIAIEI@@GE@AAUCBdCFIFR@HAFBBDDBDCBC@@FB@BDDDA\\M"],"encodeOffsets":[[116316,22676]]},"properties":{"cp":[113.56925,22.136546],"name":"路凼填海区","childNum":1}},{"id":"820008","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@DKMMa_GC_COD@dVDBBF@@HJ@JFJBNPZK"],"encodeOffsets":[[116329,22670]]},"properties":{"cp":[113.559954,22.124049],"name":"圣方济各堂区","childNum":1}}],"UTF8Encoding":true}

src/views/dashboard/index.vue

@@ -1,282 +1,420 @@
 <template>
-  <div class="dashboardPage">
-    <div class="top">
-      <CardBox
-        v-for="item in cardList" :key="item.value" :card-data="item" :title="item.title"
-        :color="item.color"
-        :background-color="item.background" :today-color="item.todayColor" class="cardbox"
-      />
+  <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>
-    <div class="chartContainer">
-      <h2>当日订单金额</h2>
-      <div ref="chartMoney" class="chartMoney"></div>
-      <h2>数据统计</h2>
-      <div class="chartCard">
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard :title="'当日订单数'" :precent="'日同比'" :nums="orderData.dayNum" :precent-data="orderData.dayPrecent" />
-            <MiniCard
-              :title="'当月订单数'" :precent="'月同比'" :nums="orderData.mounthNum"
-              :precent-data="orderData.mounthPrecent"
-            />
+
+    <!-- 网点统计 -->
+    <!-- 统计区 -->
+    <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 ref="orderTotal" class="chart"></div>
-        </div>
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard :title="'当日支付人数'" :precent="'日同比'" :nums="payData.dayNum" :precent-data="payData.dayPrecent" />
-            <MiniCard
-              :title="'当月支付人数'" :precent="'月同比'" :nums="payData.mounthNum"
-              :precent-data="payData.mounthPrecent"
-            />
+          <div class="total-shop">
+            <TotalShopChartVue ref="totalShopChartVueRef" :siteData="allData.dotStatistics"></TotalShopChartVue>
           </div>
-          <div ref="orderPeople" class="chart"></div>
+        </div>
+        <div class="right-wrapper">
+          <NetworkDistribution :sites-data="allData.nationalMapList || []" ref="networkDistributionRef"></NetworkDistribution>
         </div>
       </div>
-    </div>
+    </SectionBlock>
   </div>
 </template>
 
 <script>
-import CardBox from '@/views/dashboard/components/HomeCard.vue'
-import MiniCard from '@/views/dashboard/components/miniCard.vue'
-import {
-  homeGetChartData,
-  homeGetFormData
-} from '@/api/home.js'
-function ChartObj(ref, title) {
-  this.name = ref
-  this.chart = null
-  this.title = title
-  this.xAxis = []
-  this.yAxis = []
-  this.series = []
-}
-function CardData() {
-  this.dayNum = 0
-  this.dayPrecent = 0
-  this.mounthNum = 0
-  this.mounthPrecent = 0
-}
+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: {
-    CardBox,
-    MiniCard
+    SectionBlock,
+    StatisticsPanel1,
+    RankingTable,
+    SelectionPane,
+    Counter,
+    DiagramsChart,
+    GoodsRanking,
+    TotalShopChartVue,
+    NetworkDistribution
   },
   data() {
     return {
-      cardList: [
-        {
-          title: '新增用户',
-          color: '#1B55AF',
-          background: '#F4F7FB',
-          todayColor: '#C9D7EC',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 1
-        },
-        {
-          title: '新增店铺',
-          color: '#F45F20',
-          background: '#FEF7F4',
-          todayColor: '#FCD9CA',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 2
+      statisticalArea: Object.freeze(statisticalArea),
+      partnerTotalConfig: Object.freeze(partnerTotalConfig),
+      activeName: 'transactionAmountRef',
+      activeName2: 'community',
+      allData: {},
+      branchStatisticsData: {}, // 网点统计表格数据
+      diagramsLeftData: {}, // 分析图左侧柱状图数据
+      rankingData: {
+        community: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         },
-        {
-          title: '访客',
-          color: '#427A0A',
-          background: '#F2F6EE',
-          todayColor: '#CFDDC0',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 3
+        shop: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         },
-        {
-          title: '浏览量',
-          color: '#623CE7',
-          background: '#F4F1FD',
-          todayColor: '#D7CDF9',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 4
+        businessDistrict: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         }
-      ],
-      chart: [
-        new ChartObj('chartMoney', '订单金额'),
-        new ChartObj('orderTotal', '订单数'),
-        new ChartObj('orderPeople', '订单支付人数')
-      ],
-      orderData: new CardData(),
-      payData: new CardData()
+      },
+      selects: { sites: 1 }
     }
   },
   created() {
-    this.getFormData()
-    this.getChartData()
+    this.getHomeStatisticsData()
   },
   mounted() {
-    this.chart.forEach((item) => {
-      this.initChart(item)
-    })
+    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 getFormData() {
-      const res = await homeGetFormData()
-      this.cardList[0] = Object.assign(this.cardList[0], {
-        nums: res.data.todayNewUser,
-        precent: res.data.weekRelativeRatioNewUser,
-        lastNums: res.data.yesterdayNewUser
-      })
-      this.cardList[1] = Object.assign(this.cardList[1], {
-        nums: res.data.todayShopCount,
-        precent: res.data.weekRelativeRatioShopCount,
-        lastNums: res.data.yesterdayShopCount
-      })
-      this.cardList[2] = Object.assign(this.cardList[2], {
-        nums: res.data.todayVisitUser,
-        precent: res.data.weekRelativeRatioVisitUser,
-        lastNums: res.data.yesterdayVisitUser
-      })
-      this.cardList[3] = Object.assign(this.cardList[3], {
-        nums: res.data.todayVisitCount,
-        precent: res.data.weekRelativeRatioVisitCount,
-        lastNums: res.data.yesterdayVisitCount
-      })
-    },
-    async getChartData() {
-      const res = await homeGetChartData()
-      // 过去一个月订单金额列表
-      res.data.orderAmountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[0].xAxis.push(xAxis)
-        this.chart[0].series.push(item.amount)
-      })
-      // 过去一个月订单量
-      res.data.orderCountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[1].xAxis.push(xAxis)
-        this.chart[1].series.push(item.totalCount)
-      })
-      // 过去一个月支付人数
-      res.data.payUserCountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[2].xAxis.push(xAxis)
-        this.chart[2].series.push(item.totalCount)
-      })
-      this.orderData = {
-        dayNum: res.data.todayOrderCount || 0,
-        dayPrecent: res.data.dayToDayOrderCountRelativeRate || 0,
-        mounthNum: res.data.curMonthOrderCount || 0,
-        mounthPrecent: res.data.monthToMonthOrderCountRelativeRate || 0
-      }
-      this.payData = {
-        dayNum: res.data.todayPayUserCount || 0,
-        dayPrecent: res.data.dayToDayPayUserCountRelativeRate || 0,
-        mounthNum: res.data.curMonthPayUserCount || 0,
-        mounthPrecent: res.data.monthToMonthPayUserCountRelativeRate || 0
+    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)
       }
-      this.paintLineChart(this.chart[0])
-      this.paintLineChart(this.chart[1])
-      this.paintLineChart(this.chart[2])
     },
-    initChart(chartObj) {
-      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name])
-      chartObj.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c}',
-          axisPointer: {
-            type: 'cross'
-          }
+
+    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
     },
-    paintLineChart(chartObj) {
-      chartObj.chart.setOption({
-        color: [ '#5470c6' ],
-        xAxis: {
-          type: 'category',
-          axis: 'auto',
-          data: chartObj.xAxis
-        },
-        yAxis: {
-          type: 'value',
-          axisPointer: {
-            snap: true
-          }
-        },
-        series: [
-          {
-            name: chartObj.title,
-            data: chartObj.series,
-            type: 'line',
-            smooth: true // 是否平滑
-          }
-        ]
-      })
+
+    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%;
-
-	.top {
-		padding: 28px 10px;
-		background-color: #FFF;
-		display: flex;
-		justify-content: space-between;
-
-		.cardbox {
-			margin: 0 10px;
-			cursor: default;
-			flex: 1;
-		}
-	}
-
-	.chartContainer {
-		margin: 20px;
-		padding: 20px;
-		background-color: #FFF;
-
-		h2 {
-			margin: 12px 0;
-			font-weight: bold;
-		}
-
-		.chartMoney {
-			width: 100%;
-			height: 400px;
-		}
-
-		.chartCard {
-			min-height: 300px;
-			display: flex;
-
-			.dailyCard {
-				flex: 1;
-				padding: 12px 20px;
-
-				.cardContainer {
-					display: flex;
-				}
-
-				.chart {
-					min-height: 300px;
-				}
-			}
-		}
-	}
+  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>

src/views/dashboard/utils.js

@@ -0,0 +1,18 @@
+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>
+         `
+}

src/views/dashboard/utils/echarts.js

@@ -0,0 +1,3 @@
+export const initEcharts = (el) => {
+  
+}