YNUtdPlatform/pages/workPlan/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>{{ commonParams.day }}</view>
      </view>
    </uni-card>

    <uni-section title="今日作业计划" type="line">
      <template v-slot:right>
        <view @tap="onSearchAllPerson" style="color: #3f9dfd">全部人员</view>
      </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 style="color: #3f9dfd">{{ item.rys }}</view>
          </view>
          <view class="row-2">
            <view>风险等级</view>
            <view :class="setStyle(item)">{{ 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">
      <template v-slot:right>
        <!-- <view @tap="onSearchAllPerson" style="color: #3f9dfd">全部人员</view> -->

        <uni-icons
          type="info"
          size="30"
          style="margin-right: 20rpx; color: #ccc"
          @tap="onViewWorkPersonExplain"
        ></uni-icons>
      </template>
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view class="work-person">
          <view
            :class="getPersonStyle(item)"
            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="getItemClass(index)"
            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 class="img-container">
          <view @tap="onPreviewImage(index)" v-for="(item, index) in standGuardList" :key="index">
            <image
              class="image-content"
              :src="`http://192.168.0.14:19191/ynPlanApp${item.imgPath}`"
              mode="scaleToFill"
              lazy-load="true"
            ></image>

            <uni-icons style="color: #ccc" type="calendar" size="14">{{ item.crateTime }}</uni-icons>
          </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>

    <uni-popup ref="popupPerson" type="center">
      <view class="popup-person">
        <view class="title">颜色标识意义</view>
        <view class="container">
          <view class="item">
            <view class="style_2">张三</view>
            <view style="color: #000; font-weight: bold">蓝框白底:</view>
            <view>未打卡的固定人员;</view>
          </view>
          <view class="item">
            <view class="style_4">张三</view>
            <view style="color: #000; font-weight: bold">红框白底:</view>
            <view>未打卡的临时人员;</view>
          </view>
          <view class="item">
            <view class="style_1" style="color: #fff">张三</view>
            <view style="color: #000; font-weight: bold">蓝框蓝底:</view>
            <view>已打卡的固定人员;</view>
          </view>
          <view class="item">
            <view class="style_3" style="color: #fff">张三</view>
            <view style="color: #000; font-weight: bold">红框红底:</view>
            <view>已打卡的临时人员;</view>
          </view>
        </view>
        <view style="color: #5dceb6" class="title" @tap="onClosePopupPerson">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getWorkPlanDetailsApi,
  getWorkPersonnelApi,
  getStandGuardImgApi,
  getHoldCardInfoApi
} from '../../../api/workPlan/workPlan'
import config from '@/config'
export default {
  data() {
    return {
      queryInfo: {}, // 作业计划页面传递的参数
      todayWorkList: [], // 今日计划
      workPersonList: [], // 作业人员
      holdCardList: [], // 持证信息
      holdCardTitle: '',
      holdCardDetailsList: [], // 持证信息详情
      standGuardList: [
        // { img_src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg', times: '9:20:06' },
        // { img_src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', times: '9:20:06' }
      ], // 站班信息
      contentId: '',
      imgList: [], // 班组图片信息 作为预览使用
      loading: false,
      commonParams: {
        proName: '',
        day: ''
      }
    }
  },
  computed: {
    getItemClass() {
      return index => {
        const styleIndex = index % 3
        switch (styleIndex) {
          case 0:
            return 'blue-border'
          case 1:
            return 'orange-border'
          case 2:
            return 'green-border'
        }
      }
    },

    getPersonStyle() {
      return item => {
        const { kqState, userState } = item

        if (userState == 1 && kqState == 1) return 'style_1' // 固定人员  打卡
        if (userState == 1 && kqState != 1) return 'style_2' // 固定人员  未打卡
        if (userState != 1 && kqState == 1) return 'style_3' // 临时人员  打卡
        if (userState != 1 && kqState != 1) return 'style_4' // 临时人员  未打卡
      }
    },
    setStyle() {
      return item => {
        const { fxdj } = item
        if (fxdj == '可接受风险' || fxdj == '低风险') return 'color_1'
        if (fxdj == '中风险') return 'color_2'
        if (fxdj == '高风险' || fxdj == '特高风险') return 'color_3'
      }
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    /* 获取今日作业计划 */
    async getTodayWorkPlan() {
      const res = await getWorkPlanDetailsApi(this.commonParams)
      console.log('现场负责人数据', res)
      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)

      console.log('response站班会照片', response)

      this.workPersonList = res.data
      console.log('人员信息---', res)

      if (response.data.length < 1) {
        uni.showToast({ title: '暂无作业票、站班会照片信息', icon: 'none' })
      }
      this.holdCardList = res.datac
      this.standGuardList = response.data

      this.imgList = this.standGuardList.map(e => {
        return `${config.loginBaseUrl}ynPlan${e.imgPath}`
      })
    },
    /* 点击作业计划时查询作业人员 */
    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}` })
    },
    /* 全部人员按钮 */
    onSearchAllPerson() {
      this.contentId = ''
      this.getWorkPersonnelData()
    },
    /* 预览图片 */
    onPreviewImage(index) {
      uni.previewImage({
        // urls: [
        //   'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
        //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        // ],
        urls: this.imgList,
        current: index,
        loop: true
      })
    },
    /* 作业人员备注说明 */
    onViewWorkPersonExplain() {
      this.$refs.popupPerson.open()
    },
    /* 确定关闭按钮 */
    onClosePopupPerson() {
      this.$refs.popupPerson.close()
    }
  },
  onLoad(options) {
    const query = JSON.parse(options.query)
    this.queryInfo = query

    console.log('携带的参数---', query)
    const { proName, day } = query
    this.commonParams.proName = proName
    this.commonParams.day = day
    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);
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    border-radius: 12rpx;
    // background-color: #3f9dfd;
  }

  .style_1 {
    background-color: #3f9dfd;
  }
  .style_2 {
    border: 1px solid #3f9dfd;
    color: #000;
  }
  .style_3 {
    background-color: #fb1515;
  }
  .style_4 {
    border: 1px solid #fb1515;
    color: #000;
  }
}

.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;
  }
}

.img-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  view {
    width: 31%;
    margin: 12rpx 0 12rpx calc(6% / 2);
    display: flex;
    flex-direction: column;
    align-items: center;

    .image-content {
      width: 100%;
      height: 160rpx;
    }
  }
}

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

.color_1 {
  color: #06bd36;
}
.color_2 {
  color: #f28b00;
}
.color_3 {
  color: #ff4e4b;
}

.popup-person {
  width: 83vw;
  // height: ;
  background-color: #fff;

  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 26rpx 0;
    letter-spacing: 1px;
  }

  .container {
    padding: 32rpx 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    .item {
      width: 85%;
      margin: 0 auto;
      padding: 12rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;

      view {
        box-sizing: border-box;
        margin: 0 16rpx;
      }

      .style_1 {
        background-color: #3f9dfd;
      }
      .style_2 {
        border: 1px solid #3f9dfd;
        color: #000;
      }
      .style_3 {
        background-color: #fb1515;
      }
      .style_4 {
        border: 1px solid #fb1515;
        color: #000;
      }
    }

    .item view:first-child {
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
  }
}
</style>