dev/dcp-web-gate/src_old/views/NationalregionalCommissions/CommitteeInformationListDetail.vue

<template>
  <div class="autoBox box" style="min-height: 900px; position: relative">
    <div class="crumbs">
      <div style="overflow: hidden">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="float: left"
        >
          <el-breadcrumb-item :to="{ path: 'home' }">{{
            $t("common.Home")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{ path: 'nationalregionalCommittees' }"
            class="pointer"
            >{{ $t("common.committeeInformation") }}</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ $t("common.detail") }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <span>{{ this.detailList.title }}</span>
      </div>
      <div
        style="
          width: 79%;
          height: 40px;
          background-color: rgba(96, 160, 244, 0.1);
        "
        :style="this.$i18n.locale == 'en'?'width: 90%;':''"
      >
        <div style="float: left">
          <span
            style="
              margin-left: 30px;
              font-size: 16px;
              line-height: 40px;
              color: rgba(51, 51, 51, 1);
            "
            >{{ $t("common.belongCommittee") }}:{{
                  $i18n.locale == "en" ? this.detailList.belongCommitteeEn : this.detailList.reserveFour
            }}</span
          >
        </div>
        <div style="float: left">
          <span
            style="
              margin-left: 30px;
              font-size: 16px;
              line-height: 40px;
              color: rgba(51, 51, 51, 1);
            "
            >{{ $t("common.resourceDetailsReleaseTime") }}:{{
              $i18n.locale == "en" ? this.detailList.uploadTime.replace("年","-").replace("月","-").replace("日","") : this.detailList.uploadTime

            }}</span
          >
        </div>
        <div style="float: right">
          <div
            style="float: left; line-height: 38px; color: rgba(51, 51, 51, 1)"
          >
            <!--下载-->
            <img
              @click="download"
              src="../../assets/img/ResourceSharing/download.png"
              alt=""
              style="
                margin-right: 3px;
                vertical-align: middle;
                cursor: pointer;
                width: 16px;
              "
            />
            <span
              @click="download"
              style="
                margin-right: 20px;
                vertical-align: middle;
                cursor: pointer;
              "
              >{{ $t("common.resourceDetailsDownload") }}</span
            >
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
      <div class="preview">
        <div
            style="
            position: absolute;
            top: 0;
            right: 0;
            width: 240px;
            height: 290px;
          "
        >
          <div style="width: 240px; height: 290px; margin: auto">
            <div style="width: 240px; height: 290px; position: relative">
              <img
                  :src="'data:image/jpeg;base64,' + imgurl"
                  alt=""
                  style="
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                "
              />
              <p
                  style="
                  padding: 50px 9px 0 9px;
                  width: 100%;
                  height: 95px;
                  box-sizing: border-box;
                  margin: 0;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  left: 0;
                  color: #ffffff;
                  font-size: 14px;
                "
              ></p>
              <p
                  style="
                  padding: 102px 7px 0 7px;
                  width: 100%;
                  height: 150px;
                  box-sizing: border-box;
                  margin: 0;
                  text-align: center;
                  position: absolute;
                  top: 115px;
                  left: 0;
                  color: #002c6c;
                  font-size: 12px;
                "
              ></p>
            </div>
          </div>
          <div
              style="
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 49px;
              text-align: center;
              cursor: pointer;
              background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.64),
                rgba(0, 0, 0, 0.64)
              );
            "
          >
            <span
                @click="preview"
                class="active"
                style="
                color: #0079ef;
                font-size: 14px;
                font-weight: 600;
                line-height: 49px;
                opacity: 1;
              "
            >{{ $t("common.resourceDetailsPreview") }}</span
            >
          </div>
        </div>
      </div>
<!--      <div class="abstract">-->
<!--        <div style="margin: 39px 0 0 0">-->
<!--          <h4-->
<!--              style="-->
<!--              font-size: 20px;-->
<!--              color: rgba(44, 85, 138, 1);-->
<!--              font-weight: 600;-->
<!--              margin: 0;-->
<!--            "-->
<!--          >-->
<!--            {{$i18n.locale == "en" ? 'Name' : '名称'}}-->
<!--          </h4>-->
<!--          <p-->
<!--              style="-->
<!--              font-size: 16px;-->
<!--              line-height: 32px;-->
<!--              margin: 14px 0;-->
<!--              color: rgba(51, 51, 51, 1);-->
<!--              text-indent: 2em;-->
<!--            "-->
<!--          >-->
<!--            {{ this.detailList.name }}-->
<!--          </p>-->
<!--        </div>-->
<!--      </div>-->
      <div class="abstract">
        <div style="padding-top: 30px;">
          <h4
            style="
              font-size: 20px;
              color: rgba(44, 85, 138, 1);
              font-weight: 600;
              margin: 0;
            "
          >
            {{ $t("common.abstract") }}
          </h4>
          <p
            style="
              font-size: 16px;
              line-height: 32px;
              margin: 14px 0;
              color: rgba(51, 51, 51, 1);
              text-indent: 2em;
            "
          >
            {{ this.detailList.abstractInfo }}
          </p>
        </div>
      </div>
<!--      <div class="abstract" style="height:200px">-->
<!--        <div style="margin: 39px 0 0 0">-->
<!--          <h4-->
<!--            style="-->
<!--              font-size: 20px;-->
<!--              color: rgba(44, 85, 138, 1);-->
<!--              font-weight: 600;-->
<!--              margin: 0;-->
<!--            "-->
<!--          >-->
<!--            {{$i18n.locale == "en" ? 'Menu' : '目录'}}-->
<!--          </h4>-->
<!--          <img-->
<!--              style="width: 130px; height: 170px; display: block"-->
<!--              :src="'data:image/jpeg;base64,' + menuBase64"-->
<!--              alt=""-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->

    </div>
  </div>
</template>
<script>
import {
  getAllInformationDetail,
  getImg,
  downloadAttachment,
} from "@/api/committee/committeeWorkSpace";
import Base from "@/views/base/Base";
import {uploadfile} from "@/api/committee/nrc";
export default {
  name: "CommitteeInformationListDetail",
  extends: Base,
  data() {
    return {
      informationDetailId: "",
      detailList: {},
      imgurl: "",
      responseData: null,
      fileList:[],
      menuBase64:"",
	    switchLanguage:'',
    };
  },
  mounted() {
    this.informationDetailId = this.$route.params.id;
    this.initData();
  },
  watch: {
    "$i18n.locale"() {
    },
  },
  methods: {
    initData() {
      this.accessToInformationAllDetails();
      // this.getContent();
    },
    // 获取全部资料详情
    accessToInformationAllDetails() {
      let id = this.informationDetailId;
      getAllInformationDetail(id).then((res) => {
        this.detailList = res.data.nrcMaterialStorehouse;
        this.detailList.uploadTime = this.detailList.uploadTime.substring(0,11)
        this.menuBase64 = this.detailList.menuBase64;
        this.getPhoto();
      });
    },
    // 获取图片
    getPhoto() {
      // let path = this.detailList.coverPath;
      this.imgurl = this.detailList.coverBase64;
      // getImg(path)
      //   .then((res) => {
      //     let src = window.URL.createObjectURL(res);
      //     this.imgurl = src;
      //     console.log("src>>>"+src);
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //   });
    },

    // 获取内容
    getContent() {
      let id = this.informationDetailId;
      downloadAttachment(id).then((res) => {
        this.responseData = res;
      });
    },

    // 下载
    download() {
	    if(this.$i18n.locale == 'zh'){
		    this.$message.success("正在加载中");
	    }else{
		    this.$message.success("Loading");
	    }
      let id = this.informationDetailId;
      downloadAttachment(id).then((res) => {
        const binaryData = [];
        binaryData.push(res);
        //获取blob链接
        var pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        let a = document.createElement("a");
        a.href = pdfUrl; // 这里的请求方式为get，如果需要认证，接口上需要带上token
        let path = this.detailList.attachmentPath;
        let name = path.substring(path.lastIndexOf("/") + 1);
        a.download = name;
        a.click();
        // this.$message.success("下载成功!");
      });
    },

    // 预览
    preview() {
			if(this.$i18n.locale == 'zh'){
				this.$message.success("正在加载中");
			}else{
				this.$message.success("Loading");
			}
      let id = this.informationDetailId;
      downloadAttachment(id).then((res) => {
        const binaryData = [];
        binaryData.push(res);
        //获取blob链接
        var pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        window.open(pdfUrl);
      });
    },
  },
};
</script>
<style scoped>
.oneLine {
  /* 隐藏溢出元素 */
  overflow: hidden;
  /* 单行显示 */
  white-space: nowrap;
  /* 溢出显示省略号 */
  text-overflow: ellipsis;
}
.threeLine {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pointer:hover {
  cursor: pointer;
}
.box {
  margin-top: 10px;
  background: #fff;
  /* height: 500px; */
  padding: 20px;
  box-sizing: border-box;
}
.secNavActive {
  color: #0091ff;
}
.content {
  /* background: #ddd; */
  width: 100%;
  min-height: 290px;
  margin: 52px 0 60px;
  overflow: hidden;
}
.content .title {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 42px;
  color: #375586;
  margin-bottom: 39px;
}
.content .abstract {
  float: left;
  width: 76%;
  height: 100px;
}
.content .preview {
  float: right;
  width: 24%;
  /*height: 100%;*/
  /*margin-top: 100px;*/
  height: 290px;
  position: relative;
}

.bookCatalog {
  width: 100%;
  /*height: 250px;*/
  min-height: 250px;
  max-height: 600px;
  background-color: #eff5fd;
  margin: 60px 0;
}
.bookCatalog .catalog {
  float: left;
  width: 6.5%;
  height: 100%;
  background-color: #60a0f4ff;
  text-align: center;
}
.bookCatalog .catalogList {
  float: right;
  width: 93.5%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bookCatalog .catalogList .catalogText {
  /*width: 228px;*/
  /*height:160px;*/
  width: auto;
  height: auto;
  border-right: 2px solid rgba(44, 85, 138, 0.4);
  padding-right: 80px;
}
.active:hover {
  color: red;
}
</style>