YNUtdPlatform/pages/realName/workPlan-details/index.vue

<template>
  <view class="work-plan-details">
    <u-navbar
      class="u-navbar"
      title="作业计划详情"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <uni-card :is-shadow="true" margin="6">
      <view class="card-header">
        <uni-icons type="list" size="16" style="color: #3f9dfd; margin-right: 8rpx"></uni-icons>
        <text>
          {{ queryInfo.proName }}
        </text>
      </view>
      <view class="card-header">
        <uni-icons type="calendar" size="16" style="margin-right: 8rpx"></uni-icons>
        <view>{{ $moment().format('YYYY-MM-DD') }}</view>
      </view>
    </uni-card>

    <uni-section title="今日作业计划" type="line">
      <template v-slot:right>全部人员</template>
      <uni-card :is-shadow="true" margin="6">
        <view v-for="item in todayWorkList" :key="item.contentId" @tap="onSearchWorkPerson(item.contentId)">
          <view class="row-1">
            <view>现场负责人</view>
            <view>
              <text>{{ item.xcfzr }}</text>
              <!-- <text>{{ item.xcfzr.split('：')[1] }}</text> -->
            </view>
            <view>作业人员</view>
            <view>{{ item.rys }}</view>
          </view>
          <view class="row-2">
            <view>风险等级</view>
            <view>{{ item.fxdj }}</view>
            <view>执行情况</view>
            <view>{{ item.state }}</view>
          </view>
          <view class="row-3">
            <view style="padding: 8rpx 0">作业内容</view>
            <view style="color: #000">{{ item.zynr }}</view>
          </view>
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="作业人员" type="line">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view class="work-person">
          <view v-for="item in workPersonList" :key="item.idNumber" @tap="onClickTableTr(item.idNumber)">
            {{ item.name }}
          </view>
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="人员持证" type="line">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view class="person-card">
          <view class="blue-border" v-for="(item, index) in holdCardList" :key="index" @tap="onQueryCardDetails(item)">
            {{ item.certificateName }}({{ item.certificateNum }})
          </view>
          <!-- <view class="orange-border">低压电工作业（9）</view>
          <view class="green-border">低压电工作业（9）</view>
          <view class="blue-border">低压电工作业（9）</view>
          <view class="orange-border">低压电工作业（9）</view> -->
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="作业票、站班会照片" type="line" style="padding-bottom: 10rpx">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <!-- <view>站班会照片</view> -->
      </uni-card>
    </uni-section>

    <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
      <view class="popup-center">
        <view class="popup-title">
          <view>持证信息</view>
          <uni-icons class="close-icon" style="color: #fff" type="close" size="26" @tap="onClosePopup"></uni-icons>
        </view>

        <uni-section title="持证人员列表" type="line">
          <template v-slot:right>
            <view
              style="
                padding: 10rpx;
                border-radius: 12rpx;
                border: 1px solid #3f9dfd;
                color: #3f9dfd;
                background-color: #d5e7f9;
              "
            >
              {{ holdCardTitle }}
            </view>
          </template>
        </uni-section>

        <view class="table-th">
          <view>持证名称</view>
          <view>持证人姓名</view>
          <view>工种</view>
        </view>

        <view style="padding: 5rpx">
          <scroll-view style="height: 400rpx" scroll-y="true">
            <view
              class="table-tr"
              v-for="item in holdCardDetailsList"
              :key="item.idNumber"
              @tap="onClickTableTr(item.idNumber)"
            >
              <view>{{ item.certificateName }}</view>
              <view>{{ item.name }}</view>
              <view>{{ item.gz }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getWorkPlanDetailsApi,
  getWorkPersonnelApi,
  getStandGuardImgApi,
  getHoldCardInfoApi
} from '../../../api/phaseTwo/homePage'
export default {
  data() {
    return {
      queryInfo: {}, // 作业计划页面传递的参数
      todayWorkList: [], // 今日计划
      workPersonList: [], // 作业人员
      holdCardList: [], // 持证信息
      holdCardTitle: '',
      holdCardDetailsList: [], // 持证信息详情
      standGuardList: [], // 站班信息
      contentId: '',
      loading: false,
      commonParams: {
        proName: '',
        day: this.$moment().format('YYYY-MM-DD')
      }
    }
  },
  methods: {
    leftClick() {
      uni.navigateTo({ url: '/pages/realName/workPlan/index' })
    },
    /* 获取今日作业计划 */
    async getTodayWorkPlan() {
      const res = await getWorkPlanDetailsApi(this.commonParams)
      this.todayWorkList = res.data
    },
    /* 获取人员信息 */
    async getWorkPersonnelData() {
      const contentIdParams = {
        contentId: this.contentId
      }
      const params = Object.assign(this.commonParams, contentIdParams)
      const res = await getWorkPersonnelApi(params)
      const response = await getStandGuardImgApi(params)

      this.workPersonList = res.data
      this.holdCardList = res.datac
      this.standGuardList = response.data
    },
    /* 点击作业计划时查询作业人员 */
    onSearchWorkPerson(id) {
      this.contentId = id
      this.getWorkPersonnelData()
    },
    /* 查询持证信息 */
    async onQueryCardDetails(item) {
      this.holdCardTitle = `${item.certificateName}(${item.certificateNum})`
      this.$refs.popup.open()
      const params = Object.assign(this.commonParams, { certificateName: item.certificateName })
      uni.showLoading({
        title: '数据加载中'
      })
      const res = await getHoldCardInfoApi(params)
      uni.hideLoading()
      console.log('resresres持证信息详情--', res)
      this.holdCardDetailsList = res.data
    },
    /* 关闭持证信息弹框 */
    onClosePopup() {
      uni.hideLoading()
      this.$refs.popup.close()
    },
    /* 持证详情列表点击事件 */
    onClickTableTr(id) {
      // 跳转人员信息页面
      uni.navigateTo({ url: `/pages/realName/index/pages/personDetail?idNumber=${id}` })
    }
  },
  onLoad(options) {
    const query = JSON.parse(options.query)
    this.queryInfo = query
    const { proName } = query
    this.commonParams.proName = proName
    this.getTodayWorkPlan().then(() => {
      this.getWorkPersonnelData()
    })
  }
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}

.row-1,
.row-2 {
  padding: 25rpx 0;
  display: flex;
  border-bottom: 1px solid #eee;
  view {
    flex: 1;
    text-align: center;
  }
}

.work-person {
  display: flex;
  flex-wrap: wrap;

  view {
    width: 18%;
    margin: 12rpx 0 12rpx calc(10% / 4);
    color: #fff;
    text-align: center;
    border-radius: 12rpx;
    background-color: #3f9dfd;
  }
}

.work-person view:nth-child(5n + 1) {
  margin-left: 0;
}

.person-card {
  display: flex;
  flex-wrap: wrap;

  view {
    width: calc(32%);
    margin: 12rpx 0 12rpx calc(4% / 2);
    box-sizing: border-box;
    border-radius: 12rpx;
    text-align: center;
    font-size: 12px;
  }

  .blue-border {
    border: 1px solid #3f9dfd;
    color: #3f9dfd;
    background-color: #d5e7f9;
  }
  .orange-border {
    border: 1px solid #f5a208;
    color: #f5a208;
    background-color: #f7e3bf;
  }
  .green-border {
    border: 1px solid #03af03;
    color: #03af03;
    background-color: #c5f3c5;
  }
}

.person-card view:nth-child(3n + 1) {
  margin-left: 0;
}

.popup-center {
  width: 90vw;
  height: 50vh;
  background-color: #fff;
  overflow: hidden;
  .popup-title {
    position: relative;
    background-color: #3f9dfd;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    font-size: 38rpx;

    .close-icon {
      position: absolute;
      right: 30rpx;
      top: 0;
    }
  }

  .scroll-container {
    width: 100%;
    height: calc(100% - 100rpx);
  }

  .table-th {
    display: flex;
    view {
      padding: 5rpx 0;
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .table-tr {
    padding: 8rpx 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    view {
      padding: 5rpx 0;
      flex: 1;
      font-size: 30rpx;
      text-align: center;
    }
  }

  .table-tr view:first-child {
    text-align: left;
  }
}
</style>