dawan_bigScreen/src/views/map/index.vue

<template>
  <div class="map-wrapper">
    <div class="map-content">
      <!-- 左边图书馆基本信息 -->
      <div class="lib-info">
        <div class="database-title big-title" style="font-size: .47rem !important;">{{ libCurrent && libCurrent.name }}</div>
        <div class="lib-content">
          <div style="width: 5.175rem; height: 3rem; overflow: hidden;">
            <swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption">
              <swiper-slide v-for="(item,index) in displayedImages" :key="index">
                <div class="book-img" style="width: 100%; height: 3rem;">
                  <img :src="item.cover" :onerror="defaultImg" style="width: 100%;">
                </div>
              </swiper-slide>
              <!-- 标页码 -->
              <div slot="pagination" class="swiper-pagination" />
            </swiper>
          </div>
          <ul class="lib-cont-item lib-cont01">
            <li>
              <img src="@/assets/images/map_18.png" alt="">
              <p>
                <span>藏书量</span>
                <span>{{ libCurrent && libCurrent.GCL }}<i>本</i></span>
              </p>
            </li>
            <li>
              <img src="@/assets/images/map_20.png" alt="">
              <p>
                <span>办证量</span>
                <span>{{ libCurrent && (libCurrent.countCard ? libCurrent.countCard : libCurrent.readerIdNum) }}<i>人</i></span>
              </p>
            </li>
          </ul>
          <ul class="lib-cont-item lib-cont02">
            <li>
              <img src="@/assets/images/map_28.png" alt="">
              <p>
                <span>占地面积</span>
                <span>{{ libCurrent && libCurrent.occupationArea }}<i>平方米</i></span>
              </p>
            </li>
          </ul>
          <div ref="scrollInfo" class="scroll-container">
            <div ref="marquee" class="lib-text" v-html="libCurrent && libCurrent.explain" />
          </div>
        </div>
      </div>
      <!-- map -->
      <div ref="chart" style="width: 920px; height: 924px;  z-index: 999; border:1px solid rgba(0, 0, 0, 0);" />
      <div class="map-hx-bg">
        <div class="map-hx-small" />
        <div class="map-hx-big" />
      </div>
      <!-- 右边排行榜 -->
      <div class="read-num">
        <div class="database-title">读者统计</div>
        <div class="online">
          <p>本年累计办证人数</p>
          <p class="num"><span>{{ cardTotal }}</span><i>人</i></p>
        </div>
        <div class="lending-ranking" style="padding: 0;">
          <!-- <h5>借阅Top10</h5> -->
          <div class="database-title" style="margin-bottom: 20px;">读者借阅排行榜</div>
          <div class="ranking-cont" style="margin: 0.25rem 0.375rem 0 0.3125rem;">
            <ul class="ranking-title">
              <li style="width: 0.8rem;">排名</li>
              <li style="width: 1.25rem; text-align: left; ">姓名</li>
              <li style="flex:1;" />
              <li style="width: 1.75rem; text-align: right; padding-right: .25rem;">借阅次数</li>
            </ul>
            <ul class="ranking-list" style="padding-top: 10px;">
              <li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }" style="font-size: .28rem !important; line-height: 36px !important;">
                <div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
                <div style="width: 1.25rem; text-align: left; ">{{ item.RDNAME }}</div>
                <div class="ranking-progress" style="flex:1; align-self: center;">
                  <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
                </div>
                <div style="width: 1.75rem; text-align: right; padding-right: .25rem;">{{ item.TOTALNUM }}<i>次</i></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FetchLibBookTotal, FetchUsertotal, FetchLibcodeDetails, FetchLibcodeResouceDetails, FetchReadRanking, FetchLendingTotal } from '@/api/library'
import mapJson from '@/assets/json/qy.json'
import libJson from '@/assets/json/lib.json'
import { debounce } from 'lodash' // js工具类,按需加载
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'Map',
  components: {
    swiper, swiperSlide
  },
  data() {
    return {
      currentHover: -1,
      timeTicket: null,
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      count: 0,
      len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
      libALLNum: [],
      libInfoData: [],
      libIndex: 0,
      libCurrent: null,
      swiperKey: 1,
      currentIndex: 0,
      displayedImages: [],
      libImg: [],
      swiperOption: null,
      seriesData: [],
      mapImg: require('../../assets/images/map-bg2.png'),
      cardTotal: 0,
      rankingData: [],
      rankingWithPercentage: [],
      rankInterval: null,
      timer: null,
      position: 0,
      speed: 2 // 滚动速度，可根据需要调整
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  beforeDestroy() {
    this.destroy()
  },
  created() {
    this.getLibBookTotal()
    this.getReadRanking()
    this.getLendingTotal()
  },
  activated() {
    this.getLibBookTotal()
    if (this.rankingData.length !== 0) {
      this.currentHover = -1
      this.rankInterval = setInterval(() => {
        this.currentHover = (this.currentHover + 1) % this.rankingData.length
      }, 1000)
    }
    this.$nextTick(() => {
      window.addEventListener('resize', debounce(this.resize, 2000))
    })
  },
  deactivated() {
    this.destroy()
  },
  mounted() {
  },
  methods: {
    destroy() {
      window.removeEventListener('resize', this.resize)
      clearTimeout(this.timeTicket)
      clearInterval(this.rankInterval)
      clearInterval(this.timer)
      // localStorage.setItem('libIndexItem', this.libIndex)
      // localStorage.setItem('libCurrentItem', this.libCurrent)
      localStorage.setItem('countItem', this.count)

      this.rankInterval = null
      this.timer = null
      this.timeTicket = null
    },
    startScrolling() {
      this.$nextTick(() => {
        const containerHeight = this.$refs.scrollInfo.offsetHeight
        const contentHeight = this.$refs.marquee.offsetHeight
        // 设置 CSS 变量 --container-height，以便在 CSS 中使用
        this.$refs.marquee.parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
        if (contentHeight > containerHeight) {
          this.$refs.marquee.classList.add('lib-animation')
        } else {
          this.$refs.marquee.classList.remove('lib-animation')
        }
      })
    },
    getReadRanking() {
      const currentDate = new Date() // 获取当前日期
      currentDate.setDate(currentDate.getDate() - 30) // 将当前日期减去30天
      const year = currentDate.getFullYear() // 获取年份
      const month = currentDate.getMonth() + 1 // 获取月份（注意月份从0开始，需要加1）
      const day = currentDate.getDate() // 获取日期
      const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`

      const params = {
        'libcode': this.libcode,
        'starttime': formattedDate,
        'endtime': this.getFormattedDate(new Date()),
        'rownum': 10,
        'nordtype': 'QYTSG_E'
      }
      FetchReadRanking(params).then(res => {
        const result = JSON.parse(res.data)

        if (result.success && result.resultlist.length > 0) {
          this.rankingData = result.resultlist.sort((a, b) => b.TOTALNUM - a.TOTALNUM).slice(0, 10)
          this.rankingDataComputed()

          this.rankInterval = setInterval(() => {
            this.currentHover = (this.currentHover + 1) % this.rankingData.length
          }, 1000)
        } else {
          throw new Error('Failed')
        }
      }).catch(error => {
        console.error('Error', error)
        return null
      })
    },
    rankingDataComputed() {
      const firstPlaceNum = this.rankingData[0].TOTALNUM
      this.rankingWithPercentage = this.rankingData.map(item => {
        if (item.RDNAME.length === 2) {
          // 截取name 字符串截取第一个字符，
          item.RDNAME = item.RDNAME.substring(0, 1) + ' * '
        } else if (item.RDNAME.length === 3) {
          // 截取第一个和第三个字符
          item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + item.RDNAME.substring(2, 3)
        } else if (item.RDNAME.length > 3) {
          // 截取第一个和大于第4个字符
          item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + ' * ' + item.RDNAME.substring(3, item.RDNAME.length)
        }
        const percentage = (item.TOTALNUM / firstPlaceNum) * 100
        return { ...item, percentage }
      })
    },
    getLendingTotal() {
      FetchLendingTotal().then(res => {
        const result = JSON.parse(res.data)
        if (result.success & result.resultlist.length !== 0) {
          // BZL_YEAR  本年办证人数
          this.cardTotal = result.resultlist.filter(item => item.LIBCODE === 'GD').reduce((acc, obj) => acc + obj.BZL_YEAR, 0)
        } else {
          this.cardTotal = 0
        }
      }).catch(error => {
        console.error('Error', error)
      })
    },
    // 馆藏量
    getLibBookTotal() {
      const params = {
        'libcode': this.libcode,
        'starttime': '2000-01-01',
        'endtime': '2034-01-01'
      }

      // 先初始化馆藏量数据，避免后续找不到对应属性
      this.libALLNum = []

      FetchLibBookTotal(params)
        .then(res => {
          const result = JSON.parse(res.data)
          if (result.success && result.resultlist.length !== 0) {
            this.libALLNum = result.resultlist
          }
          return this.getUserTotal()
        })
        .then(userTotals => {
          console.log('userTotal', userTotals)
          if (Array.isArray(userTotals) && userTotals.length > 0) {
            userTotals.forEach(userTotal => {
              const libCode = Object.keys(userTotal)[0]
              const count = userTotal[libCode]

              const foundItem = this.libALLNum.find(item => item.LIBCODE === libCode)

              if (foundItem) {
                foundItem.countCard = count
              } else {
                this.libALLNum.push({
                  LIBCODE: libCode,
                  countCard: count
                })
              }
            })
          }
          // 执行后续逻辑
          this.getLibcodeDetails()
        })
        .catch(error => {
          console.error('Error', error)
          // 即使接口报错，也执行 getUserTotal 保证 countCard 有值
          this.getUserTotal()
            .then(userTotals => {
              console.log('userTotal (error case)', userTotals)
              if (Array.isArray(userTotals) && userTotals.length > 0) {
                userTotals.forEach(userTotal => {
                  const libCode = Object.keys(userTotal)[0]
                  const count = userTotal[libCode]
                  this.libALLNum.push({
                    LIBCODE: libCode,
                    countCard: count
                  })
                })
              }
            })
            .finally(() => {
              this.getLibcodeDetails()
            })
        })
    },
    // 左边办证量
    getTotalForLibcode(libcode) {
      const params = {
        'libcode': libcode,
        'startdate': '2000-01-01',
        'enddate': '2034-01-01',
        'isrdtype': 0
      }
      return FetchUsertotal(params).then(res => {
        const result = JSON.parse(res.data)
        if (result.success && result.pagedata.length > 0) {
          return { [libcode]: result.pagedata[0].count }
        } else {
          throw new Error('Failed' + libcode)
        }
      }).catch(error => {
        console.error('Error' + libcode, error)
        return { [libcode]: 0 }
      })
    },
    getUserTotal() {
      const libraries = ['GD']
      const getTotalPromises = libraries.map(libcode => this.getTotalForLibcode(libcode))
      return Promise.all(getTotalPromises)
        .then(results => {
          return results
        })
        .catch(error => {
          console.error('Error', error)
          return 0
        })
    },
    // 分管显示内容
    getLibcodeDetails() {
      FetchLibcodeDetails().then(res => {
        const result = JSON.parse(res.data)
        if (result.length !== 0) {
          const libCode = {
            'DWSF': [114.664064, 30.478882],
            'ZJWSF': [114.635376, 30.532215]
          }
          console.log('this.libALLNum', this.libALLNum)

          const nameToLibcodeMap = {
            '葛店城市书房·大湾分馆': 'DWSF',
            '葛店城市书房·张家湾分馆': 'ZJWSF'
          }
          const libcodeToGclMap = {
            'DWSF': 9145, // 大湾分馆
            'ZJWSF': 5582 // 张家湾分馆
          }
          // const allowedLibcodes = ['DWSF', 'ZJWSF']

          const updatedLibraries = result.map(library => {
            console.log('', library)
            // 通过图书馆名称获取对应的LIBCODE
            const currentLibcode = nameToLibcodeMap[library.name] || ''
            // 根据LIBCODE获取对应的GCL值
            const currentGcl = libcodeToGclMap[currentLibcode] || 10000

            // 保留原有的countCard逻辑
            const gdData = this.libALLNum.find(item => item.LIBCODE === 'GD')
            // 根据当前LIBCODE获取排序值
            const sortIndex = Object.keys(libCode).indexOf(currentLibcode)
            const sortValue = sortIndex > -1 ? sortIndex + 1 : 99

            return {
              ...library,
              GCL: currentGcl, // 按名称区分的GCL值
              // 直接使用result原始数据中的occupationArea，不再自定义覆盖
              sort: sortValue, // 按LIBCODE排序
              coordinate: libCode[currentLibcode] || [0, 0], // 匹配不到坐标时给默认值
              countCard: gdData?.countCard || 0
            }
          }).sort((a, b) => a.sort - b.sort)

          this.libInfoData = updatedLibraries
          console.log('this.libInfoData', this.libInfoData)
          if (localStorage.getItem('countItem')) {
            this.count = parseInt(localStorage.getItem('countItem'))
          } else {
            this.count = 0
          }
          if (this.libInfoData.length !== 0) {
            this.initChart() // 初始化
            setTimeout(() => {
              this.updateChart() // 更新数据，散点轮播显示
              this.startScrolling()
              window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
            }, 300)
          }
        } else {
          this.libInfoData = []
        }
      }).catch(error => {
        console.error('Error', error)
      })
    },
    initChart() {
      this.$echarts.registerMap('qiyang', mapJson) // 注册map
      this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化

      var mapImg = document.createElement('img')
      mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
      mapImg.src = require('../../assets/images/map-bg2.png')

      const colorMap = {
        '葛店城市书房·大湾分馆': '#FF7420', // 红色
        '葛店城市书房·张家湾分馆': '#4ECDC4' // 青色
        // '书房3': '#FFD166', // 黄色
        // '书房4': '#6A0572' // 紫色
      }

      var XAData = this.libInfoData.map(item => {
        const pointColor = colorMap[item.name] || '#FFFFFF' // 默认白色
        return [
          { name: '葛店城市书房·大湾分馆', color: pointColor },
          { name: item.name, value: item.address, color: pointColor }
        ]
      })

      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = libJson[dataItem[0].name]
          var toCoord = libJson[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              value: dataItem[1].value,
              color: dataItem[1].color // 传递颜色属性
            })
          }
        }
        return res
      }

      var series = [];
      [
        ['葛店城市书房·大湾分馆', XAData]
      ].forEach(function(item, i) {
        series.push(
          {
            name: item[0],
            type: 'effectScatter',
            // symbol: 'image://' + require('@/assets/images/map_10.png'),
            symbol: 'circle',
            symbolSize: [24, 14],
            coordinateSystem: 'geo',
            zlevel: 3,
            selectedMode: false,
            rippleEffect: {
              brushType: 'fill', // 填充模式
              color: 'rgba(255,255,255,0.4)',
              scale: 4, // 涟漪扩散大小（可调整）
              period: 4 // 动画周期
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: ''
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  console.log('点位名称:', params.name) // 现在能打印出值

                  // 定义渐变生成函数，复用逻辑
                  function createRadialGradient(centerColor, edgeColor) {
                    // 创建径向渐变：x0, y0, r0, x1, y1, r1
                    // (0.5,0.5)是中心点，0是中心半径，(0.5,0.5)是外圆中心，1是外圆半径
                    return {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 1,
                      colorStops: [{
                        offset: 0, // 中心位置
                        color: centerColor // 中心颜色
                      }, {
                        offset: 1, // 边缘位置
                        color: edgeColor // 边缘颜色（可以浅一点或透明）
                      }],
                      global: false // 局部渐变，跟随元素
                    }
                  }

                  switch (params.name) {
                    case '葛店城市书房·大湾分馆':
                      // 橙红渐变：中心深橙红，边缘浅橙红
                      return createRadialGradient('#FF7420', '#FFB380')
                    case '葛店城市书房·张家湾分馆':
                      // 青蓝渐变：中心深青蓝，边缘浅青蓝
                      return createRadialGradient('#4ECDC4', '#99E6E0')
                    default:
                      // 白色渐变：中心纯白，边缘浅灰（避免全白看不见）
                      return createRadialGradient('#FFFFFF', '#F0F0F0')
                  }
                },
                areaColor: 'transparent'
              },
              emphasis: {
                shadowColor: function(params) {
                  switch (params.name) {
                    case '葛店城市书房·大湾分馆':
                      return '#FF7420'
                    case '葛店城市书房·张家湾分馆':
                      return '#4ECDC4'
                    default:
                      return '#FFFFFF'
                  }
                }
              }
            },
            tooltip: {
              show: true
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
                place: dataItem[1].value,
                color: dataItem[1].color
              }
            })
          },
          {
            name: item[0],
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: function(params) {
                return params.data.color || 'red'
              },
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: function(params) {
                  return params.data.color || '#fff'
                },
                width: 0,
                curveness: 0.2
              }
            },
            tooltip: {
              show: false
            },
            data: convertData(item[1])
          },
          {
            name: item[0],
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'none'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'arrow',
              symbolSize: 6
            },
            lineStyle: {
              normal: {
                color: function(params) {
                  return params.data.color || '#fff'
                },
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            tooltip: {
              show: false
            },
            data: convertData(item[1])
          }
        )
      })

      this.seriesData = series
      const initOption = {
        baseOption: {
          tooltip: {
            trigger: 'item',
            triggerOn: 'click',
            showContent: true,
            alwaysShowContent: true,
            enterable: 'mousemove|click',
            padding: [0, 0, 0, 0],
            backgroundColor: null,
            position: function(point, params, dom, rect, size) {
              return [point[0] + 14, point[1] - 164]
            },
            formatter: (params, ticket, callback) => {
              if (params.seriesType === 'effectScatter') {
                const pointColor = params.data.color || '#FF7420'
                const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''

                // 动态设置边框颜色和背景渐变
                return `<div class='tooltip-main' >
                    <div class='tooltip-line' style="background: linear-gradient(0deg, ${pointColor} 0%, rgba(255,255,255,0) 100%);"></div>
                    <div class='tooltip-content' style="border-color: ${pointColor}; background-color: rgba(0,31,87,0.8);">
                      <div class='title' style="background: linear-gradient(90deg, ${pointColor}, rgba(255,255,255,0.22));">${params.data.name}</div>
                     ${addressLine}
                    </div>
                  </div>`
              } else if (params.seriesType === 'lines') {
                return (
                  params.data.fromName +
            '>' +
            params.data.toName +
            '<br />' +
            params.data.value
                )
              } else {
                return params.name
              }
            }
          },
          // 设置geo坐标系
          geo: [
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '6%', // 距离顶部的位置，每层向下一个百分比
              left: '11%',
              roam: false, // 是否开启平游或缩放
              z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
              itemStyle: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,0,0,.1)'
                  }, {
                    offset: 0.8, color: 'rgba(59,143,248,.6)'
                  }],
                  global: false
                },
                borderColor: '#9ffcff',
                borderWidth: 1
              },
              emphasis: {
                itemStyle: {
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(0,0,0,.1)'
                    }, {
                      offset: 0.8, color: 'rgba(59,143,248,.6)'
                    }],
                    global: false
                  } // 鼠标移上去时区域的颜色
                }
              },
              label: {
                emphasis: {
                  show: false,
                  color: '#fff'
                }
              },
              tooltip: {
                show: true
              }
            },
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '6%', // 距离顶部的位置，每层向下一个百分比
              left: '11%',
              roam: false, // 是否开启平游或缩放
              z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
              itemStyle: {
                areaColor: {
                  type: 'pattern',
                  image: mapImg,
                  repeat: 'repeat'
                }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
                borderColor: '#9ffcff',
                borderWidth: 3,
                shadowColor: '#4cd4eb',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                emphasis: { // 地图悬停高亮样式
                  areaColor: {
                    type: 'pattern',
                    image: mapImg,
                    repeat: 'repeat'
                  }
                }
              },
              emphasis: {
                disabled: true,
                areaColor: '#01215c'
              },
              label: {
                emphasis: {
                  show: false,
                  color: '#fff'
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '7%', // 根据自己需要来设置
              left: '10%',
              roam: false, // 是否开启平游或缩放
              z: 4, // 变小，也就是被压在下面
              itemStyle: {
                areaColor: '#05498f', // 记得改颜色
                borderColor: '#0296cf',
                borderWidth: 2,
                shadowColor: '#0296cf',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                emphasis: { // 地图悬停高亮样式
                  disabled: true,
                  areaColor: '#05498f'
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '9%', // 根据自己需要来设置
              left: '9%',
              roam: false,
              z: 3, // 变小，也就是被压在下面
              itemStyle: {
                areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
                borderColor: '#025792',
                borderWidth: 2,
                shadowColor: '#025792',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                emphasis: { // 地图悬停高亮样式
                  areaColor: 'rgba(3,106,183,.5)'
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '11%', // 根据自己需要来设置
              left: '8%',
              roam: false,
              z: 2, // 变小，也就是被压在下面
              itemStyle: {
                areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
                borderColor: '#195175',
                borderWidth: 1,
                shadowColor: '#0f4c74',
                shadowOffsetX: 0,
                shadowOffsetY: 4,
                shadowBlur: 10,
                emphasis: { // 地图悬停高亮样式
                  areaColor: 'rgba(3,106,183,.2)'
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              map: 'qiyang',
              aspectScale: 1,
              zoom: 0.96,
              top: '12%', // 根据自己需要来设置
              left: '10%',
              roam: false,
              z: 1, // 变小，也就是被压在下面
              itemStyle: {
                areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
                borderColor: 'rgba(0,0,0,.6)',
                borderWidth: 2,
                shadowColor: 'rgba(0,0,0,.6)',
                shadowOffsetX: 0,
                shadowOffsetY: 4,
                shadowBlur: 10,
                emphasis: { // 地图悬停高亮样式
                  areaColor: 'rgba(0,0,0,.6)'
                }
              },
              tooltip: {
                show: false
              }
            }
          ],
          series: series
        },
        media: [
          {
            query: {
              maxWidth: 666
            },
            option: {
              tooltip: {
                position: function(point, params, dom, rect, size) {
                  return [point[0] + 10, point[1] - 122]
                }
              }
            }
          }
        ]
      }
      setTimeout(() => {
        this.myChart.setOption(initOption)
      }, 200)
    },
    // initChart() {
    //   this.$echarts.registerMap('qiyang', mapJson) // 注册map
    //   this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化

    //   var mapImg = document.createElement('img')
    //   mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
    //   mapImg.src = require('../../assets/images/map-bg2.png')
    //   var XAData = this.libInfoData.map(item => {
    //     return [
    //       { name: '葛店城市书房·大湾分馆' },
    //       { name: item.name, value: item.address }
    //     ]
    //   })
    //   var convertData = function(data) {
    //     var res = []
    //     for (var i = 0; i < data.length; i++) {
    //       var dataItem = data[i]
    //       var fromCoord = libJson[dataItem[0].name]
    //       var toCoord = libJson[dataItem[1].name]
    //       if (fromCoord && toCoord) {
    //         res.push({
    //           fromName: dataItem[0].name,
    //           toName: dataItem[1].name,
    //           coords: [fromCoord, toCoord],
    //           value: dataItem[1].value
    //         })
    //       }
    //     }
    //     return res
    //   }
    //   var series = [];
    //   [
    //     ['葛店城市书房·大湾分馆', XAData]
    //   ].forEach(function(item, i) {
    //     series.push(
    //       {
    //         name: item[0],
    //         type: 'effectScatter',
    //         symbol: 'image://' + require('@/assets/images/map_10.png'),
    //         symbolSize: [26, 20],
    //         coordinateSystem: 'geo',
    //         zlevel: 3,
    //         selectedMode: false,
    //         rippleEffect: {
    //           // brushType: 'stroke',
    //           color: 'transparent'
    //           // scale: 1.5
    //         },
    //         label: {
    //           normal: {
    //             show: true,
    //             position: 'right',
    //             formatter: ''
    //           }
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: 'transparent',
    //             areaColor: 'transparent'
    //           },
    //           emphasis: {
    //             areaColor: '#2B91B7'
    //           }
    //         },
    //         tooltip: {
    //           show: true
    //         },
    //         data: item[1].map(function(dataItem) {
    //           return {
    //             name: dataItem[1].name,
    //             value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
    //             place: dataItem[1].value
    //           }
    //         })
    //       },
    //       {
    //         name: item[0],
    //         type: 'lines',
    //         zlevel: 1,
    //         effect: {
    //           show: true,
    //           period: 6,
    //           trailLength: 0.7,
    //           color: 'red', // arrow箭头的颜色
    //           symbolSize: 3
    //         },
    //         lineStyle: {
    //           normal: {
    //             color: '#fff',
    //             width: 0,
    //             curveness: 0.2
    //           }
    //         },
    //         tooltip: {
    //           show: false
    //         },
    //         data: convertData(item[1])
    //       },
    //       {
    //         name: item[0],
    //         type: 'lines',
    //         zlevel: 2,
    //         symbol: ['none', 'arrow'],
    //         symbolSize: 10, // 固定箭头大小
    //         effect: {
    //           show: true,
    //           period: 6,
    //           trailLength: 0,
    //           symbol: 'arrow',
    //           symbolSize: 10 // 动态箭头大小
    //         },
    //         lineStyle: {
    //           normal: {
    //             color: '#fff',
    //             width: 1,
    //             opacity: 0.6,
    //             curveness: 0.2
    //           }
    //         },
    //         tooltip: {
    //           show: false
    //         },
    //         data: convertData(item[1])
    //       }
    //     )
    //   })

    //   this.seriesData = series
    //   const initOption = {
    //     baseOption: {
    //       // 提示框
    //       tooltip: {
    //         trigger: 'item',
    //         triggerOn: 'click',
    //         showContent: true, // 是否显示提示框浮层
    //         alwaysShowContent: true, // 是否一直显示提示框内容
    //         // hideDelay: 100, // 浮层隐藏的延迟
    //         enterable: 'mousemove|click',
    //         padding: [0, 0, 0, 0],
    //         backgroundColor: null,
    //         position: function(point, params, dom, rect, size) {
    //           return [point[0] + 14, point[1] - 164]
    //         },
    //         formatter: (params, ticket, callback) => {
    //           if (params.seriesType === 'effectScatter') {
    //             const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
    //             return `<div class='tooltip-main' >
    //                     <div class='tooltip-line'></div>
    //                     <div class='tooltip-content'>
    //                       <div class='title'>${params.data.name}</div>
    //                      ${addressLine}
    //                     </div>
    //                   </div>`
    //           } else if (params.seriesType === 'lines') {
    //             return (
    //               params.data.fromName +
    //             '>' +
    //             params.data.toName +
    //             '<br />' +
    //             params.data.value
    //             )
    //           } else {
    //             return params.name
    //           }
    //         }
    //       },
    //       // 设置geo坐标系
    //       geo: [
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '6%', // 距离顶部的位置，每层向下一个百分比
    //           left: '11%',
    //           roam: false, // 是否开启平游或缩放
    //           z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
    //           itemStyle: {
    //             areaColor: {
    //               type: 'linear',
    //               x: 0,
    //               y: 0,
    //               x2: 1,
    //               y2: 1,
    //               colorStops: [{
    //                 offset: 0, color: 'rgba(0,0,0,.1)'
    //               }, {
    //                 offset: 0.8, color: 'rgba(59,143,248,.6)'
    //               }],
    //               global: false
    //             },
    //             borderColor: '#9ffcff',
    //             borderWidth: 1
    //           },
    //           emphasis: {
    //             itemStyle: {
    //               areaColor: {
    //                 type: 'linear',
    //                 x: 0,
    //                 y: 0,
    //                 x2: 1,
    //                 y2: 1,
    //                 colorStops: [{
    //                   offset: 0, color: 'rgba(0,0,0,.1)'
    //                 }, {
    //                   offset: 0.8, color: 'rgba(59,143,248,.6)'
    //                 }],
    //                 global: false
    //               } // 鼠标移上去时区域的颜色
    //             }
    //           },
    //           label: {
    //             emphasis: {
    //               show: false,
    //               color: '#fff'
    //             }
    //           },
    //           tooltip: {
    //             show: true
    //           }
    //         },
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '6%', // 距离顶部的位置，每层向下一个百分比
    //           left: '11%',
    //           roam: false, // 是否开启平游或缩放
    //           z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
    //           itemStyle: {
    //             areaColor: {
    //               type: 'pattern',
    //               image: mapImg,
    //               repeat: 'repeat'
    //             }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
    //             borderColor: '#9ffcff',
    //             borderWidth: 3,
    //             shadowColor: '#4cd4eb',
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 0,
    //             shadowBlur: 0,
    //             emphasis: { // 地图悬停高亮样式
    //               areaColor: {
    //                 type: 'pattern',
    //                 image: mapImg,
    //                 repeat: 'repeat'
    //               }
    //             }
    //           },
    //           emphasis: {
    //             disabled: true,
    //             areaColor: '#01215c'
    //           },
    //           label: {
    //             emphasis: {
    //               show: false,
    //               color: '#fff'
    //             }
    //           },
    //           tooltip: {
    //             show: false
    //           }
    //         },
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '7%', // 根据自己需要来设置
    //           left: '10%',
    //           roam: false, // 是否开启平游或缩放
    //           z: 4, // 变小，也就是被压在下面
    //           itemStyle: {
    //             areaColor: '#05498f', // 记得改颜色
    //             borderColor: '#0296cf',
    //             borderWidth: 2,
    //             shadowColor: '#0296cf',
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 0,
    //             shadowBlur: 0,
    //             emphasis: { // 地图悬停高亮样式
    //               disabled: true,
    //               areaColor: '#05498f'
    //             }
    //           },
    //           tooltip: {
    //             show: false
    //           }
    //         },
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '9%', // 根据自己需要来设置
    //           left: '9%',
    //           roam: false,
    //           z: 3, // 变小，也就是被压在下面
    //           itemStyle: {
    //             areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
    //             borderColor: '#025792',
    //             borderWidth: 2,
    //             shadowColor: '#025792',
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 0,
    //             shadowBlur: 0,
    //             emphasis: { // 地图悬停高亮样式
    //               areaColor: 'rgba(3,106,183,.5)'
    //             }
    //           },
    //           tooltip: {
    //             show: false
    //           }
    //         },
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '11%', // 根据自己需要来设置
    //           left: '8%',
    //           roam: false,
    //           z: 2, // 变小，也就是被压在下面
    //           itemStyle: {
    //             areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
    //             borderColor: '#195175',
    //             borderWidth: 1,
    //             shadowColor: '#0f4c74',
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 4,
    //             shadowBlur: 10,
    //             emphasis: { // 地图悬停高亮样式
    //               areaColor: 'rgba(3,106,183,.2)'
    //             }
    //           },
    //           tooltip: {
    //             show: false
    //           }
    //         },
    //         {
    //           map: 'qiyang',
    //           aspectScale: 1,
    //           zoom: 1,
    //           top: '12%', // 根据自己需要来设置
    //           left: '10%',
    //           roam: false,
    //           z: 1, // 变小，也就是被压在下面
    //           itemStyle: {
    //             areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
    //             borderColor: 'rgba(0,0,0,.6)',
    //             borderWidth: 2,
    //             shadowColor: 'rgba(0,0,0,.6)',
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 4,
    //             shadowBlur: 10,
    //             emphasis: { // 地图悬停高亮样式
    //               areaColor: 'rgba(0,0,0,.6)'
    //             }
    //           },
    //           tooltip: {
    //             show: false
    //           }
    //         }
    //       ],
    //       series: series
    //     },
    //     media: [
    //       {
    //         query: {
    //           maxWidth: 666
    //         },
    //         option: {
    //           tooltip: {
    //             position: function(point, params, dom, rect, size) {
    //               return [point[0] + 10, point[1] - 122]
    //             }
    //           }
    //         }
    //       }
    //     ]
    //   }
    //   setTimeout(() => {
    //     this.myChart.setOption(initOption)
    //   }, 200)
    // },
    updateChart() {
      // 地图数据
      // const mapData = mapJson.features.map((item) => {
      //   return {
      //     name: item.properties.name,
      //     value: Math.round(Math.random() * 100),
      //     centroid: item.properties.centroid,
      //     adcode: item.properties.adcode
      //   }
      // })
      // 散点数据
      // const scatterData = libJsonData
      // const scatterData = mapData.map((item) => {
      //   return {
      //     name: item.name,
      //     value: item.centroid
      //       ? item.centroid.concat(item.value)
      //       : item.centroid, // [经, 纬度, 值]
      //     itemStyle: {
      //       color: 'red'
      //     }
      //     // adcode: item.adcode,
      //   }
      // })
      // const updateOption = {
      //   series: [
      //     {
      //       data: mapData // type: 'map'
      //     },
      //     {
      //       data: mapData // type: 'map'
      //     },
      //     {
      //       data: scatterData // type: 'effectScatter'
      //     }
      //   ]
      // }

      this.len = this.seriesData[0].data.length // 此处设置的是需要轮播的次数
      // this.myChart.setOption(updateOption)
      this.libIndex = this.count % this.len
      this.libCurrent = this.libInfoData[this.libIndex]
      console.log('this.libIndex', this.libIndex)
      console.log('this.libCurrent22', this.libCurrent)
      this.initSwiper()
      this.updatePageWithData()
      this.autohover()
    },
    mouseMove() {
      // 当鼠标移入，终止轮播，高亮显示当前区域
      this.myChart.on('mouseover', (params) => {
        clearInterval(this.timeTicket)
        this.myChart.dispatchAction({
          type: 'downplay'
          // seriesIndex: 0
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
      })
      // 当鼠标移出，轮播继续开始
      this.myChart.on('mouseout', this.autohover)
    },
    autohover() {
      // clearInterval(this.timeTicket)
      // this.timeTicket = setInterval(() => {
      // 1. 取消上次的高亮
      this.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
      // 2. 显示当前高亮
      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: this.count % this.len
      })
      // 3. 显示提示框中的信息
      this.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.count % this.len
      })
      // }, 2000)
    },
    resize() {
      this.myChart.resize()
    },
    updatePageWithData() {
      this.displayedImages = []
      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
      const params = {
        'branchId': this.libCurrent.id
      }
      FetchLibcodeResouceDetails(params).then(res => {
        const result = JSON.parse(res.data)
        this.displayedImages = result.map((item, index) => {
          if (item.filePath) {
            item.cover = linkSrc + '/downloadFile' + item.filePath
          } else {
            item.cover = ''
          }
          return item
        })
        this.currentIndex = 0
        this.swiperKey += 1
        if (this.displayedImages.length === 1) {
          setTimeout(() => {
            this.count++
            this.libIndex = this.count % this.len
            this.libCurrent = this.libInfoData[this.libIndex]
            this.updatePageWithData()
            this.autohover()
          }, 5000)
        }
      }).catch(error => {
        console.error('Error', error)
      })
    },
    initSwiper() {
      const _self = this
      this.swiperOption = {
        // loop: true,
        // initialSlide: 0,
        notNextTick: false, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        // slidesPerView: 3, // 数量
        // spaceBetween: 30, // 间距
        // slidesPerGroup: 1, // 分几组
        // 禁止滑动
        noSwiping: true,
        observer: true, // 开启动态检查器
        direction: 'horizontal', // 设置水平还是垂直vertical
        // grabCursor: true, //光标样式
        // setWrapperSize: true,
        // autoHeight: true,
        // centeredSlides: true,
        // paginationClickable: true,
        // keyboard: true, //键盘控制
        // mousewheelControl: true, //鼠标轮控制
        autoplay: {
          delay: 3000, // 自动切换的时间间隔，单位ms
          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
          // reverseDirection: false, //开启反向自动轮播
          // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          type: 'progressbar'
          // progressbarOpposite: true,
          // clickable: true // 允许分页点击跳转
        },
        on: {
          slideChangeTransitionEnd() {
            _self.currentIndex = this.activeIndex
            if (_self.currentIndex === _self.displayedImages.length - 1) {
              setTimeout(() => {
                if (_self.count === _self.libInfoData.length - 1) {
                  _self.count = 0
                  // _self.$parent.autoPagination(3)
                } else {
                  _self.count++
                }
                _self.libIndex = _self.count % _self.len
                _self.libCurrent = _self.libInfoData[_self.libIndex]
                console.log('_self.count', _self.count)
                console.log('_self.libIndex', _self.libIndex)
                console.log('_self.libCurrent', _self.libCurrent)
                _self.updatePageWithData()
                _self.autohover()
                _self.startScrolling()
                _self.currentIndex = 0
              }, 3000)
            }
          }
        }
      }
    }
  }
}

</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>
<!--
{
  type: 'map',
  map: 'qiyang',
  roam: false,
  silent: true,
  // geoIndex: 0,  geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
  data: null,
  label: {
    show: false,
    fontSize: 0
  }
},
{
  name: item[0] + ' Top3',
  type: 'lines',
  zlevel: 1,
  effect: {
    show: true,
    period: 6,
    trailLength: 0.7,
    color: 'red', // arrow箭头的颜色
    symbolSize: 3
  },
  lineStyle: {
    normal: {
      color: color[i],
      width: 0,
      curveness: 0.2
    }
  },
  data: convertData(item[1])
},
{
  type: 'effectScatter',
  coordinateSystem: 'geo', // 注意坐标系的设置
  // symbol: 'image://' + require('../../assets/images/default-img.png'),
  data: null,
  symbolSize: [8, 4],
  showEffectOn: 'render',
  rippleEffect: {
    brushType: 'stroke',
    color: '#9ffcff',
    period: 9,
    scale: 5
  },
  label: {
    show: true,
    color: '#FFF',
    formatter: '',
    offset: [0, -12]
  },
  emphasis: {
  // 设置高亮显示的状态
    scale: 8,
    itemStyle: {
      color: 'pink'
    }
  }
} -->