|
|
@@ -0,0 +1,832 @@
|
|
|
+<template>
|
|
|
+ <div style="background: #FAFAFA;height: 100%;">
|
|
|
+ <div class="contentAlbunMain">
|
|
|
+ <div class="topBox">
|
|
|
+ <div>
|
|
|
+ <div class="numBox">
|
|
|
+ <img src="../../../../image/FloatedMenu.png"/>
|
|
|
+ <div>432,010</div>
|
|
|
+ <div>知识仓库总量</div>
|
|
|
+ </div>
|
|
|
+ </div >
|
|
|
+ <div>
|
|
|
+ <div class="numBox">
|
|
|
+ <img src="../../../../image/FloatedMenu.png"/>
|
|
|
+ <div>332,010</div>
|
|
|
+ <div>知识地图总量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="numBox">
|
|
|
+ <img src="../../../../image/FloatedMenu.png"/>
|
|
|
+ <div>12,010</div>
|
|
|
+ <div>知识专辑总量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middleBox">
|
|
|
+ <div class="topTitle" style="width: 240px;">
|
|
|
+ <div>搜索访问量分布（pv）</div>
|
|
|
+ <div>432,010
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="barNameBox" v-for="(item, index) in NameArr" :key="index">
|
|
|
+ <div :style="{'color':colorbarArr[index]}">■</div>
|
|
|
+ <div>{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="eCharts0" class="barBox"></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <div class="bottomBoxLeft">
|
|
|
+ <div class="topTitle" style="width: 46vw;padding-bottom:1.2vw;border-bottom:1px solid #f4f6f9">
|
|
|
+ <div>高频搜索词</div>
|
|
|
+ </div>
|
|
|
+ <div ref="eCharts1" class="wordCloudBox"></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBoxRight">
|
|
|
+ <div class="topTitle">
|
|
|
+ <div>知识类型分布</div>
|
|
|
+ <div>432,010</div>
|
|
|
+ </div>
|
|
|
+ <div ref="eCharts2" style="height: 100%;width: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {mapState} from "vuex";
|
|
|
+import search from '../components/search'
|
|
|
+import albumBox from '../components/albumBox'
|
|
|
+import pageBar from '../components/pageBar'
|
|
|
+import album from '@/api/knowledge/album'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import 'echarts-wordcloud'
|
|
|
+export default {
|
|
|
+ name: 'albumIndex',
|
|
|
+ components: {
|
|
|
+ search,
|
|
|
+ albumBox,
|
|
|
+ pageBar
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ user: (state) => state.appSetting.user,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ textData:[{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ },{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ },{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ },{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ },{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ },{
|
|
|
+ "name": "花鸟市场",
|
|
|
+ "value": 1446
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "汽车",
|
|
|
+ "value": 928
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "视频",
|
|
|
+ "value": 906
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "电视",
|
|
|
+ "value": 825
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Lover Boy 88",
|
|
|
+ "value": 514
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "动漫",
|
|
|
+ "value": 486
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "音乐",
|
|
|
+ "value": 53
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "直播",
|
|
|
+ "value": 163
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "广播电台",
|
|
|
+ "value": 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "戏曲曲艺",
|
|
|
+ "value": 17
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "演出票务",
|
|
|
+ "value": 6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "给陌生的你听",
|
|
|
+ "value": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "资讯",
|
|
|
+ "value": 1437
|
|
|
+ }],
|
|
|
+ colorbarArr:['#406cc4','#00c8dc','#f84e4c','#ff900d','#ffbe00'],
|
|
|
+ NameArr:['知识管理系统','平展系统','工作管理系统','EIP系统','网盘系统'],
|
|
|
+ delId:'',
|
|
|
+ delVisible:false,
|
|
|
+ scope:2,//1-我的专辑 2-全部专辑 3-我的点评
|
|
|
+ searchName:'',
|
|
|
+ categoryId:'',
|
|
|
+ pageSize:6,
|
|
|
+ total:18,
|
|
|
+ pageNum:1,
|
|
|
+ dataList:[],
|
|
|
+ imgUrl: require('@img/avatar2.jpg'),
|
|
|
+ menuArr:['知识地图','新人地图','岗位地图','制度地图'],
|
|
|
+ actionMenu:0,
|
|
|
+ level1Action:-1,
|
|
|
+ level2Action:-1,
|
|
|
+ showLevel1Num:-1,
|
|
|
+ classifyArr:[],
|
|
|
+ colorArr:['#1890ff','#3e4c84','#379eff','#379eff','#69d289','#facd1b']
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ album.categories().then((res) => {
|
|
|
+ this.classifyArr = res.data
|
|
|
+ })
|
|
|
+ if (this.user.photo && this.user.photo != '') {
|
|
|
+ this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.user.photo
|
|
|
+ }
|
|
|
+ if(this.$router.query){
|
|
|
+ if(this.$router.query.scope) {
|
|
|
+ this.scope = this.$router.query.scope
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let that = this;
|
|
|
+ var option0 = {
|
|
|
+ legend:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top:'10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ type: 'category',
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ color:that.colorbarArr[0],
|
|
|
+ name: that.NameArr[0],
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320,457,897,698,778,324]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color:that.colorbarArr[1],
|
|
|
+ name: that.NameArr[1],
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210,254,654,247,698,547]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color:that.colorbarArr[2],
|
|
|
+ name: that.NameArr[2],
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310,325,748,654,214,365]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color:that.colorbarArr[3],
|
|
|
+ name: that.NameArr[3],
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410,415,254,784,654,478]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color:that.colorbarArr[4],
|
|
|
+ name: that.NameArr[4],
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ data: [862, 1018, 964, 1026, 1679, 1600, 1570,325,478,124,547,214],
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
|
|
+ barBorderRadius:[6, 6, 0, 0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var pieEl0=this.$refs.eCharts0;
|
|
|
+ var pieChart0=echarts.init(pieEl0);
|
|
|
+ pieChart0.setOption(option0);
|
|
|
+
|
|
|
+ var option1={
|
|
|
+ backgroundColor:'#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: params => {
|
|
|
+ const { name, value } = params
|
|
|
+ return `平台：${name} <br/>数量：${value}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'wordCloud',
|
|
|
+ // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
|
|
|
+ shape: 'line',
|
|
|
+ // 这个功能还没用过
|
|
|
+ keepAspect: false,
|
|
|
+ // 下面就是位置的配置
|
|
|
+ left: '0',
|
|
|
+ top: '0',
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
|
|
|
+ sizeRange: [12, 60],
|
|
|
+ // 每个词旋转的角度范围和旋转的步进
|
|
|
+ rotationRange: [0, 90],
|
|
|
+ rotationStep: 90,
|
|
|
+ // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
|
|
|
+ gridSize: 12,
|
|
|
+ // 允许词太大的时候，超出画布的范围
|
|
|
+ drawOutOfBound: false,
|
|
|
+ // 布局的时候是否有动画
|
|
|
+ layoutAnimation: true,
|
|
|
+ // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
|
|
|
+ textStyle: {
|
|
|
+ fontFamily: 'sans-serif',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ // 颜色可以用一个函数来返回字符串，这里是随机色
|
|
|
+ color: function () {
|
|
|
+ // Random color
|
|
|
+ return that.colorArr[Math.floor(Math.random()*6)]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#333'
|
|
|
+ },
|
|
|
+ // 数据必须是一个数组，数组是对象，对象必须有name和value属性
|
|
|
+ data: that.textData
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ var pieEl1=this.$refs.eCharts1;
|
|
|
+ var pieChart1=echarts.init(pieEl1);
|
|
|
+ pieChart1.setOption(option1);
|
|
|
+
|
|
|
+ var option2 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ top: '20%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ roseType: 'radius',
|
|
|
+ top:'10%',
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '60%',
|
|
|
+ data: [
|
|
|
+ { value: '23123', name: '维基知识\n23123', itemStyle:{color:'#406cc4'}},
|
|
|
+ { value: '25403', name: '文档知识\n45403', itemStyle:{color:'#aebfee'},selected:true}
|
|
|
+ ],
|
|
|
+ selectedOffset:100,
|
|
|
+ labelLayout(params) {
|
|
|
+ console.log(params)
|
|
|
+ return {
|
|
|
+ x: params.labelLinePoints[2][0]<params.rect.x?params.labelLinePoints[2][0]-params.labelRect.width:params.labelLinePoints[2][0],
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ align: 'left'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ fontSize:18,
|
|
|
+ lineHeight:26
|
|
|
+ },
|
|
|
+ labelLine:{
|
|
|
+ lineStyle:{
|
|
|
+ color:'#000'
|
|
|
+ },
|
|
|
+ length:60,
|
|
|
+ length2:0
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ scaleSize:30,
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var pieEl2=this.$refs.eCharts2;
|
|
|
+ var pieChart2=echarts.init(pieEl2);
|
|
|
+ pieChart2.setOption(option2);
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //搜索
|
|
|
+ searchResult(data){
|
|
|
+ this.searchName = decodeURI(data.keyword)
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ //删除start
|
|
|
+ del(id){
|
|
|
+ this.delId = id
|
|
|
+ this.delVisible = true
|
|
|
+ },
|
|
|
+ //删除确认
|
|
|
+ confirmOk(){
|
|
|
+ let postData = {ids:this.delId}
|
|
|
+ album.del(postData).then((res) => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.delVisible = false
|
|
|
+ this.$message.success("删除成功!");
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeDel(){
|
|
|
+ this.delVisible = false
|
|
|
+ },
|
|
|
+ //删除end
|
|
|
+ changeScope(num){
|
|
|
+ this.scope = num
|
|
|
+ this.pageNum = 1
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ //查询数据
|
|
|
+ getData(){
|
|
|
+
|
|
|
+ },
|
|
|
+ //新增专辑
|
|
|
+ goCreatData(){
|
|
|
+ this.$router.push({
|
|
|
+ name: "albumDetail",
|
|
|
+ query: {
|
|
|
+ isAdd: 1,
|
|
|
+ scope: this.scope
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改页码
|
|
|
+ pageChange(num){
|
|
|
+ this.pageNum = num
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ //查看2级分类
|
|
|
+ showMore(num){
|
|
|
+ if(this.classifyArr[num].children.length!=0){
|
|
|
+ this.showLevel1Num = num
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //关闭所有分类
|
|
|
+ clearAllLevel(){
|
|
|
+ if(this.level2Action==-1){
|
|
|
+ this.showLevel1Num = -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选择分类1级
|
|
|
+ selectLevel(num,pkId){
|
|
|
+ this.level2Action = -1
|
|
|
+ if(this.level1Action == num){
|
|
|
+ this.level1Action = -1
|
|
|
+ this.categoryId = ''
|
|
|
+ }else{
|
|
|
+ this.level1Action = num
|
|
|
+ this.categoryId = pkId
|
|
|
+ }
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ //选择分类2级
|
|
|
+ selectLevel2(num,pkId){
|
|
|
+ this.level1Action = -1
|
|
|
+ if(this.level2Action == num){
|
|
|
+ this.level2Action = -1
|
|
|
+ }else{
|
|
|
+ this.level2Action = num
|
|
|
+ this.categoryId = pkId
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.contentAlbunMain{
|
|
|
+ overflow: scroll;
|
|
|
+ padding: 1.5625vw 10.93vw;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ background: #FAFAFA;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.numBox{
|
|
|
+ width: 25vw;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 221px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top:50px;
|
|
|
+}
|
|
|
+.topBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.middleBox{
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 20vw;
|
|
|
+ margin-top: 1.4vw;
|
|
|
+}
|
|
|
+.bottomBox{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 1.4vw;
|
|
|
+}
|
|
|
+.bottomBoxLeft{
|
|
|
+ height: 20vw;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 49.6vw;
|
|
|
+}
|
|
|
+.bottomBoxRight{
|
|
|
+ height: 20vw;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 26vw;
|
|
|
+}
|
|
|
+.numBox img{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin-top: -50px;
|
|
|
+}
|
|
|
+.numBox div:nth-child(2){
|
|
|
+ font-size: 30px;
|
|
|
+ width: 95px;
|
|
|
+ word-break: break-all;
|
|
|
+ color: #202124;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.numBox div:last-child{
|
|
|
+ font-size: 18px;
|
|
|
+ width: 110px;
|
|
|
+ color: #92929D;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.topTitle{
|
|
|
+ width: 111px;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-left: 30px;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+.topTitle div:nth-child(2){
|
|
|
+ color: #202124;
|
|
|
+ font-size: 30px;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.topTitle div:first-child{
|
|
|
+ color: rgb(146, 146, 157);
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.topTitle div:nth-child(3){
|
|
|
+ color: #202124;
|
|
|
+ width: 74vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: -1.8vw;
|
|
|
+}
|
|
|
+.barBox{
|
|
|
+ height: 70%;
|
|
|
+ margin-top: 6vw;
|
|
|
+}
|
|
|
+.wordCloudBox{
|
|
|
+ height: 73%;
|
|
|
+ margin-top: 4.2vw;
|
|
|
+ width: 46vw;
|
|
|
+ margin-left: 30px;
|
|
|
+}
|
|
|
+.barNameBox{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: end;
|
|
|
+ width: auto!important;
|
|
|
+ margin-right: 1vw;
|
|
|
+}
|
|
|
+.barNameBox div:nth-child(1){
|
|
|
+ font-size: 0.6vw;
|
|
|
+ margin-right: 0.6vw;
|
|
|
+}
|
|
|
+.barNameBox div:nth-child(2){
|
|
|
+ font-size: 1vw;
|
|
|
+}
|
|
|
+</style>
|
zhangli