文章信息

src/views/bookShelf/articleDetail.vue

@@ -146,6 +146,15 @@
             </li>
         </ul>
     </div>
+    <el-dialog
+        :visible.sync="articleInfoFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        width="968px"
+        class="articleDetail-dialog"
+        v-if="articleInfoFlag">
+        <article-info @closeArticleInfo="closeArticleInfo" :articleInfo="articleInfo" :colorObj="bgColorList[activeIndex]"></article-info>
+    </el-dialog>
   </div>
 </template>
 
@@ -158,6 +167,7 @@ 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 ArticleInfo from "./components/ArticleInfo.vue"
 import * as echarts from "echarts";
 import { getLogin } from "@/api/ajax";
 import { getToken } from '@/utils/auth'
@@ -174,7 +184,8 @@ export default {
     AnnotationList,
     NormalModel,
     MenuRight,
-    PhraseModel
+    PhraseModel,
+    ArticleInfo
   },
   data(){
     return{
@@ -617,7 +628,8 @@ export default {
         issueChnTanList: [], //文章摊平
         userMessage: getToken()?JSON.parse(getToken()):null,
         activeArticleIndex: 0,
-        articleNumber: 0
+        articleNumber: 0,
+        articleInfoFlag: false, // 显示文章信息
     }
   },
   methods: {
@@ -895,7 +907,7 @@ export default {
         }
     },
     changeArticleType(type,e){
-        if(type==='print'||type==='share'||type==='list'||type==='cloud'){
+        if(type==='print'||type==='share'||type==='list'||type==='cloud'||type==='chart'){
             if(type==='share'||type==='cloud'){
                 if(this.userMessage){
                     if(type==='cloud'){
@@ -908,6 +920,11 @@ export default {
                     this.$message.error('请先登录')
                 }
             }else{
+                if(type==='chart'){
+                    this.articleInfoFlag = true
+                }else{
+                    this.articleInfoFlag = false
+                }
                 this.menuFeature = type
             }
         }else{
@@ -1081,6 +1098,9 @@ export default {
         .catch(() => {
             
         }); 
+    },
+    closeArticleInfo(){
+        this.articleInfoFlag = false
     }
   },
   created(){
@@ -1343,6 +1363,7 @@ export default {
     top: 50%;
     left: 50%;
     z-index: 9;
+    font-size:0;
     margin-top: -270px;
     margin-left: -214px;
     border-radius: 8px;
@@ -1363,6 +1384,7 @@ export default {
         .el-icon-close{
             color: rgba(47, 55, 66, 1);
             cursor: pointer;
+            font-size: 16px;
         }
     }
     img{
@@ -1375,10 +1397,11 @@ export default {
         width: 0;
         height: 0;
         opacity: 0;
+        display: block;
     }
     &-bottom{
         .el-button{
-            width: 184px;
+            width: 174px;
             height: 48px;
             color: #FFF;
             font-size: 16px;
@@ -1585,4 +1608,9 @@ export default {
         }
     }
 }
+.articleDetail-dialog{
+    .el-dialog__header,.el-dialog__body{
+        padding: 0;
+    }
+}
 </style>

src/views/bookShelf/components/ArticleInfo.vue

@@ -0,0 +1,456 @@
+<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.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>
+        <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.sentList[articleInfo.art_corpus_data.sentList.length-1].pno}}</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>
+        <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.sentList[articleInfo.art_corpus_data.sentList.length-1].pno}}</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.wdc}}</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:'#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'
+            }
+        },
+    }
+  },
+  //计算属性 类似于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)
+        })
+    }
+    console.log(this.articleInfo)
+  },
+  //生命周期 - 挂载完成（可以访问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>

src/views/bookShelf/components/MenuRight.vue

@@ -1,16 +1,18 @@
 <template>
     <div class="menu-box">
         <template v-for="(item,index) in list">
-            <div class="menu-item" :key="index" @click="handleChange($event,index,item)" :style="{background:activeIndex===index?colorObj.menuBg:'',color:activeIndex===index?colorObj.statisticValue:colorObj.glossaryTitle}" v-if="index<6||foldFlag">
-                <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
-                <el-switch
-                    v-else
-                    v-model="item.flag"
-                    active-color="#175DFF"
-                    inactive-color="#D0D3D9">
-                </el-switch>
-                <span>{{item.name}}</span>
-            </div>
+            <template v-if="!(item.type==='list'&&!$route.query.iss_id)">
+                <div class="menu-item" :key="index" @click="handleChange($event,index,item)" :style="{background:activeIndex===index?colorObj.menuBg:'',color:activeIndex===index?colorObj.statisticValue:colorObj.glossaryTitle}" v-if="index<6||foldFlag">
+                    <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
+                    <el-switch
+                        v-else
+                        v-model="item.flag"
+                        active-color="#175DFF"
+                        inactive-color="#D0D3D9">
+                    </el-switch>
+                    <span>{{item.name}}</span>
+                </div>
+            </template>
             <el-divider :key="index" v-if="index===3||index===5||(index===list.length-1&&foldFlag)" :style="{backgroundColor:colorObj.glossaryBg}"></el-divider>
         </template>
         <a class="flod-btn" @click="foldFlag=!foldFlag">{{foldFlag?'收起':'展开'}}<svg-icon :icon-class="foldFlag?'Up-line':'Down-line'"></svg-icon></a>