HM21St_Page_User/src/views/bookShelf/articleShareDetail.vue

<template>
  <div class="bookShare" :style="{background:bgColorList[activeIndex].contentBg}" v-if="articleInfo" :v-loading="loading">
    <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
        <div class="navBar-left" @click="cutLoginReg">
            <svg-icon icon-class="logo"></svg-icon>
        </div>
        <div class="navBar-right">
            <el-image
                :src="personTouxiang"
                fit="cover" style="width:24px;height:24px;margin:0 8px;border-radius:50%">
            </el-image>
            <span class="name">{{personName}}分享的文章</span>
        </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>
            </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"></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"></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>
    </div>
  </div>
</template>

<script>
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 * as echarts from "echarts";
import { getLogin } from "@/api/ajax";
export default {
  name: 'articleDetail',
  computed: {
    
  },
  components: {
    NewWordList,
    PhraseList,
    AnnotationList,
    NormalModel,
  },
  data(){
    return{
        personTouxiang:localStorage.getItem('share_person_touxiang')?localStorage.getItem('share_person_touxiang'):require('../../assets/avatar.png'),
        personName:localStorage.getItem('share_person_name')?localStorage.getItem('share_person_name'):'',
        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:'#99A29E',
                        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'
            }
        ],
        activeIndex:0, // 选择主题色的索引
        showGlossary: true, // 是否展开词汇表
        wordInfo:{
            length: {
                        label:'文章长度',
                        value:463
                    },
            number: {
                        label:'词汇数量',
                        value:236
                    },
            averageLength: {
                        label:'平均词长',
                        value:4.52
                    },
            lexicalDensity: {
                        label:'词汇密度',
                        value:0.51
                    },
            wordDifficulty: {
                        label:'词汇难度',
                        value:2.05
                    },
        },
        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:'#99A29E',
                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: [],
    }
  },
  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,
      });
    },
    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])
                    })
                }
                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.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
        }); 
    },
    // 切换登录的注册
    cutLoginReg() {
      window.location.href = "/";
    },
    changeLike(type,list){
        this[type] = list
    }
  },
  created(){
    if(this.articleId){
        this.getArticleDetail()
    }
  },
  mounted(){
  }
}
</script>

<style lang="scss" scoped>
.bookShare{
    min-height: calc(100vh - 64px);
    .navBar-left{
        cursor: pointer;
        font-size: 0;
        z-index: 2;
        .svg-icon{
            width: 204px;
            height: 32px;
            color: rgba(29, 33, 41, 1);
        }
    }
    .navBar-right{
        display: flex;
        align-items: center;
        span{
            color: #86909C;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px; 
        }
    }
    .article-box{
        position: relative;
        padding: 20px 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;
        }
    }
}
</style>
<style lang="scss">
.bookShare{
    .navBar{
        border-color: transparent;
        top: 0;
        &-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;
            }
        }
    }
}
.login-dialog{
   .el-dialog__header,.el-dialog__body{
        padding: 0;
    }
    .el-dialog{
        border: 1px solid #E5E6EB;
        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        overflow: hidden;
    } 
}
</style>