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">{{ 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">低压电工作业（9）</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>
  </view>
</template>

<script>
import { getWorkPlanDetailsApi, getWorkPersonnelApi, getStandGuardImgApi } from '../../../api/phaseTwo/homePage'
export default {
  data() {
    return {
      queryInfo: {}, // 作业计划页面传递的参数
      todayWorkList: [], // 今日计划
      workPersonList: [], // 作业人员
      standGuardList: [], // 站班信息
      contentId: '',
      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
      this.contentId = res.data[0].contentId
      console.log('今日计划数据', res)
    },
    /* 获取人员信息 */
    async getWorkPersonnelData() {
      const contentIdParams = {
        contentId: this.contentId
      }

      const params = Object.assign(this.commonParams, contentIdParams)
      const { data: res } = await getWorkPersonnelApi(params)
      const response = await getStandGuardImgApi(params)

      this.workPersonList = res
      console.log('res---人员持证等', response)
      this.standGuardList = response.data
    },
    /* 点击作业计划时查询作业人员 */
    onSearchWorkPerson(id) {
      this.contentId = id
      this.getWorkPersonnelData()
    }
  },
  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;
}
</style>