nxdt-uniapp/pages/work/index.vue

<template>
  <div>
    <Navbar title="数据看板" :showBack="false" />
    <!-- <u-navbar title="数据看板" height="102" :placeholder="true" :back-button="false" bgColor="#D0E9F6">
      <u-icon slot="left" name="" @click="back" />
    </u-navbar> -->
    <div class="bg-img"></div>
    <div class="content">
      <Title title="工程总览" />
      <!-- <div class="project-overview" id="projectOverview"></div> -->
      <Chart v-if="isShowChart" :optionData="yData" />
      <Title title="数据总览" />
      <div>
        <div class="select" @click="showPro = true">
          <div class="proName">{{ proName }}</div>
          <div class="tip">
            <div>请选择</div>
            <u-icon name="arrow-right" />
          </div>
        </div>
        <!-- 数据列表 -->
        <u-list height="330">
          <u-list-item v-for="(item, index) in dataList" :key="index">
            <u-cell :title="item.label" :value="item.value"></u-cell>
          </u-list-item>
        </u-list>
      </div>
    </div>

    <u-picker
      :show="showPro"
      :columns="columns"
      keyName="label"
      @cancel="showPro = false"
      @confirm="handleSelect"
    ></u-picker>

    <Tabbar />
  </div>
</template>

<script>
import Chart from './component/Chart'
import { getNumList, getNum, getProOptions } from '@/api/project'

export default {
  components: { Chart },
  data() {
    return {
      isShowChart: true,
      showPro: false,
      // 下拉数据
      columns: [],
      dataList: [
        {
          label: '施工总人数',
          value: 0
        },
        {
          label: '特殊工种总人数',
          value: 0
        },
        {
          label: '施工设备总数',
          value: 0
        },
        {
          label: '特种设备总数',
          value: 0
        }
      ],
      yData: [],
      // 工程名称
      proName: '',
      proId: undefined
    }
  },
  created() {
    this.getProjectOverview()
    this.getProOptions()
  },
  methods: {
    scrolltolower() {
      console.log('scrolltolower')
    },
    // 获取工程总览数据
    async getProjectOverview() {
      this.yData = []
      const params = {
        proIds: []
      }
      const res = await getNumList(params)
      console.log('res', res)
      if (!res.rows.length) {
        this.isShowChart = false
        return
      }
      this.yData.push(res.rows[0]?.planningPro)
      this.yData.push(res.rows[0]?.preparingPro)
      this.yData.push(res.rows[0]?.constructionPro)
      this.yData.push(res.rows[0]?.completedPro)
      console.log('🚀 ~ getProjectOverview ~ this.yData:', this.yData)
    },
    // 获取数据总览数据
    async getDataOverview(proId) {
      const params = {
        proId
      }
      const res = await getNum(params)
      console.log('res', res)
      // personNum施工人员总数 特种人员总数specialPersonNum 工器具总数equipNum 特种设备总数specialEquipNum
      this.dataList[0].value = res?.personNum
      this.dataList[1].value = res?.specialPersonNum
      this.dataList[2].value = res?.equipNum
      this.dataList[3].value = res?.specialEquipNum
    },
    // 获取工程-下拉
    async getProOptions() {
      const res = await getProOptions()
      console.log('res', res)
      this.columns = [res.data]
      console.log('🚀 ~ getProOptions ~ this.columns:', this.columns)
      // this.proName 默认第一个工程
      this.proName = res.data[0]?.label
      this.getDataOverview(res.data[0]?.value)
    },
    // 选择工程
    handleSelect(item) {
      console.log('handleSelect', item.value[0])
      this.proName = item.value[0]?.label
      this.getDataOverview(item.value[0]?.value)
      this.showPro = false
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.isShowChart = false
      this.yData = []
      console.log('下拉刷新')
      setTimeout(() => {
        this.getProjectOverview()
        this.getProOptions()
        this.isShowChart = true
        uni.stopPullDownRefresh()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 25px;
  .project-overview {
    height: 300px;
  }

  .select {
    height: 40px;
    border: 1px solid #ebeef5;
    border-radius: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .proName {
      width: 70%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }
    .tip {
      display: flex;
      align-items: center;
      color: #c0c4cc;
      u-icon {
        margin-left: 10px;
      }
    }
  }
}
</style>