usky-web-mobile/src/pages/business/common/projectMange/statistics/dailyReport.vue

<template>
    <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
      <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="日报" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
        <template #left>
          <view class="u-navbar__content__left__item">
            <u-icon name="arrow-left" size="20" color="#000"></u-icon>
          </view>
        </template>
      </u-navbar>
    </u-sticky>
    <view class="timeSelect">
      <view @click="daySwitch(0)"><u-icon name="arrow-left" size="14" color="#000" class="left"></u-icon></view>
      <view><text>{{ day }}</text></view>
      <view @click="daySwitch(1)" ><u-icon name="arrow-right" size="14" :color="statusNext ? '#000' : '#ccc'" class="right" aria-disabled="true"></u-icon></view>
    </view>
    <view class="container">
      <view class="menu-list">
        <view class="list-cell">
          <view class="list"  :class="{ active: query.queryType == item.value }" @click="tabsClick(item.value)" v-for="(item,index) in activeList" :key="index">
            <text>{{ index == 0 ? statistics.submitOnTime :index == 1 ? statistics.submitLate : index == 2 ? statistics.notSubmitted : '' }}</text> 
            <text>{{ item.name }}</text> 
            <text v-if="item.value == 0 || item.value == 1"></text> 
            <text class="line"></text> 
          </view>
        </view>
      </view>
    </view>
    <oa-scroll
    customClass="record-container scroll-height"
    :pageSize="query.pageSize"
    :total="total"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: `calc(100vh - (138px + ${proxy.$settingStore.StatusBarHeight}))`,
      //#endif
      //#ifdef H5
      height: `calc(100vh - (138px))`,
      //#endif
    }"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <!-- <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page> -->
      <!-- start -->
      <view class="content-area" v-for="(el, index) in reportList" :key="index">
        <!-- <view class="flex mb10" @click="goContentDetails(el)">
            <img :src="el.avatar" class="content-area-center-avatarImg mr10" v-if="el.avatar" />
            <u-avatar
              v-if="!el.avatar"
              class="content-area-center-avatar mr10"
              :text="el.createBy.length > 2 ? el.createBy.slice(1, 3) : el.createBy"
              shape="square"
              size="35"
              fontSize="10"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <view>
              <view class="content-area-center-title font14 mb5">{{ el.createBy }}的日报</view>
              <view class="content-area-center-time font12">{{ proxy.$time.jktTimes(el.submitDate.replace("T", " ")) }}</view>
            </view>
          </view> -->
        <!-- <view class="content-area-center bg-white" v-else style="margin: 0 10px 10px; border-radius: 10px">
          <view class="content-area-top menu-item" style="float: right; padding: 10px 0px">
            <view class="content-area-top-time"> </view>
            <u-icon class="content-area-top-icon" name="more-dot-fill" size="20" color="#000" @click="moreClick(el)"></u-icon>
          </view>
          <view class="flex mb10" @click="goContentDetails(el)">
            <img :src="el.avatar" class="content-area-center-avatarImg mr10" v-if="el.avatar" />
            <u-avatar
              v-if="!el.avatar"
              class="content-area-center-avatar mr10"
              :text="el.createBy.length > 2 ? el.createBy.slice(1, 3) : el.createBy"
              shape="square"
              size="35"
              fontSize="10"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <view>
              <view class="content-area-center-title font14 mb5">{{ el.createBy }}的日报</view>
              <view class="content-area-center-time font12">{{ proxy.$time.jktTimes(el.submitDate.replace("T", " ")) }}</view>
            </view>
          </view>
          <view class="mb5" @click="goContentDetails(el)">
            <u-text :text="el.contentText.length >= 100 ? el.contentText.slice(0, 100) + '···' : el.contentText" color="#666666" size="14"></u-text>
          </view>
          <view class="flex" v-if="el.createBy != useStore.nickName" @click="goContentDetails(el)">
            <u-tag class="mr10" type="info" text="已读" size="mini" plain v-if="el.readFlag === 1" style="margin: 0 auto"></u-tag>
            <u-tag class="mr10" type="error" text="未读" size="mini" plain v-if="el.readFlag === 0" style="margin: 0 auto"></u-tag>
            <u-text text="全文" :color="proxy.$settingStore.themeColor.color" size="14"></u-text>
          </view>
        </view> -->
      </view>
      <!-- end -->
    </template>
  </oa-scroll>
</template>
  
  <script setup>
  /*----------------------------------依赖引入-----------------------------------*/
  import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
  import { ref, getCurrentInstance, reactive } from "vue";
  import { useRouter, useRoute } from "vue-router";
  /*----------------------------------接口引入-----------------------------------*/
  import { projectApi } from "@/api/business/project.js";
  // import dayjs from 'dayjs/esm/index'
  /*----------------------------------组件引入-----------------------------------*/
  /*----------------------------------store引入-----------------------------------*/
  import dayjs from "dayjs";
  const route = useRoute();
  /*----------------------------------公共方法引入-----------------------------------*/
  /*----------------------------------公共变量-----------------------------------*/
  const { proxy } = getCurrentInstance();
  const day = ref("")
  const statusNext = ref(false)//下一天按钮状态
  const currentDate = ref("")//当前日期
  const date = reactive({
    year:"",
    month:"",
    day:""
  })
  const activeList = reactive([
    {name:"按时提交",value:0},
    {name:"迟交",value:1},
    {name:"未提交",value:2},
  ])
  const query = ref({
    queryType:0,
    submitDate:dayjs().format("YYYY-MM-DD"),
    reportId:null,
    pageNum:1,
    pageSize:10,
  })
  /*----------------------------------变量声明-----------------------------------*/
  const statistics = ref({
    submitOnTime: 0, //按时提交
    submitLate: 0, //迟交
    notSubmitted:0,  //未交
  })
  const loading = ref(false)
  const reportList =reactive([])
  const pageSize = ref(20)
  const current = ref(1)
  const total = ref(0)
  /**
   * @页面初始化
   */
  function init(id) {
    if(id){
      query.value.queryType = id
    }
    var time = dayjs().format("YYYY-MM-DD").split("-")
    currentDate.value = `${time[0]}${time[1]}${time[2]}`
    day.value = `${time[0]}年${time[1]}月${time[2]}日`
    date.value = {
      year:time[0],
      month:time[1],
      day:time[2]
    }
    getStatistics()
    getPageList()
  }
  //获取统计数据
  function getStatistics(time) {
    projectApi().pmTimeConfCount(time ? {submitDate:query.value.submitDate} : null ).then((res) => {
      statistics.value = res.data;
    });
  }
  //获取分页数据
  function getPageList() {
    projectApi().pmTimeConfPage(query.value).then((res) => {
      reportList.value = res.data.records[0];
      console.log(reportList.value)
    });
  }
  /** 日期选择*/
  function daySwitch(id){
    //获取前一天/后一天日期
      if(id == 1 && statusNext.value == false){
        return
      }
      const targetDate = dayjs(`${date.value.year}-${date.value.month}-${date.value.day}`);
      var previousDay;
      if(id == 0){
        previousDay = targetDate.subtract(1, 'day');
      }
      if(id == 1){
        previousDay = targetDate.subtract(-1, 'day');
      }
      var time = previousDay.format("YYYY-MM-DD").split("-")
      day.value = `${time[0]}年${time[1]}月${time[2]}日`
      date.value = {
        year:time[0],
        month:time[1],
        day:time[2]
      }
      query.value.submitDate = `${time[0]}-${time[1]}-${time[2]}`
    //获取下一天按钮状态
      var changeDate = `${date.value.year}${date.value.month}${date.value.day}`
      if(changeDate >= currentDate.value){
        statusNext.value = false
      }else{
        statusNext.value = true
      }
    getStatistics(query.value.submitDate)
    getPageList()
  }
  /**
   * @scrollView加载数据
   */
  function load() {
    query.value.current ++;
    init();
  }
  /**
   * @scrollView刷新数据
   */
  function refresh() {
    query.value.current = 1;
    init();
  }


  onLoad(() => {
  });
  
  onShow(() => {
    if(route?.query?.id){
      init(route.query.id)
    }else{
      init()
    }
    //调用系统主题颜色
    proxy.$settingStore.systemThemeColor([1]);
  });
  </script>
  <style lang="scss" scoped>
  :deep(.u-modal__content) {
    font-size: 14px;
    justify-content: left;
  }
  :deep(.list-container .content-area-top-name) {
    font-size: 16px !important;
  }
  </style>
  <style lang="scss" scoped>
  .timeSelect{
    width:100%;
    height:35px;
    background: #fff;
    >view{
      display: inline-block;
      height:35px;
      line-height: 35px;
      position: relative;
      .left{
        position: absolute;
        top:11px;
        right:20px;
      }
      .right{
        position: absolute;
        top:11px;
        left:20px;
      }
    }
    view:nth-child(1),view:nth-child(3){
      width:20%;
    }
    view:nth-child(2){
      width:60%;
      text{
        position: absolute;
        width:100%;
        text-align: center;
      }
    }
  }
  .container{
    width:100%;
    height:calc(100% - 20px);
    margin:10px 0;
    .statisticsSearchBox {
      width: 100%;
      vertical-align: middle;
      position: relative;
      display: flex;
      .uni-input-input {
        font-size: 12px !important;
      }
      :deep(.u-input__content__prefix-icon) {
        position: absolute;
        right: 8px;
        .uicon-search {
          font-size: 16px;
        }
      }
    }
    .u-input {
      display: inline-block;
      background: #fff;
      height: 34px;
      line-height: 34px;
      border-radius: 10px
    }
    .menu-list{
      width:100%;
      margin:0px 0 0 0px;
      padding:15px 10px;
      background: #ffffff;
      border-radius: 10px;
      .list-cell{
        display: flex;
        padding:0;
        .list{
          flex:1;
          text-align: center;
          position: relative;
          text{
            display: block;
            color:#999999;
          }
          text:nth-child(1){
            font-weight: 700;
            font-size: 14px;
          }
          text:nth-child(2){
            font-size: 12px;
            margin-top:10px;
          }
          
        }
        .list:nth-child(1),.list:nth-child(2){
            text:nth-child(3){
                width:1px;
                height:50%;
                position: absolute;
                top:25%;
                right:0;
                background: #E7E7E7;
            }
        }
        .active{
            text{
                color:#000;
            }
            .line{
                position: absolute;
                bottom:-36%;
                left:25%;
                width:50%;
                height:4px;
                border-radius: 2px;
                background: #000;
            }
        }
      }
    }
  }
  </style>