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="6月五星门店（排名不分先后）">
              <template #rightBtn>
                <label class="tooltip">默认选择一个网格</label>
                <el-select placeholder="请选择网格" v-model="form.data" size="small">
                  <el-option
                      v-for="item in []"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </ai-title>
            <ai-table :is-show-pagination="false"
                      :tableData="tableData"
                      :col-configs="colConfigs"></ai-table>
          </div>
          <div class="right-row flex-col">
            <ai-title title="网格五星门店数量排名"></ai-title>
            <div class="bar-chart" ref="chartRef"></div>
          </div>
        </div>
        <ai-title title="统计列表"></ai-title>
        <ai-search-bar>
          <template #left>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="经营类型"
                :selectList="[]">
            </ai-select>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="所属网格"
                :selectList="[]">
            </ai-select>
          </template>
          <template #right>
            <el-input
                v-model="search.createUserName"
                size="small"
                v-throttle="() => {search.current = 1, getList()}"
                placeholder="请输入门店名称"
                clearable
                @clear="search.current = 1, search.createUserName = '', getList()"
                suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="colConfigs1"
            :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 :src="row.picUrl" alt="" v-viewer>
            </template>
          </el-table-column>

          <el-table-column label="门店评分" slot="mark" align="center">
            <template v-slot="{row}">
              <el-rate :value="4" 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: '门店统计',
  data() {
    return {
      data: {},
      form: {},
      search:{},
      cardList: [
        {
          label: '门店总数量',
          value: 122
        },
        {
          label: '总网格数',
          value: 122
        },
        {
          label: '总网格员',
          value: 122
        },
        {
          label: '五星门店',
          value: 122
        }
      ],
      tableData: [],
      colConfigs: [
        {prop: '1', label: '门店名称', align: 'center'},
        {prop: '2', label: '经营类型', align: 'center'},
        {prop: '3', label: '经营者名称', align: 'center'},
      ],
      total: 10,
      colConfigs1: [
        {type: "selection"},
        { slot: 'pic', align: 'center' },
        { prop: 'integralUserName',  label: '门店名称', align: 'center' },
        { prop: 'areaName',  label: '经营者姓名', align: 'center' },
        { prop: 'girdName',  label: '联系电话', align: 'center' },
        { prop: 'createTime',  label: '录入时间', align: 'center' },
        { prop: 'createTime',  label: '所属网格', align: 'center' },
        { prop: 'status',  label: '门店地址', align: 'center'},
        { prop: 'auditUserName',  label: '经营类型', align: 'center' },
        {slot:'mark',align: 'center'}
      ],
      tableData1: [],
    }
  },

  methods: {
    getList(){

    },
    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: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '2012',
            type: 'bar',
            itemStyle:{
              color:'#389FFF'
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      })

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

  mounted() {
    this.initChart()
  },

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

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

  .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%;
    }

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

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

  .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;
  }
}
</style>