RZGY/src/renderer/components/ScaleListResult.vue

<template>
  <div class="main_right_height">
    <div class="">
      <div class="">
        <TopDes :flag="true" topDesFont="量表报告查看"></TopDes>
        <el-row class="mainTable-top-two">
          <el-col :span="1">
            <div>&nbsp;</div>
          </el-col>
          <el-col :span="10" class="search_card">
            <div>
              <el-input
                class="xl_input"
                placeholder="请输入搜索内容"
                v-model="queryKeyword"
                prefix-icon="el-icon-search"
                @input="queryLikeWord"
                clearable
              >
              </el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div>&nbsp;</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            v-for="(item, index) in dataList"
            :key="index"
            @click="detailP(item.id)"
            :span="6"
            :offset="1"
            style="margin-right: 20px"
          >
            <div class="card" @click="queryDetail(item.id)">
              <img src="../assets/newImage/xl1.png" alt="" class="img_card" />
              <div style="display: block; margin-left: 1vw">
                <!-- <h3 class="h3_card">{{ item.name }}</h3> -->
                <h3 class="h3_card" :title="item.name">{{ formatTitle(item.name)}}</h3>
                <div class="time_card">
                  {{ formatData(item.testDate) }}
                </div>
                <div class="desc_card">
                  {{ formatDesc(item.description) }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <!-- <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            @click="detailP(item.id)"
          >
            <img src="../assets/newImage/xl1.png" alt="" />
            <div style="display: block">
              <h2>{{ item.name }}</h2>
              <div class="content">
                {{ item.testDate }}
              </div>
              <div class="goDetail">
                <a href="javascript:;"> 查看详情></a>
              </div>
            </div>
          </li>
        </ul> -->
      </div>
      <div class="pageNationBox">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryKeyword: "",
      pageSize: 8,
      pageNum: 1,
      dataList: [],
      total: 0,
      userBid: "",
      institutionNo: "",
      persionDetailData: null,
      identifier: "",
    };
  },
  //页面初始化函数
  created() {},
  mounted() {
    this.identifier = sessionStorage.getItem("num");
    this.init();
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    queryDetail(id) {
      sessionStorage.setItem("back_page", "2");
      this.getAnswerQuestionPaymentSuccess(id);
    },
    getAnswerQuestionPaymentSuccess(id) {
      sessionStorage.setItem("back_page", "2");
      let _this = this;

      this.$router.push({
        path: "/persionDetailSCl",
        params: {
          id: id,
        },
        query: {
          // phone: this.userBid,
          id: id,
          come: 1,
          testPlanId: '',
        },
      });
      // _this.$http.post(`v1/record/find/${id}`, {}, (res) => {
      //   if (res.data.code == 200 && res.data.data) {
      //     _this.resultJsonParams = res.data.data;
      //     // let sleep = JSON.parse(
      //     //   _this.resultJsonParams.userRecordEntity.testResult
      //     // );
      //     // sleep = sleep[0].newTableContext.result[0].improvementSuggestions;
      //     // if (_this.scale_flag === "20210910163158") {
      //     //   _this.askEnd(sleep);
      //     //   this.inputFlag = 0;
      //     // }
      //     // if (_this.scale_flag === "20220805135201") {
      //     //   _this.askEnd(sleep);
      //     //   this.inputFlag = 0;
      //     // }

      //     // let testResult = JSON.parse(res.data.userRecordEntity.testResult)[0]
      //     //   .version;
      //     let testResult = JSON.parse(
      //       res.data.data.userRecordEntity.testResult
      //     )[0].version;

      //     if (testResult == 2) {
      //       _this.$router.push({
      //         name: "scaleResultSCl",
      //         params: { tableData: _this.resultJsonParams },
      //       });
      //     } else {
      //       _this.$router.push({
      //         name: "scaleResult",
      //         params: { tableData: _this.resultJsonParams },
      //       });
      //     }
      //   }
      // });
    },
    queryLikeWord() {
      this.pageNum = 1;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      let that = this;
      that.$http.post(
        `v1/record/find`,
        {
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          scaleName: that.queryKeyword,
          //   startDate: that.startDate,
          //   endDate: that.endDate,
          identifier: that.identifier,
        },
        (res) => {
          if (res.data.code == 200) {
            that.dataList = res.data.data.data;
            that.total = res.data.data.allNum;
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    formatData(str) {
      str = str.replace(/年/g, "-");
      str = str.replace(/月/g, "-");
      str = str.replace(/日/g, " ");
      str = str.replace(/时/g, ":");
      str = str.replace(/分/g, ":");
      str = str.replace(/秒/g, "");
      return str;
    },
    
    formatDesc(str) {
      return str.length < 30 ? str : str.substring(0, 30) + "...";
    },
    formatTitle(str) {
      return str.length < 8 ? str : str.substring(0, 8) + "...";
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 1280px;
  margin: 0 auto;
}
.cardList ul {
  display: flex;
  min-height: 562px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.cardList ul li {
  width: 180px;
  height: 221px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgb(87, 172, 187);
  border-radius: 4px;
  margin: 30px 35px;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .cardList ul li {
    margin: 30px 10px;
  }

  .wrap {
    width: 100%;
    margin: 0;
  }
}

.cardList ul li img {
  width: 180px;
  height: 112px;
}

.cardList ul li h2 {
  width: 142px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  color: #333333;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardList ul li p {
  font-size: 16px;
  color: #666666;
}
.cardList ul li .content {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #999999;
  margin-left: 9px;
}

.goDetail {
  margin: 5px 0 10px 9px;
}
.goDetail a {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #57acbb;
}
.pageNationBox {
  margin-bottom: 30px;
  padding: 20px 10px;
  text-align: center;
}

.view-text {
  /**
	思路：
	1.设置inline-block属相
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  width: 960px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imgSiz {
  width: 120px;
  height: 75px;
  margin-right: 15px;
}
.main_right_height {
  background: #ffffff;
  display: block !important;
  overflow: hidden;
}

.time_card {
  font-size: 0.8vw;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.6;
  color: rgb(171, 168, 168);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xl_input >>> .el-input__inner {
  width: 35.4vw;
  line-height: 64px;
  background: #eaeaea;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  box-sizing: border-box;
  font-weight: 400;
  color: #929292;
}
.search_card {
  margin-bottom: 20px;
}

.card {
  display: flex;
  box-sizing: border-box;
  width: 24.6vw;
  /* height: 20.37vh; */
  padding: 1.38vh;
  background: #eaeaea;
  opacity: 1;
  border-radius: 0.83vw;
  margin-bottom: 1.48vh;
  cursor: pointer;
}

.card .img_card {
  display: block;
  width: 9.9vw;
  height: 9.9vw;
  background: #ffffff;
  border-radius: 1vw;
  opacity: 1;
  border: 1px solid #f5f5f5;
}

.h3_card {
  font-size: 1.1vw;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0f0f0f;
  letter-spacing: 0.2vw;
  margin: 1vh 0 0.5vh;
}

.desc_card {
  width: 100%;
  margin-top: 2vh;
  font-size: 0.9vw;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #0f0f0f;
  letter-spacing: 0.4vw;
}
</style>