feat: 添加首页

src/views/mallManagement/home/index.vue

@@ -0,0 +1,492 @@
+<template>
+  <div class="dashboard-container">
+
+    <el-row :gutter="10" class="top-container">
+      <el-col :xs="24" :sm="12" :lg="12">
+        <div class="today">今日</div>
+        <div class="today-content">{{ dateFormat }}，欢迎登入分销商城后台管理操作系统，累计售出{{ statisticsData.total }}件商品，继续加油</div>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="12">
+        <el-row :gutter="20" class="right-row">
+          <el-col :span="3">
+            <svg-icon icon-class="product1" class-name="icon"/>
+          </el-col>
+          <el-col :span="3">
+            <div class="num">{{ statisticsData.sold }}</div>
+            <div class="name">已售中商品</div>
+          </el-col>
+          <el-col :span="3">
+            <svg-icon icon-class="fahuo1" class-name="icon"/>
+          </el-col>
+          <el-col :span="3">
+            <div class="num">{{ statisticsData.dfh }}</div>
+            <div class="name">待发货订单</div>
+          </el-col>
+          <el-col :span="3">
+            <svg-icon icon-class="refund-order1" class-name="icon"/>
+          </el-col>
+          <el-col :span="3">
+            <div class="num">{{ statisticsData.refund }}</div>
+            <div class="name">维权中订单</div>
+          </el-col>
+          <el-col :span="3">
+            <svg-icon icon-class="settlement" class-name="icon"/>
+          </el-col>
+          <el-col :span="3">
+            <div class="num">¥{{ statisticsData.orderShareAmount }}</div>
+            <div class="name">待结算金额</div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    
+    <el-row :gutter="20" class="middle-container">
+      <el-col :xs="24" :sm="7" :lg="7">
+        <div class="item">
+          <div class="title">登入用户数</div>
+          <el-row>
+            <el-col :span="5">
+              <svg-icon icon-class="history-user" class-name="icon"/>
+            </el-col>
+            <el-col :span="19" class="right-data">
+              <div class="data">
+                <span>今日访客</span><span style="color: #f4cc4e;">{{ statisticsData.todayVisit }}</span>
+              </div>
+              <div class="progress">
+                <el-progress :percentage="personCountCompute" :show-text="false" :color="'#f4cc4e'"></el-progress>
+              </div>
+              <div class="data">
+                <span>昨天访客</span><span>{{ statisticsData.yestodayVisit }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="7" :lg="7">
+        <div class="item">
+          <div class="title">订单数</div>
+          <el-row>
+            <el-col :span="5">
+              <svg-icon icon-class="order" class-name="icon"/>
+            </el-col>
+            <el-col :span="19" class="right-data">
+              <div class="data">
+                <span>今日订单</span><span style="color: #e6808f;">{{ statisticsData.todayOrder }}</span>
+              </div>
+              <div class="progress">
+                <el-progress :percentage="orderCountCompute" :show-text="false" :color="'#e6808f'"></el-progress>
+              </div>
+              <div class="data">
+                <span>昨天订单</span><span>{{ statisticsData.yestodayOrder }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :xs="20" :sm="7" :lg="7">
+        <div class="item">
+          <div class="title">预估收益</div>
+          <el-row>
+            <el-col :span="5">
+              <svg-icon icon-class="profit1" class-name="icon"/>
+            </el-col>
+            <el-col :span="19" class="right-data">
+              <div class="data">
+                <span>今日收益</span><span style="color: #5f71cf;">{{ statisticsData.todayProfit }}</span>
+              </div>
+              <div class="progress">
+                <el-progress :percentage="profitCompute" :show-text="false" color="'#5f71cf'"></el-progress>
+              </div>
+              <div class="data">
+                <span>昨天收益</span><span>{{ statisticsData.yestodayProfit }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :xs="4" :sm="3" :lg="3">
+        <div class="item last-item">
+          <div class="title">下单转化率</div>
+          <div class="content">
+            <div class="num">{{ statisticsData.orderTax }}%</div>
+            <div class="text">今日转化率</div>
+          </div>
+          
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="bottom-container">
+      <el-col :xs="24" :sm="14" :lg="14">
+        <div class="content">
+          <div class="tabs-container clearfix">
+            <div class="fl">
+              <el-radio-group v-model="screenForm.workOrderType" size="small" @change="changeEchartsDateValue">
+                <el-radio-button label="">全部</el-radio-button>
+                <el-radio-button label="INSTALL">产品</el-radio-button>
+                <el-radio-button label="REPAIR">服务</el-radio-button>
+              </el-radio-group>
+            </div>
+            <div class="fr">
+              <el-radio-group v-model="screenForm.echartsFlag" size="small" @change="changeEchartsDateValue">
+                <el-radio-button label="1">今日</el-radio-button>
+                <el-radio-button label="2">昨日</el-radio-button>
+                <el-radio-button label="3">最近7日</el-radio-button>
+                <el-radio-button label="4">本月</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <div style="padding: 20px;">
+            <el-row style="text-align: center;">
+              <el-col :span="8">
+                <div style="font-size: 20px;font-weight: bold;color: #f65c5c">{{ transaction.orderNum }}</div>
+                <div style="font-size: 12px;padding-top: 10px;">成交量(件)</div>
+              </el-col>
+              <el-col :span="8">
+                <div style="font-size: 20px;font-weight: bold;color: #f65c5c">{{ transaction.amount }}</div>
+                <div style="font-size: 12px;padding-top: 10px;">成交额(元)</div>
+              </el-col>
+              <el-col :span="8">
+                <div style="font-size: 20px;font-weight: bold;color: #f65c5c">{{ transaction.avgAmount }}</div>
+                <div style="font-size: 12px;padding-top: 10px;">人均消费(元)</div>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="table" v-resize="DomResize">
+            <div ref="myChart" :style="{width: '100%', height: '300px'}"></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="10" :lg="10">
+        <div class="content">
+          <div class="tabs-container clearfix">
+            <div class="fr">
+              <el-radio-group v-model="screenForm.goodsFlag" size="small" @change="changeTableDateValue">
+                <el-radio-button label="1">今日</el-radio-button>
+                <el-radio-button label="2">昨日</el-radio-button>
+                <el-radio-button label="3">最近7日</el-radio-button>
+                <el-radio-button label="4">本月</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+
+          <div class="table">
+            <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe size="mini" height="400">
+              <el-table-column type="index" label="排名" width="50" align="center"></el-table-column>
+              <el-table-column align="center" label="商品名称" prop="goodsName"></el-table-column>
+              <el-table-column align="center" label="成交量" prop="num"></el-table-column>
+              <el-table-column align="center" label="成交金额" prop="payAmount"></el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getInfo, getOrder, getGoodsRank  } from '@/api/dashboard'
+import { dateFormat } from '@/utils/util'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      statisticsData: {
+        total: 0,
+        sold: 0,
+        dfh: 0,
+        refund: 0,
+        orderShareAmount: 0,
+        todayVisit: 0,
+        yestodayVisit: 0,
+        todayOrder: 0,
+        yestodayOrder: 0,
+        todayProfit: 0,
+        yestodayProfit: 0,
+        orderTax: 0
+      }, // 统计数据
+      dataList: [], // 列表数据
+      transaction: {
+        amount: 0, // 成交额
+        avgAmount: 0, // 人均消费
+        orderNum: 0, // 成交量
+        countAry: []
+      },
+      listLoading: true, // 列表加载loading
+      chartLoading: true, // 图表加载loading
+      screenForm: {
+        workOrderType: '',
+        echartsFlag : '1',
+        goodsFlag: '1'
+      },
+      existChart: null
+    }
+  },
+  directives: {
+    resize: { // 指令的名称
+      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+        // console.log(el,"绑定",binding);
+        let width = '', height = '';
+        function isResize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value({width:style.width,height:style.height});  // 关键(这传入的是函数,所以执行此函数)
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isResize, 300);
+      },
+      unbind(el) {
+        // console.log(el,"解绑");
+        clearInterval(el.__vueSetInterval__);
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name'
+    ]),
+    dateFormat() {
+      return dateFormat("YYYY-mm-dd WWW", new Date())
+    },
+    personCountCompute() {
+        if (this.statisticsData.todayVisit >= this.statisticsData.yestodayVisit) {
+          return 100
+        } else {
+          return this.statisticsData.todayVisit / this.statisticsData.yestodayVisit * 100
+        }
+    },
+    orderCountCompute() {
+      if (this.statisticsData.todayOrder >= this.statisticsData.yestodayOrder) {
+        return 100
+      } else {
+        return this.statisticsData.todayOrder / this.statisticsData.yestodayOrder * 100
+      }
+    },
+    profitCompute() {
+      if (this.statisticsData.todayProfit >= this.statisticsData.yestodayProfit) {
+        return 100
+      } else {
+        return this.statisticsData.todayProfit / this.statisticsData.yestodayProfit * 100
+      }
+    },
+  },
+  created() {
+    this.getStatisticsData();
+  },
+  methods: {
+    // 获取统计数据
+    getStatisticsData() {
+      getInfo().then(res => {
+        this.statisticsData = res.data
+      })
+      this.getOrder()
+      this.getGoodsRank()
+    },
+    getOrder() {
+      getOrder({
+        flag: this.screenForm.echartsFlag, 
+        workOrderType: this.screenForm.workOrderType
+      }).then(res => {
+        this.transaction = res.data
+        this.drawLine()
+      })
+    },
+    getGoodsRank() {
+      this.listLoading = true
+      getGoodsRank({ flag: this.screenForm.goodsFlag }).then(res => {
+        this.dataList = res.data
+        this.listLoading = false
+      })
+    },
+    // 切换tabs
+    changeEchartsDateValue() {
+      this.getOrder()
+    },
+    changeTableDateValue() {
+      this.getGoodsRank()
+    },
+    DomResize(data){
+      let {width,height} = data;
+      // console.log("width:",width,"height:",height,"   dom尺寸方式改变");
+      if(this.existChart){
+        this.existChart.resize()
+      }
+    },
+    drawLine(){
+      // 基于准备好的dom，初始化echarts实例
+      if (this.existChart) {
+        this.existChart.dispose()
+      }
+      this.existChart = this.$echarts.init(this.$refs.myChart)
+      // 绘制图表
+      this.existChart.setOption({
+        color: ['#80FFA5'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '7%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.screenForm.echartsFlag === '1' || this.screenForm.echartsFlag === '2' ? ['0', '1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19','20', '21', '22', '23'] : this.transaction.x
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '数量',
+            type: 'line',
+            stack: '数量',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(128, 255, 165)'
+              }, {
+                offset: 1,
+                color: 'rgba(1, 191, 236)'
+              }])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.transaction.countAry
+          }
+        ]
+      });
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.dashboard {
+  &-container {
+    background: #f5f5f5;
+    padding: 30px;
+    min-height: calc(100vh - 86px);
+    .top-container {
+      .today {
+        font-weight: bold;
+        padding-bottom: 10px;
+      }
+      .today-content {
+        font-size: 14px;
+      }
+      .right-row {
+        .el-col {
+          height: 44px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .icon {
+            height: 36px;
+            width: 36px;
+          }
+          .num {
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+          }
+          .name {
+            text-align: center;
+            font-size: 12px;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+    
+    .middle-container {
+      margin-top: 20px;
+      .item {
+        padding: 15px;
+        background: #ffffff;
+        height: 110px;
+        .title {
+          font-size: 14px;
+          color: #666;
+          margin-bottom: 5px;
+        }
+        .icon {
+          height: 50px;
+          width: 50px;
+          padding-top: 15px;
+        }
+        .right-data {
+          padding: 5px 0 0 10px;
+          .progress {
+            margin: 5px 0;
+          }
+          .data {
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+        }
+      }
+      .last-item {
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .num {
+            padding: 10px 0 5px 0;
+            font-size: 24px;
+            font-weight: bold;
+            color: #76b36b;
+          }
+          .text {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    .bottom-container {
+      margin-top: 15px;
+      .content {
+        height: 450px;
+        background: #ffffff;
+        .tabs-container {
+          padding: 10px 10px 0 10px;
+        }
+        .table {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    
+    
+  }
+}
+</style>