调整

YM

2024-04-26 3af382c2b9ddf2a8210b6477bb46b0945ce26a64

调整

 src/api/index.js

@@ -1,6 +1,6 @@
import req from "@/utils/request/req1.js";
import req1 from "@/utils/request/req1.js";
import qs from "querystring";
import req1, { baseUrl } from "@/utils/request/req1";
// 注册登录
export const getaddLogin = (Obj) => {
  return req1({
@@ -241,6 +241,12 @@
  });
};

export const getIntroduction = (id) => {
  return req1({
    url: "/school/introduction?id=" + id,
    method: "post"
  });
};

// 医事制度
// 数据统计
@@ -286,3 +292,7 @@
  });
};
// ----------------

export const getImg = (path) => {
  return baseUrl + "/picture/getImageByFilePath?filePath=" + path;
};

 src/components/headNav/headNav.vue

@@ -163,7 +163,7 @@
    bg1: {
      type: String,
      default() {
        return "@/static/image/line.png";
        return "/static/image/line.png";
      }
    },
    idIndex: {

 src/pages.json

@@ -30,22 +30,7 @@
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/AcademicHistory/AcademicHistory",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/interchannel/interchannel",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        // 医学流派
        {
            "path": "pages/academicGenres/index",
            "style": {
@@ -55,6 +40,22 @@
            }
        },
        {
            "path": "pages/academicGenres/detail",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/academicGenres/chart",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/TcmSystem/TcmSystem",
            "style": {
                "navigationBarTitleText": "",

 src/pages/AcademicHistory/AcademicHistory.vue

File was deleted

 src/pages/academicGenres/chart.vue

New file
@@ -0,0 +1,555 @@
<template>
  <view>
    <!-- 顶部导航 -->
    <headNav :idIndex="3" text="历代学术流派" />
    <view class="Midde flex">
      <!-- <view class="MiddeBack">返回</view> -->
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view class="flex flex-center flex-column">
        <view
          class=""
          style="
            font-weight: 900;
            margin-bottom: 0.2rem;
            font-size: 0.26rem;
            line-height: 1;
          "
          >{{ detailData.name }}
        </view>
        <ul class="flex Lists">
          <li
            @click="ListClick"
            style="background-color: #fff; color: #597aa5; cursor: pointer"
          >
            学派介绍
          </li>
          <li style="background-color: #597aa5; color: #fff; cursor: pointer">
            学派图谱
          </li>
        </ul>
      </view>
    </view>
    <view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
      <ul class="flex">
        <li
          class="school1"
          v-for="(item, index) in dynasty"
          :key="item.id"
        >
          <view
            class="flex flex-center font-family school"
            style="
              font-weight: 500;
              border-radius: 0.3rem;
              padding: 0.06rem 0.15rem;
              color: #2c2c2c;
              font-size: 0.12rem;
              margin-top: 0.03rem;
              margin-right: 0.1rem;
              background-color: #fff;
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
                width: 0.12rem;
                height: 0.12rem;
                border-radius: 50%;
              "
            ></view>
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
        </li>
      </ul>
    </view>
    <view class="Bottom">
      <view id="main" style="width: 100vw; height: 5rem"></view>
    </view>
  </view>
</template>

<script>
import { getIntroduction } from "@/api/index.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      dynasty: [
        {
          name: "代表人物",
          color: "#597AA5",
          id: 1
        },
        {
          name: "重要医家",
          color: "#DA7A2B",
          id: 2
        },
        {
          name: "关系文献",
          color: "#9E9E9E",
          id: 3
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    this.getData();
  },
  methods: {
    getData() {
      getIntroduction(Number(this.idIndex)).then((res) => {
        this.detailData = {
          name: res.object.school_NAME[0].content,
          icon:
            res.object.pictureList && res.object.pictureList.length > 0
              ? getImg(res.object.pictureList[0].filePath)
              : "",
          character: res.object.important_PEOPLE
            ? res.object.important_PEOPLE
                .map((item) => item.content2)
                .join("、")
            : "",
          skilledDoctor: res.object.important_PHYSICIAN
            ? res.object.important_PHYSICIAN
                .map((item) => item.content2)
                .join("、")
            : "",
          works: res.object.important_WORK
            ? res.object.important_WORK.map((item) => item.content).join("、")
            : "",
          thought: res.object.school_THOUGHT
            ? res.object.school_THOUGHT.map((item) => item.content).join("、")
            : "",
          source: res.object.bookList
            ? res.object.bookList.map((item) => item.name).join("、")
            : "",
          brief: res.object.school_INTRODUCTION
            ? res.object.school_INTRODUCTION.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          develop: res.object.school_DEVELOPMENT
            ? res.object.school_DEVELOPMENT.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          achievement: res.object.achievement_INFLUENCE
            ? res.object.achievement_INFLUENCE.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          literature: res.object.related_LITERATURE
            ? res.object.related_LITERATURE.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : []
        };
        console.log(this.detailData);
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    ListClick() {
      uni.navigateTo({
        url: "/pages/academicGenres/detail?id=" + this.idIndex
      });
    },
    innt() {
      this.$nextTick(() => {
        // var chartDom = document.getElementById('main'); // 获取HTML中的元素，此处假设有一个id为'main'的元素作为图表容器
        // var myChart = echarts.init(chartDom); // 初始化echarts实例，并将其与图表容器绑定
        // var option; // 定义变量option来存储图表的配置项

        // option = {
        //     // title: {
        //     //   text: 'Basic Graph' // 图表标题为'Basic Graph'
        //     // },
        //     tooltip: {}, // 鼠标悬停时显示的提示框
        //     animationDurationUpdate: 1500, // 数据更新时的动画时长
        //     animationEasingUpdate: 'quinticInOut', // 数据更新时的动画效果
        //     series: [{
        //         type: 'graph', // 图表类型为'graph'
        //         layout: 'none', // 图表布局方式为'none'，即节点位置由x和y坐标指定
        //         symbolSize: 150, // 节点的大小
        //         roam: false, // 是否开启漫游，即可以拖动和缩放图表
        //         label: {
        //             show: true, // 是否显示节点上的标签
        //             textStyle: {
        //                 fontSize: 32, // 设置字体大小为12
        //             }
        //         },
        //         edgeSymbol: ['circle', 'arrow'], // 边的起始和结束箭头样式
        //         edgeSymbolSize: [10, 10], // 边的起始和结束箭头大小
        //         edgeLabel: {
        //             fontSize: 40, // 边的标签字体大小

        //         },
        //         data: [{
        //                 name: '金元四大家', // 节点1的名称
        //                 x: 1230, // 节点1的x坐标
        //                 y: 250, // 节点1的y坐标
        //                 itemStyle: {
        //                     color: 'red', // 节点1的背景颜色
        //                 },
        //                 label: {
        //                     color: 'black' // 节点1的字体颜色
        //                 }
        //             },
        //             {
        //                 name: '刘完素', // 节点2的名称
        //                 x: 800, // 节点2的x坐标
        //                 y: 300 // 节点2的y坐标
        //             },
        //             {
        //                 name: '傷寒直格', // 节点3的名称
        //                 x: 550, // 节点3的x坐标
        //                 y: 360 // 节点3的y坐标
        //             },
        //             {
        //                 name: '张仲景', // 节点4的名称
        //                 x: 700, // 节点4的x坐标
        //                 y: 200 // 节点4的y坐标
        //             },
        //             {
        //                 name: '三消論', // 节点4的名称
        //                 x: 750, // 节点4的x坐标
        //                 y: 500 // 节点4的y坐标
        //             },
        //         ],
        //         links: [ // 边的连接关系
        //             {
        //                 source: '金元四大家', // 边的起始节点索引为0，即节点1
        //                 target: '刘完素', // 边的结束节点索引为1，即节点2
        //                 symbolSize: [5, 20], // 边的起始和结束箭头大小
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '包含',
        //                 },
        //                 lineStyle: {
        //                     width: 5, // 边的宽度
        //                     curveness: 0.2 // 边的曲度

        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 2'
        //                 target: '傷寒直格', // 边的结束节点为'Node 1'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '出版物'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2, // 边的曲度

        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 1'
        //                 target: '张仲景', // 边的结束节点为'Node 3'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '评论'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2 // 边的曲度
        //                 }
        //             },
        //             {
        //                 source: '刘完素', // 边的起始节点为'Node 2'
        //                 target: '三消論', // 边的结束节点为'Node 3'
        //                 label: {
        //                     show: true, // 是否显示边的标签
        //                     formatter: '出版物'
        //                 },
        //                 lineStyle: {
        //                     curveness: 0.2 // 边的曲度
        //                 }
        //             }
        //         ],
        //         lineStyle: {
        //             opacity: 0.9, // 边的透明度
        //             width: 2, // 边的宽度
        //             curveness: 0 // 边的曲度
        //         },
        //         textStyle: {
        //             fontSize: 14 // 设置全局文字的字体大小
        //         },
        //     }]
        // };

        // option && myChart.setOption(option); // 将配置项应用于图表实例
        // console.log(myChart);

        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        // 假设您有节点名称和它们之间的关系数据
        var nodes = ["刘完素", "张仲景", "金元四大家", "三消论", "伤寒直格"];
        var relationships = [
          {
            source: "金元四大家",
            target: "刘完素",
            relation: "姻亲"
          },
          {
            source: "刘完素",
            target: "张仲景",
            relation: ""
          },
          {
            source: "刘完素",
            target: "伤寒直格",
            relation: ""
          },
          {
            source: "刘完素",
            target: "三消论",
            relation: ""
          }
          // 其他关系...
        ];

        let FontSize = 12; // 字体大小
        let BorderWidth = 2; // 边框大小
        let SymbolSize = 80; // 尺寸距离
        let Distance = 10;
        // 不同尺寸下修改echarts的字体
        if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
          FontSize = 28;
          BorderWidth = 5;
          SymbolSize = 100;
          Distance = 33;
        } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
          FontSize = 28;
          BorderWidth = 4;
          SymbolSize = 90;
          Distance = 22;
        } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
          FontSize = 18;
          BorderWidth = 4;
          SymbolSize = 70;
          Distance = 22;
        }
        // 根据关系数据生成连接线
        var links = [];
        relationships.forEach(function (relationship) {
          // console.log(relationship,'relationship');
          var sourceIndex = nodes.indexOf(relationship.source);
          var targetIndex = nodes.indexOf(relationship.target);
          var linkObject = {
            source: sourceIndex,
            target: targetIndex
          };
          if (relationship.relation !== "") {
            linkObject.label = {
              show: true,
              formatter: function (params) {
                return relationship.relation;
              },
              color: "#2C2C2C",
              fontSize: FontSize - 2,
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [11, 20],
              borderRadius: 300,
              position: "middle",
              z: 10,
              distance: -(Distance + 1)
            };
          }
          links.push(linkObject);
          // if (sourceIndex !== -1 && targetIndex !== -1) {
          //     links.push({
          //         source: sourceIndex,
          //         target: targetIndex,
          //         label: {
          //             show: true,
          //             formatter: function(params) { // 使用函数动态生成标签内容
          //                 // console.log(params.data, 'aaaaaaaaaaaa');
          //                 return relationships.find(rel => rel.source === nodes[
          //                         params.data
          //                         .source] && rel.target === nodes[params
          //                         .data.target])
          //                     .relation;
          //             }, // 设置关系标签内容为"Child-Parent"
          //             color: '#2C2C2C',
          //             fontSize: FontSize - 2,
          //             backgroundColor: 'rgba(255, 255, 255, 1)',
          //             padding: [11, 20],
          //             position: 'middle', // 设置标签文本在线的中间位置上居中显示
          //             // bottom: -(FontSize+10),
          //             z: 10, // 设置标签的z轴高度，使其比连接线更高
          //             // offset: [0, 15] ,// 往下移动 10 像素
          //             distance: -(Distance + 1), // 将标签放置在连接线上
          //         }
          //     });
          // }
        });
        // 根据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), // 可以根据索引设置不同的颜色
              borderWidth: BorderWidth + 3,
              borderColor: getColorByIndex(index + 1),
              borderRadius: 30
            },
            symbolSize: SymbolSize + 50
          };
        });
        // 设置颜色
        function getColorByIndex(index) {
          var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
          return colors[index % colors.length];
        }
        var option;
        option = {
          backgroundColor: {
            type: "image",
            image: "/static/image/characterRelationBg.png",
            repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
            position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: "quinticInOut",
          series: [
            {
              type: "graph",
              layout: "none",
              symbolSize: SymbolSize, // 调整节点大小
              label: {
                show: true,
                color: "black", // 设置节点文字颜色为黑色
                fontSize: FontSize // 设置文字大小
              },
              // edgeSymbol: ['circle'],
              // edgeSymbolSize: [4, 10],
              edgeSymbol: ["circle", "arrow"], // 边的起始和结束箭头样式
              edgeSymbolSize: [20, 20], // 边的起始和结束箭头大小
              data: nodeData,
              links: links,
              lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0.3
              }
            }
          ]
        };

        // 将生成的连接线添加到echarts图表的option中
        option.series[0].links = links;
        option && myChart.setOption(option);
      });
    }
  },
  mounted() {
    this.innt();
  }
};
</script>

<style scoped>
view {
  color: #fff;
}

.NavTop {
  background-color: #0c274c;
  padding: 25rpx;

  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }

  .NavTopr {
    img {
      margin-right: 10rpx;
    }
  }
}

.Midde {
  /* background-color: #d1d6dc; */
  background-image: url(@/static/image/学派Bg.png);
  background-size: 100% 100%;
  color: #000;
  padding: 0.18rem 0.23rem 0;
  align-items: flex-start;
  height: 1.43rem;

  view {
    color: #000;
  }

  .MiddeBack {
    width: 0.6rem;
    height: 0.24rem;
    font-size: 0.12rem;
    padding: 0;
  }

  .Lists {
    li {
      width: 0.96rem;
      height: 0.3rem;
      border: 1px solid #597aa5;
      line-height: 0.3rem;
      text-align: center;
      font-size: 0.14rem;
    }
  }
}

.school1 {
  margin: 0 0.2rem;
}
</style>

 src/pages/academicGenres/detail.vue

New file
@@ -0,0 +1,436 @@
<template>
  <view class="bag">
    <!-- 顶部导航 -->
    <headNav idIndex="3" text="历代学术流派" />
    <view class="Midde flex">
      <!-- <view class="MiddeBack">返回</view> -->
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view class="flex flex-center flex-column">
        <view
          class=""
          style="
            font-weight: 900;
            margin-bottom: 0.2rem;
            font-size: 0.26rem;
            line-height: 1;
          "
          >{{ detailData.name }}
        </view>
        <ul class="flex Lists">
          <li style="background-color: #597aa5; color: #fff;cursor: pointer;">学派介绍</li>
          <li @click="ListClick" style="background-color: #fff; color: #597aa5;cursor: pointer;">
            学派图谱
          </li>
        </ul>
      </view>
      <view class=""></view>
    </view>
    <view class="Bottom">
      <view class="Bottom_top flex">
        <view class="BBimage">
          <view class="imgBox">
            <img :src="detailData.icon" />
          </view>
        </view>
        <view class="author">
          <ul>
            <li>代表性人物： {{ detailData.character || "-" }}</li>
            <li>重要医家： {{ detailData.skilledDoctor || "-" }}</li>
            <li>代表性著作： {{ detailData.works || "-" }}</li>
            <li>学派思想： {{ detailData.thought || "-" }}</li>
            <li>来源： {{ detailData.source || "-" }}</li>
          </ul>
        </view>
      </view>
      <view class="Bottom_Bot" style="color: #d1d1d1">
        <view class="flex flex-center csrTab1">
          <csr-tab
            class="csrTab"
            :value.sync="swiperIndex"
            :tabList="tabSwiperList"
          ></csr-tab>
        </view>
        <view
          v-if="swiperIndex == 0"
          class="swiperList"
          style="background-color: #ffffff; text-align: left; color: #000"
        >
          <view
            v-for="(briefItem, briefIndex) in detailData.brief"
            :key="briefIndex"
            style="margin-bottom: 0.4rem"
          >
            <view style="color: #333">{{ briefItem.content }}</view>
            <view
              style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
              >{{ briefItem.source }}</view
            >
          </view>
        </view>
        <view
          v-if="swiperIndex == 1"
          class="swiperList"
          style="background-color: #ffffff; text-align: left; color: #000"
        >
          <view
            v-for="(briefItem, briefIndex) in detailData.develop"
            :key="briefIndex"
            style="margin-bottom: 0.4rem"
          >
            <view style="color: #333">{{ briefItem.content }}</view>
            <view
              style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
              >{{ briefItem.source }}</view
            >
          </view>
        </view>
        <view
          v-if="swiperIndex == 2"
          class="swiperList"
          style="background-color: #ffffff; text-align: left; color: #000"
        >
          <view
            v-for="(briefItem, briefIndex) in detailData.achievement"
            :key="briefIndex"
            style="margin-bottom: 0.4rem"
          >
            <view style="color: #333">{{ briefItem.content }}</view>
            <view
              style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
              >{{ briefItem.source }}</view
            >
          </view>
        </view>
        <view
          v-if="swiperIndex == 3"
          class="swiperList"
          style="background-color: #ffffff; text-align: left; color: #000"
        >
          <view
            v-for="(briefItem, briefIndex) in detailData.literature"
            :key="briefIndex"
            style="margin-bottom: 0.4rem"
          >
            <view style="color: #333">{{ briefItem.content }}</view>
            <view
              style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
              >{{ briefItem.source }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getIntroduction, getImg } from "@/api/index.js";
export default {
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      swiperIndex: 0,
      detailData: {},
      tabSwiperList: [
        {
          TabControl: `学派概说`
        },
        {
          TabControl: `学派发展`
        },
        {
          TabControl: `成就影响`
        },
        {
          TabControl: `相关文献`
        }
      ],
      secretary: [
        {
          id: 1,
          name: "幅度萨芬",
          istrue: false
        },
        {
          id: 2,
          name: "幅度s萨芬",
          istrue: false
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    this.getData();
  },
  methods: {
    getData() {
      getIntroduction(Number(this.idIndex)).then((res) => {
        this.detailData = {
          name: res.object.school_NAME[0].content,
          icon:
            res.object.pictureList && res.object.pictureList.length > 0
              ? getImg(res.object.pictureList[0].filePath)
              : "",
          character: res.object.important_PEOPLE
            ? res.object.important_PEOPLE
                .map((item) => item.content2)
                .join("、")
            : "",
          skilledDoctor: res.object.important_PHYSICIAN
            ? res.object.important_PHYSICIAN
                .map((item) => item.content2)
                .join("、")
            : "",
          works: res.object.important_WORK
            ? res.object.important_WORK.map((item) => item.content).join("、")
            : "",
          thought: res.object.school_THOUGHT
            ? res.object.school_THOUGHT.map((item) => item.content).join("、")
            : "",
          source: res.object.bookList
            ? res.object.bookList.map((item) => item.name).join("、")
            : "",
          brief: res.object.school_INTRODUCTION
            ? res.object.school_INTRODUCTION.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          develop: res.object.school_DEVELOPMENT
            ? res.object.school_DEVELOPMENT.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          achievement: res.object.achievement_INFLUENCE
            ? res.object.achievement_INFLUENCE.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : [],
          literature: res.object.related_LITERATURE
            ? res.object.related_LITERATURE.map((item) => {
                return {
                  content: item.content,
                  source:
                    "出处：《" +
                    res.object.bookList.find((citem) => citem.id == item.bookId)
                      .name +
                    "》 P" +
                    item.pageNo
                };
              })
            : []
        };
        console.log(this.detailData);
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    ListClick(event) {
      uni.navigateTo({
        url: "/pages/academicGenres/chart?id=" + this.idIndex
      });
      this.secretary.forEach((item) => {
        if (item.id === event) {
          item.istrue = true;
        } else {
          item.istrue = false;
        }
      });
    }
  },
  mounted() {}
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

view {
  color: #fff;
}

.bag {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.NavTop {
  background-color: #0c274c;
  padding: 25rpx;

  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }

  .NavTopr {
    img {
      margin-right: 10rpx;
    }
  }
}

.Midde {
  background-image: url("../../static/image/学派Bg.png");
  background-size: 100% 100%;
  color: #000;
  padding: 0.18rem 0.23rem 0;
  align-items: flex-start;
  height: 1.43rem;

  view {
    color: #000;
  }

  .MiddeBack {
    width: 0.6rem;
    height: 0.24rem;
    font-size: 0.12rem;
    padding: 0;
  }

  .Lists {
    li {
      width: 0.96rem;
      height: 0.3rem;
      border: 1px solid #597aa5;
      line-height: 0.3rem;
      text-align: center;
      font-size: 0.14rem;
    }
  }
}

.Bottom {
  overflow: hidden;
  padding: 0.39rem 1.21rem !important;

  .Bottom_top {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 1.59rem;

    .BBimage {
      width: 4rem;
      height: 2rem;
      margin-right: 0.49rem;
    }

    .author {
      flex: 1;
      overflow: hidden;
      color: #000;

      li {
        line-height: 0.22rem;
        font-size: 0.14rem;
        margin-top: 0.18rem;
        color: #2c2c2c;
      }
    }
  }

  .BBimage {
    width: 50%;
    height: 350rpx;
  }
}

.Bottom_Bot {
  margin-top: 0.39rem;
}

.csrTab1 {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 0.3rem;
}

.csrTab {
  width: 40%;
  height: 0.4rem;
  font-size: 0.14rem;
  display: flex;
}

.Swiper {
  flex: 1;
}

.csrTab ::v-deep .uni-tab-bar {
  border: 0 !important;
  height: 0.02rem;
  background-color: #597aa5;
}

.csrTab ::v-deep .uni-tab-item {
  color: #9e9e9e !important;
  font-weight: 700;
  height: 0.4rem;
}

.csrTab ::v-deep .uni-tab-active {
  color: #597aa5 !important;
}

.swiperList {
  line-height: 0.28rem;
  font-size: 0.14rem;
  color: #2c2c2c;
  padding: 0.4rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.imgBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.imgBox img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>

 src/pages/academicGenres/index.vue

@@ -1,48 +1,8 @@
<template>
  <view>
  <view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
    <!-- 顶部导航 -->
    <headNav :idIndex="idIndex" text="历代学术流派" />
    <!-- 学派 -->
    <view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
      <ul class="flex">
        <li style="" v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
            :style="{
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
            }"
            style="
              font-weight: 500;
              border-radius: 0.3rem;
              padding: 0.06rem 0.15rem;
              color: #2c2c2c;
              font-size: 0.12rem;
              margin-top: 0.03rem;
              margin-right: 0.1rem;
              background-color: #fff;
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
                width: 0.12rem;
                height: 0.12rem;
                border-radius: 50%;
              "
            ></view>
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
        </li>
      </ul>
    </view>
    <view class="" style="background-color: #fff">
      <view id="line-chart" style="width: 100vw"></view>
    </view>
    <view id="line-chart" style="flex: 1;overflow: hidden;padding: 50px;"></view>
  </view>
</template>

@@ -53,62 +13,10 @@
export default {
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      // 朝代
      dynasty: [
        {
          name: "医经学派",
          color: "#90BBD8",
          id: 1
        },
        {
          name: "经方学派",
          color: "#EDD28B",
          id: 2
        },
        {
          name: "伤寒学派",
          color: "#CF746D",
          id: 3
        },
        {
          name: "河间学派",
          color: "#9CC27A",
          id: 4
        },
        {
          name: "攻邪学派",
          color: "#5B6CB9",
          id: 5
        },
        {
          name: "滋阴学派",
          color: "#8860A8",
          id: 6
        },
        {
          name: "易水学派",
          color: "#DE8E66",
          id: 7
        },
        {
          name: "温补学派",
          color: "#7FAC8C",
          id: 8
        }
      ],
      chartData: [
        {
          name: "经方学派",
          values: [30, 10, 100, 400, 30, 70]
        },
        {
          name: "伤寒学派",
          values: [23, 30, 140, 200, 230, 470, 230, 470]
        }
      ],
      xAxisData: []
      dynastyData: [],
      xAxisData: [],
      schoolList: []
    };
  },
  onLoad(options) {
@@ -120,50 +28,62 @@
    getDynastyData() {
      getDynasty().then((res) => {
        res.list.sort((a, b) => a.end - b.end);
        this.xAxisData = res.list.map((item) => item.dynasty);
        console.log(this.xAxisData);
        this.dynastyData = res.list;
        this.xAxisData = res.list.map((item) => item.dynastyChs);
        this.getData();
      });
    },
    getData() {
      getDynastyStatistics().then((res) => {
        console.log(res);
        this.schoolList = [];
        const schoolMap = {};
        for (let i = 0; i < res.list.length; i++) {
          const item = res.list[i];
          // 数据合并
          if (schoolMap[item.schoolId]) {
            schoolMap[item.schoolId].data.push({
              dynastyCode: item.dynastyCode,
              personNumber: item.personNumber
      });
    },
    SchoolClick(id) {
      uni.navigateTo({
        url: "/pages/interchannel/interchannel?id=" + this.idIndex
      });
    },
    // 随机色
    getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
          } else {
            schoolMap[item.schoolId] = {
              name: item.schoolName,
              data: [
                {
                  dynastyCode: item.dynastyCode,
                  personNumber: item.personNumber
      }
      return color;
    },
    renderChart() {
      const chart = echarts.init(document.getElementById("line-chart"));
      // 暂存一下
      let chartData1 = this.chartData;
      let color = [];
              ]
            };
          }
        }

      const series = this.chartData.map((item, i) => {
        color.push(this.getRandomColor());
        return {
          name: item.name,
        for (const key in schoolMap) {
          // 处理数量
          const personNumbers = [];
          for (let z = 0; z < this.dynastyData.length; z++) {
            const dynastyItem = this.dynastyData[z];
            const returnData = schoolMap[key].data.find(
              (item) => item.dynastyCode == dynastyItem.id
            );
            if (returnData) {
              personNumbers.push(returnData.personNumber);
            } else {
              personNumbers.push(0);
            }
          }
          // 处理学派
          this.schoolList.push({
            id: key,
            name: schoolMap[key].name,
          type: "line",
          data: item.values,
            data: personNumbers,
          smooth: 0.5,
          // 设置线条的颜色
          itemStyle: {
            normal: {
              color: "lineColor", // 改变折线点的颜色
              lineStyle: {
                color: color[i], // 改变折线颜色
                width: 3
                  width: 2
              }
            }
          },
@@ -171,104 +91,78 @@
          label: {
            show: true, // 显示标签
            position: "right", // 标签位置：右侧
            formatter: function (param) {
              if (chartData1[i].values.length - 1 === param.dataIndex) {
                return param.seriesName + "   " + param.value;
              fontSize: 18,
              color: "inherit",
              formatter: (param) => {
                if (param.dataIndex == this.dynastyData.length - 1) {
                  const data = this.schoolList.find(
                    (item) => item.name == param.seriesName
                  ).data;
                  return param.seriesName + " （" + eval(data.join("+")) + "）";
              } else {
                return "";
              }
            },
            color: color[i]
          }
        };
            }
      });
        }

      console.log(series, "series");

        this.renderChart();
      });
    },
    renderChart() {
      const chart = echarts.init(document.getElementById("line-chart"));
      const option = {
        // legend: {
        //     data: this.chartData.map(item => item.name),
        // },
        zoom: 8, // 这里可以根据需要调整缩放级别

        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.schoolList.map((item) => item.name)
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisData,
          axisLabel: {
            fontSize: 32 // 设置 x 轴上文字的字体大小为 12 像素
            fontSize: 16 // 设置 x 轴上文字的字体大小为 12 像素
          },
          axisLine: {
            lineStyle: {
              width: 4 // 设置x轴线条宽度为2像素
              width: 2 // 设置x轴线条宽度为2像素
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 32 // 设置 x 轴上文字的字体大小为 12 像素
            fontSize: 16 // 设置 x 轴上文字的字体大小为 12 像素
          },
          axisLine: {
            lineStyle: {
              width: 10 // 设置x轴线条宽度为2像素
              width: 2 // 设置x轴线条宽度为2像素
            }
          }
        },
        series: series,
        // 其他配置项...
        series: this.schoolList,
        textStyle: {
          fontSize: 30 // 设置全局文字的字体大小
          fontSize: 16 // 设置全局文字的字体大小
        }
      };

      chart.setOption(option);
      chart.on("click", (params) => {
        const data = this.schoolList.find(
          (item) => item.name == params.seriesName
        );
        uni.navigateTo({
          url: "/pages/academicGenres/detail?id=" + data.id
        });
      });
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style>
view {
  color: #fff;
}

.school {
}

.bag {
  height: 100vh;
  background-color: #fff;
}

.NavTop {
  background-color: #0c274c;
  padding: 25rpx;

  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }

  .NavTopr {
    img {
      margin-right: 10rpx;
    }
  }
}

.mImage {
  width: 100%;
  height: 40rpx;

  img {
    vertical-align: top;
  }
}

#line-chart {
  height: 6rem;
}

 src/pages/interchannel/interchannel.vue

File was deleted

 src/pages/repository/repository.vue

@@ -301,7 +301,7 @@
            },
            // 返回上一页
            goBack() {
                uni.navigateBack();
                this.$router.go(-1);
            },
            // 返回顶部
            scrollToTop() {

 src/pages/zhongyi/zhongyi.vue

@@ -609,10 +609,7 @@
            },
            // 返回按钮 
            goBack() {
                // uuni.redirectTo();
                uni.redirectTo({
                    url: '/pages/index/index'
                })
                this.$router.go(-1);
            },
        }
    }

 src/static/initialize.css

@@ -114,3 +114,11 @@
  width: 100%;
  height: 100%;
}

uni-page-wrapper {
  width: 100%;
}
uni-page-body {
  width: 100%;
  height: 100%;
}

 src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue

@@ -1,21 +1,44 @@
<template>
    <view :class="{'uni-scroll-tab': scroll === true }" class="uni-tab ">
    <view
      v-for="(tab, index) in tabList"
      :key="index"
      :class="{
        'uni-tab-active': index === value,
        'uni-tab-scroll-item': scroll === true,
        ' uni-tab-scroll-active': index === value && scroll === true
      }"
      :style="[
        {
          color: index === value ? activeColor : defaultColor,
          backgroundColor: bgColor
        }
      ]"
            style="cursor: pointer;"
      @tap="itemClick(index, tab)"
      class="uni-tab-item"
    >
      <span
        v-if="tab.icon != undefined"
        class="iconfont mr5"
        :class="tab.icon"
      ></span>
        
        <view v-for="(tab,index) in tabList" :key="index"
            :class="{ 'uni-tab-active': index === value, 'uni-tab-scroll-item': scroll === true, ' uni-tab-scroll-active': index === value && scroll === true }"
            :style="[{color:index === value ? activeColor : defaultColor,backgroundColor: bgColor}]"
            @tap="itemClick(index,tab)" class="uni-tab-item">
            <span v-if="tab.icon != undefined" class="iconfont mr5" :class="tab.icon"></span>

            <text>{{rangeKey == '' ? tab.TabControl : tab[rangeKey]}}</text>
      <text>{{ rangeKey == "" ? tab.TabControl : tab[rangeKey] }}</text>
        </view>
        <view v-if="!scroll" :style="[{ right: barRight + '%', left : barLeft + '%', borderColor: activeColor }]"
            class="uni-tab-bar" :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"></view>
    <view
      v-if="!scroll"
      :style="[
        { right: barRight + '%', left: barLeft + '%', borderColor: activeColor }
      ]"
      class="uni-tab-bar"
      :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"
    ></view>
    </view>
</template>
<script>
    export default {
        name: 'uni-tab',
  name: "uni-tab",
        data() {
            return {
                average: 0,
@@ -35,36 +58,41 @@
                    return [];
                }
            },
            bgColor: { //背景颜色
    bgColor: {
      //背景颜色
                type: String,
                default () {
                    return '#FFFFFF';
        return "#FFFFFF";
                }
            },
            defaultColor: { //默认未选中文字颜色
    defaultColor: {
      //默认未选中文字颜色
                type: String,
                default () {
                    return '#636363';
        return "#636363";
                }
            },
            activeColor: { //选中时文字颜色 线条颜色
    activeColor: {
      //选中时文字颜色 线条颜色
                type: String,
                default () {
                    return '#000000';
        return "#000000";
                }
            },
            rangeKey: { // 当tabList为对象时 显示指定下标值
    rangeKey: {
      // 当tabList为对象时 显示指定下标值
                type: String,
                default () {
                    return '';
        return "";
                }
            },
            scroll: { //横向滑动
    scroll: {
      //横向滑动
                type: Boolean,
                default () {
                    return false;
                }
            },
    }
        },
        computed: {
            barLeft() {
@@ -72,9 +100,8 @@
            },
            barRight() {
                let index = this.tabList.length - this.value - 1;
                console.log(this.tabList.length,index * this.average);
                return index * this.average;
            },
    }
        },
        created() {
            this.average = 100 / this.tabList.length;
@@ -88,8 +115,8 @@
                    this.back = false;
                }
                // this.value = index;
                this.$emit('update:value', index);
                this.$emit('change', {
      this.$emit("update:value", index);
      this.$emit("change", {
                    tab: tab
                });
            }
@@ -122,7 +149,6 @@
        }

        .uni-tab-active {
			
            color: #1e9fff;
        }

@@ -139,11 +165,13 @@
        }

        .uni-tab-bar-forward {
            transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1),
      left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
        }

        .uni-tab-bar-backward {
            transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s,
      left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
        }
    }


 src/utils/Crypto.js

@@ -42,3 +42,13 @@
    var decryptedStr = CryptoJS.enc.Utf8.stringify(decryptedData);
    return decryptedStr;
}

// 随机色
const getRandomColor = () => {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

 src/utils/request/req1.js

@@ -1,11 +1,12 @@
// 封装网络请求
import axios from "axios";
import { Message } from "element-ui";
export const baseUrl = "http://icmm.test.xyinde.com/api";
// 创建请求实例
const req = axios.create({
  // baseURL: '/api'
  // baseURL: '/account/verification'
  baseURL: "http://icmm.test.xyinde.com/api",
  baseURL: baseUrl,
  timeout: 10000
});