TCM_CharacterLibrary.git

<template>
    <view>
        <headNav idIndex="1" text="中医人物数据库" />
        <!-- 高级搜索 -->
        <view style="margin: .35rem 0 .16rem 0; ">
            <advancedSearch @onSearch="onSearch" :from="From" placehold="输入姓名/别名/朝代/传主职业搜索" />
        </view>
        <!-- 热门搜索 -->
        <view class="flex flex-center hotSearch">
            热门搜索：
            <ul class="flex" style="margin-right: 10rpx;">
                <li @click="dynastyBottomClick(item)" class="cursor" v-for="item in hot" :key="item.id" style="">
                    {{item.name}}
                </li>
            </ul>
        </view>
        <!-- 关系表地图 -->
        <view id="relation" style="margin-top: .2rem; height: 70vh;width: 100%;"></view>
        <!-- 朝代 -->
        <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
            <ul class="flex">
                <li @click="dynastyBottomClick(item)" v-for="(item,index) in dynasty" :key="item.id">
                    <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
                        {{item.coord}}
                    </view>
                    <view class="flex flex-center font-family"
                        style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
                        :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem','background':dynastyColor==item.id?'#244A7B':'#597AA5'}">
                        {{item.name}}
                    </view>
                </li>
            </ul>
        </view>
    </view>
</template>
 
<script>
    import {
        getDataStatistics,
        getHotSearch,
        getFuzzySearch
    } from '@/api/index.js'
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                // echarts数据
                nodes: ['李时珍'],
                // echarts两者的关系
                relationships: [{
                        source: '李时珍',
                        target: '成就',
                        relation: '好友'
                    },
                    {
                        source: '李时珍',
                        target: '传承',
                        relation: '好1友'
                    },
                    {
                        source: '李时珍',
                        target: '亲友',
                        relation: '好2友'
                    },
                    {
                        source: '李时珍',
                        target: '著作',
                        relation: '好2友'
                    },
                    // 其他关系...
                ],
                // 高级搜索
                From: {
                    from: [{
                        type: 'input',
                        label: '姓名',
                        name: 'name',
                        value: ''
                    }, {
                        type: 'input',
                        label: '别名',
                        name: 'alias',
                        value: ''
                    }, {
                        type: 'number',
                        label: 'inst',
                        name: 'inst',
                        value: ''
                    }, {
                        type: 'input',
                        label: 'location',
                        name: 'location',
                        value: ''
                    }, {
                        type: 'input',
                        label: 'office',
                        name: 'office',
                        value: ''
                    }, {
                        type: 'number',
                        label: 'page',
                        name: 'page',
                        value: ''
                    }, {
                        type: 'number',
                        label: 'pageSize',
                        name: 'pageSize',
                        value: ''
                    }, {
                        type: 'input',
                        label: 'period',
                        name: 'period',
                        value: ''
                    }, {
                        type: 'input',
                        label: 'sdId',
                        name: 'sdId',
                        value: ''
                    }, ]
                },
                // 下面的朝代1
                dynastyColor: 1,
                // 朝代
                dynasty: [{
                        name: '夏朝',
                        coord: '2070BC',
                        id: 1
                    },
                    {
                        name: '商朝',
                        id: 2,
                        coord: '1600BC',
                    },
                    {
                        name: '西周',
                        id: 3,
                        coord: '1600BC'
                    },
                    {
                        name: '春秋战国',
                        id: 4,
                        coord: '770BC'
                    },
                    {
                        name: '秦朝',
                        id: 5,
                        coord: '221BC'
                    },
                    {
                        name: '汉朝',
                        id: 6,
                        coord: '202BC'
                    },
                    {
                        name: '三国两晋南北朝',
                        id: 7,
                        coord: '184'
                    },
                    {
                        name: '隋朝',
                        id: 8,
                        coord: '581'
                    },
                    {
                        name: '唐朝',
                        id: 9,
                        coord: '618'
                    },
                    {
                        name: '五代十国',
                        id: 10,
                        coord: '907'
                    },
                    {
                        name: '辽夏金',
                        id: 11,
                        coord: '907'
                    },
                    {
                        name: '宋朝',
                        id: 12,
                        coord: '960'
                    },
                    {
                        name: '元朝',
                        id: 13,
                        coord: '1271'
                    },
 
                    {
                        name: '明朝',
                        id: 14,
                        coord: '1368'
                    },
                    {
                        name: '清朝',
                        id: 15,
                        coord: '1636'
                    }
                ],
                // 热门搜索
                hot: [{
                        id: 1,
                        name: '李时珍',
                        bgColor: false
                    },
                    {
                        id: 2,
                        name: '李时珍2',
                        bgColor: false
                    },
                    {
                        id: 3,
                        name: '李时珍3',
                        bgColor: false
                    },
                ],
            }
        },
 
        methods: {
 
            // 关系图谱
            relation() {
                var chartDom = document.getElementById('relation');
                var myChart = echarts.init(chartDom);
                // 假设您有节点名称和它们之间的关系数据
                var nodes = this.nodes;
                var relationships = this.relationships
 
                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) {
                    var sourceIndex = nodes.indexOf(relationship.source);
                    var targetIndex = nodes.indexOf(relationship.target);
                    // console.log(sourceIndex, targetIndex);
                    if (sourceIndex !== -1 && targetIndex !== -1) {
                        links.push({
                            source: sourceIndex,
                            target: targetIndex,
                            label: {
                                show: true,
                                formatter: function(params) { // 使用函数动态生成标签内容
                                    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: [3, 8],
                                borderRadius: 30,
                                position: 'middle', // 设置标签文本在线的中间位置上居中显示
                                // bottom: -(FontSize+10),
                                z: 10, // 设置标签的z轴高度，使其比连接线更高
                                // offset: [0, 15] ,// 往下移动 10 像素
                                distance: -(Distance + 1), // 将标签放置在连接线上
                            }
                        });
                    }
 
                });
                console.log(links);
                // 根据nodes动态生成节点数据
                var nodeData = nodes.map(function(node, index) {
                    return {
                        name: node,
                        x: Math.random() * 2000, // 设置随机x坐标位置
                        y: Math.random() * 600, // 设置随机y坐标位置
                        itemStyle: {
                            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
                            borderWidth: BorderWidth,
                            borderColor: getColorByIndex(index + 1)
                        }
                    };
                });
                // 设置颜色
                function getColorByIndex(index) {
                    var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
                    return colors[index % colors.length];
                }
                var option;
                option = {
                    title: {
                        // text: '书中最常提到的100位人物',
                        subtext: '书中最常提到的100位人物',
                        left: 'center',
                        top: FontSize + 10,
                        // textStyle: {
                        //     fontSize: FontSize // 设置标题文字大小为 18px
                        // },
                        subtextStyle: {
                            fontSize: FontSize, // 设置副标题文字大小为 14px
                            color: '#2C2C2C'
                        }
                    },
                    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],
                        data: nodeData,
                        links: links,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0.3
                        }
                    }]
                };
 
                // 将生成的连接线添加到echarts图表的option中
                option.series[0].links = links;
 
 
                // 设置点击事件监听
                myChart.on('click', (params) => {
                    // menuNav2 = !menuNav1
                    // console.log(params);
                    if (params.componentType === 'series') {
                        var dataName = params.data.name; // 获取点击的数据名称
                        var dataValue = params.data.value; // 获取点击的数据值
                        // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
                        // console.log('点击了', dataName, '数据，数值为', dataValue);
                        // 这里可以编写触发时间获取对应数据信息的逻辑
                        this.spaceTimeArr(params)
                    }
                })
                option && myChart.setOption(option);
            },
            // 关系图
            spaceTimeArr(Arr) {
                // 关系图的数据
                console.log(Arr);
                // uni.navigateTo({
                //     url: '/pages/repository/repository'
                // })
            },
            // 获取朝代echarts的数据
            async echartsArr() {
                await getDataStatistics().then((res) => {
                    console.log(res.object);
                    res.object.dynastyStatistic.details.map((item, index) => {
                        // this.dynasty.id = item.dynastyId
                        // this.dynasty.name = item.dynastyName
                        // this.dynasty.coord = item.count
                        this.dynasty[index].id = item.dynastyId;
                        this.dynasty[index].name = item.dynastyName;
                        this.dynasty[index].coord = item.count;
                    })
                    console.log(this.dynasty, 'sdfsfd');
                })
            },
            // 热门搜索
            async hotSearch() {
                await getHotSearch().then(res => {
                    console.log(res, 'saaadfds');
                    this.hot= Object.keys(res.object).map(key => {
                      return { id: parseInt(key), name: res.object[key] };
                    })
                    // this.hot = res.list
                })
            },
            async onSearch(val) {
                console.log(val);
                await getFuzzySearch(val.text).then(res => {
                    if (res.list) {
                        this.nodes = []
                        this.nodes[0] = res.list[0].name1
                        this.nodes[1] = res.list[0].name2
                        for (let i = 1; i < res.list.length; i++) {
                            this.nodes.push(res.list[i].name2);
                        }
                        this.nodes = [...new Set(this.nodes)]
                        this.relationships = this.nodes.slice(1).map(item => {
                            return {
                                source: this.nodes[0],
                                target: item,
                                relation: ''
                            };
                        });
 
                    } else {
                        alert('没有搜索到数据')
                    }
                    console.log(res);
                })
                this.relation()
 
            },
            // 点击下面的朝代按钮
            dynastyBottomClick(item) {
                this.dynastyColor = item.id
                this.onSearch({
                    text: item.name
                })
            },
        },
        mounted() {
            // 关系图谱
            this.relation()
            this.echartsArr()
            this.hotSearch()
            // 监听窗口大小变化
            window.addEventListener('resize', this.relation);
        }
    }
</script>
 
<style>
    @media screen and (min-width:2560px)and (max-width:3840px) {}
 
    @media screen and (min-width:1366px) and (max-width:1920px) {}
 
    ::v-deep .uni-input-placeholder {
        line-height: 1;
        font-size: .12rem;
    }
 
    ::v-deep .ffff {
        border-radius: .5rem;
    }
 
    ::v-deep .widget_button {
        border-radius: .5rem;
        margin: .02rem;
    }
 
    .hotSearch {
        font-size: .12rem;
        color: #2C2C2C;
 
        li {
            color: #244A7B;
            margin: 0 .1rem;
            color: #244A7B;
        }
    }
</style>