usky-web-mobile/src/pages/business/common/projectMange/overview/index.vue

<template>
  <u-sticky class="shadow-default projectOverview" 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>
  
  <oa-scroll
    customClass="invoicing-container scroll-height"
    :customStyle="{}"
    :isSticky="true"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :scrollIntoView="scrollIntoView"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
    style="height: calc(100% - 44px);"
  >
  <view class="projectName">{{ project.projectName }}</view>
    <view>
      <view class="menu-list" style="font-size: 15px; line-height: 30px;padding:0;">
        <view class="list-cell" style="color: #666666;padding:10px;">
          <view class="menu-item">
            <span style="color:#559AFF;font-weight:bold;font-size: 15px;">丨 概况</span>
          </view>
          <view class="tableType4" style="margin-top:10px;">
            <u-row v-for="(item, index) in overviewData" :key="index">
              <u-col span="4">
                <view style="text-align: left; padding: 0px 5px 0px 5px" >{{ item.label }}</view>
              </u-col>
              <u-col span="8">
                <view style="text-align: left; padding: 0px 5px 0px 5px;overflow-x:scroll !important;width:100%;white-space:none !important;" v-if="!item.color">{{ item.value ? item.value : '无' }}</view>
                <view style="text-align: left; padding: 0px 5px 0px 5px;overflow-x:scroll !important;width:100%;white-space:none !important;" v-if="item.color"><span :style="{color:item.color}">{{ item.value }}</span></view>
              </u-col>
            </u-row>
          </view>
        </view>
      </view>
      <view class="menu-list" style="font-size: 15px; line-height: 30px;padding:0;">
        <view class="list-cell" style="color: #666666;padding:10px;">
          <view class="menu-item">
            <span style="color:#559AFF;font-weight:bold;">丨 背景</span>
          </view>
          <view class="menu-item textExceeds">
            <span>{{ project.projectDescribe ? project.projectDescribe : "无" }}</span>
          </view>
        </view>
      </view>
      <view class="menu-list" style="font-size: 15px; line-height: 30px;padding:0;">
        <view class="list-cell" style="color: #666666;padding:10px;">
          <view class="menu-item">
            <span style="color:#559AFF;font-weight:bold;">丨 工时投入统计</span>
          </view>
          <view class="menu-item">
            <view class="example-body" style="width:100%">
              <uni-datetime-picker v-model="range" type="daterange" :clear-icon="false" @change="changeTime"  style="margin:10px 0;"/>
              <lineEcharts :xAxisDataList="xAxisDataList" :seriesDataList="seriesDataList" style="width:100%;margin-top:10px;" v-if="xAxisDataList.length>0"></lineEcharts>
            </view>
          </view>
        </view>
      </view>
    </view>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { crmInvoiceInfo, page } from "@/api/common/invoicing.js";
import { projectApi } from "@/api/business/project.js";
import { dUserList } from "@/api/system/user.js";
import dayjs from 'dayjs/esm/index'
/*----------------------------------组件引入-----------------------------------*/
import lineEcharts from "./components/echarts.vue";
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const { project_type,project_status } = proxy.useDict("project_type","project_status");
/*----------------------------------变量声明-----------------------------------*/
const uForm = ref(null);
const range = ref([dayjs().subtract(30, "day").format("YYYY-MM-DD"),dayjs().subtract(0, "day").format("YYYY-MM-DD")])
const state = reactive({
  projectId: "",//项目id
  project:{},//项目信息
  userDate:[],//人员列表
  form: {
    customId: "", //客户管理id
    invoiceTitle: "", //发票抬头
    dutyId: "", //税号
    email: "", //电子邮箱
    applicant: "", //申请人
    phone: "", //手机号码
    amount: "", //金额
    invoiceType: "1", //发票类型;1：普票，2：专票
    invoiceAttribute: "1", //发票性质;1：电子发票，2：纸质发票
    sendAddress: "", //邮寄地址
    paymentReceipt: "", //付款回执
  },
  overviewData:[
    { label:"负责人", value:"",color:"" },
    { label:"状态", value:"",color:"" },
    { label:"类型", value:"",color:"" },
    { label:"计划人天", value:"",color:"" },
    { label:"成员", value:"",color:"" },
    { label:"时间", value:"",color:"" },
  ],
  xAxisDataList:[],
  seriesDataList:[],
  scrollIntoView: "",
  promptStatus: false,
});

const { scrollIntoView, promptStatus,project,userDate,overviewData,projectId,xAxisDataList,seriesDataList } = toRefs(state);

/**
 * @提交
 */
function handleSubmit(value) {
  scrollIntoView.value = "";
  uForm.value
    .validate()
    .then((res) => {
      uni.$u.toast("校验通过");
      proxy.$modal.loading("加载中");
      page({
        current: 1,
        size: 10,
        invoiceTitle: form.value.invoiceTitle,
        startTime: proxy.$time.getYearLast(new Date()),
        endTime: proxy.$time.getFormatterDate(new Date()),
      }).then((requset) => {
        if (requset.status === "SUCCESS") {
          proxy.$modal.closeLoading();

          if (requset.data.records.length > 0) {
            promptStatus.value = true;
            scrollIntoView.value = "noticeBar";
          } else {
            var param = {
              customId: parseInt(form.value.customId), //客户管理id
              invoiceTitle: form.value.invoiceTitle, //发票抬头
              dutyId: form.value.dutyId, //税号
              email: form.value.email, //电子邮箱
              applicant: form.value.applicant, //申请人
              phone: form.value.phone, //手机号码
              amount: parseFloat(form.value.amount), //金额
              invoiceType: parseInt(form.value.invoiceType), //发票类型;1：普票，2：专票
              invoiceAttribute: parseInt(form.value.invoiceAttribute), //发票性质;1：电子发票，2：纸质发票
              sendAddress: form.value.sendAddress, //邮寄地址
              paymentReceipt: form.value.paymentReceipt, //付款回执
            };
            crmInvoiceInfo(param).then((requset) => {
              if (requset.status === "SUCCESS") {
                proxy.$tab.navigateTo("/pages/common/success/index?codeName=提交成功");
              }
            });
          }
        }
      });
    })
    .catch((errors) => {
      uni.$u.toast("校验失败");
    });
}
function changeTime(e){
  xAxisDataList.value=[]
  getEchartsData()
}

/**
 * @api接口查询
 */
function selectListApi(id) {
  dUserList().then((res) => {
    state.userDate = res.data;
    projectApi()
      .ProjectsList({
        projectId: id,
      })
      .then((requset) => {
        project.value = requset.data.records[0];
        overviewData.value[0].value = proxy.$common.mapping("nickName", "userId", project.value.projectHead, userDate.value)
        overviewData.value[1].value = proxy.$common.mapping("label", "value", project.value.projectStatus, project_status.value)
        overviewData.value[1].color = proxy.$common.mapping("elTagClass", "value", project.value.projectStatus, project_status.value)
        overviewData.value[2].value = proxy.$common.mapping("label", "value", project.value.projectType, project_type.value)
        overviewData.value[3].value = project.value.projectWorkload
        overviewData.value[4].value = proxy.$common.mapping("nickName", "userId", project.value.projectMember, userDate.value)
        overviewData.value[5].value = project.value.startTime || project.value.endTime ? 
        (project.value.startTime ? project.value.startTime.slice(0, 10) : "") + 
        " 至 " + (project.value.endTime ? project.value.endTime.slice(0, 10) : '') : ""
      })
    });

}
function getEchartsData(){
  projectApi()
  .usersProjectWorkTime(
    {
      projectId:projectId.value,
      startDate:range.value[0],
      endDate:range.value[1]
    }
  ).then((res) => {
    xAxisDataList.value = res.data.users
    seriesDataList.value = res.data.workTime
  })
}


onLoad((options) => {
  if(options.id){
    projectId.value= options.id
    selectListApi(options.id)
    getEchartsData()
  }
});

onReady(() => {});

onShow((options) => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}
.projectName{
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin:10px 0 0 ;
}
</style>
<style>
/* 时间样式 */
  :deep(.uni-date-editor--x){
    border-radius: 20px !important;
    width:100% !important;
  }
  :deep(.uni-date-x){
    background-color: transparent !important;
  }
</style>