yanxiang_h5/pages/home/home.vue

<template>
  <view class="pageHome">
    <yx-navbar :isBack="false" title="企业看板"></yx-navbar>
    <view class="pageIndex">
      <view class="tabs">
        <view class="tab" :class="tabIndex === 0 ? 'active' : ''" @click="onClickTab(0)">可视化大屏</view>
        <view class="tab" :class="tabIndex === 1 ? 'active' : ''" @click="onClickTab(1)">自助报表</view>
      </view>
      <view class="search">
        <u-icon name="list" size='35' @click="showCategory=true"></u-icon>
        <u-search
          :placeholder="placeholder" v-model="params.title" :show-action="false"
          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
        ></u-search>
      </view>
      <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
        <view class="main" v-if="dataList.length > 0">
          <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <img v-if="item.backgroundUrl" class="infoImg" :src="item.backgroundUrl" alt="">
            <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
            <view class="infoRight">
              <view class="name">{{ item.title }}</view>
              <view class="describe">所属分类：{{ item.categoryName }}</view>
              <view class="infoBottom">
                <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
                <view class="dateTime">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
        <template v-if="!loading&&!dataList.length">
          <image v-if="params.title" src="../../static/img/no-search.png" style="width: 100%" mode="aspectFit"></image>
          <image v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
        </template>
      </scroll-view>
    </view>
    <u-picker :show="showCategory" :columns="categoryList" confirmColor="#eb5a10" @cancel="showCategory=false"
              closeOnClickOverlay @close="showCategory=false" key-name="categoryValue" @change="onCategoryChange"
              @confirm="onSelectCategory"
    ></u-picker>
    <tab-bar tabbarValue='企业看板'></tab-bar>
  </view>
</template>
<script>
import {bigdataList, reportList, classifyList, reportClassList, getPv} from '@/common/api.js'
import moment from 'moment'
export default {
  data() {
    return {
      placeholder: "请输入大屏名称",
      tabIndex: 0,
      params: {
        size: 10,
        current: 1,
        title: "",
        isMobile: 1,
        category: ''
      },
      dataList: [],
      visualCategoryPlain: [],
      reportCategoryPlain: [],
      categoryList: [[], [], []],
      showCategory: false,
      propsShow: false,
      loading: true,
      lastCreateTime: '',
    }
  },
  onShow() {
    if (this.$store.state.$userInfo.isSingle) {
      uni.switchTab({url: '/pages/home/me'});
      return
    }
    this.getCategory().then(() => {
      this.getData(true)
    })
  },
  methods: {
    getCount(data, type) {
      return new Promise((resolve, reject) => {
        if (!data.length) {
          resolve()
        } else {
          let visualIds = data.map(i => i.id)
          getPv({type, visualIds}).then(rr => {
            let counts = rr.data.reduce((r, i) => ({...r, [i.visualId]: i.viewCount}), {})
            data.forEach(item => item.count = counts[item.id] || 0)
            resolve()
          })
        }
      })
    },
    getData(reload) {
      if (reload) {
        this.params.current = 1
        this.lastCreateTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
      let data = {...this.params, createTimeIndex: this.lastCreateTime}
      this.loading = true
      if (this.tabIndex === 0) {
        bigdataList(data).then(res => {
          let data = res.data
          this.getCount(data, 0).then(() => {
            data.forEach(item => {
              item.categoryName = this.visualCategoryPlain.find(i => i.id === item.category)?.categoryValue || ''
              item.date = moment(item.createTime).format('YYYY-MM-DD')
            })
            if (data.length) this.params.current++
            if (reload) {
              this.dataList = data
            } else {
              this.dataList = this.dataList.concat(data)
            }
            this.lastCreateTime = this.dataList[this.dataList.length - 1]?.createTime || ''
          })
        }).finally(() => this.loading = false)
      }
      if (this.tabIndex === 1) {
        reportList(data).then(res => {
          let data = res.data
          this.getCount(data, 1).then(() => {
            data.forEach(item => {
              item.categoryName = this.reportCategoryPlain.find(i => i.id === item.category)?.categoryValue || ''
              item.date = moment(item.createTime).format('YYYY-MM-DD')
            })
            if (data.length) this.params.current++
            if (reload) {
              this.dataList = data
            } else {
              this.dataList = this.dataList.concat(data)
            }
            this.lastCreateTime = this.dataList[this.dataList.length - 1]?.createTime || ''
          })
        }).finally(() => this.loading = false)
      }
    },
    onSelectCategory({value}) {
      this.params.category = value[2]?.id || ''
      this.getData(true)
      this.showCategory = false
    },
    onClickTab(index) {
      this.placeholder = index ? '请输入报表名称' : '请输入大屏名称'
      this.tabIndex = index
      this.params.category = ''
      this.params.title = ''
      this.countDefaultCategory()
      this.getData(true)
    },
    onSearch(e) {
      this.getData(true)
    },
    goDetail(item) {
      uni.navigateTo({url: '/pages/detail/bigdata?id=' + item.id + '&title=' + item.title})
    },
    getCategory() {
      return new Promise((resolve, reject) => {
        let task1 = classifyList()
        task1.then(res => {
          this.visualCategoryPlain = res.data
          this.visualCategoryPlain.unshift({id: '', categoryValue: '全部分类'})
        })
        let task2 = reportClassList()
        task2.then(res => {
          this.reportCategoryPlain = res.data
          this.reportCategoryPlain.unshift({id: '', categoryValue: '全部分类'})
        })
        Promise.all([task1, task2]).then(() => {
          this.countDefaultCategory()
          resolve()
        })
      })
    },
    countDefaultCategory() {
      let categories = this.tabIndex ? this.reportCategoryPlain : this.visualCategoryPlain
      let categories1 = categories.filter(i => !i.parentId)
      let categories2 = [{id: '', categoryValue: '全部'}]
      let categories3 = [{id: '', categoryValue: '全部'}]
      this.categoryList = [categories1, categories2, categories3]
    },
    onCategoryChange({columnIndex, index, picker, values}) {
      let now = values[columnIndex][index]
      let categories = this.tabIndex ? this.reportCategoryPlain : this.visualCategoryPlain
      if (columnIndex === 0) {
        if (!now.id) {
          picker.setColumnValues(1, [{id: '', categoryValue: '全部'}])
          picker.setColumnValues(2, [{id: '', categoryValue: '全部'}])
        } else {
          let column2 = categories.filter(i => i.parentId === now.id)
          column2.unshift({id: now.id, categoryValue: '全部', vir: true})
          picker.setColumnValues(1, column2)
          picker.setColumnValues(2, [{id: now.id, categoryValue: '全部'}])
        }
      }
      if (columnIndex === 1) {
        if (!now.id) {
          picker.setColumnValues(2, [{id: '', categoryValue: '全部'}])
        } else {
          if (now.vir) {
            picker.setColumnValues(2, [{id: now.id, categoryValue: '全部'}])
          } else {
            let column3 = categories.filter(i => i.parentId === now.id)
            column3.unshift({id: now.id, categoryValue: '全部'})
            picker.setColumnValues(2, column3)
          }
        }
      }
    }
  }
}
</script>
<style lang="less">
@import "./home.less";
</style>