playlet/project/src/components/smartRadar/dataAnalyse....

<template>
  <div class="con" v-loading="loading">
    <div class="backBox" @click="$router.go(-1)">
      <div class="back">
        <i class="el-icon-back"></i>
        <span>返回</span>
        (数据分析)
      </div>
    </div>

    <div class="dataBox">
      <div v-for="(item,index) in dataPreview" :key="index" class="box_item">
        <div class="c-000 fWeight600">{{item.bigTitle?item.bigTitle:'-'}}</div>
        <div class="f28 pad120">{{item.bigNum||item.bigNum==0?item.bigNum:'-'}}</div>
      </div>
    </div>

    <div class="topTagBox">

      <publicTable
        :propsData="{
          desCol:desCol,
          source:'dataAnalyse'
        }"
      ></publicTable>
    </div>
  </div>
</template>

<script>
import publicTable from './publicTable.vue'
export default {
  name: "dataAnalyse",
  components:{
    publicTable
  },
  data(){
    return{
      loading:false,
      dataPreview:[
        {
          bigTitle:'总访问人数',
          bigNum:0,
          bigKey:'total_uv_count',
        },
        {
          bigTitle:'今日访问人数',
          bigNum:0,
          bigKey:'today_uv_count',
        },
        {
          bigTitle:'总访问次数',
          bigNum:0,
          bigKey:'total_pv_count',
        },
        {
          bigTitle:'今日访问次数',
          bigNum:0,
          bigKey:'today_pv_count',
        }
      ],
      desCol:[
        { prop: "customer_name", label: "客户" },
        { prop: "user_name", label: "所属成员" },
        { prop: "last_click_time", label: "最近点击时间" },
        { prop: "last_click_channel", label: "最近点击渠道" },
        { prop: "pv_count", label: "客户访问总次数"}
      ]
    }
  },
  created(){
    this.init_preview()
  },
  methods:{
    init_preview(){//数据概览
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.radar_dataView, {
        params:{
          radar_id:this.$route.params.id
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.dataPreview.forEach(item=>{
            item.bigNum = res.rst[item.bigKey]
          })
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/list.scss";
.con{
  padding-right: 10px;
}
.dataBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .box_item{
    min-width: 23%;
    padding: 20px 15px 10px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 4px;
    .splitLine{
      width: 100%;
      border-bottom: 1px solid #ddd;
    }
  }
}
.topTagBox{
  margin-top: 10px;
  font-size: 14px;
}
</style>