年谱接口

杨磊

6 天以前 3eba8102f54dba44758865df0cccf4aae8aea2da

 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>