jufubao-admin-library 1.0.0-beta1

package/library/viewModules/viewStat/schemas/supplier.stat.js

@@ -0,0 +1,70 @@
+'use strict';
+module.exports = {
+  name: "supplierStat",
+  title: "供应商统计",
+  vuex: true,
+  model: [
+    {
+      title: "统计-供应商统计-累计统计",
+      mapFn: "totalCounts",
+      path: "/stat-partner/v1/supplier-stat/total-counts",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_STAT_TOTAL_COUNTS"
+    },
+    {
+      title: "统计-供应商统计-累计统计刷新",
+      mapFn: "refreshTotalCounts",
+      path: "/stat-partner/v1/supplier-stat/total-counts-refresh",
+      isRule: false,
+      params: {},
+      disabled: true
+    },
+    {
+      title: "统计-供应商统计-商品周期数量",
+      mapFn: "productCycCounts",
+      path: "/stat-partner/v1/supplier/product-cyc-counts",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_PRODUCT_CYC_COUNTS"
+    },
+    {
+      title: "统计-供应商统计-供应商周期数量",
+      mapFn: "supplierCycCounts",
+      path: "/stat-partner/v1/supplier-stat/supplier-cyc-counts",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_STAT_SUPPLIER_CYC_COUNTS"
+    },
+    {
+      title: "统计-供应商统计-供应商销售数据",
+      mapFn: "supplierCycSales",
+      path: "/stat-partner/v1/supplier-stat/supplier-cyc-sales",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_STAT_SUPPLIER_CYC_SALES"
+    },
+    {
+      title: "统计-供应商统计-商品销售数据",
+      mapFn: "productCycSales",
+      path: "/stat-partner/v1/supplier-stat/product-cyc-sales",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_STAT_PRODUCT_CYC_SALES"
+    },
+    {
+      title: "统计-供应商统计-商品分类销售数据",
+      mapFn: "productCategoryCycSales",
+      path: "/stat-partner/v1/supplier-stat/product-category-cyc-sales",
+      isRule: false,
+      params: {},
+      disabled: true,
+      role: "STAT-PARTNER.SUPPLIER_STAT_PRODUCT_CATEGORY_CYC_SALES"
+    }
+  ]
+}

package/library/viewModules/viewStat/schemas.js

@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = {
+  name: 'supplierStat',
+  title: '供应商统计',
+  vuex: true,
+  model:[
+    {
+      title: '统计-供应商统计-累计统计',
+      mapFn: "totalCounts",
+      path: '/stat-partner/v1/supplier-stat/total-counts',
+      isRule: false,
+      params: {
+      },
+      disabled: true,
+    },
+  ],
+}

package/library/viewModules/viewStat/viewsStat/index/components/stat-all.vue

@@ -0,0 +1,233 @@
+
+<template>
+  <el-card class="stat_all_card">
+    <div slot="header" class="card_header">
+      <div>
+        <span class="b_tit">累计统计</span>
+        <span class="s_tit">数据截止：{{ statAll.last_updated_date_time }}</span>
+      </div>
+      <!-- <i class="el-icon-refresh" @click="toRefresh"></i> -->
+    </div>
+    <div class="stat_list">
+      <div class="stat_item">
+        <p class="_title">
+          供应商总数 
+          <el-tooltip effect="light" content="总共供应商数量" placement="right">
+            <i class="xdicon_question-circle xd_admin_iconfont"></i>
+          </el-tooltip>
+        </p>
+        <div class="_cont">
+          <div class="_left">{{statAll.supplier_total_count}}</div>
+          <div class="_right one_level">
+            <div class="right_i right_top">正常{{statAll.supplier_online_count}}</div>
+            <div class="right_i right_bottom">关闭{{ statAll.supplier_offline_count }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="stat_item">
+        <p class="_title">
+          商品总数
+          <el-tooltip effect="light" content="总共商品数量，多规格商品计1个" placement="right">
+            <i class="xdicon_question-circle xd_admin_iconfont"></i>
+          </el-tooltip>
+        </p>
+        <div class="_cont">
+          <div class="_left">{{ statAll.product_total_count }}</div>
+          <div class="_right">
+            <div class="right_i right_top">
+              <div class="one_line">
+                {{statAll.product_manual_count}} (人工添加)
+              </div>
+              <div class="two_line">
+                <div>上架{{statAll.product_manual_online_count}}</div>
+                <div>下架{{ statAll.product_manual_offline_count }}</div>
+              </div>
+            </div>
+            <div class="right_i right_bottom">
+              <div class="one_line">
+                {{statAll.product_channel_count}}(接口同步)
+              </div>
+              <div class="two_line">
+                <div>上架{{statAll.product_channel_online_count}}</div>
+                <div>下架{{statAll.product_channel_offline_count}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="stat_item">
+        <p class="_title">
+          SKU总数
+          <el-tooltip effect="light" content="总共商品规格数量，多规格商品计多个" placement="right">
+            <i class="xdicon_question-circle xd_admin_iconfont"></i>
+          </el-tooltip>
+        </p>
+        <div class="_cont">
+          <div class="_left">{{statAll.sku_total_count}}</div>
+          <div class="_right">
+            <div class="right_i right_top">
+              <div class="one_line">
+                {{statAll.sku_manual_count}} (人工添加)
+              </div>
+              <div class="two_line">
+                <div>上架{{statAll.sku_manual_online_count}}</div>
+                <div>下架{{statAll.sku_manual_offline_count}}</div>
+              </div>
+            </div>
+            <div class="right_i right_bottom">
+              <div class="one_line">
+                {{statAll.sku_channel_count}}(接口同步)
+              </div>
+              <div class="two_line">
+                <div>上架{{statAll.sku_channel_online_count}}</div>
+                <div>下架{{statAll.sku_channel_offline_count}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </el-card>
+</template>
+<script>
+
+import {mapActions} from 'vuex';
+
+export default {
+  data(){
+    return {
+      statAll: {}
+    }
+  },
+  created(){
+    console.log('created')
+    this.p_totalCounts();
+  },
+  methods: {
+    ...mapActions("supplierStat", ["totalCounts", "refreshTotalCounts"]),
+    toRefresh(){
+      this.p_totalCounts();
+      //刷新接口移除
+      // let loading = this.$loading({});
+      // this.refreshTotalCounts().then(res => {
+      //   loading.close()
+      //   this.p_totalCounts();
+      // }).catch(err => {
+      //   loading.close()
+      // })
+    },
+    p_totalCounts(){
+      let loading = this.$loading({});
+      this.totalCounts().then(res => {
+        this.statAll = res.data;
+        loading.close();
+      }).catch(err => {
+        loading.close();
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .stat_all_card{
+    /deep/ .el-card__body{
+      overflow: auto;
+    }
+  }
+  .card_header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > i{
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+  .b_tit{
+    font-size: 18px;
+    font-weight: 400;
+    color:#2E3033;
+  }
+  .s_tit{
+    font-size: 12px;
+    color: #A1A7B3;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  .stat_list{
+    display: flex;
+    justify-content: space-around;
+    min-width: 800px;
+    .stat_item{
+      margin-right: 30px;
+      ._title{
+        margin: 0;
+        font-size: 14px;
+        font-weight: 400;
+        color: #2E3033;
+        display: flex;
+        margin-bottom: 10px;
+
+        i{
+          cursor: pointer;
+          margin-left: 4px;
+          color: #A1A7B3;
+        }
+      }
+      ._cont{
+        display: flex;
+        align-items: center;
+        color: #1A66FF;
+        font-weight: 500;
+      }
+      ._left{
+        font-size: 32px;
+        font-weight: 500;
+      }
+      ._right{
+        display: flex;
+        flex-direction: column;
+        &.one_level{
+          .right_i{
+            background: none !important;
+            padding-bottom: 0 !important;
+            padding-top: 0 !important;
+          }
+        }
+        
+        .right_i{
+          display: flex;
+          align-items: center;
+          height: 50px;
+          font-size: 18px;
+          padding-left: 30px;
+          
+          &.right_top{
+            background: url("https://sandbox-img.jufubao.cn/uploads/20231031/2739c34c5d2d19d7d4aae2e26070817d.png") no-repeat;
+            background-position: left 60%;
+            background-size: 28px auto;
+            padding-bottom: 10px;
+          }
+          &.right_bottom{
+            background: url("https://sandbox-img.jufubao.cn/uploads/20231031/90c4c51e0621d876e6126d8696aa8966.png") no-repeat;
+            background-position: left 40%;
+            background-size: 28px auto;
+            padding-top: 10px;
+          }
+
+
+          .two_line{
+            margin-left: 30px;
+            & > div{
+              margin: 2px 0;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/library/viewModules/viewStat/viewsStat/index/components/stat-product.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-card>
+    <div slot="header" class="card_header">
+      <div class="card_tit">
+        <span class="b_tit">商品数量</span>
+        <el-tooltip effect="light" content="按商品最新创建时间和最终下架时间统计 仅统计人工上下架商品" placement="right">
+          <i class="xdicon_question-circle xd_admin_iconfont"></i>
+        </el-tooltip>
+      </div>
+      <div>
+        <el-radio-group v-model="cyc_type" size="medium" @input="handleChangeType">
+          <el-radio-button label="month">按月</el-radio-button>
+          <el-radio-button label="year">按年</el-radio-button>
+        </el-radio-group>
+      </div>
+      
+    </div>
+    <div ref="chartWrap" class="chart_wrap">
+    </div>
+  </el-card>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { mapActions } from "vuex"
+export default {
+  data(){
+    return {
+      cyc_type: "month"
+    }
+  },
+  created(){
+
+  },
+  mounted(){
+    this.renderChart();
+  },
+  methods: {
+    ...mapActions("supplierStat", ['productCycCounts']),
+    renderChart(){
+      this.productCycCounts({cyc_type: this.cyc_type}).then(res => {
+        var chartDom = this.$refs['chartWrap'];
+        var myChart = echarts.init(chartDom);
+        var option = this.getChartOptions(res.data);
+        option && myChart.setOption(option);
+      })
+    },
+    getChartOptions(data){
+      let xAxisData = data.x.data;
+      let legendData = ['上架商品', '下架商品'];
+      let seriesData = [];
+      data.series.forEach(item => {
+        for(let i = 0; i < item.length; i++){
+          seriesData[i] = seriesData[i] || [];
+          seriesData[i].push(item[i].data);
+        }
+      })
+      console.log("seriesData", seriesData)
+
+      return {
+        tooltip: {
+          trigger: 'axis',
+          // backgroundColor: 'rgba(255,255,255,0.9)',
+          // textStyle: {
+          //   color: '#666'
+          // }
+        },
+        legend: {
+          data: legendData
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          smooth: true,
+          data: xAxisData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: seriesData.map((item, index) => {
+          return {
+            name: legendData[index],
+            type: 'line',
+            smooth: true,
+            data: item
+          }
+        })
+      };
+    },
+    handleChangeType(val){
+      console.log("handleChangeType", val);
+      this.renderChart();
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .card_header{
+    display: flex;
+    .card_tit{
+      display: flex;
+      flex: 1;
+      align-items: center;
+      i{
+        margin-left: 4px;
+        cursor: pointer;
+        color: #A1A7B3;
+      }
+    }
+  }
+  .b_tit{
+    font-size: 18px;
+    font-weight: 400;
+    color:#2E3033;
+  }
+  .chart_wrap{
+    height: 260px;
+  }
+</style>

package/library/viewModules/viewStat/viewsStat/index/components/stat-supplier.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-card>
+    <div slot="header" class="card_header">
+      <div class="card_tit">
+        <span class="b_tit">供应商数量</span>
+        <el-tooltip effect="light" content="按供应商创建时间和最终关闭时间统计" placement="right">
+          <i class="xdicon_question-circle xd_admin_iconfont"></i>
+        </el-tooltip>
+      </div>
+      <div>
+        <el-radio-group v-model="cyc_type" size="medium" @input="handleChangeType">
+          <el-radio-button label="month">按月</el-radio-button>
+          <el-radio-button label="year">按年</el-radio-button>
+        </el-radio-group>
+      </div>
+      
+    </div>
+    <div ref="chartWrap" class="chart_wrap">
+    </div>
+  </el-card>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { mapActions } from "vuex"
+export default {
+  data(){
+    return {
+      cyc_type: "month"
+    }
+  },
+  created(){
+
+  },
+  mounted(){
+    this.renderChart();
+  },
+  methods: {
+    ...mapActions("supplierStat", ['supplierCycCounts']),
+    renderChart(){
+      this.supplierCycCounts({cyc_type: this.cyc_type}).then(res => {
+        var chartDom = this.$refs['chartWrap'];
+        var myChart = echarts.init(chartDom);
+        var option = this.getChartOptions(res.data);
+        option && myChart.setOption(option);
+      })
+    },
+    getChartOptions(data){
+      let xAxisData = data.x.data;
+      let legendData = ['新增供应商', '关闭供应商'];
+      let seriesData = [];
+      data.series.forEach(item => {
+        for(let i = 0; i < item.length; i++){
+          seriesData[i] = seriesData[i] || [];
+          seriesData[i].push(item[i].data);
+        }
+      })
+      return {
+       
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          smooth: true,
+          data: xAxisData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: seriesData.map((item, index) => {
+          return {
+            name: legendData[index],
+            type: 'line',
+            smooth: true,
+            data: item
+          }
+        })
+      };
+    },
+    handleChangeType(val){
+      console.log(val);
+      this.renderChart();
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .card_header{
+    display: flex;
+    .card_tit{
+      display: flex;
+      flex: 1;
+      align-items: center;
+      i{
+        margin-left: 4px;
+        cursor: pointer;
+        color: #A1A7B3;
+      }
+    }
+  }
+  .b_tit{
+    font-size: 18px;
+    font-weight: 400;
+    color:#2E3033;
+  }
+  .chart_wrap{
+    height: 260px;
+  }
+</style>