HM21St_Page_User/src/views/bookShelf/components/ArticleInfo.vue

<template>
    <div class="article-info" :style="{background:colorObj.contentInnerBg}">
        <i class="el-icon-close" @click="closeDialog" :style="{color:colorObj.sourceColor}"></i>
        <h2 :style="{color:colorObj.titleColor}">{{articleInfo.art_corpus_data.artTitle}}</h2>
        <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor}">
            {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
        </h6>
        <h4 :style="{color:colorObj.glossarySubtitle}">词汇信息</h4>
        <div class="word-info" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">文章长度</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wc}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">词汇数量</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">平均词长</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">词汇密度</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabDensity}}</span>
            </div>
        </div>
        <h4 :style="{color:colorObj.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_s')"
                    @mouseout="closegaolangbzt(indexE, 'shanxing_main_s')"
                    :style="{background:colorObj.type==='white'?itemE.bg:colorObj.type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:colorObj.type==='white'?itemE.color:colorObj.type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:colorObj.type==='white'?itemE.border:colorObj.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_s" style="height: 360px"></div>
        </div>
        <h4 :style="{color:colorObj.glossarySubtitle}">句法信息</h4>
        <div class="word-info" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">句子数</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.sentCount}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">平均句长</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgSentLen}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">长句数量</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.longSentCount}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">长句比例</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.longSentPercentStr}}</span>
            </div>
        </div>
        <div class="word-info word-infos" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">段落数</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.paraCount}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">平均段长</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgParaLen}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg}">
                <label :style="{color:colorObj.statisticTitle}">平均段落句子数</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgParaSentCount}}</span>
            </div>
        </div>
        <h4 :style="{color:colorObj.glossarySubtitle}">句长分布</h4>
        <ul class="sentence-length-box" v-if="articleInfo&&articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems">
            <li v-for="(iteml,indexl) in articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems" :key="indexl" :style="{borderColor:colorObj.audioBorder,}">
                <span class="l1" :style="{color:colorObj.statisticValue}">{{iteml.rangeInfo}}</span>
                <span class="l2" :style="{color:colorObj.statisticValue}">{{iteml.count}}</span>
                <span class="l3" :style="{color:colorObj.statisticValue}">{{iteml.percent}}%</span>
                <p>
                    <span class="l4" :style="{background:colorObj.statisticValue}"></span>
                    <span class="l5" :style="{background:colorObj.statisticValue,width:iteml.percent+'%'}"></span>
                </p>
            </li>
        </ul>
        <h4 :style="{color:colorObj.glossarySubtitle}">语篇信息</h4>
        <div class="word-info word-infos" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
            <div :style="{background:colorObj.glossaryBg,width:'456px'}">
                <label :style="{color:colorObj.statisticTitle}">HM index</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.hmIndex}}</span>
            </div>
            <div :style="{background:colorObj.glossaryBg,width:'456px'}">
                <label :style="{color:colorObj.statisticTitle}">HM CEFR</label>
                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.hmCefr}}</span>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import * as echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { },
  props: ["articleInfo", "colorObj"],
  data() {
    //这里存放数据
    return {
        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'
            }
        },
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {

  },
  //方法集合
  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_s");
            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.colorObj.type==='white'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.colorObj.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,
      });
    },
    closeDialog(){
        this.$emit("closeArticleInfo")
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    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);
    }
    if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems){
        this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems.forEach(item=>{
            item.percent = (item.count/this.articleInfo.art_corpus_data.artStatInfo.sentCount*100).toFixed(2)
        })
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.article-info{
    padding: 48px 24px; 
    position: relative;
    .el-icon-close{
        position: absolute;
        right: 24px;
        top: 24px;
        cursor: pointer;
        font-size: 24px;
        color: rgba(47, 55, 66, 1);
    }
    h2{
        color: #1F2C5C;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        margin: 0;
    }
    .nnpe-article-author{
        margin: 24px 0;
        color:#929CA8;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px; 
    }
    h4{
        margin: 24px 0 8px 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
    }
    .word-info{
        display: flex;
        justify-content: space-between;
        >div{
            width: 224px;
            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;
            }
        }
        &.word-infos{
            margin-top: 8px;
            > div{
                width: 301px;
            }
        }
    }
    .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_s{
            flex: 1;
        }
    }
    .sentence-length-box{
        li{
            border-bottom: 1px solid#EBEBEB;
            padding: 12px;
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 22px;
            justify-content: space-between;
            .l1{
                width: 245px;
                font-weight: 600;
            }
            .l2{
                width: 72px;
                text-align: center;
            }
            .l3{
                width: 72px;
                text-align: right;
            }
            .l4{
                width: 100%;
                border-radius: 8px;
                height: 8px;
                opacity: 0.3;
                position: absolute;
                left: 0;
                top: 0;
            }
            p{
                margin: 0;
                width: 435px;
                height: 8px;
                position: relative;
            }
            .l5{
                position: absolute;
                height: 8px;
                border-radius: 8px;
                left: 0;
                top: 0;
            }
        }
    }
}
</style>