1

YM

2024-06-05 f3e5b489e30a921c03ef8b97e1cd845b65ea5d9d

 src/pages/characterMap/characterMap.vue

@@ -12,7 +12,7 @@
        <view
          class="font-family"
          style="font-size: 0.26rem; padding-top: 0.16rem; font-weight: bold"
          >{{ activityInfo.participants }}</view
          >{{ basicInfo.name }}</view
        >
        <ul
          style="
@@ -23,15 +23,11 @@
            line-height: 0.28rem;
          "
        >
          <li>出生于{{ basicInfo.nativePlace }}</li>
          <li>出生于{{ basicInfo.nativePlace || "-" }}</li>
          <li>
            {{
              basicInfo.birthYear +
              basicInfo.nativePlace +
              "(今" +
              basicInfo.nowPlace +
              ")"
            }}
            <span v-if="basicInfo.birthYear">{{basicInfo.birthYear}}</span>
            <span v-if="basicInfo.nativePlace">{{basicInfo.nativePlace}}</span>
            <span v-if="basicInfo.nowPlace">（今{{basicInfo.nowPlace}}）</span>
          </li>
        </ul>
        <ul
@@ -42,18 +38,18 @@
            line-height: 0.28rem;
          "
        >
          <li>活动名称：{{ activityInfo.activityName }}</li>
          <li>活动地点：{{ activityInfo.activityAddr }}</li>
          <li>活动区间：{{ activityInfo.time }}</li>
          <li>活动描述：{{ activityInfo.desc }}</li>
          <li>参与人员：{{ activityInfo.participants }}</li>
          <li>活动名称：{{ activityInfo.activityName || "-" }}</li>
          <li>活动地点：{{ activityInfo.activityAddr || "-" }}</li>
          <li>活动区间：{{ activityInfo.time || "-" }}</li>
          <li>活动描述：{{ activityInfo.desc || "-" }}</li>
          <li>参与人员：{{ activityInfo.participants || "-" }}</li>
        </ul>
        <!-- <img
          style="width: 100%; height: 2rem"
          src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
          alt=""
        /> -->
        <div class="box" style="width: 80%">
        <!-- <div class="box" style="width: 80%">
          <span class="span" :style="{ marginLeft: spanML + 'rem' }"
            >{{ span }}年</span
          >
@@ -67,7 +63,7 @@
          </div>
          <div class="MX"></div>
          <div class="cursor" :style="{ marginLeft: cursorML + 'rem' }"></div>
        </div>
        </div> -->
      </el-dialog>
    </view>
  </view>
@@ -95,7 +91,13 @@
      spanML: 0,
      cursorML: -0.05,
      activityInfo: {},
      basicInfo: {}
      basicInfo: {
        name: "",
        birthYear: "",
        deathYear: "",
        nativePlace: "",
        nowPlace: "",
      }
    };
  },

@@ -108,7 +110,6 @@
    //   this.aaa();
    // });
    this.$route;
    console.log(this.$route, "this.$route");
    this.getPersonInfoFun();
    this.getBasicInfo();
  },
@@ -181,7 +182,6 @@
        id: this.$route.query.id,
        type: "PERSON_SPACE_TIME"
      }).then((res) => {
        console.log(res, "res");
        this.initMap(res.object.personSpaceTimeList);
      });
    },
@@ -191,7 +191,6 @@
        id: this.$route.query.id,
        type: "PERSON_BASIC"
      }).then((res) => {
        console.log(res, "res");
        this.basicInfo.name = res.object.personFieldList.find(
          (f) => f.fieldName == "WEAK_NAME"
        ).content1;
@@ -207,16 +206,14 @@
        this.basicInfo.nowPlace = res.object.personFieldList.find(
          (f) => f.fieldName == "NATIVE_PLACE"
        ).content2;
        // this.initMap(res.object.personSpaceTimeList);
        console.log(this.basicInfo);
      });
    },

    creatMX(len) {
      console.log(len);
      let width = len * 50 + 10;
      // this.MX.style.width = `${width}px`
      // this.scales.style.width = `${width}px`
      // console.log(this.box.style.width);
    },
    creatScale() {
      // for (let i = 0; i < this.yearArr.length; i++) {
@@ -226,7 +223,6 @@
      //    scale.addEventListener("click", this.scaleClick)
      //    scales.appendChild(scale)
      // }
      // console.log(arr[0]);
    },

    handleSliderChange(value) {
@@ -234,16 +230,13 @@
    },
    scaleClick(i) {
      // let i = Number(this.getAttribute("data-index"))
      console.log(i, this.cursorML);

      if (i > this.yearIndex) {
        this.cursorML += (i - this.yearIndex + +("0.0" + this.yearIndex)) / 1.9;
        // this.spanML += 50 * (i - this.yearIndex)
        console.log(i - this.yearIndex + 0.2, "aaaa");
      } else {
        this.cursorML -= (this.yearIndex - i) / 2 + 0.04;
        // this.spanML -= 50 * (this.yearIndex - i)
        console.log(this.yearIndex, i, "bbbb");
      }
      this.yearIndex = i;
    },
@@ -459,12 +452,10 @@
      // 设置点击事件监听
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        // console.log(menuNav);
        if (params.componentType === "series") {
          var dataName = params.data.name; // 获取点击的数据名称
          var dataValue = params.data.value; // 获取点击的数据值
          // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
          // console.log('点击了', dataName, '数据，数值为', dataValue);
          // 这里可以编写触发时间获取对应数据信息的逻辑
          this.spaceTimeArr(params);
        }
@@ -477,7 +468,6 @@
      // 修改 Vue 组件的数据，例如显示菜单导航
      this.menuNav = !this.menuNav;
      // 时空地图的数据
      console.log(Arr);
    }
  }
};
@@ -567,9 +557,9 @@
  margin: 0 !important;
  position: absolute;
  right: 0;
  top: 0;
  top: 86px;
  bottom: 0;
  width: 4rem;
  height: 100%;
}

.particulars ::v-deep .el-dialog__header {