dvcp_v2_webapp/project/fengdu/AppOutSource/AppMarkStatic/AppMarkStatic.vue

<template>
  <div class="app-ark-static">
    <ai-list>
      <template #content>
        <ai-title title="门店概况"></ai-title>
        <div class="card_list">
          <div class="card" v-for="(item,index) in cardList" :key="index">
            <h2>{{ item.label }}</h2>
            <p class="color1">{{ item.value || 0 }}</p>
          </div>
        </div>
        <div class="flex-row">
          <div class="left-row flex-col">
            <ai-title :title="`${new Date().getMonth()}月五星门店（排名不分先后）`">
              <template #rightBtn>
                <ai-select
                    v-model="search.girdCode"
                    @change="(search.current = 1), getList()"
                    placeholder="请选择网格"
                    size="small"
                    :selectList="gridList">
                </ai-select>
              </template>
            </ai-title>
            <div class="table-wrap">
              <ai-table :is-show-pagination="false"
                        :tableData="tableData"
                        style="height: 100%"
                        height="100%"
                        :col-configs="colConfigs"></ai-table>
            </div>

          </div>
          <div class="right-row flex-col">
            <ai-title title="网格五星门店数量排名"></ai-title>
            <div class="bar-chart" v-show="chartList && chartList.length > 0" ref="chartRef"></div>
            <div v-show="chartList && chartList.length === 0" class="no-data" style="width:386px;height:160px;"/>
          </div>
        </div>
        <ai-title title="统计列表"></ai-title>
        <ai-search-bar>
          <template #left>
            <ai-select
                v-model="form.operatorType"
                @change="(form.current = 1), getList2()"
                placeholder="经营类型"
                :selectList="$dict.getDict('operatorType')">
            </ai-select>
            <ai-select
                v-model="form.girdCode"
                @change="(form.current = 1), getList2()"
                placeholder="所属网格"
                :selectList="gridList">
            </ai-select>
          </template>
          <template #right>
            <el-input
                v-model="form.shopName"
                size="small"
                v-throttle="() => {form.current = 1, getList2()}"
                placeholder="请输入门店名称"
                clearable
                @clear="form.current = 1, form.shopName = '', getList2()"
                suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData1"
            :col-configs="colConfigs1"
            :total="total"
            :current.sync="search.current"
            :size.sync="search.size"
            @getList="getList">
          <el-table-column
              label="门店照片"
              slot="pic"
              align="left">
            <template v-slot="{ row }">
              <img class="shop-img" :src="row.fileUrl" v-if="row.fileUrl" alt="" v-viewer>
              <img class="shop-img" src="./img/shop.png" v-else alt="" v-viewer>
            </template>
          </el-table-column>

          <el-table-column label="门店评分" slot="mark" align="center">
            <template v-slot="{row}">
              <el-rate :value="row.storeScore" show-score text-color="#ff9900" disabled></el-rate>
            </template>
          </el-table-column>

        </ai-table>
      </template>
    </ai-list>
  </div>
</template>

<script>
let chartInstance = null;
export default {
  name: "AppMarkStatic",
  label: '门店统计',
  props: {
    instance: Function,
    dict: Object
  },

  data() {
    return {
      data: {},
      form: {
        current:1,
        pages:10,
        operatorType:'',
        girdCode:'',
        shopName:'',
      },
      search: {
        girdCode:'',
        fiveStartTime:new Date().getMonth().toString(),
        storeLevel:'5',
        pages:1000
      },
      cardList: [
        {
          label: '门店总数量',
          value: 0
        },
        {
          label: '总网格数',
          value: 0
        },
        {
          label: '总网格员',
          value: 0
        },
        {
          label: '五星门店',
          value: 0
        }
      ],
      gridList:[],
      tableData: [],
      colConfigs: [
        {prop: 'shopName', label: '门店名称', align: 'center'},
        {prop: 'operatorType', label: '经营类型', align: 'center',render:(h,{row})=>{
          return h('span',null,this.dict.getLabel('operatorType',row.operatorType))
          }},
        {prop: 'name', label: '经营者名称', align: 'center'},
      ],
      total: 10,
      colConfigs1: [
        {type: "selection"},
        {slot: 'pic', align: 'center'},
        {prop: 'shopName', label: '门店名称', align: 'center'},
        {prop: 'name', label: '经营者姓名', align: 'center'},
        {prop: 'phone', label: '联系电话', align: 'center'},
        {prop: 'createTime', label: '录入时间', align: 'center'},
        {prop: 'girdName', label: '所属网格', align: 'center'},
        {prop: 'address', label: '门店地址', align: 'center'},
        {prop: 'operatorType', label: '经营类型', align: 'center',render:(h,{row})=>{
            return h('span',null,this.dict.getLabel('operatorType',row.operatorType))
          }},
        {slot: 'mark', align: 'center'}
      ],
      tableData1: [],
      chartList:[]
    }
  },

  mounted() {
    this.$dict.load('operatorType').then(()=>{
      this.girdList()
      this.queryShopDetail()
      this.getList()
      this.getList2()
      this.countByFiveStars()
    })
  },

  methods: {
    async countByFiveStars(){
      try {
        const {code, data:{records}} = await this.instance.post('/app/appShopStatistics/countByFiveStars',null,{
          pages:1000
        })
        if (code === 0) {
          this.chartList = records?.reverse() || []
          this.$nextTick(()=>{
            this.initChart()
          })
        }
      } catch (e) {
        console.log(e)
      }
    },

    async girdList() {
      try {
        const {code, data:{records}} = await this.instance.post('/app/appShopStatistics/girdList',null,{
          pages:1000
        })
        if (code === 0) {
          this.gridList = records?.map(item=>{
            return {
              dictName:item.girdName,
              dictValue:item.girdCode
            }
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    async queryShopDetail() {
      try {
        const {code, data} = await this.instance.post('/app/appShopStatistics/queryShopDetail')
        if (code === 0) {
          const list = ['shopCounts','girdCounts','girdPersons','fiveStarsShops']
          list.forEach((item,index)=>{
            this.cardList[index].value = data[item]
          })

        }
      } catch (e) {
        console.log(e)
      }
    },

    // 五星门店列表查询
    async getList() {
      try {
        const {code, data:{records}} = await this.instance.post('/app/appshoparchives/list',null,{
          params:{
            ...this.search,
          }
        })
        if (code === 0) {
          this.tableData = records
        }
      } catch (e) {
        console.log(e)
      }
    },

    // 列表查询
    async getList2() {
      try {
        const {code, data:{records,total}} = await this.instance.post('/app/appShopStatistics/list',null,{
          params:{
            ...this.form,
          }
        })
        if (code === 0) {
          this.total = total
          this.tableData1 = records
        }
      } catch (e) {
        console.log(e)
      }
    },

    resize() {
      if (chartInstance) {
        chartInstance.resize()
      }
    },
    initChart() {
      chartInstance = echarts.init(this.$refs.chartRef)
      chartInstance.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: '1%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.chartList?.map(item=>item.girdName)
        },
        series: [
          {
            type: 'bar',
            barWidth:'20%',
            itemStyle: {
              color: '#389FFF',
            },
            data: this.chartList?.map(item=>item.fiveStarsCount)
          }
        ]
      })

      window.addEventListener('resize', this.resize)
    }
  },

  beforeDestroy() {
    if (chartInstance) {
      chartInstance.dispose()
      chartInstance = null
    }
  }
}
</script>

<style lang="scss" scoped>
.app-ark-static {
  height: 100%;
  background: #F3F6F9;

  .card_list {
    display: flex;

    .card {
      flex: 1;
      height: 96px;
      background: #F9F9F9;
      border-radius: 2px;
      margin-right: 20px;
      padding: 16px 24px;
      box-sizing: border-box;

      h2 {
        color: #888888;
        font-weight: 600;
        font-size: 16px;
      }

      p {
        margin-top: 8px;
        font-size: 24px;
        font-weight: 600;
      }

      .color1 {
        color: #2891FF;
      }

      .color2 {
        color: #22AA99;
      }

      .color3 {
        color: #F8B425;
      }
    }

    .card:last-child {
      margin-right: 0;
    }
  }

  .flex-row {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;

    .left-row {
      height: 100%;
      width: 50%;
      display: flex;
    }

    .right-row {
      width: 50%;
      height: 100%;
      display: flex;
    }

    .flex-col {
      flex-direction: column;
    }

    .table-wrap{
      flex: 1;
      overflow: hidden;
    }
  }

  .mt-10 {
    margin-top: 20px;
  }

  .tooltip {
    font-size: 16px;
    color: #D9001B;
    margin-right: 10px;
  }

  .h-full {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .bar-chart {
    width: 100%;
    flex: 1;
  }

  .shop-img{
    width: 120px;
    height: 120px;
  }
}
</style>