文章详细统计

src/views/bookShelf/articleDetail.vue

@@ -60,22 +60,38 @@
                     <h2>详细统计</h2>
                 </div>
                 <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇信息</h4>
-                <div class="word-info">
-                    <div v-for="(itemI,indexI) in wordInfo" :key="indexI" :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">{{itemI.label}}</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{itemI.value}}</span>
+                <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">
+                <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 vocabularyType" :key="indexE"
+                        <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.name}}</span>
+                            <span class="name">{{itemE.vlCnName}}</span>
                             <span class="number">{{itemE.value}}</span>
-                            <span class="percent">{{itemE.percent}}</span>
+                            <span class="percent">{{itemE.vocabPercentStr}}</span>
                         </li>
                     </ul>
                     <div id="shanxing_main" style="height: 360px"></div>
@@ -152,15 +168,37 @@ export default {
                 newWordOtherColor:'#667180',
                 newWordStar:'#FFB224',
                 newWordType:{
-                    'daochu':{
-                        text:'导出',
-                        color:'#F5319D',
-                        bg:'#FFE8F1'
+                    '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'
                     },
-                    'xuanbi':{
-                        text:'选必',
-                        color:'#175DFF',
-                        bg:'#D9E2FC'
+                    'LB':{
+                        color:'#CD2B31',
+                        bg:'#FFE8E8'
+                    },
+                    'LC':{
+                        color:'#4A524E',
+                        bg:'#DFE4E2'
+                    },
+                    'LD':{
+                        color:'#504F57',
+                        bg:'#C1C5CD'
                     }
                 },
                 phraseColor:'#ED5F00',
@@ -193,15 +231,37 @@ export default {
                 newWordOtherColor:'#667180',
                 newWordStar:'#FFB224',
                 newWordType:{
-                    'daochu':{
-                        text:'导出',
-                        color:'#F5319D',
-                        bg:'#FFE8F1'
+                    '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'
                     },
-                    'xuanbi':{
-                        text:'选必',
-                        color:'#175DFF',
-                        bg:'#D9E2FC'
+                    'LD':{
+                        color:'#504F57',
+                        bg:'#C1C5CD'
                     }
                 },
                 phraseColor:'#ED5F00',
@@ -232,15 +292,37 @@ export default {
                 newWordOtherColor:'#929CA8',
                 newWordStar:'#816C00',
                 newWordType:{
-                    'daochu':{
-                        text:'导出',
-                        color:'#801D45',
-                        bg:'#F04F88'
+                    'L0':{
+                        color:'rgba(255, 255, 255, 0.64)',
+                        bg:'#5B7217'
                     },
-                    'xuanbi':{
-                        text:'选必',
-                        color:'#0A2E81',
-                        bg:'#5E89EF'
+                    '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',
@@ -271,15 +353,37 @@ export default {
                 newWordOtherColor:'#99A29E',
                 newWordStar:'#816C00',
                 newWordType:{
-                    'daochu':{
-                        text:'导出',
-                        color:'#801D45',
-                        bg:'#F04F88'
+                    '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'
                     },
-                    'xuanbi':{
-                        text:'选必',
-                        color:'#0A2E81',
-                        bg:'#5E89EF'
+                    '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',
@@ -374,33 +478,8 @@ export default {
                 para:'有时差反应的，有时差感的。人体症状多表现为疲劳、方向感减弱和失眠、往往会影响人们最初几天的活动。'
             }
         ],
-        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:[
-            {
-                name:'小学',
-                percent:30.51,
-                value: 72,
+        vocabularyType:{
+            L0:{
                 bg:'#F2FCE3',
                 color:'#5B7217',
                 darkBg:'#5B7217',
@@ -411,10 +490,7 @@ export default {
                 darkGreenColor:'#5B7217',
                 darkGreenBorder:'#F2FCE3'
             },
-            {
-                name:'初中',
-                percent:26.27,
-                value: 62,
+            L1:{
                 bg:'#EFFCEF',
                 color:'#3D9A50',
                 darkBg:'#2F6E3B',
@@ -424,10 +500,7 @@ export default {
                 darkGreenColor:'#3D9A50',
                 darkGreenBorder:'#EFFCEF'
             },
-            {
-                name:'高中必修',
-                percent:2.97,
-                value: 7,
+            L2:{
                 bg:'#E7EEFF',
                 color:'#175DFF',
                 darkBg:'#006793',
@@ -437,10 +510,7 @@ export default {
                 darkGreenColor:'#0081F1',
                 darkGreenBorder:'#E7F3FF'
             },
-            {
-                name:'高中选必',
-                percent:6.78,
-                value: 16,
+            L3:{
                 bg:'#EEF3FF',
                 color:'#3459D2',
                 darkBg:'#2C49AA',
@@ -450,10 +520,7 @@ export default {
                 darkGreenColor:'#3459D2',
                 darkGreenBorder:'#EEF3FF'
             },
-            {
-                name:'导出词',
-                percent:16.95,
-                value: 40,
+            LA:{
                 bg:'#FFECF5',
                 color:'#E03177',
                 darkBg:'#AE1955',
@@ -463,10 +530,7 @@ export default {
                 darkGreenColor:'#E03177',
                 darkGreenBorder:'#FFECF5'
             },
-            {
-                name:'超纲词',
-                percent:0.00,
-                value: 0,
+            LB:{
                 bg:'#FFE8E8',
                 color:'#CD2B31',
                 darkBg:'#8F2025',
@@ -476,10 +540,7 @@ export default {
                 darkGreenColor:'#CD2B31',
                 darkGreenBorder:'#FFE8E8'
             },
-            {
-                name:'专有',
-                percent:10.17,
-                value: 24,
+            LC:{
                 bg:'#DFE4E2',
                 color:'#4A524E',
                 border:'rgba(0, 0, 0, 0.08)',
@@ -490,10 +551,7 @@ export default {
                 darkGreenColor:'#4A524E',
                 darkGreenBorder:'rgba(0, 0, 0, 0.08)'
             },
-            {
-                name:'其他',
-                percent:6.36,
-                value: 15,
+            LD:{
                 bg:'#C1C5CD',
                 color:'#504F57',
                 darkBg:'#2F3742',
@@ -503,7 +561,7 @@ export default {
                 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, // 未读
@@ -525,54 +583,56 @@ export default {
   },
   methods: {
     inityuan() {
-      var chartDom = document.getElementById("shanxing_main");
-      var myChart = echarts.init(chartDom);
-      var option;
-      let newdata = JSON.parse(JSON.stringify(this.vocabularyType));
-      newdata.forEach((item) => {
-        let percent = item.percent;
-        if (percent % 1 == 0) {
-          item.name = item.name + " " + percent + "%";
-        } else {
-          item.name = item.name + " " + percent.toFixed(2) + "%";
+        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;
+                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);
         }
-      });
-      option = {
-        color:this.bgColorList[this.activeIndex].type==='white'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.bgColorList[this.activeIndex].type==='darkGreen'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#5B7217','#2F6E3B','#006793','#2C49AA','#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) {
@@ -616,6 +676,12 @@ export default {
             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);

src/views/bookShelf/components/NewWordList.vue

@@ -20,7 +20,7 @@
                         </div>
                     </div>
                 </div>
-                <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?olorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
+                <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
                 <template v-if="!noLike">
                     <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
                     <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>

src/views/personalCenter/components/WordCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="word-card" v-loading="loading">
+  <div class="word-card" v-if="" v-loading="loading">
     <div class="word-card-top">
         <span class="progress">1 / 10</span>
         <div class="btn-box">
@@ -10,10 +10,14 @@
         </div>
     </div>
     <div class="word-card-center">
-        <span class="star word-card-rate" v-if="data.rate">
-            <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in data.rate" :key="indexS" :style="{color:'#FFB224'}"></svg-icon>
-        </span>
-        <span class="wordType">{{data.typeCn}}</span>
+        <div class="word-card-center-box">
+            <span class="star word-card-rate">
+                <template v-if="data.rate">
+                    <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in data.rate" :key="indexS" :style="{color:'#FFB224'}"></svg-icon>
+                </template>
+            </span>
+            <span class="wordType">{{data.typeCn}}</span>
+        </div>
         <h3 class="word">{{data.word}}</h3>
         <div class="symbol-box">
             <span class="symbol">{{data.symbol}}</span>
@@ -29,9 +33,13 @@
         </div>
         <el-divider content-position="left">例句</el-divider>
         <div class="number-list">
-            <div class="number-item" :class="[activeIndex===indexB?'active':'']" v-for="(itemB,indexB) in bookstore" :key="indexB" @click="handleLookStore(indexB)">
-                <label>{{itemB.label}}</label>
-                <span>{{itemB.value}}</span>
+            <div class="number-item" :class="[activeIndex===0?'active':'']" @click="handleLookStore(0)">
+                <label>全部</label>
+                <span>{{sentKwicData.total}}</span>
+            </div>
+            <div class="number-item" :class="[activeIndex===1?'active':'']" @click="handleLookStore(1)">
+                <label>我的书架</label>
+                <span>{{sentKwicData.my_bought_total}}</span>
             </div>
         </div>
         <div class="module-box">
@@ -116,33 +124,6 @@ export default {
   data() {
     //这里存放数据
     return {
-      detail:{
-        rate:3.7,
-        wordType:'导出',
-        word:'cogent',
-        symbol:'/ˈkəʊdʒənt/',
-        src:'.',
-        paraList:[
-            {
-                cixing:'n.',
-                shiyi:'火葬；火化'
-            },
-            {
-                cixing:'adv.',
-                shiyi:"兽医；<美，非正式>老兵；兽医诊所（vet's）"
-            }
-        ],
-      },
-      bookstore: [
-        {
-            label:'全部',
-            value: 9
-        },
-        {
-            label:'我的书架',
-            value: 7
-        }
-      ],
       kwicFlag: false,
       activeIndex: 0, // 高亮索引
       kwicAlign: 'left',
@@ -152,6 +133,8 @@ export default {
       voiceSrc: "",
       voicePauseSrc: '',
       voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+      sentKwicData: null,
+      allList: [],
     }
   },
   //计算属性 类似于data概念
@@ -222,7 +205,7 @@ export default {
         .then((res) => {
             this.loading = false
             if(res.status===1){
-                
+                this.sentKwicData = res.data
             }
         })
         .catch(() => {
@@ -296,9 +279,13 @@ export default {
     }
     &-center{
         padding-top: 24px;
+        .word-card-center-box{
+            display: flex;
+            justify-content: space-between;
+        }
         .word-card-rate{
             display: inline-block;
-            width: 480px;
+            width: 400px;
         }
         .wordType{
             padding: 1px 8px;