src/assets/js/config.js

@@ -1,5 +1,5 @@
export const requestCtx = "http://182.92.203.7:3001"; // 请求地址
export const appId = 12;
export const appId = 40;
// export const requestCtx = "https://www.tepcb.com"; // 请求地址
// export const appId = 2;
export const requestTimeOut = 300000; // 请求超时时间
@@ -10,6 +10,7 @@
export const publicStore = `defaultPublicStore${appId}`; // 默认资源开放仓储
export const publicRepository = `defaultPublicRepository${appId}`; // 默认资源开放库


const config = {
  requestCtx,
  requestTimeOut,

 src/assets/js/middleGround/tool.js

@@ -422,7 +422,8 @@
  if (md5) {
    src = requestCtx + `/file/GetPreViewImage?md5=${md5}`;
  } else {
    return require("@/assets/images/homeBg.png");
    return ""
    // return require("@/assets/images/homeBg.png");
  }
  if (width) src += `&width=${width}`;
  if (height) src += `&height=${height}`;

 src/views/chronology/floatingWindow.vue

@@ -2,30 +2,27 @@
  <div class="dialogBox">
    <div
      class="journalBox"
      v-if="info.type === 'journal' || info.type === 'book'"
      v-if="info.cmsItemType === 'journal' || info.cmsItemType === 'books'"
    >
      <div class="title">复方剂量配比多目标优化的ED-NM-MO三联法</div>
      <div class="title">{{ info.name }}</div>
      <div class="subtitle">
        <div class="source">中国中医基础医学杂志</div>
        <div class="journalInformation">2005 3月 第40卷 第4期</div>
        <div class="source">{{ info.source }}</div>
        <div class="journalInformation">{{ info.IssueNumber }}</div>
      </div>
      <div class="contentBox">
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
        <p>王睿 中国科学院大连化学物理研究所</p>
       <span>{{ info.author }}</span>
       <span style="margin-left: 20px"> {{ info.authorsUnits }}</span>
       <span></span>
      </div>
      <div class="abstract">
        摘要：
        针对复方多药物(多部位多组分多成分)、多靶点多药效指标、非线性的特征,提出复方剂量配比优化的ED-NM-MO三联法,该方法具有良好的非线性拟合能力,可以适应复方的非线性特征,又可以实现同时针对多个药效指标的多目标优化,适合复方的多靶点特征,是一种适应复方特点的优化方法。
        <span v-html="info.abstract"></span>
      </div>
      <div class="keyword">
        关键词： 复方剂量配比优化; 复方数学特征; 多药效指标; 非线性;
        试验设计-非线性建模-多目标优化的三联法
        关键词： <span>{{ info.keyWords }}</span>
      </div>
    </div>
    <div class="imageBox" v-if="info.type === 'image'">
    <div class="imageBox" v-if="info.cmsItemType === 'image'">
      <div style="width: 350px; height: 200px; position: relative">
        <img
          class="autoImg"
@@ -45,32 +42,31 @@
        <div class="ARROWS">→</div>
      </div>
    </div>
    <div class="BookBox" v-if="info.type === 'book'">book</div>
    <div class="videoBox" v-if="info.type === 'video'">
    <div class="videoBox" v-if="info.cmsItemType === 'video'">
      <video
        width="370"
        height="240"
        controls
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        :src="info.requestCtx"
      ></video>

      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
          <div class="source">{{ info.name }}</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
        
        </div>
      </div>
    </div>
    <div class="audioBox" v-if="info.type === 'audio'">
    <div class="audioBox" v-if="info.cmsItemType === 'audio'">
      <div style="text-align: center">
        <audio style="width: 100%" src="https://www.w3schools.com/html/horse.ogg" controls></audio>
        <audio
          style="width: 100%"
          src="https://www.w3schools.com/html/horse.ogg"
          controls
        ></audio>
      </div>
      <div>
        <div class="subtitle">
@@ -179,4 +175,9 @@
  font-weight: 700;
  color: #8f7a5a;
}
.source{
  max-width: 300px;
  overflow: hidden;
  white-space: normal;
}
</style>

 src/views/chronology/index.vue

@@ -31,7 +31,7 @@
        </div>
      </div>
      <div class="contentBox">
        <div class="chartsBox">
        <div class="chartsBox" v-if="showList">
          <div
            class="chartsItemBox"
            v-for="(item, index) in contentList"
@@ -44,24 +44,36 @@
                  v-for="(citem, cindex) in item.list"
                  :style="{ background: citem.color }"
                  @mouseover="showDetail(index, cindex, 1)"
                  @mouseout="closeDetail(index, cindex, 0)"
                  :key="cindex"
                >
                  <div class="detailDialog" v-if="citem.showDetail">
                    <!-- <div class="dialogContent" @click="gotoDetail(citem)"> -->
                    <div
                      class="closeBtn"
                      @click="closeDetail(index, cindex, 0)"
                    >
                      <i class="el-icon-close"></i>
                    </div>
                    <floatingWindow :info="citem" />
                    <!-- </div> -->
                  </div>
                </div>
              </div>
              <div class="item-circle"></div>
              <div class="item-circle" @click="showYearWindow(index, 1)"></div>

              <div class="item-text">
                <div class="">
                  {{ item.year }}
                  {{ item.name.split("，")[0] }}
                </div>
                <div style="margin-top: 10px">
                  {{ item.name }}
                  {{ item.age }}
                </div>
              </div>
              <div class="yaerWindow" v-if="item.showDetail">
                <div class="closeBtn" @click="closeYearWindow(index, 0)">
                  <i class="el-icon-close"></i>
                </div>
                <yearWindow :info="item" />
              </div>
            </div>
          </div>
@@ -72,772 +84,147 @@
</template>

<script>
import moment from "moment";
import floatingWindow from "./floatingWindow.vue";
import yearWindow from "./yearWindow.vue";

export default {
  components: {
    floatingWindow,
    yearWindow,
  },
  data() {
    return {
      contentList: [
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1938",
              type: "journal",
              id: "1",
            },
          ],
          name: "出生",
          year: "1938",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              type: "image",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              type: "book",
              id: "2",
            },
          ],
          name: "一岁",
          year: "1939",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "2",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              type: "video",
              id: "3",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              type: "audio",
              id: "4",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "5",
            },
          ],
          name: "3岁",
          year: "1941",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#6F8F5A",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "2",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "3",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              id: "4",
            },
            {
              color: "#B9A587",
              showDetail: false,
              name: "王永炎",
              id: "5",
            },
          ],
          name: "4岁",
          year: "1941",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
        {
          list: [
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#87A7B9",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
            {
              color: "#CB9D9D",
              showDetail: false,
              name: "王永炎",
              year: "1937",
              id: "1",
            },
          ],
          name: "5岁",
          year: "1942",
        },
      ],
      contentList: [],
      currentYear: null,
      showList: false,
      colorList: {
        journal: "#87a7b9",
        books: "#c48787",
        video: "#6f8f5a",
        audio: "#b9a587",
        newspaper: "#8d77b3",
        other: "#009f9f",
      },
    };
  },

  methods: {
    gotoDetail(item) {},
  mounted() {
    this.getListData();
  },

  methods: {
    showYearWindow(item) {
      console.log(item, "item");
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        this.$set(item, "showDetail", false);
      }
      this.contentList[item].showDetail = true;
    },
    closeYearWindow(item) {
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        this.$set(item, "showDetail", false);
      }
    },
    gotoDetail(item) {},
    getListData() {
      this.MG.resource
        .getItem({
          path: "WYY_chronology",
          fields: {
            year: [],
            age: [],
            eventOverview: [],
            eventPictures: [],
          },
          paging: {
            start: 0,
            size: 999,
          },
        })
        .then(async (res) => {
          for (let i = 0; i < res.datas.length; i++) {
            const item = res.datas[i];
            this.$set(item, "showDetail", false);
            const listData = await this.getYearResource(item);
            if (listData.length > 0) {
              this.$set(item, "list", listData);
              console.log(item, "item");
            }
          }

          console.log(this.contentList, "this.contentList");
          this.contentList = res.datas.reverse();
          this.showList = true;
        });
    },

    async getYearResource(item) {
      const endDate = item.year.split("/")[0] + "/12/31 23:59:59";
      const startDate = item.year.split("/")[0] + "/01/01 00:00:00";
      const yearDataList = await this.MG.resource.getItem({
        path: "*",
        queryType: "*",
        fields: {
          "year>=": startDate,
          "year<=": endDate,
          source: [],
          IssueNumber: [],
          author: [],
          authorsUnits: [],
          abstract: [],
          keyWords: [],
          subjectAffiliation: [],
          file: [],
        },
        SysType: "CmsItem",
        paging: {
          start: 0,
          size: 999,
        },
      });
      const filterList = yearDataList.datas.filter((item) => {
        return item.cmsItemType != "chronology" && item.cmsItemType != "AWARD";
      });
      if (filterList && filterList.length > 0) {
        for (let i = 0; i < filterList.length; i++) {
          const item = filterList[i];
          if (item.file) {
            const requestCtx =
              this.config.requestCtx + `/file/api/ApiDownload?md5=${item.file}`;
            this.$set(item, "fileLink", requestCtx);
            console.log(item.fileLink, "item.fileLink");
          }
          this.$set(item, "showDetail", false);
          this.$set(item, "color", this.colorList[item.cmsItemType]);
        }
      }
      return filterList;
    },
    closeDetail(index, cindex, type) {
      // console.log(cindex, "cindex");
      // for (let i = 0; i < this.contentList.length; i++) {
      //   const item = this.contentList[i];
      //   for (let j = 0; j < item.list.length; j++) {
      //     const citem = item.list[j];
      //     this.$set(citem, "showDetail", false);
      //   }
      // }
      
      console.log(index, cindex, type);
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        if (item && item.length > 0) {
          for (let j = 0; j < item.list.length; j++) {
            const citem = item.list[j];
            this.$set(citem, "showDetail", false);
          }
        }
      }
    },
    showDetail(index, cindex, type) {
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        for (let j = 0; j < item.list.length; j++) {
          const citem = item.list[j];
          this.$set(citem, "showDetail", false);
        if (item && item.length > 0) {
          for (let j = 0; j < item.list.length; j++) {
            const citem = item.list[j];
            this.$set(citem, "showDetail", false);
          }
        }
      }

      if (this.contentList[index].list[cindex].type) {
        this.contentList[index].list[cindex].showDetail = true;
      } else {
@@ -942,6 +329,7 @@
.chartsItem {
  width: 100%;
  height: 100%;
  position: relative;
}

.item-grad {
@@ -1012,13 +400,32 @@
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
}

.yaerWindow {
  position: absolute;
  left: -54px;
  bottom: 50px;
  width: 700px;
  z-index: 9999;
  cursor: pointer;
  background: #fff;
  border: 2px solid #cbbeaa;
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
}
.detailDialog .dialogContent {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  padding: 15px;
  padding: 5px;
  z-index: 20;
  box-sizing: border-box;
}
.closeBtn {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  right: 5px;
  z-index: 999;
}
</style>

 src/views/chronology/yearWindow.vue

New file
@@ -0,0 +1,81 @@
<template>
  <div class="dialogBox">
    <div class="title">{{ title }}</div>
    <div class="content">
      <div class="leftTxt" v-html="info.eventOverview"></div>
      <div class="rightimg">
        <div v-if="imgLink != ''" class="imgBox">
          <img class="autoImg" :src="imgLink" alt="" />
        </div>
        <div v-else>暂无图片</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPublicImage } from "@/assets/js/middleGround/tool";

export default {
  name: "floatingWindow",
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: "",
      imgLink: "",
    };
  },
  methods: {},
  mounted() {
    console.log(this.info);
    this.title =
      this.info.name.split("，")[0] + " " + this.info.name.split("，")[1];
    this.imgLink = getPublicImage(this.info.eventPictures);
    console.log(this.imgLink);
  },
};
</script>

<style scoped>
.dialogBox {
  width: 700px;
  height: 100%;
  position: relative;
  padding: 15px;
  z-index: 20;
  box-sizing: border-box;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leftTxt {
  width: 350px;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  white-space: normal;
  overflow-x: auto;
}
.rightimg {
  width: 350px;
  height: 100%;
  background-color: #fff;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.imgBox {
  width: 340px;
  min-height: 300px;
  position: relative;
}
</style>

 src/views/directory/index.vue

@@ -182,6 +182,7 @@
import axios from "axios";
import debounce from "lodash/debounce";
import treeData from "./treeData.json";
import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
export default {
  data() {
    return {
@@ -393,6 +394,7 @@

  mounted() {
    this.initChart();
    this.getStudentList()
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
@@ -513,6 +515,55 @@
        this.chart.resize();
      }
    },
    // 获取列表显示
    getStudentList() {
      this.loading = true;
      MG.resource.getItem({
        path: "WYY_student",
        fields: {
          // 性别
          gender:"",
          //学习时间
          studyTime: [],
          // 单位
          unit:[],
          // 现工作单位（到二级单位全称）
          currentEmployer_secondary:"",
          //职务
          jobTitle:"",
          //学位
          academicDegree:"",
          // 学生简介
          studentProfile:"",
        },
        paging: {
          // start: (this.currentPage - 1) * 10,
          size: 99999,
        },
        // coverSize: {
        //   height: 70
        // }
      }).then((res) => {
        console.log(res, "res");
        if (res.datas && res.datas.length) {
          this.honorList = res.datas.map(item => {
            // 将 year 字段格式化为 "2017年9月" 这种格式
            const date = new Date(item.year);
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份从0开始，需要加1
            return {
              ...item,
              year: `${year}年${month}月`
            };
          });
          this.total = res.total;
          this.loading = false;
        }
      }).catch((error) => {
        console.error('获取荣誉失败:', error);
      });
    },

  },
};
</script>

 src/views/honors/index.vue

@@ -1,40 +1,35 @@
<template>
  <div class="honors">
    <div class="honors-title">
      <p>王永炎院士荣誉奖项</p>
      <p>
        <span>王永炎院士荣誉奖项</span>
      </p>
    </div>
    <div class="page-main-father">
      <div class="honors-main">
        <div class="honors-main-box">
          <!-- 左边标题 -->
          <div class="honors-main-title">荣<br />誉<br />奖<br />项</div>
          <!-- 右边内容 -->
          <div class="honors-text">
            <ul>
            <ul v-loading="loading">
              <li v-for="(item, index) in honorList" :key="index">
                <img
                  class="main-img"
                  :src="item.imgSrc ? item.imgSrc : defaultImg"
                  alt=""
                />
                <img class="main-img" :src="item.icon ? item.icon : defaultImg" alt="" />
                <div>
                  <p class="main-time">{{ item.time }}</p>
                  <p class="main-text" :title="item.txt">{{ item.txt }}</p>
                  <p class="main-time">{{ item.year }}</p>
                  <p class="main-text" :title="item.txt">{{ item.honor }}</p>
                </div>
              </li>
            </ul>
            <img
              class="honor-Bg"
              src="../../assets/images/honors/honor-Bg.png"
              alt=""
            />
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                class="msg-pagination-container"
                :background="isBackground"
                layout="prev, pager, next"
                :total="200"
              >
              </el-pagination>
            <div>
              <!-- 分页 -->
              <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
                  :background="isBackground" layout="prev, pager, next" :total="total">
                </el-pagination>
              </div>
              <!-- “山”图片 -->
              <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
            </div>
          </div>
        </div>
@@ -44,55 +39,66 @@
</template>

<script>
import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/honors/honorImg.png"),
      isBackground: true,
      honorList: [
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
        {
          imgSrc: "",
          time: "1986年11月",
          txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖",
        },
      ],
      honorList: [],
      total: 0,
      currentPage: 1,
      loading: false,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 获取数据
    initChart() {
      this.loading = true;
      MG.resource.getItem({
        path: "WYY_honor",
        fields: {
          Link: "",
          honor: "",
          'year': '',
        },
        paging: {
          start: (this.currentPage - 1) * 10,
          size: 10,
        },
        // coverSize: {
        //   height: 70
        // }
      }).then((res) => {
        console.log(res, "res");
        if (res.datas && res.datas.length) {
          this.honorList = res.datas.map(item => {
            // 将 year 字段格式化为 "2017年9月" 这种格式
            const date = new Date(item.year);
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份从0开始，需要加1
            return {
              ...item,
              year: `${year}年${month}月`
            };
          });
          this.total = res.total;
          this.loading = false;
        }
      }).catch((error) => {
        console.error('获取荣誉失败:', error);
      });
    },
    // 处理页码变化
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.initChart(); // 重新获取数据
    },
  },

};
</script>

@@ -104,9 +110,12 @@
  background-color: #e9e1d4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.honors-title {
  padding: 8px 0;
  height: 9.4%;
  width: 100%;
  text-align: left;
@@ -115,32 +124,39 @@
  position: sticky;
  top: 0;
  z-index: 100;

  p {
    padding: 1.6% 0 1.55% 0;
    height: 100%;
    font-family: Alimama DongFangDaKai;
    font-size: 30px;
    text-indent: 1em;
    border-bottom: 1px solid #937950;
    display: flex;
    align-items: center;
  }
}

.page-main-father {
  height: calc(100% - 9.4%);
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 2%;
  padding-bottom: 2%;
}

.honors-main {
  width: 77.3%;
  height: auto;
  height: 100%;
  margin: 0 auto;
  margin-top: 2%;

}

.honors-main-box {
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 3.2% 6% 14%  4%;
  padding: 3.2% 6% 0% 4%;
  border: 1px solid #e4dace;
  background: rgba(255, 253, 248, 0.9);
}
@@ -153,18 +169,22 @@
}

.honors-text {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0 0 0 5.8%;
  display: flex;
  flex-direction: column;

  ul {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  li {
    height: 25%;
    height: calc(20% - 20px);
    width: 45%;
    display: flex;
    margin-right: 0.9%;
@@ -197,19 +217,42 @@
  }

  .honor-Bg {
    position: absolute;
    width: 70.5%;
    height: auto;
    bottom: -36%;
    left: -295px;
    margin-left: -33%;
  }

  .pagination {
    // position: absolute;
    // bottom: 0;
    // right: 0;
    padding-right: 47px;
    padding-top: 30px;
    text-align: end;
  }
}

@font-face {
  font-family: "Alimama DongFangDaKai";
  src: url("../../assets/font/阿里妈妈东方大楷.ttf");
}

// @media screen and (min-width: 1920px) {
//   .honors-main-box {
//     display: flex;
//     justify-content: center;
//     padding: 3.2% 6% 11% 4%;
//     border: 1px solid #e4dace;
//     background: rgba(255, 253, 248, 0.9);
//   }
//   .honor-Bg {
//     position: absolute;
//     width: 70.5%;
//     height: auto;
//     bottom: -20%;
//     left: -26.5%;
//   }
// }

@media screen and (min-width: 2560px) {
  .honors-main {
@@ -237,21 +280,9 @@
      }
    }
  }

  .honor-Bg {
    position: absolute;
    width: 70.5%;
    height: auto;
    bottom: -39%;
    left: -295px;
  }

}

@font-face {
  font-family: "Alimama DongFangDaKai";
  src: url("../../assets/font/阿里妈妈东方大楷.ttf");
}


:deep .msg-pagination-container.is-background .el-pager li {
  /*对页数的样式进行修改*/
@@ -277,9 +308,7 @@
  border: 1px solid #cccccc;
}

:deep.msg-pagination-container.is-background
  .el-pager
  li:not(.disabled).active {
:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #937950;
  color: #fff;