1

QYF-GitLab1

2024-07-24 37ce456998cb4cba8d88fa3db0a1a3738e52fb3a

 src/pages/academicSchools/index.vue

@@ -222,8 +222,80 @@
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      class="customDrawer"
    >
      <span>我来啦!</span>
      <div class="drawerContent">
        <div class="drawerTips">選中的地址：</div>
        <div class="drawerTable">
          <div class="tableTabs">
            <div class="inputItem">
              <el-input
                placeholder="請輸入地名搜索"
                v-model="tableKey"
                class="input-with-select"
                @keyup.enter="searchAddress"
              >
                <el-button
                  @click="searchAddress"
                  type="primary"
                  slot="append"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </div>
            <div class="selectItem">
              <el-select v-model="dynastyId" placeholder="請選擇時期">
                <el-option
                  v-for="item in dynastyData"
                  :key="item.dynastyId + '0'"
                  :label="item.name"
                  :value="item.dynastyId"
                ></el-option>
              </el-select>
            </div>
          </div>
          <el-table
            ref="multipleTable"
            :data="gridData"
            tooltip-effect="dark"
            style="width: 100%"
            height="530"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="currentName" label="地名"> </el-table-column>
            <el-table-column width="250" label="年代區間" show-overflow-tooltip>
              <template slot-scope="scope">{{
                scope.row.start + "-" + scope.row.end
              }}</template>
            </el-table-column>
            <el-table-column
              prop="dynastyName"
              label="時期"
              width="250"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="drawerPage">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 60, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div class="drawerBtn">
          <el-button @click="setCurrent">全選當前頁</el-button>
          <el-button @click="setCurrent('cancle')">取消全選</el-button>
          <el-button @click="onOkAddress" type="primary">確定</el-button>
        </div>
      </div>
    </el-drawer>
  </view>
</template>
@@ -236,7 +308,8 @@
  academicSearch,
  getPersonTag,
  getSocialDistinction,
  getDynastyAll
  getDynastyAll,
  getPlaceInfo,
} from "@/api/index.js";
import * as echarts from "echarts";
export default {
@@ -257,7 +330,7 @@
      // 当前人物信息
      ownInfo: null,
      detailData: {
        name: ""
        name: "",
      },
      isAdvancedSearch: false,
      formData: {
@@ -266,23 +339,33 @@
        works: "",
        personTags: "",
        socialIdentity: "",
        period: ""
        period: "",
      },
      showPerson: false,
      personList: [],
      personPageInfo: {
        totalCount: 0,
        page: 1,
        limit: 10
        limit: 10,
      },
      personTag: [],
      socialDistinction: [],
      dynastyData: [],
      // 抽屉
      gridData: [],
      page: 1,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      drawer: false,
      dynastyId: "",
      tableKey: "",
      // echarts
      infoOfPersons: [],
      infoOfSchools: [],
      nodeDatas: [],
      links: []
      links: [],
    };
  },
  mounted() {
@@ -290,6 +373,8 @@
    this.hotSearch();
    // 获取人物标签、社会身份
    this.getOptionInfo();
    // 獲取地址列表
    this.getAddressList();
    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
  },
@@ -297,6 +382,70 @@
    this.searchKey = options.keyword;
  },
  methods: {
    // 搜索地址
    searchAddress() {
      this.gridData = [];
      this.getAddressList();
    },
    //  分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAddressList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getAddressList();
    },
    // 表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 全選
    setCurrent(str) {
      if (str == "cancle") {
        this.$refs.multipleTable.clearSelection();
        return false;
      }
      if (this.gridData.length) {
        this.gridData.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
        this.multipleSelection = this.gridData;
      }
    },
    // 確認地址
    onOkAddress() {
      const data = this.multipleSelection.map((item) => {
        return {
          ...item,
          name: item.currentName,
          id: item.dynastyId,
        };
      });
      this.formData.actively = data;
      this.drawer = false;
    },
    // 獲取地址列表
    getAddressList() {
      const data = {
        page: this.page,
        pageSize: this.pageSize,
      };
      if (this.dynastyId != "") {
        data["dynastyId"] = this.dynastyId;
      }
      if (this.tableKey != "") {
        data["keyword"] = this.tableKey;
      }
      getPlaceInfo(data).then((res) => {
        if (res?.success && res?.list.length) {
          this.gridData = res?.list;
        } else {
          this.gridData = [];
        }
      });
    },

    getOptionInfo() {
      getDynastyAll().then((res) => {
        this.dynastyData = res.list;
@@ -308,6 +457,7 @@
        this.socialDistinction = res.list;
      });
    },

    resetForm(formName) {
      this.formData = {
        name: "",
@@ -315,18 +465,22 @@
        works: "",
        personTags: "",
        socialIdentity: "",
        period: ""
        period: "",
      };
    },

    searchFun() {
      console.log(this.formData);
    },

    selectActively() {
      this.drawer = true;
    },

    handleClose(done) {
      done();
    },

    // 获取人物关系
    getPersonInfo(arr, str, newArr, order, type, parent) {
      for (let i = 0; i < arr.length; i++) {
@@ -342,7 +496,7 @@
            parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
            name: personInfo?.NAME[0]?.content1,
            category: type,
            symbolSize: 15
            symbolSize: 15,
          };
          if (order > 80) {
            order = 80;
@@ -444,7 +598,7 @@
              const data = item[str]?.map((e) => {
                return {
                  ...e,
                  personId: item.personId
                  personId: item.personId,
                };
              });
              if (ele[str] && data?.length) {
@@ -611,9 +765,9 @@
        //     this.relationships.push(obj);
        //   });
        // }
        
      });
    },

    // 递归处理所有层级数据
    handleData(data, parent) {
      for (let i = 0; i < data.length; i++) {
@@ -629,8 +783,8 @@
            id: item.mainId,
            name: mainPerson.NAME[0].content1,
            itemStyle: {
              color: "#244a7b"
            }
              color: "#244a7b",
            },
          });
        } else {
          switch (parent.thisType) {
@@ -648,8 +802,8 @@
                    id: item.mainId,
                    name: p.NAME[0].content1,
                    itemStyle: {
                      color: "#5470c6"
                    }
                      color: "#5470c6",
                    },
                  });
                }
              }
@@ -665,8 +819,8 @@
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
                  distance: -10, // 将标签放置在连接线上
                },
              });
              break;
            case 2:
@@ -679,13 +833,13 @@
                  id: item.mainId,
                  name: item.literatureName,
                  itemStyle: {
                    color: "#fac858"
                  }
                    color: "#fac858",
                  },
                });
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
                target: parent.mainId,
              });
              break;
            case 3:
@@ -698,13 +852,13 @@
                  id: item.mainId,
                  name: item.ancientName,
                  itemStyle: {
                    color: "#ea7ccc"
                  }
                    color: "#ea7ccc",
                  },
                });
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
                target: parent.mainId,
              });
              break;
            case 4:
@@ -724,14 +878,14 @@
                    id: item.mainId,
                    name: s.name[0],
                    itemStyle: {
                      color: "#9a60b4"
                    }
                      color: "#9a60b4",
                    },
                  });
                }
              }
              this.links.push({
                source: item.mainId,
                target: parent.mainId
                target: parent.mainId,
              });
              break;
            case 5:
@@ -748,8 +902,8 @@
                    id: item.mainId,
                    name: p.NAME[0].content1,
                    itemStyle: {
                      color: "#ee6666"
                    }
                      color: "#ee6666",
                    },
                  });
                }
              }
@@ -765,8 +919,8 @@
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
                  distance: -10, // 将标签放置在连接线上
                },
              });
              break;
            case 6:
@@ -783,8 +937,8 @@
                    id: item.mainId,
                    name: p.NAME[0].content1,
                    itemStyle: {
                      color: "#3dae7b"
                    }
                      color: "#3dae7b",
                    },
                  });
                }
              }
@@ -800,8 +954,8 @@
                  padding: [3, 8],
                  borderRadius: 30,
                  position: "middle", // 设置标签文本在线的中间位置上居中显示
                  distance: -10 // 将标签放置在连接线上
                }
                  distance: -10, // 将标签放置在连接线上
                },
              });
              break;
          }
@@ -852,7 +1006,7 @@
        }
        return {
          ...item,
          symbolSize: size > 80 ? 80 : size
          symbolSize: size > 80 ? 80 : size,
        };
      });

@@ -886,8 +1040,8 @@
            orient: "vertical",
            data: this.categories.map(function (a) {
              return a.name;
            })
          }
            }),
          },
        ],
        series: [
          {
@@ -897,35 +1051,33 @@
            symbolSize: 15,
            data: this.nodeDatas,
            links: this.links,
            categories: [{

            }],
            categories: [{}],
            roam: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}"
              formatter: "{b}",
            },
            scaleLimit: {
              min: 0.4,
              max: 2
              max: 2,
            },
            lineStyle: {
              color: "source",
              curveness: 0.2
              curveness: 0.2,
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 5
              }
                width: 5,
              },
            },
            force: {
              repulsion: 600,
              edgeLength: 300
            }
          }
        ]
              edgeLength: 300,
            },
          },
        ],
      };
      // 设置点击事件监听
      myChart.off("click");
@@ -936,6 +1088,7 @@
      });
      myChart.setOption(option);
    },

    creatDom(params) {
      const e = params.event;
      const div = document.getElementById("customDialog");
@@ -967,10 +1120,11 @@
            i += 1;
            return e["content" + i];
          }).join("、") ?? "",
        biography: data?.BIOGRAPHY ?? ""
        biography: data?.BIOGRAPHY ?? "",
      };
      this.detailData = obj;
    },

    closeDom() {
      const div = document.getElementById("customDialog");
      div.style.display = "none";
@@ -996,7 +1150,7 @@
      academicSearch({
        keyword: key,
        page: this.personPageInfo.page,
        pageSize: this.personPageInfo.limit
        pageSize: this.personPageInfo.limit,
      }).then((res) => {
        this.personList = res.list.map((item) => {
          return {
@@ -1017,7 +1171,7 @@
            division:
              item.medicalBranchList && item.medicalBranchList.length
                ? item.medicalBranchList[0].content1
                : "-"
                : "-",
          };
        });
        this.showPerson = true;
@@ -1027,7 +1181,7 @@
    spaceTimeArr(id) {
      // 关系图的数据
      uni.navigateTo({
        url: "/pages/character/detail?id=" + id
        url: "/pages/character/detail?id=" + id,
      });
    },
    // 获取朝代echarts的数据
@@ -1051,7 +1205,7 @@
        this.hotKeyList = indexList.map((item) => {
          return {
            id: item,
            name: res.object[item]
            name: res.object[item],
          };
        });
      });
@@ -1066,12 +1220,56 @@
      //     document.querySelector(".fbox1").style.height = box1Height + "px";
      //   }
      // });
    }
  }
    },
  },
};
</script>

<style>
.customDrawer >>> .el-drawer__header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
}

.drawerTips {
  margin-bottom: 20px;
  color: #666;
}

.drawerTable {
  width: 100%;
}

.tableTabs {
  width: 100%;
  display: flex;
}

.inputItem {
  width: 80%;
}

.drawerPage {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
  box-sizing: border-box;
}

.drawerBtn {
  display: flex;
  justify-content: flex-end;
}

.drawerContent {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

#relation {
  width: 100%;
  height: 100%;