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

<template>
  <Card title="实测实量">
    <div class="DataTime">
      <el-date-picker
        v-model="time1"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        size="mini"
      ></el-date-picker>
    </div>
    <div class="list">
      <vue-scroll style="width: 100%; height: 250px">
        <div class="list-item" v-for="(item, index) in listData" :key="index">
          <div class="imgDiv">
            <img
              :preview="item.imageUrl[0] ? item.imageUrl[0].url : []"
              :src="item.imageUrl[0] ? item.imageUrl[0].url : []"
              alt=""
              width="50px"
            />
            <!-- <img :src="$store.state.FILEURL+item.imageUrl" alt="" /> -->
          </div>
          <div class="textDiv">
            <p style="margin: -70px 0 0 120px; font-size: 16px">
              {{ item.title }}
            </p>
            <p style="margin-top: 10px; font-size: 10px;margin-left:120px">
              {{ item.measuredRealQuantityNumber }}/{{ item.qualifiedNumber }}次
            </p>
            <el-progress
              :percentage="item.qualifiedRatio"
              style="width: 260px; margin-left: 120px"
            ></el-progress>
          </div>
          <div class="dateDiv">
            {{ item.surveyingDate }}
          </div>
        </div>
      </vue-scroll>
    </div>
    <div class="tbody" v-if="listData.length == 0">
      <div class="dataImg">
        <img src="@/assets/images/noData3.png" alt srcset />
        <p>{{ $t("message.dataBoard.nodata") }}</p>
      </div>
    </div>
  </Card>
</template>

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

export default {
  data() {
    return {
      time1: "",
      // listData:[
      //   {
      //     img:'~@/assets/images/zjsj/progress1.jpg',
      //     name:'结构工程',
      //     moen:'94/100',
      //     progress:20,
      //     date:' 2022-12-20'
      //   },
      //   {
      //     img:'~@/assets/images/zjsj/progress1.jpg',
      //     name:'结构工程',
      //     moen:'94/100',
      //     progress:20,
      //     date:' 2022-12-20'
      //   },
      //   {
      //     img:'~@/assets/images/zjsj/progress1.jpg',
      //     name:'结构工程',
      //     moen:'94/100',
      //     progress:20,
      //     date:' 2022-12-20'
      //   },
      //   {
      //     img:'~@/assets/images/zjsj/progress1.jpg',
      //     name:'结构工程',
      //     moen:'94/100',
      //     progress:20,
      //     date:' 2022-12-20'
      //   },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      //   // {
      //   //   img:'~@/assets/images/zjsj/progress1.jpg',
      //   //   name:'结构工程',
      //   //   moen:'94/100',
      //   //   progress:20,
      //   //   date:' 2022-12-20'
      //   // },
      // ],
      sn: "",
      listData: [],
      time1: "",
    };
  },
  created() {
    this.sn = this.$store.state.projectSn;
    this.getData();
  },
  methods: {
    //查询实测实量数据
    getData() {
      getLimitOrderBySurveyingDateApi({
        projectSn: this.sn,
      }).then((res) => {
        console.log("实测实量", res);
        this.listData = res.result;
        res.result.map((item) => {
          if (item.imageUrl.includes("[")) {
            item.imageUrl = JSON.parse(item.imageUrl);
            console.log("亮点展示 ====");
            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;
            }
          } else {
            let url = item.imageUrl;

            if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
              item.imageUrl = [{}];
              item.imageUrl[0].url = this.$store.state.FILEURL + url;
            }
          }
        });
      });
    },
  },
  components: {
    Card,
  },
};
</script>

<style lang="less" scoped>
.list {
  // width: 1000px;
  height: 525px;
  // display: flex;
  // flex-wrap: wrap;
  // margin-left: -290%;
  margin-top: 20px;
  .list-item {
    width: 375px;
    height: 100px;
    // display: flex;
    background: url("~@/assets/images/zjsj/zjsj_scsl.png") no-repeat;
    background-size: 100% 100%;
    // margin-right: 18px;
    margin-top: 10px;
    .dateDiv {
      margin-left: 300px;
      margin-top: -80px;
      font-size: 10px;
    }
    .imgDiv {
      img {
        width: 100px;
        height: 80px;
        margin: 10px 10px;
      }
    }
  }
}
.DataTime {
  cursor: pointer;
  margin-top: 10px;
  margin-left: 37.5%;
  width: 210;
  height: 17px;
}
.dataImg {
  width: 100%;
  height: 100%;
  margin: -120% 0px 0px 40%;
  p {
    margin: 6px 0 0 13px;
  }
}
::v-deep .el-date-editor--daterange.el-input__inner {
  cursor: pointer;
  width: 235px;
  height: 30px;
  border: 1px solid #66d3d8;
  background: transparent;
}
::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;
  }
}
#trendContainer {
  width: 100%;
  height: 100%;
  left: 0;
  margin-top: -0px;
}
::v-deep .el-progress-bar {
  width: 100%;
  ::v-deep .el-progress-bar__outer {
    height: 10px !important;
  }
}
::v-deep .el-progress__text {
  color: #fff;
}
::v-deep .el-progress-bar__inner {
  background-color: #5ce2f6;
}
</style>