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.certificateName)"
          >
            {{ 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>

        <scroll-view class="scroll-container" scroll-y>
          <uni-table emptyText="暂无更多数据" :loading="loading">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th width="30" align="center">持证名称</uni-th>
              <uni-th width="30" align="center">持证人姓名</uni-th>
              <uni-th width="30" align="center">工种</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="item in holdCardDetailsList" :key="item.idNumber">
              <uni-td align="center">
                <view @tap="onClickTableTr(item.idNumber)">
                  {{ item.certificateName }}
                </view>
              </uni-td>

              <uni-td align="center">
                <view @tap="onClickTableTr(item.idNumber)">
                  {{ item.name }}
                </view>
              </uni-td>
              <uni-td align="center">
                <view @tap="onClickTableTr(item.idNumber)">
                  {{ item.gz }}
                </view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getWorkPlanDetailsApi,
  getWorkPersonnelApi,
  getStandGuardImgApi,
  getHoldCardInfoApi
} from '../../../api/phaseTwo/homePage'
export default {
  data() {
    return {
      queryInfo: {}, // 作业计划页面传递的参数
      todayWorkList: [], // 今日计划
      workPersonList: [], // 作业人员
      holdCardList: [], // 持证信息
      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(name) {
      this.$refs.popup.open()
      const params = Object.assign(this.commonParams, { certificateName: name })

      this.loading = true
      const res = await getHoldCardInfoApi(params)
      // uni.hideLoading()
      this.loading = false
      console.log('resresres持证信息详情--', res)
      this.holdCardDetailsList = res.data
    },
    /* 关闭持证信息弹框 */
    onClosePopup() {
      uni.hideLoading()
      this.$refs.popup.close()
    },
    /* 持证详情列表点击事件 */
    onClickTableTr(id) {
      console.log('id-----人员id', 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;
  .popup-title {
    position: relative;
    background-color: #3f9dfd;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;

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

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