第二次提交

mh-two-thousand-and-two

2024-03-29 d27fbd63d7840787d7f3ca5333b6e24dc3a860d4

 pages/repository/repository.vue

@@ -1,66 +1,98 @@
<template>
   <view>
      <view class="NavTop flex">
         <view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="">中医医学人物知识库</view>
         <view class="NavTopr">
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
         </view>
      </view>
      <view class="mImage">
         <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5"
            alt="" />
      </view>
   <view class="relative">
      <headNav />
      <view class="Midde flex">
         <view class="MiddeBack">返回</view>
         <el-button class="MiddeBack" size="mini" @click="goBack">返回</el-button>
         <view style="width: 70%;" class="flex flex-center flex-column">
            <view class="" style="font-weight: 900;margin-bottom:15rpx ;font-size: 30rpx;">李时珍</view>
            <ul class="flex" style="line-height: 1.2;">
               <li v-for="item in 3"
                  style="font-size: 20rpx; background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;">
                  ssdf</li>
            <view class="" style="font-weight: bold;font-size: .20rem;">李时珍</view>
            <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
               <li v-for="item in 4"
                  style="background-color: #fff; padding: 0 .08rem ;  border: .01rem solid #000;border-radius:.1rem ;font-size: .12rem;text-align: center;margin-right: .15rem;">
                  VSDS</li>
            </ul>
            <view class="fz" style="font-size: 20rpx;margin: 20rpx 0;">
               亭时珍(1518年-1593年)，字:东雅，时人谓之:亭东脑。号渐湖，晚年自号湖湖山人，湖北新州(今湖北省黄冈市新春县酱州镇)人，汉族，生干明武宗正德十三年(公元1518年)，卒于神崇万历二十二年(公元1593年)。是中国明代与万密商齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的體承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草网目》一书，是我国古代药物学的总结性巨苦，在国内外均有很高的评价，已有儿种文字的译本或节译本，其若有《濒脉学》
            <view class="fz font-family"
               style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;">
               李时珍(1518年-1593年)，字:
               东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
            </view>
            <view class="flex" style="width: 100%;">
            <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: 10rpx;" size="mini" icon="el-icon-set-up">引用</el-button>
                  <!-- <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>
               </view>
               <view class="" style="font-size: 20rpx;">阅读更多></view>
               <view class="" style="font-size: .12rem;color: #244A7B;">阅读更多></view>
            </view>
         </view>
         <view class="" style="width: 5%;"></view>
      </view>
      <el-row style="padding: 30rpx 30rpx 0; ">
      <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
         <!-- 左侧 -->
         <el-col :span="6">
         <el-col :span="5" 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%;">
                  <div class="clearfix" style="font-weight: 700;">
                     <span>关系图谱</span>
               <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>
                  <view id="relation" style="height: 200rpx;width: 100%;"></view>
                  <view id="relation" style="height: 1.51rem;width: 100%;"></view>
               </el-card>
               <el-card class="box-card" style="width: 100%; margin: 20rpx 0;">
                  <div class="clearfix" style="font-weight: 700;">
               <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;">
                     <span>时空地铁</span>
                     <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                  </div>
                  <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view>
                  <view class=""
                     style="line-height: 1.65; margin-top: 10rpx; background-color: #e9e9e9;padding-left: 10rpx;font-size: 20rpx;">
                     <view class="" style="padding-top: 10rpx ;font-weight: 800;">来源</view>
                     <view class="">1.《明史·卷二百九十九·列作品. p52</view>
                     <view class="">2.《进(本草纲目)疏》 p52</view>
               </el-card>
               <el-card style="width: 100%;height: 2.06rem;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>来源</span>
                  </div>
                  <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;">
                     <li>1.《明史·卷二百九十九·列作品. p52</li>
                     <li>2.《进(本草纲目)疏》 p52</li>
                  </ul>
               </el-card>
            </div>
         </el-col>
         <!-- 右侧 -->
         <el-col :span="18" class="BoxRight">
            <div class="grid-content bg-purple-dark" style="width: 100%;">
               <el-card class="box-card" style="padding: 0;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>基础信息</span>
                  </div>
                  <!-- 基础信息  -->
                  <cc-defineTable :tableData="tableArr"></cc-defineTable>
               </el-card>
               <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 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" />
                     </el-tab-pane>
                     <el-tab-pane label="亲属关系" data-id="2" name="family ">
                        亲属关系
                     </el-tab-pane>
                     <el-tab-pane label="师承关系" data-id="3" name="mentoring ">师承关系</el-tab-pane>
                     <el-tab-pane label="社会关系" data-id="4" name="society">社会关系</el-tab-pane>
                     <el-tab-pane label="活动年谱" data-id="5" name="activity">活动年谱</el-tab-pane>
                  </el-tabs>

               </el-card>
               <el-card style=" margin-bottom: .2rem ;">
                  <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                     <span>相关附表/图像</span>
                  </div>
                  <view class="flex">
                     <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        fit="fill"></el-image>
                  </view>
               </el-card>
               <el-card class="box-card" style="width: 100%; line-height: 1.18;font-size: 21.5rpx;">
                  <ul>
               <el-card class="box-card">
                  <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;">
                     <li>
                        [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                     </li>
@@ -80,48 +112,32 @@
               </el-card>
            </div>
         </el-col>
         <!-- 右侧 -->
         <el-col :span="18" style="padding-left: 20rpx;">
            <div class="grid-content bg-purple-dark">
               <el-card class="box-card">
                  <div class="clearfix" style="font-weight: 700;">
                     <span>关系图谱</span>
                  </div>
                  <!-- 基础信息  -->
                  <cc-defineTable :tableData="tableArr"></cc-defineTable>
               </el-card>
               <el-card class="box-card" style=" height: 270rpx; margin: 20rpx 0;">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                     <el-tab-pane label="代表著作" name="representative">
                        <Table1 :data="tableData" :columns="tableColumns" />
                     </el-tab-pane>
                     <el-tab-pane label="亲属关系" name="family ">
                        亲属关系
                     </el-tab-pane>
                     <el-tab-pane label="师承关系" name="mentoring ">师承关系</el-tab-pane>
                     <el-tab-pane label="社会关系" name="society">社会关系</el-tab-pane>
                     <el-tab-pane label="活动年谱" name="activity">活动年谱</el-tab-pane>
                  </el-tabs>
               </el-card>
               <el-card style=" margin-bottom: 20rpx ;">
                  <div class="clearfix" style="font-weight: 700;">
                     <span>关系图谱</span>
                  </div>
                  <view class="flex">
                     <el-image v-for="item in 4" :key="item" style="width: 20%; height: 130rpx"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        fit="fill"></el-image>
                  </view>
               </el-card>
               <el-card>
                  <div class="clearfix" style="font-weight: 700;">
                     <span>相关附表/图像</span>
                  </div>
                  <Table1 :data="tableData" :columns="tableColumns" />
               </el-card>
            </div>
         </el-col>
      </el-row>

      <!-- 个人小传 -->
      <el-dialog :visible.sync="isProfile">
         <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="color: #2C2C2C;">
                  蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
               </view>
               <view class="flex">
                  <view class=""></view>
                  <view class="" style="font-weight: 700;color: #2C2C2C;">——《奇八服考》P 3</view>
               </view>
            </view>
         </view>
      </el-dialog>



      <!-- 返回顶部 -->
      <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;">
         <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button>
      </el-col>
   </view>
</template>

@@ -138,6 +154,7 @@
      },
      data() {
         return {
            isProfile: true,
            // 关系图谱
            activeName: 'representative',
            // 基础信息
@@ -226,33 +243,105 @@
               category: '中医学',
               id: 1

            }, {
               worksName: '本草纲目',
               works: '李二牛',
               literature: '作者',
               epoch: '现代',
               category: '中医学',
               id: 1

            }]
         }
      },
      mounted() {

         // 关系图谱
         this.relation()
         // 时空地图
         loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
            this.spaceTime()
         })
         this.$nextTick(() => {
            // 获取第一个选项卡的 DOM 元素
            const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
            firstTab.style.transform = 'translateX(' + '-20px' + ')'
            console.log(firstTab);
         });
      },
      methods: {
         handleClick(tab, event) {
            console.log(tab, event);
         // 返回上一页
         goBack() {
            uni.navigateBack();
         },
         // 返回顶部
         scrollToTop() {
            console.log('ss');
            window.scrollTo({
               top: 0,
               behavior: "smooth" // 使用平滑滚动
            });
         },
         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)'
               } else {
                  let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                  firstTab.style.transform = 'translateX(' + '-20' + 'px)'
               }
               // console.log(firstTab);
            })
         },
         // 关系图谱
         relation() {
            var chartDom = document.getElementById('relation');
            var myChart = echarts.init(chartDom);
            // 假设您有节点名称和它们之间的关系数据
            var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
            var relationships = [{
                  source: '李时珍',
                  target: '成就'
               },
               {
                  source: '李时珍',
                  target: '传承'
               },
               {
                  source: '李时珍',
                  target: '亲友'
               },
               {
                  source: '李时珍',
                  target: '著作'
               },
               // 其他关系...
            ];

            // 根据关系数据生成连接线
            var links = [];
            relationships.forEach(function(relationship) {
               var sourceIndex = nodes.indexOf(relationship.source);
               var targetIndex = nodes.indexOf(relationship.target);
               if (sourceIndex !== -1 && targetIndex !== -1) {
                  links.push({
                     source: sourceIndex,
                     target: targetIndex
                  });
               }

            });
            console.log(links);
            // 根据nodes动态生成节点数据
            var nodeData = nodes.map(function(node, index) {
               return {
                  name: node,
                  x: Math.random() * 1000, // 设置随机x坐标位置
                  y: Math.random() * 600, // 设置随机y坐标位置
                  itemStyle: {
                     color: getColorByIndex(index) // 可以根据索引设置不同的颜色
                  }
               };
            });
            // 设置颜色
            function getColorByIndex(index) {
               var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
               return colors[index % colors.length];
            }
            var option;
            option = {
               tooltip: {},
@@ -261,50 +350,17 @@
               series: [{
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 50,
                  // roam: true,
                  symbolSize: 40, // 调整节点大小
                  label: {
                     show: true
                     show: true,
                     color: 'black' // 设置节点文字颜色为黑色
                  },
                  edgeSymbol: ['circle'],
                  edgeSymbolSize: [4, 10],
                  edgeLabel: {
                     fontSize: 20
                  },
                  data: [{
                        name: 'Node 1',
                        x: 300,
                        y: 300,
                        itemStyle: {
                           color: 'yellow' // 节点背景色为黄色
                        }
                     },
                     {
                        name: 'Node 2',
                        x: 800,
                        y: 300,
                        itemStyle: {
                           color: 'red' // 节点背景色为黄色
                        }
                     },
                     {
                        name: 'Node 3',
                        x: 550,
                        y: 100,
                        itemStyle: {
                           color: 'blue' // 节点背景色为黄色
                        }
                     },
                     {
                        name: 'Node 4',
                        x: 550,
                        y: 500,
                        itemStyle: {
                           color: 'green' // 节点背景色为绿色
                        }
                     }
                  ],
                  // links: [],
                  data: nodeData,
                  links: [{
                        source: 0,
                        target: 1,
@@ -339,11 +395,12 @@
               }]
            };

            // 将生成的连接线添加到echarts图表的option中
            option.series[0].links = links;
            option && myChart.setOption(option);
         },
         // 时空地图
         spaceTime() {

            var chartDom = document.getElementById('spaceTime');
            var myChart = echarts.init(chartDom);
            var option;
@@ -351,38 +408,6 @@
            const data = [{
                  name: '海门',
                  value: 9
               },
               {
                  name: '鄂尔多斯',
                  value: 12
               },
               {
                  name: '招远',
                  value: 12
               },
               {
                  name: '舟山',
                  value: 12
               },
               {
                  name: '齐齐哈尔',
                  value: 14
               },
               {
                  name: '盐城',
                  value: 15
               },
               {
                  name: '赤峰',
                  value: 16
               },
               {
                  name: '青岛',
                  value: 18
               },
               {
                  name: '乳山',
                  value: 18
               },
               {
                  name: '金昌',
@@ -421,35 +446,6 @@
               海门: [121.15, 31.89],
               鄂尔多斯: [109.781327, 39.608266],
               招远: [120.38, 37.35],
               舟山: [122.207216, 29.985295],
               乌鲁木齐: [87.68, 43.77],
               枣庄: [117.57, 34.86],
               杭州: [120.19, 30.26],
               淄博: [118.05, 36.78],
               鞍山: [122.85, 41.12],
               溧阳: [119.48, 31.43],
               库尔勒: [86.06, 41.68],
               安阳: [114.35, 36.1],
               开封: [114.35, 34.79],
               济南: [117, 36.65],
               德阳: [104.37, 31.13],
               温州: [120.65, 28.01],
               九江: [115.97, 29.71],
               邯郸: [114.47, 36.6],
               临安: [119.72, 30.23],
               兰州: [103.73, 36.03],
               沧州: [116.83, 38.33],
               临沂: [118.35, 35.05],
               南充: [106.110698, 30.837793],
               天津: [117.2, 39.13],
               富阳: [119.95, 30.07],
               泰安: [117.13, 36.18],
               诸暨: [120.23, 29.71],
               郑州: [113.65, 34.76],
               哈尔滨: [126.63, 45.75],
               聊城: [115.97, 36.45],
               芜湖: [118.38, 31.33],
               唐山: [118.02, 39.63],
               平顶山: [113.29, 33.75],
               邢台: [114.48, 37.05],
               德州: [116.29, 37.45],
@@ -495,7 +491,7 @@
               },
               bmap: {
                  center: [104.114129, 37.550339],
                  zoom: 5,
                  zoom: 1,
                  roam: true,
                  mapStyle: {
                     styleJson: [{
@@ -510,62 +506,6 @@
                           elementType: 'all',
                           stylers: {
                              color: '#f3f3f3'
                           }
                        },
                        {
                           featureType: 'railway',
                           elementType: 'all',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
                           featureType: 'highway',
                           elementType: 'all',
                           stylers: {
                              color: '#fdfdfd'
                           }
                        },
                        {
                           featureType: 'highway',
                           elementType: 'labels',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
                           featureType: 'arterial',
                           elementType: 'geometry',
                           stylers: {
                              color: '#fefefe'
                           }
                        },
                        {
                           featureType: 'arterial',
                           elementType: 'geometry.fill',
                           stylers: {
                              color: '#fefefe'
                           }
                        },
                        {
                           featureType: 'poi',
                           elementType: 'all',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
                           featureType: 'green',
                           elementType: 'all',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
                           featureType: 'subway',
                           elementType: 'all',
                           stylers: {
                              visibility: 'off'
                           }
                        },
                        {
@@ -676,6 +616,7 @@
               ]
            };


            option && myChart.setOption(option);

         },
@@ -685,6 +626,31 @@
</script>

<style>
   /* 个人小传 ------------------*/
   ::v-deep .el-dialog__header {
      display: none;
   }

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

   .ProfileNav {
      width: 100%;
      height: 0.7rem;
      background: url(@/static/image/ProfileBg.png);
      background-size: 100% 100%;
      font-size: .24rem;
      color: #2C2C2C;
      font-weight: bold;
   }

   /* ------------------- */


   img {
      width: 100%;
      height: 100%;
@@ -724,29 +690,34 @@
   .Midde {
      background-color: #dbeafd;
      color: #000;
      padding: 5rpx 40rpx 0;
      /* padding: 5rpx 40rpx 0; */
      padding: .24rem .18rem;
      align-items: flex-start;

      view {
         color: #000;
      }


      .MiddeBack {
         width: 0.6rem;
         height: 0.24rem;
      }
   }


   .fz {
      line-height: 1.3;
      /* line-height: 1.3;
      height: 100rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      -webkit-box-orient: vertical; */
      color: #2C2C2C;
   }

   ::v-deep .el-card__body {
      padding: 10rpx !important;
      padding: .1rem !important;
   }

   /* echart地图水印 */
@@ -762,17 +733,49 @@
      background-color: transparent;
   }

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

   }

   ::v-deep .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
   }

   ::v-deep .el-tabs__item {
      font-size: 20rpx;
      width: 1rem;
      font-size: .14rem;
      line-height: 40rpx;
      height: 40rpx;
   }

   ::v-deep .el-tabs__header{
      margin: 0 0 10rpx;
   }

   ::v-deep .el-tabs__active-bar {
      /* 设置滚动条宽度 */
      width: 1rem !important;
      height: .03rem !important;
      background-color: #597AA5;
      transform: translateX(-20px);
      /* margin-top: .09rem; */
   }

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

   ::v-deep .el-table::before {
      background-color: #fff !important;
   }

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

   .BoxRight .box-card {
      margin-bottom: .2rem !important;
   }
</style>