Web_TracerMethodology/pages/todayCheck/todayCheck.vue

<template>
  <view class="todayCheckPage">
    <view class="content" v-for="item in list">
      <view class="contTitle">
        <text class="contTitleLeft">{{ item.situationName }}</text>
        <text class="contTitleRight">{{ item.checkPlan }}</text>
      </view>
      <view class="contCon">
        <view
          v-for="items in item.planDepListReps"
          class="conEveryCon"
          @click="goToPonitDetails(items)"
        >
          <view class="title">
            <view class="name">{{ items.deptName }}</view>
            <view class="buMen">
              <image
                src="../../static/icon-map-dis.png"
                mode=""
                class="img"
              ></image>
              <view class="keshi">{{ items.deptClassName }}</view>
            </view>
          </view>
          <view class="status">
            <image
              :src="
                items.completeDes == '已完成'
                  ? '../../static/top-img.png'
                  : items.completeDes == '查核中'
                  ? '../../static/hight-bg.png'
                  : '../../static/disabled-bg.png'
              "
              mode=""
              class="bgImg"
            ></image>
            <text class="statusType">{{ items.completeDes }}</text>
          </view>
          <view class="points">{{ items.decs }}</view>
          <view class="pointsGK">要点概括：{{ items.checkPointNames }}</view>
          <view>
            <view class="checkName">{{ items.empName }}</view>
            <view class="checkTime"
              >{{ items.startDate }}~{{ items.endDate }}</view
            >
          </view>
        </view>
      </view>
    </view>
		<tm-no-data v-if="list.length === 0"
			:textArr="['暂时没有内容可以展示哦', '请返回上一页面或尝试刷新页面']" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      date: "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$store
        .dispatch({
          type: "todayCheck/commActions",
          payload: {
            key: "specificCheckTaskList",
            data: {
              specificDate: this.date,
            },
          },
        })
        .then((res) => {
          if (res) {
            this.list = res;
          }
        });
    },
    goToPonitDetails(data) {
      // console.log(data)
      uni.navigateTo({
        url: `/pages/checkMainPoints/checkMainPoints?checkId=${data.checkId}&deptId=${data.deptId}&situationType=${data.situationType}`,
      });
    },
  },
  onLoad({ date }) {
    this.date = date;
  },
};
</script>

<style lang="less">
.todayCheckPage {
  padding: 0rpx 25rpx;
  height: 100%;
  width: 100%;
  .content {
    width: 100%;
    .contTitle {
      font-size: 22.5rpx;
      color: #666f80;
      height: 22.5rpx;
      line-height: 22.5rpx;
      margin: 25rpx 0rpx 15rpx;
      .contTitleLeft {
        display: inline-block;
        width: 60%;
        text-align: left;
      }
      .contTitleRight {
        display: inline-block;
        width: 40%;
        text-align: right;
      }
    }
    .contCon {
      .conEveryCon {
        margin-bottom: 25rpx;
        padding: 25rpx 25rpx 0rpx;
        background-color: #fff;
        height: 225rpx;
        border-radius: 5rpx;
        position: relative;
        .title {
          margin-bottom: 10rpx;
          color: #292c33;
          // vertical-align: top;
          .name {
            height: 35rpx;
            display: inline-block;
            font-size: 35rpx;
            font-weight: 400;
          }
          .buMen {
            margin-left: 20rpx;
            display: inline-block;
            // width: 117.5rpx;
            height: 35rpx;
            background-color: #edf2fa;
            border-radius: 17.5rpx;
            line-height: 82.5rpx;
            vertical-align: top;
            .img {
              vertical-align: top;
              width: 35rpx;
              height: 35rpx;
            }
            .keshi {
              margin-left: 10rpx;
              margin-right: 20rpx;
              display: inline-block;
              vertical-align: top;
              font-size: 17.5rpx;
              line-height: 35rpx;
            }
          }
        }
        .status {
          width: 100rpx;
          height: 35rpx;
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          .bgImg {
            width: 100rpx;
            height: 35rpx;
          }
          .statusType {
            width: 100%;
            position: absolute;
            top: 8.75rpx;
            right: 0rpx;
            font-size: 17.5rpx;
            line-height: 17.5rpx;
            color: #fff;
            text-align: center;
          }
        }
        .points {
          font-size: 20rpx;
          color: #292c33;
          line-height: 50rpx;
          font-weight: bold;
        }
        .pointsGK {
					overflow: hidden;
          padding-bottom: 25rpx;
          border-bottom: 0.62rpx solid #dadee6;
          font-size: 20rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
          color: #666f80;
        }
        .checkName {
          // padding-top: 20.62rpx;
          // width: 22%;
          display: inline-block;
          color: #666e80;
          text-align: left;
          line-height: 17.5rpx;
          font-size: 17.5rpx;
          position: absolute;
          left: 25rpx;
          bottom: 21.25rpx;
        }
        .checkTime {
          // padding-top: 20.62rpx;
          // width: 78%;
          display: inline-block;
          color: #666e80;
          text-align: right;
          line-height: 17.5rpx;
          font-size: 17.5rpx;
          position: absolute;
          right: 25rpx;
          bottom: 21.25rpx;
        }
      }
    }
  }
}
</style>