HM21St_Page_User/src/views/bookShelf/articleDetail.vue

<template>
  <div class="bookStore" :style="{background:bgColorList[activeIndex].contentBg}" v-if="articleInfo" :v-loading="loading">
    <Header :LoginNavIndex="LoginNavIndex"/>
    <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
        <div class="navBar-left">
            <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i> 第 {{articleInfo.iss_no}} 期</a>
            <div class="border"></div>
            <p class="article-title">{{articleInfo.art_title}}</p>
        </div>
        <div class="navBar-right">
            <el-input-number class="article-fontsize" v-model="wordFontsize" :step="2" step-strictly :min="12" :max="24" :style="{borderColor:bgColorList[activeIndex].boxBorder}"></el-input-number>
            <ul class="article-color" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
                <li :class="['color-item',activeIndex===indexC?'active':'']" v-for="(itemC,indexC) in bgColorList" :key="indexC" @click="handleChangeBgColor(indexC)" :style="{borderColor:activeIndex===indexC?itemC.border_active:''}">
                    <a :style="{background:itemC.border,borderColor:activeIndex===indexC?itemC.borderColor:''}"></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="article-box">
        <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
            <!-- 文章 -->
            <div class="atricle-data">
                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'" :articleInfo="articleInfo"></normal-model>
                <phrase-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='newWord'" :articleInfo="articleInfo" :likePhraseList="likePhraseList" :likeWord="likeWordList" @changeLike="changeLike"></phrase-model>
                <div class="article-btn" v-if="this.$route.query.iss_id">
                    <div class="left">
                        <span :class="['support colloct-article',!noRead?'active':'']" @click="changeStatus('noRead')"><svg-icon icon-class="like-line" :style="{marginRight:articleNumber?'8px':'0px'}"></svg-icon>{{articleNumber?articleNumber:''}}</span>
                        <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
                    </div>
                    <div class="center">
                        <el-button type="text" class="btn-left" :class="[activeArticleIndex===0?'not-allow':'']" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
                        <el-button type="text" class="btn-right" :class="[activeArticleIndex===issueChnTanList.length-1?'not-allow':'']" @click="handlePage('+')">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
                    </div>
                    <div class="right">
                        <!-- <template v-if="noRead">
                            <span class="support" @click="handleReadArticle"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
                        </template>
                        <template v-else>
                            <span class="support readed"><svg-icon icon-class="readed"></svg-icon>已读</span>
                        </template> -->
                    </div>
                </div>
            </div>
            <!-- 词汇表 -->
            <div class="glossary-box" :style="{borderTopColor:bgColorList[activeIndex].contentBg}">
                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle}">
                    <h2>词汇表</h2>
                    <a @click="showGlossary=!showGlossary">{{showGlossary?'收起':'展开'}}</a>
                </div>
                <el-collapse-transition >
                    <div v-if="showGlossary">
                        <template v-if="articleInfo.art_voc_data.length>0">
                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">生词</h4>
                            <new-word-list class="newWord-list" :list="articleInfo.art_voc_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likeWordList="likeWordList" @changeLike="changeLike" ref="newWordList"></new-word-list>
                        </template>
                        <template v-if="articleInfo.art_phrase_data.length>0">
                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">短语</h4>
                            <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likePhraseList="likePhraseList" @changeLike="changeLike" ref="phraseList"></phrase-list>
                        </template>
                        <template v-if="articleInfo.art_explain_data.length>0">
                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">注释</h4>
                            <annotation-list class="newWord-list" :list="articleInfo.art_explain_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></annotation-list>
                        </template>
                    </div>
                </el-collapse-transition>
                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle,marginTop:'40px'}">
                    <h2>详细统计</h2>
                </div>
                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇信息</h4>
                <div class="word-info" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">文章长度</label>
                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wc}}</span>
                    </div>
                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇数量</label>
                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
                    </div>
                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">平均词长</label>
                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
                    </div>
                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇密度</label>
                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabDensity}}</span>
                    </div>
                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇难度</label>
                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabHardLevel}}</span>
                    </div>
                </div>
                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇分布</h4>
                <div class="echarts-box" v-if="articleInfo&&articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems">
                    <ul class="echarts-type">
                        <li v-for="(itemE,indexE) in articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems" :key="indexE"
                            @mouseover="gaolangbzt(indexE, 'shanxing_main')"
                            @mouseout="closegaolangbzt(indexE, 'shanxing_main')"
                            :style="{background:bgColorList[activeIndex].type==='white'?itemE.bg:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:bgColorList[activeIndex].type==='white'?itemE.color:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:bgColorList[activeIndex].type==='white'?itemE.border:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBorder:itemE.darkBorder}">
                            <span class="name">{{itemE.vlCnName}}</span>
                            <span class="number">{{itemE.value}}</span>
                            <span class="percent">{{itemE.vocabPercentStr}}</span>
                        </li>
                    </ul>
                    <div id="shanxing_main" style="height: 360px"></div>
                </div>
            </div>
            <!-- 右侧菜单 -->
            <div class="mene-right" :style="{background:bgColorList[activeIndex].contentInnerBg,borderColor:bgColorList[activeIndex].glossaryBg}">
                <menu-right :colorObj="bgColorList[activeIndex]" @changeArticleType="changeArticleType"></menu-right>
            </div>
        </div>
    </div>
    <div class="share-box" v-if="menuFeature==='share'" v-loading="shareLoading">
        <div class="share-box-top">
            <h5>分享</h5>
            <i class="el-icon-close" @click="handleCloseShare"></i>
        </div>
        <template v-if="shareSrc">
            <img :src="shareSrc" />
        </template>
        <template v-else>
            <el-skeleton style="width: 240px" :loading="true" animated>
                <template slot="template">
                    <el-skeleton-item
                        variant="image"
                        style="width: 380px; height: 532px;"
                    />
                </template>
            </el-skeleton>
        </template>
        <div class="share-box-bottom">
            <el-button type="primary" @click="downLoadImg(shareSrc)" size="small">下载图片</el-button>
            <el-button @click="CopyToClipboard('copyDownUrl')" size="small" type="primary" plain>复制链接</el-button>
            <span id="copyDownUrl">{{share_url}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import NavBar from "../../components/common/NavBar.vue"
import NewWordList from './components/NewWordList.vue';
import PhraseList from './components/PhraseList.vue';
import AnnotationList from './components/AnnotationList.vue'
import NormalModel from "./components/NormalModel.vue"
import PhraseModel from "./components/PhraseModel.vue"
import MenuRight from "./components/MenuRight.vue"
import * as echarts from "echarts";
import { getLogin } from "@/api/ajax";
import { getToken } from '@/utils/auth'
export default {
  name: 'articleDetail',
  computed: {
    
  },
  components: {
    Header,
    NavBar,
    NewWordList,
    PhraseList,
    AnnotationList,
    NormalModel,
    MenuRight,
    PhraseModel
  },
  data(){
    return{
        config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
        LoginNavIndex: 0,
        wordFontsize: 18, // 文章文字大小
        bgColorList:[
            {
                type:'white',
                contentBg:'#F2F3F5',
                contentInnerBg:'#FFFFFF',
                navBg:'#FFFFFF',
                border:'#E5E6EB',
                bg:'#FFFFFF',
                border_active:'#3459D2',
                boxBorder:'#E5E6EB',
                titleColor:'#1F2C5C',
                sourceColor:'#929CA8',
                contentColor:'#2F3742',
                btnColor:'#3459D2',
                glossaryTitle:'#2F3742',
                glossarySubtitle:'#4E5969',
                glossaryBg:'#F7F8FA',
                newWordColor:'#175DFF',
                newWordOtherColor:'#667180',
                newWordStar:'#FFB224',
                newWordType:{
                    'L0':{
                        color:'#5B7217',
                        bg:'#F1FCE3'
                    },
                    'L1':{
                        color:'#3D9A50',
                        bg:'#EFFCEF'
                    },
                    'L2':{
                        color:'#0081F1',
                        bg:'#E7F3FF'
                    },
                    'L3':{
                        color:'#3459D2',
                        bg:'#EEF3FF'
                    },
                    'LA':{
                        color:'#E03177',
                        bg:'#FFECF5'
                    },
                    'LB':{
                        color:'#CD2B31',
                        bg:'#FFE8E8'
                    },
                    'LC':{
                        color:'#4A524E',
                        bg:'#DFE4E2'
                    },
                    'LD':{
                        color:'#504F57',
                        bg:'#C1C5CD'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#2F3742',
                annotationTitle:'#4E5969',
                annotationOhter:'#667180',
                statisticTitle:'#2F3742',
                statisticValue:'#3459D2',
                menuBg:'#EEF3FF',
                audiobg:'#FFFFFF',
                audioBorder:'#EBEBEB'
            },
            {
                type:'darkGreen',
                contentBg:'#C2C9C6',
                contentInnerBg:'#DFE4E2',
                navBg:'#236E55',
                border:'#5BB99A',
                bg:'#FFFFFF',
                border_active:'#FFFFFF',
                boxBorder:'#1B5441',
                titleColor:'#1F2C5C',
                sourceColor:'#929CA8',
                contentColor:'#2F3742',
                btnColor:'#3459D2',
                glossaryTitle:'#393F3C',
                glossarySubtitle:'#66736D',
                glossaryBg:'#D7DCDA',
                newWordColor:'#175DFF',
                newWordOtherColor:'#667180',
                newWordStar:'#FFB224',
                newWordType:{
                    'L0':{
                        color:'#5B7217',
                        bg:'#F1FCE3'
                    },
                    'L1':{
                        color:'#3D9A50',
                        bg:'#EFFCEF'
                    },
                    'L2':{
                        color:'#0081F1',
                        bg:'#E7F3FF'
                    },
                    'L3':{
                        color:'#3459D2',
                        bg:'#EEF3FF'
                    },
                    'LA':{
                        color:'#E03177',
                        bg:'#FFECF5'
                    },
                    'LB':{
                        color:'#CD2B31',
                        bg:'#FFE8E8'
                    },
                    'LC':{
                        color:'#4A524E',
                        bg:'#DFE4E2'
                    },
                    'LD':{
                        color:'#504F57',
                        bg:'#C1C5CD'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#2F3742',
                statisticTitle:'#393F3C',
                statisticValue:'#299772',
                menuBg:'#E9F7F2',
                audiobg:'#ECEFED',
                audioBorder:'#DFE4E2'
            },
            {
                type:'darkBlue',
                contentBg:'#1C2129',
                contentInnerBg:'#2F3742',
                navBg:'#2F3742',
                border:'#1F2C5C',
                bg:'#1F2C5C',
                border_active:'#FFFFFF',
                boxBorder:'#1C2129',
                titleColor:'#5373E7',
                sourceColor:'#929CA8',
                contentColor:'#C1C5CD',
                btnColor:'#5373E7',
                glossaryTitle:'#929CA8',
                glossarySubtitle:'#929CA8',
                glossaryBg:'#3E4855',
                newWordColor:'#8DA4EF',
                newWordOtherColor:'#929CA8',
                newWordStar:'#816C00',
                newWordType:{
                    'L0':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#5B7217'
                    },
                    'L1':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#2F6E3B'
                    },
                    'L2':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#006793'
                    },
                    'L3':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#AE1955'
                    },
                    'LA':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#AE1955'
                    },
                    'LB':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#8F2025'
                    },
                    'LC':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#4A524E'
                    },
                    'LD':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#2F3742'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#929CA8',
                statisticTitle:'#D0D3D9',
                statisticValue:'#5373E7',
                menuBg:'#EEF3FF',
                audiobg:'#3E4855',
                audioBorder:'#2F3742'
            },
            {
                type:'armyGreen',
                contentBg:'#2A2F2C',
                contentInnerBg:'#393F3C',
                navBg:'#393F3C',
                border:'#13392E',
                bg:'#13392E',
                border_active:'#FFFFFF',
                boxBorder:'#2A2F2C',
                titleColor:'#30A47D',
                sourceColor:'#99A29E',
                contentColor:'#C1C5CD',
                btnColor:'#30A47D',
                glossaryTitle:'#99A29E',
                glossarySubtitle:'#99A29E',
                glossaryBg:'#4A524E',
                newWordColor:'#8DA4EF',
                newWordOtherColor:'#99A29E',
                newWordStar:'#816C00',
                newWordType:{
                    'L0':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#5B7217'
                    },
                    'L1':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#2F6E3B'
                    },
                    'L2':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#006793'
                    },
                    'L3':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#AE1955'
                    },
                    'LA':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#AE1955'
                    },
                    'LB':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#8F2025'
                    },
                    'LC':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#4A524E'
                    },
                    'LD':{
                        color:'rgba(255, 255, 255, 0.64)',
                        bg:'#2F3742'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#99A29E',
                statisticTitle:'#D0D3D9',
                statisticValue:'#30A47D',
                menuBg:'#EEF3FF',
                audiobg:'#4A524E',
                audioBorder:'#393F3C'
            }
        ],
        activeIndex:0, // 选择主题色的索引
        showGlossary: true, // 是否展开词汇表
        wordList:[
            {
                src: '.',
                word:'cremation',
                symbol:'/krəˈmeɪʃn/',
                paraList:[
                    {
                        cixing:'n.',
                        shiyi:'火葬；火化'
                    }
                ],
                type:'daochu',
                rate:3
            },
            {
                src: '.',
                word:'thrive',
                symbol:'/θraɪv/',
                paraList:[
                    {
                        cixing:'v.',
                        shiyi:'茁壮成长，兴旺，繁荣；（尤指在别人觉得困难的时候）以……为乐，可以出色应对'
                    }
                ],
                type:'xuanbi',
                rate:4
            },
            {
                src: '.',
                word:'diversify',
                symbol:'/daɪˈvɜːsɪfaɪ/',
                paraList:[
                    {
                        cixing:'v.',
                        shiyi:'（使）多样化，（使）不同；扩大经营范围，增加……的品种；（投资）多元化；'
                    },
                    {
                        cixing:'n.',
                        shiyi:"兽医；<美，非正式>老兵；兽医诊所（vet's）"
                    }
                ],
                type:'daochu',
                rate:2
            },
        ],
        phraseList:[
            {
                word:'send off',
                paraList:[
                    '送行'
                ]
            },
            {
                word:'more than',
                paraList:[
                    '多于'
                ]
            },
            {
                word:'according to',
                paraList:[
                    '根据'
                ]
            },
            {
                word:'In addition to',
                paraList:[
                    '除了……之外'
                ]
            }, 
        ],
        annotationList:[
            {
                prefix:'visiting team',
                para:'时区。全球划分为24个时区。相邻两个时区的时问相差1小时。出国旅行的人，必须随时调整自己的手表，才能和当地时间相一致。凡向西走，每过一个时区，就要把表拨慢1小时；凡向东走，每过一个时区，就要把表拨快1小时。'
            },
            {
                prefix:'jet–lagged',
                para:'有时差反应的，有时差感的。人体症状多表现为疲劳、方向感减弱和失眠、往往会影响人们最初几天的活动。'
            }
        ],
        vocabularyType:{
            L0:{
                bg:'#F2FCE3',
                color:'#5B7217',
                darkBg:'#5B7217',
                border:'#F2FCE3',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#F2FCE3',
                darkGreenColor:'#5B7217',
                darkGreenBorder:'#F2FCE3'
            },
            L1:{
                bg:'#EFFCEF',
                color:'#3D9A50',
                darkBg:'#2F6E3B',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#EFFCEF',
                darkGreenColor:'#3D9A50',
                darkGreenBorder:'#EFFCEF'
            },
            L2:{
                bg:'#E7EEFF',
                color:'#175DFF',
                darkBg:'#006793',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#E7F3FF',
                darkGreenColor:'#0081F1',
                darkGreenBorder:'#E7F3FF'
            },
            L3:{
                bg:'#EEF3FF',
                color:'#3459D2',
                darkBg:'#2C49AA',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#EEF3FF',
                darkGreenColor:'#3459D2',
                darkGreenBorder:'#EEF3FF'
            },
            LA:{
                bg:'#FFECF5',
                color:'#E03177',
                darkBg:'#AE1955',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#FFECF5',
                darkGreenColor:'#E03177',
                darkGreenBorder:'#FFECF5'
            },
            LB:{
                bg:'#FFE8E8',
                color:'#CD2B31',
                darkBg:'#8F2025',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#FFE8E8',
                darkGreenColor:'#CD2B31',
                darkGreenBorder:'#FFE8E8'
            },
            LC:{
                bg:'#DFE4E2',
                color:'#4A524E',
                border:'rgba(0, 0, 0, 0.08)',
                darkBg:'#4A524E',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#DFE4E2',
                darkGreenColor:'#4A524E',
                darkGreenBorder:'rgba(0, 0, 0, 0.08)'
            },
            LD:{
                bg:'#C1C5CD',
                color:'#504F57',
                darkBg:'#2F3742',
                darkColor:'rgba(255, 255, 255, 0.64)',
                darkBorder:'rgba(255, 255, 255, 0.08)',
                darkGreenBg:'#C1C5CD',
                darkGreenColor:'#504F57',
                darkGreenBorder:'#C1C5CD'
            }
        },
        articleType:this.$route.query.type?this.$route.query.type*1:1,
        articleId:this.$route.query.id?this.$route.query.id:'',
        noRead: true, // 未读
        support: false, // 点赞
        oppose: false, // 不支持
        timer: null,
        readLength: 0,
        articleInfo: null,
        loading: false,
        menuType: 'original',
        menuFeature: '', // 功能
        shareSrc: '', // 分享图片
        share_url: '', // 分享链接
        shareLoading: false,
        likeWordList: [], // 收藏短语list
        likePhraseList: [],
        likeSentencelist: [],
        issueChnList:[], // 报刊文章目录
        issueChnTanList: [], //文章摊平
        userMessage: getToken()?JSON.parse(getToken()):null,
        activeArticleIndex: 0,
        articleNumber: 0
    }
  },
  methods: {
    inityuan() {
        if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems){
            var chartDom = document.getElementById("shanxing_main");
            var myChart = echarts.init(chartDom);
            var option;
            let newdata = JSON.parse(JSON.stringify(this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems));
            newdata.forEach((item) => {
                let percent = item.vocabPercent / 100;
                if (percent % 1 == 0) {
                    item.name = item.vlCnName + " " + percent + "%";
                } else {
                    item.name = item.vlCnName + " " + percent.toFixed(2) + "%";
                }
            });
            option = {
                color:this.bgColorList[this.activeIndex].type==='white'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.bgColorList[this.activeIndex].type==='darkGreen'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.articleInfo.vl_id==='VL26'?['#5B7217','#2F6E3B','#006793','#2C49AA','#AE1955','#F2555A','#4A524E','#2F3742']:['#5B7217','#2F6E3B','#AE1955','#F2555A','#4A524E','#2F3742'],
                series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: ["50%", "90%"],
                    data: newdata,
                    itemStyle: {
                    borderColor: "rgba(255, 255, 255, 0.24)",
                    borderWidth: 1,
                    },
                    top: 50,
                    emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                    },
                },
                ],
                xAxis: {
                show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, //不显示坐标轴线
                },
                axisLabel: {
                    show: false, //不显示坐标轴上的文字
                },
                },
            };
            option && myChart.setOption(option);
        }
    },
    // 鼠标进入
    gaolangbzt(index, id) {
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 鼠标移出
    closegaolangbzt(index, id) {
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 切换主题颜色
    handleChangeBgColor(index){
        this.activeIndex = index
        this.inityuan()
    },
    handlePage(type){
        if(type==='-'){
            if(this.activeArticleIndex!==0){
                if(!this.issueChnTanList[this.activeArticleIndex-1].canRead){
                    return
                }
                this.activeArticleIndex --
                this.$router.replace({
                    path: "/articleDetail",
                    query: {
                        headerConfig: this.$route.query.headerConfig?this.$route.query.headerConfig:'',
                        id: this.issueChnTanList[this.activeArticleIndex].id,
                        iss_id: this.$route.query.iss_id
                    },
                })
            }else{
                return
            }
        }else{
            if(this.activeArticleIndex!==this.issueChnTanList.length-1){
                if(!this.issueChnTanList[this.activeArticleIndex+1].canRead){
                    return
                }
                this.activeArticleIndex ++
                this.$router.replace({
                    path: "/articleDetail",
                    query: {
                        headerConfig: this.$route.query.headerConfig?this.$route.query.headerConfig:'',
                        id: this.issueChnTanList[this.activeArticleIndex].id,
                        iss_id: this.$route.query.iss_id
                    },
                })
            }else{
                return
            }
        }
        location.reload()
    },
    getArticleDetail(){
        this.loading = true
        let this_ = this;
        let MethodName = "/PaperServer/Client/Article/GetArticleDetail";
        let data = {
            id: this.articleId,
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.loading = false
            if(res.status===1){
                this.articleInfo = res.data
                if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems){
                    this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems.forEach(item=>{
                        item.value = item.vocabCount
                        item = Object.assign(item, this.vocabularyType[item.vlId])
                    })
                    this.articleInfo.art_voc_data.forEach(item=>{
                        item.collect = false
                    })
                }
                setTimeout(() => {
                    this_.inityuan()
                }, 100);
            }
        })
        .catch(() => {
            this.loading = false
        }); 
        getLogin('/ShopServer/Client/CollectManager/GetMyCollectIntegrateInfo_Article', {
            article_id: this.articleId,
        })
        .then((res) => {
            if(res.status===1){
                this.noRead = res.is_collect_article === 'false'
                this.articleNumber = res.collect_person_count
                if(!this.noRead){
                    clearInterval(this_.timer);
                    this_.timer = null;
                }
                this.likeWordList = []
                res.word_list.forEach(item=>{
                    this.likeWordList.push(item.word)
                })
                this.likePhraseList = []
                res.phrase_list.forEach(item=>{
                    this.likePhraseList.push(item.phrase)
                })
                this.likeSentencelist = []
                res.sentence_list.forEach(item=>{
                    this.likeSentencelist.push(item.sentence_id)
                })
            }
        })
        .catch(() => {
            this.loading = false
        }); 
    },
    handleReadArticle(){
        let this_ = this;
        clearInterval(this_.timer);
        this_.timer = null;
        let MethodName = "/ShopServer/Client/ReadingRecordManager/AddReadingRecord_Article";
        let data = {
            goods_type: 21,
            article_id: this.articleId,
            duration: this.readLength
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.noRead = false
            }
        })
        .catch(() => {
            
        }); 
    },
    changeStatus(flag){
        if(this[flag]){
            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Article";
            let data = {
                article_id: this.articleId
            }
            getLogin(MethodName, data)
            .then((res) => {
                if(res.status===1){
                    this[flag] = !this[flag]
                    this.articleNumber++
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                }
            })
            .catch(() => {
            }); 
            // let datas = {
            //     sentence_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].id:this.articleInfo.art_corpus_data.sentList[1].id,
            //     audio_file_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.mp3:'',
            //     audio_begin_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].s:null,
            //     audio_end_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].e:null
            // }
            // getLogin('/ShopServer/Client/CollectManager/AddCollect_Sentence', datas)
            // .then((res) => {
            //     if(res.status===1){
                    
            //     }
            // })
            // .catch(() => {
            // }); 
        }else{
            let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Article"
            getLogin(MethodName, {
                article_id: this.articleId
            })
            .then((res) => {
                if(res.status===1){
                    this[flag] = !this[flag]
                    this.articleNumber--
                    this.$message({
                        message: "取消收藏",
                        type: "success",
                    });
                }
            })
            .catch(() => {
                this.loading = false
            });
        }
    },
    changeArticleType(type,e){
        if(type==='print'||type==='share'||type==='list'||type==='cloud'){
            if(type==='share'){
                if(this.userMessage){
                    this.handleCreateShare()
                    this.menuFeature = type
                }else{
                    this.$message.error('请先登录')
                }
            }else{
                this.menuFeature = type
            }
        }else{
            this.menuType = type
            this.menuFeature = ''
        }
    },
    handleCloseShare(){
        this.menuFeature = ''
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    downLoadImg(base64URL){
        const a = document.createElement('a');  
        a.download = '分享图片';  
        const mimeType = base64URL.match(/:(.*?);/)[1];  
        const byteCharacters = atob(base64URL.split(',')[1]);  
        const byteNumbers = new Array(byteCharacters.length);  
        for (let i = 0; i < byteCharacters.length; i++) {  
            byteNumbers[i] = byteCharacters.charCodeAt(i);  
        }  
        const byteArray = new Uint8Array(byteNumbers);  
        const blob = new Blob([byteArray], {type: mimeType});  
        a.href = URL.createObjectURL(blob);  
        document.body.appendChild(a);  
        a.click();  
        document.body.removeChild(a); 
    },
    // 创建分享
    handleCreateShare(){
        
            this.shareLoading = true
            let MethodName = "/ShopServer/Client/ShareManager/CreateShareRecord";
            let data = {
                goods_type: 21,
                goods_id: this.articleId
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.shareLoading = false
                if(res.status===1){
                    this.share_url = res.share_url
                    this.shareSrc = 'data:image/jpeg;base64,'+res.image_content_base64
                }
            })
            .catch(() => {
                this.shareLoading = false
            }); 
        
    },
    changeLike(type,list){
        this[type] = list
        if(type==='likePhraseList'){
            this.$refs.phraseList.handleData()
        }else if(type==='likeWordList'){
            this.$refs.newWordList.handleData()
        }
    },
    // 报刊信息
    getIssueDetail(){
        this.issueChnTanList = []
        this.issueChnList = []
        let articleindex = 0
        let MethodName = '/PaperServer/Client/Issue/GetIssueBriefInfo'
        let data = {
                id: this.$route.query.iss_id
            }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                let issueChnList = res.data.chn_art_data
                if(this.userMessage){
                    getLogin('/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus', {
                        goods_type: 2,
                        goods_id: this.$route.query.iss_id
                    })
                    .then((res) => {
                        if(res.status===1){
                            let isBuy = res.buy_info.is_buy==='true'
                            issueChnList.forEach((item,index)=>{
                                item.canRead = isBuy||index===0
                                item.arts.forEach(items=>{
                                    if(items.id===this.$route.query.id){
                                        this.activeArticleIndex = articleindex
                                    }
                                    this.issueChnTanList.push({
                                        id: items.id,
                                        canRead: isBuy||index===0
                                    })
                                    articleindex ++
                                })
                                
                            })
                        }
                    })
                    .catch(() => {
                        
                    }); 
                }
            }
        })
        .catch(() => {
            
        }); 
    }
  },
  created(){
    if(this.config){
        let arr = this.config.split('&&&')
        this.LoginNavIndex = arr[0] * 1
        this.userBg = arr[1] ? arr[1] : 'rgba(0, 0, 0, 0.24)'
        this.headerBorder = arr[2] ? arr[2] : '#5C5C5C'
        this.headerBg = arr[3] ? arr[3] : '#1F1F1F'
        this.previousPage = arr[4] ? arr[4] : '商城'
    }
    if(this.articleId){
        this.getArticleDetail()
    }
    if(this.$route.query.iss_id){
        this.getIssueDetail()
    }
  },
  mounted(){
    let this_ = this;
    this_.timer = null;
    this_.readLength = 0
    this_.timer = setInterval(() => {
        this_.readLength++;
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
.bookStore{
    min-height: calc(100vh - 64px);
    .navBar-right{
        display: flex;
        align-items: center;
    }
    .article-color{
        display: flex;
        width: 132px;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #E5E6EB;
        border-radius: 40px;
        margin-left: 12px;
        padding: 4px;
        .color-item{
            padding: 2px;
            border: 2px solid transparent;
            border-radius: 50%;
            a{
                width: 16px;
                height: 16px;
                border-radius: 50%;
                display: block;
                border: 1px solid transparent;
                padding: 0;
            }
            
        }
    }
    .article-box{
        position: relative;
        padding: 80px 0;
        .artricle-inner{
            width: 1000px;
            margin: 0 auto;
            border-radius: 8px;
        }
        .mene-right{
            position: fixed;
            right: calc((100% - 1000px)/2 - 196px);
            top: 144px;
            width: 176px;
            background: #FFFFFF;
            border: 1px solid #E5E6EB;
            border-radius: 8px;
            padding: 4px;
        }
    }
    .atricle-data{
        padding: 120px 100px 40px 100px;
    }
    .glossary-box{
        border-top: 1px solid #F2F3F5;
        padding: 40px;
        .title{
            display: flex;
            justify-content: space-between;
            h2{
                margin: 0;
                font-weight: 400;
                font-size: 24px;
                line-height: 32px;
            }
            a{
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
            }
        }
        h4{
            margin: 24px 0 8px 0;
            font-weight: 400;
            font-size: 12px;
            line-height: 20px;
        }
    }
    .newWord-list{
        padding: 2px 4px;
    }
    .word-info{
        display: flex;
        justify-content: space-between;
        >div{
            width: 178px;
            height: 64px;
            border-radius: 4px;
            padding: 8px 12px;
            label{
                display: block;
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                margin-bottom: 4px;
            }
            span{
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
    .echarts-box{
        display: flex;
        .echarts-type{
            width: 232px;
            flex-shrink: 0;
            li{
                height: 38px;
                border-radius: 4px;
                margin-bottom: 8px;
                font-size: 14px;
                line-height: 20px;
                display: flex;
                padding: 8px 12px;
                cursor: pointer;
                border: 1px solid transparent;
                .name{
                    flex: 1;
                }
                .number{
                    width: 40px;
                    text-align: right;
                }
                .percent{
                    width: 80px;
                    text-align: right;
                }
            }
        }
        #shanxing_main{
            flex: 1;
        }
    }
}
.article-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right{
        width: 145px;
        margin-right: -8px;
        text-align: right;
    }
    .support{
        padding: 8px 16px;
        border-radius: 20px;
        background: #E5E6EB;
        margin-right: 8px;
        color:rgba(0, 0, 0, 0.88);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        cursor: pointer;
        .svg-icon{
            margin-right: 8px;
            color: rgba(23, 93, 255, 1);
        }
        &.active{
            background: rgba(48, 110, 255, 1);
            color: #fff;
            .svg-icon{
                color: #fff;
            }
        }
    }
    .colloct-article{
        .svg-icon{
            color: rgba(242, 85, 90, 1);
        }
        &.active{
            background: rgba(242, 85, 90, 1);
        }
    }
    .oppose{
        padding: 12px;
        border-radius: 20px;
        background: #E5E6EB;
        height: 40px;
        font-size: 16px;
        line-height: 16px;
        display: inline-block;
        cursor: pointer;
        .svg-icon{
            width: 16px;
            height: 16px;
        }
        &.active{
            background: rgba(48, 110, 255, 1);
            .svg-icon{
                color: #fff;
            }
        }
    }
    .btn-left,.btn-right{
        color: #3459D2;
        font-size: 16px;
        line-height: 24px;
        padding: 0;
        .svg-icon{
            margin-right: 12px;
        }
        &.not-allow{
            color: #5E89EF;
            cursor: not-allowed;
        }
    }
    .btn-right{
        .svg-icon{
            margin-right: 0;
            margin-left: 12px;
        }
    }
    .readed{
        background: rgba(231, 238, 255, 1);
        color: rgba(23, 93, 255, 1);
        cursor: initial;
    }
}
.share-box{
    padding: 24px;
    width: 428px;
    height: 702px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    margin-top: -351px;
    margin-left: -214px;
    border-radius: 8px;
    border: 1px solid #D0D3D9;
    background: #FFF;
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
    &-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        h5{
            color: #000;
            font-size: 24px;
            font-weight: 400;
            line-height: 32px;
            margin: 0;
        }
        .el-icon-close{
            color: rgba(47, 55, 66, 1);
            cursor: pointer;
        }
    }
    img{
        width: 380px;
        height: 532px;
        border-radius: 16px;
        margin: 24px 0;
    }
    #copyDownUrl{
        width: 0;
        height: 0;
        opacity: 0;
    }
    &-bottom{
        .el-button{
            width: 184px;
            height: 48px;
            color: #FFF;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            border-radius: 8px;
            &.is-plain{
                color: rgba(23, 93, 255, 1);
                border-color: rgba(23, 93, 255, 1);
                &:hover{
                    background: rgba(231, 238, 255, 1);
                }
                &:focus{
                    color: rgba(23, 93, 255, 1);
                    border-color: rgba(23, 93, 255, 1);
                    background: rgba(231, 238, 255, 1);
                }
            }
        }
    }
}
</style>
<style lang="scss">
.article-fontsize{
    width: 144px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #E5E6EB;
    border-radius: 40px;
    overflow: hidden;
    .el-input{
        height: 30px;
    }
    .el-input-number__decrease, .el-input-number__increase{
        height: 30px;
        border: none;
        background: transparent;
        color: #D9E2FC;
    }
    .el-input-number__decrease{
        border-right: 1px solid #1B5441;
    }
    .el-input-number__increase{
        border-left: 1px solid #1B5441;
    }
    .el-input__inner{
        height: 30px;
        border: none;
        line-height: 30px;
        background: transparent;
        color: #D9E2FC;
    }
}
.navBar{
    border-color: transparent;
    &-white{
        border-color: #EBEBEB;
        .el-input-number__decrease, .el-input-number__increase,.el-input__inner{
            color: #1C2129;
        }
        .el-input-number__decrease{
            border-right: 1px solid #E5E6EB;
        }
        .el-input-number__increase{
            border-left: 1px solid #E5E6EB;
        }
        .goback{
            color: #1D2129;
        }
        .border{
            background: #E5E6EB;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #86909C;
        }
    }
    &-darkGreen{
        .el-input-number__decrease{
            border-right: 1px solid #1B5441;
        }
        .el-input-number__increase{
            border-left: 1px solid #1B5441;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #1B5441;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #CCEBE1;
        }
    }
    &-darkBlue{
        .el-input-number__decrease{
            border-right: 1px solid #1C2129;
        }
        .el-input-number__increase{
            border-left: 1px solid #1C2129;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #667180;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #D9E2FC;
        }
    }
    &-armyGreen{
        .el-input-number__decrease{
            border-right: 1px solid #2A2F2C;
        }
        .el-input-number__increase{
            border-left: 1px solid #2A2F2C;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #99A29E;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #D9E2FC;
        }
    }
}
</style>