图表

杨磊

4 天以前 b50a2e6d9385a88916fc43cddb18842e5036f565

 src/views/chronology/index.vue

@@ -30,8 +30,14 @@
          <div>其他</div>
        </div>
      </div>
      <div class="contentBox">
        <div class="chartsBox" v-if="showList">
      <div
        class="contentBox"
        element-loading-text="年谱加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)"
        v-loading="!showList"
      >
        <div class="chartsBox">
          <div
            class="chartsItemBox"
            v-for="(item, index) in contentList"
@@ -44,6 +50,7 @@
                  v-for="(citem, cindex) in item.list"
                  :style="{ background: citem.color }"
                  @mouseover="showDetail(index, cindex, 1)"
                  @mouseleave="closeDetail(index, cindex, 0)"
                  :key="cindex"
                >
                  <div class="detailDialog" v-if="citem.showDetail">
@@ -60,7 +67,6 @@
                </div>
              </div>
              <div class="item-circle" @click="showYearWindow(index, 1)"></div>

              <div class="item-text">
                <div class="">
                  {{ item.name.split("，")[0] }}
@@ -78,6 +84,7 @@
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
@@ -188,6 +195,7 @@
      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];
@@ -195,16 +203,18 @@
            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]);
        }
      }

      if (filterList.length > 0) {
        console.log(filterList, "filterList");
      }
      return filterList;
    },
    closeDetail(index, cindex, type) {
      console.log(index, cindex, type);
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        if (item && item.length > 0) {
@@ -223,6 +233,7 @@
          for (let j = 0; j < item.list.length; j++) {
            const citem = item.list[j];
            this.$set(citem, "showDetail", false);
            item.showDetail = false;
          }
        }
      }
@@ -274,6 +285,12 @@
    display: flex;
    align-items: end;
    overflow: auto;

    ::v-deep .el-loading-spinner .el-loading-text {
      font-size: 14px;
      color: #937950;
    }

    .chartsBox {
      white-space: nowrap;
      padding: 0 80px;
@@ -390,10 +407,8 @@
}
.detailDialog {
  position: absolute;
  // left: -54px;
  // bottom: 50px;
  top: -550%;
  width: 400px;
  top: -700%;
  width: 524px;
  z-index: 9999;
  cursor: pointer;
  background: #fff;
@@ -429,4 +444,7 @@
  right: 5px;
  z-index: 999;
}
::v-deep .el-loading-spinner {
  color: #937950 !important;
}
</style>