三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/repository/repository.vue

@@ -1,8 +1,8 @@
<template>
   <view class="relative">
      <headNav />
      <headNav :idIndex="idIndex" text="中医人物数据库" />
      <view class="Midde flex">
         <el-button class="MiddeBack" size="mini" @click="goBack">返回</el-button>
         <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
         <view style="width: 70%;" class="flex flex-center flex-column">
            <view class="" style="font-weight: bold;font-size: .20rem;">李时珍</view>
            <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
@@ -18,30 +18,35 @@
            <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
               <view class="">
                  <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
                  <el-button style="padding: .05rem .085rem;" size="mini" icon="el-icon-set-up">引用</el-button>
                  <el-button style="padding: .05rem .085rem;" class="yinyong flex">
                     <img src="@/static/image/yinyong.png" alt="" />引用</el-button>
               </view>
               <view class="" style="font-size: .12rem;color: #244A7B;">阅读更多></view>
               <view class="" style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">阅读更多></view>
            </view>
         </view>
         <view class="" style="width: 5%;"></view>
      </view>
      <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
         <!-- 左侧 -->
         <el-col :span="5" style="padding-right: .2rem;width: 2.8rem;">
         <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;">
            <div class="grid-content bg-purple-dark flex flex-column">
               <el-card class="box-card" style="width: 100%;height: 2.06rem;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span style="margin-left: .12rem;">关系图谱</span>
                     <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                  <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">关系图谱</span>
                     <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
                     <img src="@/static/image/fangda.png" @click="fangdaClick(1)"
                        style="width: .18rem;height: .18rem;" alt="" />
                  </div>
                  <view id="relation" style="height: 1.51rem;width: 100%;"></view>
               </el-card>
               <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                  <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>时空地铁</span>
                     <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                     <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
                     <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
                        style="width: .18rem;height: .18rem;" alt="" />
                  </div>
                  <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view>
                  <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view>
               </el-card>
               <el-card style="width: 100%;height: 2.06rem;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
@@ -64,7 +69,7 @@
                  <!-- 基础信息  -->
                  <cc-defineTable :tableData="tableArr"></cc-defineTable>
               </el-card>
               <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 0;">
               <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;">
                  <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
                     <el-tab-pane label="代表著作" data-id="1" name="representative">
                        <Table1 :data="tableData" :columns="tableColumns" />
@@ -92,7 +97,7 @@
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>相关附表/图像</span>
                  </div>
                  <ul class="font-family" style="font-size: .12rem;line-height: 2;">
                  <ul class="font-family" style="font-size: .13rem;line-height: 2;">
                     <li>
                        [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                     </li>
@@ -119,8 +124,9 @@
         <view class="ProfileNav flex flex-center">
            个人小传
         </view>
         <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;"  >
            <view class="" style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
         <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;">
            <view class=""
               style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
               <view class="" style="color: #2C2C2C;">
                  蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
               </view>
@@ -135,8 +141,9 @@


      <!-- 返回顶部 -->
      <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;">
         <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button>
      <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
         <el-button style="width: .4935rem;height: .4935rem;font-size: .3rem;" icon="el-icon-download" circle
            @click="scrollToTop"></el-button>
      </el-col>
   </view>
</template>
@@ -154,7 +161,11 @@
      },
      data() {
         return {
            isProfile: true,
            // 标题顶部栏需要的东西
            idIndex: 0,
            // -------
            // 小传
            isProfile: false,
            // 关系图谱
            activeName: 'representative',
            // 基础信息
@@ -246,6 +257,10 @@
            }]
         }
      },
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions', options.id);
      },
      mounted() {

         // 关系图谱
@@ -257,11 +272,34 @@
         this.$nextTick(() => {
            // 获取第一个选项卡的 DOM 元素
            const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
            firstTab.style.transform = 'translateX(' + '-20px' + ')'
            firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
            console.log(firstTab);
         });


         // 监听窗口大小变化
         window.addEventListener('resize', this.relation);
      },
      methods: {
         // 放大地图跳转
         fangdaClick(index) {
            console.log(index);
            if (index == 1) {
               console.log('跳转关系地图');
               uni.navigateTo({
                  url: '/pages/characterRelation/characterRelation'
               })
            } else if (index == 2) {
               uni.navigateTo({
                  url: '/pages/characterMap/characterMap'
               })
               console.log('跳转时空地图');
            }
         },
         // 小传
         ProfileClick() {
            this.isProfile = !this.isProfile
         },
         // 返回上一页
         goBack() {
            uni.navigateBack();
@@ -277,12 +315,21 @@
         handleClick(tab) {
            let index = tab.$attrs['data-id'] - 1
            this.$nextTick(() => {
               if (index != 0) {
                  let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                  firstTab.style.transform = 'translateX(' + 100 * index + 'px)'
               let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
               if (index == 0) {
                  console.log('sss');
                  firstTab.style.transform = 'translateX(-' + .2 + 'rem)'
               } else if (index == 1) {
                  firstTab.style.transform = 'translateX(' + .85 * index + 'rem)'
               } else if (index == 2) {
                  firstTab.style.transform = 'translateX(' + .93 * index + 'rem)'
               } else if (index == 3) {
                  firstTab.style.transform = 'translateX(' + .95 * index + 'rem)'
               } else if (index == 4) {
                  firstTab.style.transform = 'translateX(' + .97 * index + 'rem)'
               } else {
                  let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                  firstTab.style.transform = 'translateX(' + '-20' + 'px)'
                  firstTab.style.transform = 'translateX(' + '-.2' + 'rem)'
               }
               // console.log(firstTab);
            })
@@ -291,6 +338,7 @@
         relation() {
            var chartDom = document.getElementById('relation');
            var myChart = echarts.init(chartDom);

            // 假设您有节点名称和它们之间的关系数据
            var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
            var relationships = [{
@@ -326,6 +374,23 @@

            });
            console.log(links);
            let FontSize = 12; // 字体大小
            let BorderWidth = 2; // 边框大小
            let SymbolSize = 80; // 尺寸距离
            // 不同尺寸下修改echarts的字体
            if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
               FontSize = 28
               BorderWidth = 5
               SymbolSize = 100
            } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
               FontSize = 28
               BorderWidth = 4
               SymbolSize = 90
            } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
               FontSize = 18
               BorderWidth = 4
               SymbolSize = 70
            }
            // 根据nodes动态生成节点数据
            var nodeData = nodes.map(function(node, index) {
               return {
@@ -333,7 +398,9 @@
                  x: Math.random() * 1000, // 设置随机x坐标位置
                  y: Math.random() * 600, // 设置随机y坐标位置
                  itemStyle: {
                     color: getColorByIndex(index) // 可以根据索引设置不同的颜色
                     color: getColorByIndex(index), // 可以根据索引设置不同的颜色
                     borderWidth: BorderWidth,
                     borderColor: getColorByIndex(index + 1),
                  }
               };
            });
@@ -342,6 +409,7 @@
               var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
               return colors[index % colors.length];
            }

            var option;
            option = {
               tooltip: {},
@@ -350,15 +418,16 @@
               series: [{
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 40, // 调整节点大小
                  symbolSize: SymbolSize, // 调整节点大小
                  label: {
                     show: true,
                     color: 'black' // 设置节点文字颜色为黑色
                     color: 'black', // 设置节点文字颜色为黑色
                     fontSize: FontSize, // 设置文字大小
                  },
                  edgeSymbol: ['circle'],
                  edgeSymbolSize: [4, 10],
                  edgeLabel: {
                     fontSize: 20
                     fontSize: 40
                  },
                  data: nodeData,
                  links: [{
@@ -626,6 +695,35 @@
</script>

<style>
   /* Table1表格里面的数据 */
   ::v-deep .is-leaf {
      .cell {
         font-size: .14rem !important;
         height: .4rem !important;
         line-height: .4rem !important;
      }
   }

   ::v-deep .el-table__body {
      .cell {
         font-size: .14rem !important;
         height: .4rem !important;
         line-height: .4rem !important;
      }
   }

   /* --------------- */
   @media screen and (min-width:2560px)and (max-width:3840px) {}

   .BoxLeft ::v-deep.el-card__body {
      padding: .1rem .11rem !important;
   }

   ::v-deep .el-tabs__content {
      line-height: 1;
   }


   /* 个人小传 ------------------*/
   ::v-deep .el-dialog__header {
      display: none;
@@ -634,7 +732,8 @@
   ::v-deep .el-dialog__body {
      padding: 0;
   }
   ::v-deep .el-dialog__wrapper{

   ::v-deep .el-dialog__wrapper {
      z-index: 999999999999999 !important;
   }

@@ -690,10 +789,9 @@
   .Midde {
      background-color: #dbeafd;
      color: #000;
      /* padding: 5rpx 40rpx 0; */
      padding: .24rem .18rem;
      align-items: flex-start;

      padding: .18rem .24rem ;
		
      view {
         color: #000;
      }
@@ -701,9 +799,26 @@
      .MiddeBack {
         width: 0.6rem;
         height: 0.24rem;
         font-size: .12rem;
         padding: 0;
         border: 1px solid  #9E9E9E;
      }
   }

   .yinyong {
      font-size: .12rem;

      img {
         width: .12rem;
         height: .1rem;
         vertical-align: top;
         margin-right: .03rem;
      }
   }

   .el-dialog__wrapper {
      background: rgba(0, 0, 0, .3);
   }

   .fz {
      /* line-height: 1.3;
@@ -734,7 +849,7 @@
   }

   ::v-deep .el-tabs__nav {
      margin-bottom: .2rem !important;
      margin-bottom: .1rem !important;

   }

@@ -746,8 +861,8 @@
   ::v-deep .el-tabs__item {
      width: 1rem;
      font-size: .14rem;
      line-height: 40rpx;
      height: 40rpx;
      line-height: .4rem;
      height: .4rem;
   }

   ::v-deep .el-tabs__header {
@@ -764,7 +879,7 @@
   }

   ::v-deep .el-tabs__active-bar {
      top: .3rem !important;
      top: .37rem !important;
   }

   ::v-deep .el-table::before {
@@ -773,6 +888,7 @@

   .BoxRight ::v-deep.el-card__body {
      padding: .2rem .14rem !important;

   }

   .BoxRight .box-card {