TCM_CharacterLibrary.git

<template>
    <view>
        <headNav />
        <el-button class="getBack" @click="getBack">返回</el-button>
        <view class="" style="position: relative;">
            <!-- 地图 -->
            <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view>
            <!-- 详情 -->
            <el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
                <view class="font-family" style="font-size: .26rem;padding-top: .16rem;font-weight: bold;">李时珍</view>
                <ul
                    style="border-bottom: .01rem solid #D8D8D8; padding:  .16rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>出生于蕲州</li>
                    <li>1518年07月03日 蕲州（今湖北蕲州镇）</li>
                </ul>
                <ul style="margin: .31rem 0 .11rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>活动名称：撰写《本草纲目》</li>
                    <li>活动地点：浙江省 </li>
                    <li>活动区间：浙江省杭州市 </li>
                    <li>活动描述：撰写《本草纲目》 </li>
                    <li>参与人员：李时珍 </li>
                    <li>来源组成：撰写《本草纲目》</li>
                </ul>
                <img style="width: 100%;height: 2rem;"
                    src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
                    alt="" />
                <div class="box" style="width: 80%;">
                    <span class="span" :style="{'marginLeft': spanML+'rem'}">{{span}}年</span>
                    <div class="scales">
                        <view v-for="(item,index) in yearArr" @click="scaleClick(index)" class="scale"
                            :data-index="index"></view>
                    </div>
                    <div class="MX"></div>
                    <div class="cursor" :style="{'marginLeft': cursorML+'rem'}"></div>
                </div>
            </el-dialog>
        </view>
    </view>
</template>
 
<script>
    import * as echarts from 'echarts';
    import 'echarts/extension/bmap/bmap';
    import {
        loadBMap
    } from "../../static/map.js"
 
    export default {
        data() {
            return {
                menuNav: false,
                sliderValue: 2024,
                currentYear: 2024,
                sliderValue: 50,
                MX: document.querySelector(".MX"),
                box: document.querySelector(".box"),
                span: '',
                yearArr: [],
                yearIndex: 0,
                spanML: 0,
                cursorML: -.05
            }
        },
 
        mounted() {
 
            // 时空地图
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
            this.$nextTick(() => {
                this.aaa()
            })
        },
        methods: {
            // 返回按钮
            getBack() {
                uni.navigateBack();
            },
            aaa() {
                // 渲染母线
                this.addArr()
            },
            addArr(start = 894, end = 900) {
                for (let i = start; i <= end; i++) {
                    this.yearArr.push(i)
                }
                this.span = this.yearArr[0]
                this.$nextTick(() => {
                    // this.creatMX(this.yearArr.length - 1)
                    // this.creatScale(this.yearArr)
                })
            },
            creatMX(len) {
                console.log(len);
                let width = len * 50 + 10
                // this.MX.style.width = `${width}px`
                // this.scales.style.width = `${width}px`
                // console.log(this.box.style.width);
            },
            creatScale() {
                // for (let i = 0; i < this.yearArr.length; i++) {
                //     let scale = document.createElement("div")
                //     scale.className = "scale"
                //     scale.setAttribute("index", i)
                //     scale.addEventListener("click", this.scaleClick)
                //     scales.appendChild(scale)
                // }
                // console.log(arr[0]);
 
            },
 
            handleSliderChange(value) {
                this.currentYear = value;
            },
            scaleClick(i) {
                // let i = Number(this.getAttribute("data-index"))
                console.log(i, this.cursorML);
 
                if (i > this.yearIndex) {
 
                    this.cursorML += (i - this.yearIndex + +('0.0' + this.yearIndex)) / 1.9
                    // this.spanML += 50 * (i - this.yearIndex)
                    console.log((i - this.yearIndex + 0.2), 'aaaa');
 
                } else {
                    this.cursorML -= (this.yearIndex - i) / 2 + 0.04
                    // this.spanML -= 50 * (this.yearIndex - i)
                    console.log(this.yearIndex, i, 'bbbb');
                }
                this.yearIndex = i
            },
            // ________________________
            // 时空地图
            spaceTime() {
                var chartDom = document.getElementById('spaceTime');
                var myChart = echarts.init(chartDom);
                var option;
 
                const data = [{
                        name: '海门',
                        value: 9
                    },
                    {
                        name: '金昌',
                        value: 19
                    },
                    {
                        name: '泉州',
                        value: 21
                    },
                    {
                        name: '衢州',
                        value: 177
                    },
                    {
                        name: '廊坊',
                        value: 193
                    },
                    {
                        name: '菏泽',
                        value: 194
                    },
                    {
                        name: '合肥',
                        value: 229
                    },
                    {
                        name: '武汉',
                        value: 273
                    },
                    {
                        name: '啊三大矿及说到底是封建士大夫大师傅就',
                        value: 279
                    }
                ];
                const geoCoordMap = {
                    海门: [121.15, 31.89],
                    鄂尔多斯: [109.781327, 39.608266],
                    招远: [120.38, 37.35],
                    平顶山: [113.29, 33.75],
                    邢台: [114.48, 37.05],
                    德州: [116.29, 37.45],
                    济宁: [116.59, 35.38],
                    荆州: [112.239741, 30.335165],
                    宜昌: [111.3, 30.7],
                    义乌: [120.06, 29.32],
                    丽水: [119.92, 28.45],
                    洛阳: [112.44, 34.7],
                    秦皇岛: [119.57, 39.95],
                    株洲: [113.16, 27.83],
                    石家庄: [114.48, 38.03],
                    莱芜: [117.67, 36.19],
                    常德: [111.69, 29.05],
                    保定: [115.48, 38.85],
                    湘潭: [112.91, 27.87],
                    金华: [119.64, 29.12],
                    岳阳: [113.09, 29.37],
                    长沙: [113, 28.21],
                    衢州: [118.88, 28.97],
                    廊坊: [116.7, 39.53],
                    菏泽: [115.480656, 35.23375],
                    合肥: [117.27, 31.86],
                    武汉: ['你好', 30.52],
                    啊三大矿及说到底是封建士大夫大师傅就: [125.03, 46.58]
                };
                const convertData = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339], // 调整地图中心点位置
                        zoom: 6, // 设置地图缩放级别
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                    featureType: 'water',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'land',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#f3f3f3'
                                    }
                                },
                                {
                                    featureType: 'manmade',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'local',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'labels',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'boundary',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'building',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'label',
                                    elementType: 'labels.text.fill',
                                    stylers: {
                                        color: '#999999'
                                    }
                                }
                            ]
                        }
                    },
                    series: [{
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(
                            data
                            .sort(function(a, b) {
                                return b.value - a.value;
                            })
                            .slice(0, 6)
                        ),
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            padding: [4, 8],
                            formatter: function(params) { // 使用函数动态生成标签内容
                                // 设置文字多少个后面显示省略号
                                if (params.data.name.length > 6) {
                                    return params.data.name.substring(0, 6) + '...';
                                } else {
                                    return params.data.name;
                                }
                            },
                            show: true,
                            fontSize: 12,
                            borderRadius: 30,
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        emphasis: {
                            scale: true
                        },
                        zlevel: 1
                    }]
                };
                let menuNav1 = this.menuNav
                let menuNav2 = this.menuNav
                // 设置点击事件监听
                myChart.on('click', (params) => {
                    // menuNav2 = !menuNav1
                    // console.log(menuNav);
                    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) {
                // 修改 Vue 组件的数据，例如显示菜单导航
                this.menuNav = !this.menuNav
                // 时空地图的数据
                console.log(Arr);
            }
        }
    }
</script>
 
<style scoped>
    .getBack {
        position: fixed;
        width: .6rem;
        height: .24rem;
        top: 1rem;
        left: .24rem;
        z-index: 99999;
        font-size: .12rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2C2C2C;
        border-color: #9E9E9E;
        border-radius: 0;
        font-weight: 700;
    }
 
    .box {
        position: absolute;
        bottom: 10%;
        left: 50%;
        height: .3rem;
        transform: translate(-50%, -50%);
    }
 
    .MX {
        height: 20px;
        background-color: #ccc;
    }
 
    .scale {
        width: 3px;
        height: 50px;
        background-color: #ccc;
        cursor: pointer;
    }
 
    .scales {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
 
    .span {
        font-size: 25px;
        color: rgb(0, 68, 255);
        margin-left: -34px;
    }
 
    .cursor {
        position: relative;
        width: 25px;
        height: 30px;
        background-color: rgb(0, 68, 255);
        margin-top: 30px;
        margin-left: -12.5px;
    }
 
    .cursor:before {
        content: "";
        position: absolute;
        top: -20px;
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 20px solid rgb(0, 68, 255);
    }
 
    ::v-deep .particulars {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
    }
 
    .particulars ::v-deep .el-dialog {
        margin: 0 !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 4rem;
        height: 100%;
 
    }
 
    .particulars ::v-deep .el-dialog__header {
        display: none;
    }
 
    .particulars ::v-deep .el-dialog__body {
        padding: .26rem .23rem .26rem .27rem;
        color: #2C2C2C !important;
        position: relative;
        height: 100%;
    }
</style>