登录注册

杨磊

2024-05-11 2df27fd1fa604fc6b2e5876b1b5e073f9a7f39ab

 src/pages/inherit/index.vue

@@ -10,8 +10,12 @@

    <div class="filterBox font-family">
      <div class="searchBox">
        <input type="text" placeholder="输入姓名/别名/朝代" />
        <button>搜索</button>
        <input
          v-model="keywords"
          type="text"
          placeholder="输入姓名/别名/朝代"
        />
        <button @click="getData">搜索</button>
      </div>
      <div class="dynasty">
        <div style="font-weight: 700; line-height: 0.25rem">筛选朝代</div>
@@ -54,7 +58,7 @@
</template>
<script>
import * as echarts from "echarts";
import { inheritMedicalList } from "@/api/index.js";
import { inheritMedicalList, getDynastyAll } from "@/api/index.js";
export default {
  data() {
    return {
@@ -65,61 +69,70 @@
        {
          name: "唐",
          number: "4910",
          isColor: false
          isColor: false,
        },
        {
          name: "五代",
          number: "494",
          isColor: true
          isColor: true,
        },
        {
          name: "宋",
          number: "51273",
          isColor: false
          isColor: false,
        },
        {
          name: "北宋",
          number: "15",
          isColor: true
          isColor: true,
        },
        {
          name: "南宋",
          number: "4910",
          isColor: false
          isColor: false,
        },
        {
          name: "元",
          number: "299",
          isColor: true
          isColor: true,
        },
        {
          name: "明",
          number: "1830",
          isColor: false
          isColor: false,
        },
        {
          name: "清",
          number: "1000",
          isColor: true
        }
          isColor: true,
        },
      ],
      nodeData: []
      nodeData: [],
      keywords: "",
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
    getDynasty()
  },
  mounted() {
    this.getData();
    this.getDynasty()

  },
  methods: {
    getDynasty() {
      getDynastyAll().then((res) => {
        console.log(res, "getDynastyAll");
      });
    },
    getData() {
      inheritMedicalList({
        keywords: "",
        keywords: this.keywords,
        dynastyId: "",
        searchType: "KEYWORD",
        path: ""
        path: "",
      }).then((res) => {
        console.log(res);
        this.nodeData = res.object.nodeList.map((item) => {
@@ -128,8 +141,8 @@
            itemStyle: {
              color: "#F8E2D7",
              borderColor: "#F3AA78",
              borderWidth: "3"
            }
              borderWidth: "3",
            },
          };
        });
        // 初始化 echarts
@@ -165,14 +178,14 @@

      let option = {
        title: {
          text: [""]
          text: [""],
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/WMBg.png",
          repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
@@ -187,7 +200,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -202,7 +215,7 @@
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
              },
            },
            //各个节点
            data: this.nodeData,
@@ -210,17 +223,17 @@
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0,
            },
            force: {
              // initLayout: 'circular',
              // gravity: 0
              friction: 0.1,
              repulsion: 500,
              edgeLength: 6
            }
          }
        ]
              edgeLength: 6,
            },
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
@@ -230,15 +243,15 @@
            "/pages/inherit/list?id=" +
            params.data.identifier +
            "&name=" +
            encodeURIComponent(params.data.name)
            encodeURIComponent(params.data.name),
        });
      });
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>
<style scoped>