ahyd_DIB/pages/commercialBI/guestPortrait.vue

<template>
  <div class="main">
      <header-top :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title" :labelList="labelList"/>

      <div class="charts">
          <div class="chartsItem">
              <p class="title">客群分析</p>
              <customer-first />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群分析</p>
              <customer-second :data="genderBubbleList" />
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群消费偏好</p>
              <consum-prefer :data="consterPreferList" />
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">客群消费水平</p>
              <consumption-level :data="consumptionLevelList"/>
              <analyse />
          </div>
          <div class="chartsItem" style="margin-top: 32px">
              <p class="title">业态偏好</p>
              <business-type :data="businessTypeList"></business-type>
              <analyse />
          </div>
      </div>
  </div>
</template>

<script>
import headerTop from "./components/headerTop.vue";
import customerFirst from "./components/guest/customerFirst.vue";
import customerSecond from "./components/guest/customerSecond.vue";
import analyse from "./components/analyse.vue";
import ConsumPrefer from "./components/guest/consumPrefer.vue";
import ConsumptionLevel from "./components/guest/consumptionLevel.vue";
import BusinessType from "./components/guest/businessType.vue";
export default {
    name: "guestPortrait",
    components:{BusinessType, ConsumptionLevel, ConsumPrefer, analyse, headerTop,customerFirst,customerSecond},
    data() {
        return {
            topBg:'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
            labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
            title:'客群画像',//页面标题
            bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
            bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
            time:'',//跳转携带的时间
            menu:{},//手机配置信息
            genderBubbleList:[],//男女的气泡图
            consterPreferList:[],//客群消费偏好
            consumptionLevelList:[],//客群消费水平
            businessTypeList:[]//业态偏好
        }
    },
    onLoad(option){
        //跳转的时候带上时间
        this.time = option.time
        //  获取手机参数对页面进行适配
        let systemInfo = uni.getSystemInfoSync()
        // 把获取到的手机参数保存
        uni.setStorageSync('phoneInfo',systemInfo)
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        //客群分析男女的气泡图
        this.getGenderBubbleList()
        //客群消费偏好
        this.getConsterPreferList()
        //客群消费水平
        this.getConsumptionLevelList()
        //业态偏好
        this.getBusinessTypeList()
    },
    methods:{
        //客群分析男女的气泡图
        getGenderBubbleList(){
            let res = [
                {
                    name: "男",
                    data: [[25,60,60],[40,35,35]]
                },
                {
                    name: "女",
                    data: [[25,35,35],[35,15,15]]
                }
            ]
            this.genderBubbleList = res
        },
        //客群消费偏好
        getConsterPreferList(){
            let res = {
                categories: ['餐饮','商超','水果饮品','连锁品牌','粽子','小吃'],
                series: [
                    {name: "男", data: [90,110,165,195,187,172]},
                    {name: "女", data: [190,210,105,35,27,102]}
                ]
            }
            this.consterPreferList = res
        },
        //客群消费水平
        getConsumptionLevelList(){
            let res=[{name:'男',big:'14.8',normal:'41.7',small:'43.5'},
                {name:'女',big:'44.1',normal:'31.7',small:'24.2'}]
            this.consumptionLevelList = res
        },
        //业态偏好
        getBusinessTypeList(){
            let res=[
                {
                    data: [{name:"餐饮",value:35.6},
                        {name:"小吃",value:22.5},
                        {name:"水果饮品",value:17.3},
                        {name:"粽子",value:15.2},
                        {name:"商超",value:5.8},
                        {name:"其他",value:3.6}]
                }
            ]
            this.businessTypeList = res
        }
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100vw;
  min-height: 100vh;
  .charts{
    width: 100%;
    box-sizing: border-box;
    padding: 28px 16px 24px;
    background: #fff;
    .chartsItem{
      .title{
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 24px;
      }
    }
  }
}
</style>