caimei365-manager-ui/src/views/user/club-portrait/index.vue

<template>
  <div class="report">
    <div class="ins_echart_headers">
      <div class="ins_headers_flx">
        <div class="nums n4">
          客户需求：{{ dataValue.orderData.orderTotalNum || 0 }}个
        </div>
      </div>
      <div class="ins_headers_flx">
        <select-time @handleSelectTime="handleSelectTime($event, 0)" />
      </div>
      <el-button type="success" @click="handleClubDialog(1)">机构活跃信息</el-button>
      <el-button type="success" @click="handleClubDialog(2)">机构资料</el-button>
    </div>
    <div class="ins_keword">
      <hot-tips :keyword-data="keywordData" />
    </div>
    <div class="ins_rcharts_main">
      <div class="ins_rcharts_item">
        <div class="ins_echart_headers">
          <div class="ins_headers_flx">
            <div class="nums">
              订单数量：{{ dataValue.orderData.orderTotalNum || 0 }}个
            </div>
          </div>
          <div class="ins_headers_flx">
            <select-time @handleSelectTime="handleSelectTime($event, 1)" />
          </div>
        </div>
        <div class="ins_statistics">
          <div class="content">
            <pie-echarts :option-data="dataValue.orderData" :title="'订单'" />
          </div>
        </div>
      </div>
      <div class="ins_rcharts_item">
        <div class="ins_echart_headers">
          <div class="ins_headers_flx">
            <div class="nums">
              关键词数量：{{ dataValue.keyWordsData.count || 0 }}个
            </div>
          </div>
          <div class="ins_headers_flx">
            <select-time @handleSelectTime="handleSelectTime($event, 2)" />
          </div>
        </div>
        <div class="ins_trends">
          <bar-echarts :option-data="dataValue.keyWordsData.data" :title="'搜索关键词'" />
        </div>
      </div>
    </div>
    <div class="ins_rcharts_main">
      <div class="ins_rcharts_item">
        <div class="ins_echart_headers">
          <div class="ins_headers_flx">
            <div class="nums">咨询数量：
              <span class="line" @click="handleRouter(1)">{{ dataValue.consultData.count || 0 }}个</span>
            </div>
          </div>
          <div class="ins_headers_flx">
            <select-time @handleSelectTime="handleSelectTime($event, 3)" />
          </div>
        </div>
        <div class="ins_trends">
          <bar-echarts :option-data="dataValue.consultData.data" :title="'咨询记录'" />
        </div>
      </div>
      <div class="ins_rcharts_item">
        <div class="ins_echart_headers">
          <div class="ins_headers_flx">
            <div class="nums">访问数量：
              <span class="line" @click="handleRouter(2)">{{ dataValue.accessData.count || 0 }}个</span>
            </div>
          </div>
          <div class="ins_headers_flx">
            <select-time @handleSelectTime="handleSelectTime($event, 4)" />
          </div>
        </div>
        <div class="ins_trends">
          <bar-echarts :option-data="dataValue.accessData.data" :title="'访问记录'" />
        </div>
      </div>
    </div>
    <!--  信息弹窗 -->
    <club-dialog v-if="dialogVisible" :dialog-type="dialogType" @cancel="handleCancel" />
  </div>
</template>

<script>
import SelectTime from './components/select-time'
import PieEcharts from './components/pei-echarts.vue'
import BarEcharts from './components/bar-echarts.vue'
import HotTips from './components/hot-tips.vue'
import ClubDialog from './components/club-dialog.vue'
import {
  getIns_statistics,
  getIns_orderTrends,
  getIns_accessStatistics
} from '@/api/mallPortrait/disitrib'

export default {
  components: {
    ClubDialog,
    SelectTime,
    PieEcharts,
    BarEcharts,
    HotTips
  },
  data() {
    return {
      clubId: '',
      clubName: '',
      dialogVisible: false,
      dialogType: 1,
      keywordData: [
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌logo', label: 1 },
        { text: '品牌名称', label: 1 },
        { text: '品牌名称', label: 1 },
        { text: '品牌名称', label: 1 },
        { text: 'TOP', label: 0 },
        { text: 'TOP', label: 0 },
        { text: 'TOP', label: 0 }
      ],
      storeColumns: [
        { text: '商品图片', label: 'image', labelWidth: 80 },
        { text: '商品名称', label: 'name' },
        { text: 'TOP', label: 'TOP', labelWidth: 80 }
      ],
      keyColumns: [
        { text: '搜索词', labelWidth: 120 },
        { text: 'TOP', label: 'TOP' }
      ],
      dataValue: {
        // 机构活跃度统计
        clubActivityCount: {
          data: {
            不活跃机构: 0,
            活跃机构: 0
          }
        },
        // 订单统计
        orderData: {
          orderTotalNum: 1,
          name: '订单总量',
          color: ['#3aa0ff', '#36cbcb', '#fad337', '#4dcb73', '#f2637b', '#975fe4'],
          seriesData: [
            {
              name: '普通订单 【100%】 【1个】',
              value: 1
            },
            {
              name: '二手订单 【 0 %】 【0个】',
              value: 0
            }
          ]
        },
        // 咨询记录
        consultData: {
          data: {
            name: '咨询记录',
            yAxisData: [
              '撒肯德基阿拉基',
              '水阿斯达四大光',
              '士大夫撒多发生的',
              'asdas阿瑟的',
              '奥术大师大所多',
              '第三方士大夫',
              '从VB餐补v',
              '水电费'
            ],
            xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
            color: '#FF5B00'
          },
          count: 11
        },
        keyWordsData: {
          data: {
            name: '搜索关键词',
            yAxisData: [
              '热玛吉',
              '水光',
              '超清秀',
              '黄金微针',
              'LDM',
              '皮秒',
              '检测',
              '水光仪'
            ],
            xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
            color: '#07c160'
          },
          count: 11
        },
        // 访问记录
        accessData: {
          data: {
            name: '访问记录',
            yAxisData: [
              '玩儿玩儿',
              '让他也让他也让他',
              '日也同样',
              '水电费',
              '发挂号费',
              'CVBS',
              '不你们部门',
              '电饭锅电饭锅'
            ],
            xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
            color: '#6585fa'
          },
          count: 11
        },
        // 机构新增趋势
        addClubCount: {},
        // 机构订单趋势
        clubOrder: {},
        // 机构访问统计
        record: {},
        // 机构咨询统计
        remarks: {
          data: {
            游客咨询: 0,
            机构咨询: 0
          }
        },
        // 热门品牌
        brandProductSalesRecords: [],
        // 热门商品
        productSalesRecords: [],
        // 热搜词
        keywords: []
      },
      timeList: [
        {
          id: 5,
          content: '近一周'
        },
        {
          id: 2,
          content: '近1月'
        },
        {
          id: 3,
          content: '近6月'
        },
        {
          id: 4,
          content: '近1年'
        }
      ]
    }
  },
  created() {
    this.clubId = this.$route.query.clubId
    this.clubName = this.$route.query.clubName
  },
  methods: {
    handleRouter(type) {
      switch (type) {
        case 1: // 咨询记录
          this.$router.push({
            path: '/user/consult/list',
            query: { clubName: this.clubName, clubId: this.clubId }
          })
          break
        case 2: // 行为记录
          this.$router.push({
            path: '/user/record-list',
            query: { type: 'first', corporateName: this.clubName, clubId: this.clubId }
          })
          break
      }
    },
    handleClubDialog(type) {
      this.dialogType = type
      this.dialogVisible = true
    },
    handleCancel() {
      this.dialogVisible = false
    },
    /**
     * 获取机构需求
     */
    async getCulbDemand(e) {
      const { data } = await getIns_orderTrends({
        startCreateTime: e[0],
        endCreateTime: e[1]
      })
      this.dataValue.clubActivityCount = data.clubActivityCount
      this.dataValue.clubCount = data.clubCount
    },
    /**
     * 机构订单数据
     */
    async getIns_statistics(e) {
      const { data } = await getIns_statistics({
        startCreateTime: e[0],
        endCreateTime: e[1]
      })
      this.dataValue.clubActivityCount = data.clubActivityCount
      this.dataValue.clubCount = data.clubCount
    },
    /**
     * 获取机构搜索词
     */
    async getIns_orderTrends(e) {
      const { data } = await getIns_orderTrends({
        startCreateTime: e[0],
        endCreateTime: e[1]
      })
      this.dataValue.addClubCount = data.clubCount
      this.dataValue.clubOrder = data.clubOrder
    },
    /**
     * 获取机构咨询数据
     */
    async getIns_accessS(e) {
      const { data } = await getIns_accessStatistics({
        startCreateTime: e[0],
        endCreateTime: e[1]
      })
      this.dataValue.record = data.record
      this.dataValue.remarks = data.remarks
      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords
      this.dataValue.productSalesRecords = data.productSalesRecords
      this.dataValue.keywords = data.keywords
    },
    /**
     * 获取机构访问记录数据
     */
    async getIns_accessStatistics(e) {
      const { data } = await getIns_accessStatistics({
        startCreateTime: e[0],
        endCreateTime: e[1]
      })
      this.dataValue.record = data.record
      this.dataValue.remarks = data.remarks
      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords
      this.dataValue.productSalesRecords = data.productSalesRecords
      this.dataValue.keywords = data.keywords
    },
    handleSelectTime(e, num) {
      const obj = {
        0: () => this.getCulbDemand(e), // 机构需求
        1: () => this.getIns_statistics(e),
        2: () => this.getIns_orderTrends(e),
        3: () => this.getIns_accessStatistics(e),
        4: () => this.getIns_accessStatistics(e)
      }
      obj[num]()
    }
  }
}
</script>

<style lang="scss" scoped>
.report {
  padding: 20px;

  background-size: contain;
  .ins_header {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    .flex-header-main {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px 0;
      text-align: right;
    }
  }
  .ins_echart_headers {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .ins_headers_flx {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 10px;
      .line{
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  .ins_rcharts_main {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
  .ins_keword {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
  .ins_statistics {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
  .ins_deStatistics {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
}
.label {
  font-size: 16px;
  font-weight: 600;
  margin-right: 20px;
}
.nums {
  font-size: 16px;
  color: #00aeff;
  font-weight: 600;

}
.tips {
  font-size: 14px;
  color: #ccc;
}
.e-title {
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
.hot-content {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  grid-gap: 14px;
}
</style>