YNUtdPlatform/pages/workPlan/selectRisk/index.vue

<template>
  <view>
    <u-navbar
      class="u-navbar"
      title="选择日计划风险点"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="header-search">
      <view style="width: 28%">
        <uni-data-select :localdata="range" v-model="searchParams.proType" :clear="false"></uni-data-select>
      </view>
      <view style="width: 49%">
        <uni-easyinput placeholder="搜索" v-model="searchParams.remark"></uni-easyinput>
      </view>
      <view class="search-img" @tap="getDayRiskData"></view>
    </view>

    <view class="search-radio">
      <u-radio-group v-model="searchParams.riskType" placement="row" class="radio-content" @change="onRadioChange">
        <u-radio activeColor="#00337a" inactiveColor="#ccc" name="高风险" style="color: #ff4e4b">高风险</u-radio>
        <u-radio activeColor="#00337a" inactiveColor="#ccc" name="中风险" style="color: #f28b00">中风险</u-radio>
        <u-radio activeColor="#00337a" inactiveColor="#ccc" name="特高风险" style="color: #ff4e4b">特高风险</u-radio>
      </u-radio-group>
    </view>

    <scroll-view scroll-y class="scroll-view-content">
      <view class="risk-content">
        <view class="risk-th">
          <view style="width: 65%; border-bottom: 1px solid #333; border-right: 1px solid #333">作业内容</view>
          <view style="width: 35%; border-bottom: 1px solid #333">工程名称</view>
        </view>
        <view class="risk-tr" @tap="onClickRiskPlan(item)" v-for="item in riskList" :key="item.planId">
          <view style="width: 65%; border-right: 1px solid #333">
            {{ item.zynr }}
          </view>
          <view style="width: 35%">{{ item.proName }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getDayRiskApi } from '../../../api/workPlan/riskDay'
export default {
  data() {
    return {
      value: false,
      range: [
        {
          text: '我的项目',
          value: '我的项目'
        },
        {
          text: '全部项目',
          value: '全部项目'
        }
      ],
      searchParams: {
        proType: '我的项目',
        riskType: '',
        remark: ''
      },
      riskList: []
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    onRadioChange() {
      this.getDayRiskData()
    },
    /* 获取风险点 */
    async getDayRiskData() {
      const res = await getDayRiskApi(this.searchParams)
      if (res.resMsg == 'success') {
        this.riskList = res.obj
      } else {
        this.riskList = []
      }
    },
    /* 点击返回 */
    onClickRiskPlan(item) {
      uni.navigateBack({
        delta: 1,
        success() {
          uni.$emit('update', item)
        }
      })
    }
  },
  onLoad() {
    this.getDayRiskData()
  }
}
</script>

<style lang="scss" scoped>
.header-search,
.search-radio {
  width: 96%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.search-img {
  width: 68rpx;
  height: 68rpx;
  margin-right: 10rpx;
  // margin-left: 30rpx;
  background: url('../../../static/images/workPlan/search.png') no-repeat;
  background-size: 100% 100%;
}
.header-search {
  margin-bottom: 24rpx;
  margin: 12rpx;
  padding: 6rpx 0;
  justify-content: space-around;
  border: 1px solid #ccc;
  border-radius: 6rpx;
  background-color: #fff;
}

.search-radio .radio-content {
  width: 100%;
  padding: 24rpx 0;
  display: flex;
  justify-content: space-around;
  border: 1px solid #ccc;
  border-radius: 6rpx;
  background-color: #fff;
}

.scroll-view-content {
  width: 96%;
  margin: 10rpx auto 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;

  .risk-content {
    width: 95%;
    margin: 10rpx auto 5rpx;
    border: 1px solid #333;
    box-sizing: border-box;
    .risk-th,
    .risk-tr {
      width: 100%;
      display: flex;

      view {
        padding: 4rpx 0;
        text-align: center;
      }
    }
  }
}
</style>