zhgdyun/src/views/projectAdmin/fourEngin/quality/centerBottom.vue

<template>
  <Card title="现场验收">
    <div class="list">
      <el-date-picker
        @change="credad"
        v-model="acceptanceDate"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        size="mini"
      ></el-date-picker>
      <div class="thead">
        <div class="row">
          <div class="td">序号</div>
          <div class="td">验收内容</div>
          <div class="td">计划验收时间</div>
          <div class="td">实际验收时间</div>
          <div class="td">结论</div>
          <div class="td">附件</div>

        </div>
      </div>
      <div class="thead" style="color:#fff">
        <vue-scroll style="width: 95%;height:200px">
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="td">{{ index + 1 }}</div>
          <div class="td">
            {{ item.subsectionName }}-{{ item.subentryName }}
          </div>
          <!-- 计划验收 -->
          <div class="td">{{ item.acceptanceDate }}</div>
           <!-- 实际验收 -->
          <div class="td">{{ item.actualAcceptanceDate }}</div>
         
          <div class="td">{{ item.status == 1 ? "合格" : "不合格" }}</div>
           <div class="td">
            <img
              :preview="item.imageUrl[0] ? item.imageUrl[0].url : []"
              :src="item.imageUrl[0] ? item.imageUrl[0].url : []"
              alt=""
              width="50px"
            />
          </div>
        </div>
      </vue-scroll>
      </div>
      <div class="tbody" v-if="list.length==0">
        <div class="dataImg">
          <img src="@/assets/images/noData3.png" alt srcset />
          <p>{{ $t("message.dataBoard.nodata") }}</p>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import { getLimitOrderByAcceptanceDateApi } from "@/assets/js/api/zhongjianFourth";
import Card from "../components/Card.vue";

export default {
  components: {
    Card,
  },
  data() {
    return {
      time1: "",
      sn: "",
      list: [],
      acceptanceDate: "",//日期
    };
  },
  created() {
    this.sn = this.$store.state.projectSn;

    this.credad();
  },
  methods: {
    credad(val) {
      let data = "";
      if (val) {
        data = val;
      }
      //查询分部分项验收
      getLimitOrderByAcceptanceDateApi({
        projectSn: this.sn,
        acceptanceDate: data,
      }).then((res) => {
        res.result.map((item) => {
          item.imageUrl = JSON.parse(item.imageUrl);
          if (
            item.imageUrl.length !== 0 &&
            !item.imageUrl[0].url.includes(this.$store.state.FILEURL)
          ) {
            item.imageUrl[0].url =
              this.$store.state.FILEURL + item.imageUrl[0].url;
          }
        });
        console.log("分部分项验收", res);
        this.list = res.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: calc(100% - 80px);
  .thead {
    font-size: 14px;
    color: #6ee4f0;
  }
  .tbody {
    height: calc(100% - 40px);
    font-size: 12px;
    color: #ccc;
  }

  .thead .row,
  .tbody .row {
    display: flex;
    text-align: center;
    justify-content: left;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    .td {
      text-align: center;
      &:nth-child(1) {
        width: 100px;
      }
      &:nth-child(2) {
        width: 200px;
        margin-left: 22px;
      }
      &:nth-child(3) {
        width: 200px;
        // margin-left: 22px;
      }
      &:nth-child(4) {
        width: 130px;
        // margin-left: 22px;
      }
      &:nth-child(5) {
        width: 100px;
        margin: 0 18px 0 25px;
        // margin-left: 22px;
      }
      &:nth-child(6) {
        width: 100px;
        // margin-left: 22px;
      }
      &:nth-child(7) {
        width: 100px;
        // margin-left: 2px;
      }
      &:nth-child(8) {
        width: 100px;
        // margin-left: 28px;
      }
      &:nth-child(9) {
        width: 100px;
        // margin-left: 28px;
      }
    }
  }
  .dataImg {
    margin-left: 410px;
    margin-top: 50px;
    p {
      margin: 6px 0 0 13px;
      font-size: 16px;
    }
  }

  ::v-deep .el-date-editor--daterange.el-input__inner {
    cursor: pointer;
    width: 235px;
    height: 30px;
    border: 1px solid #66d3d8;
    background: transparent;
    margin: 16px 0 0 74.5%;
  }
  ::v-deep .el-range-input {
    cursor: pointer;
    background: transparent;
    color: #6ee4f0;
  }
  ::v-deep .el-date-editor {
    cursor: pointer;
    .el-range__icon {
      line-height: 23px;
      color: #6ee4f0;
    }
    .el-range-separator {
      line-height: 23px;
      color: #757d88;
    }
    .el-range__close-icon {
      color: #757d88;
      line-height: 23px;
    }
  }
}
</style>