Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

标签管理

Browse Source
This commit is contained in:
WangHao
2021-05-24 00:26:30 +08:00
parent 900076723f
commit 6414758036
24 changed files with 571 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ruoyi-ui/src/views/bookmark/bkuser/index.vue
View File

@ -19,7 +19,7 @@
<div class="mdui-btn-group head-tag-button">
<!-- <div :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>-->
<button @click="goRouter(1)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='1'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">个人中心</button>
<button @click="goRouter(7)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='7'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">外观设置</button>
<!-- <button @click="goRouter(7)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='7'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">外观设置</button>-->
<button @click="goRouter(2)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='2'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">系统设置</button>
<button @click="goRouter(3)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='3'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">导入书签</button>
<button @click="goRouter(4)" :class="['mdui-btn mdui-color-theme-accent mdui-ripple ',property=='4'?' mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600':'']">备份导出</button>
@ -70,7 +70,7 @@
that.$router.push({
path: "/content",
query: {
menuId: 'BOOKMARK'
menuId: 'newest'
}
})
break;

102
ruoyi-ui/src/views/bookmark/bookmark/index.vue
View File

@ -24,7 +24,8 @@
<div class="sousouright-iconadd">
<el-dropdown trigger="click" size="small" :hide-on-click="true" >
<span class="el-dropdown-link">
<i class="el-icon-plus" style="font-size: 18px;"/>
<!-- <i class="el-icon-plus" style="font-size: 18px;"/>-->
<el-button icon="el-icon-plus" style="border:0px;font-size: 18px;" size="mini"></el-button>
</span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接
@ -38,7 +39,7 @@
<el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link">
<el-avatar :size="28"
<el-avatar style="margin-top: 5px" :size="28"
src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown">
@ -55,14 +56,15 @@
<div class="filter-tbar">
<div class="filter-classification">
<div :class="['classification',property=='0'?' classification-click':'']" @click="showopen(0)"><span>网页</span></div>
<div :class="['classification',property=='1'?' classification-click':'']" @click="showopen(1)"><span>文本</span></div>
<!-- <div :class="['classification',property=='1'?' classification-click':'']" @click="showopen(1)"><span>文本</span></div>-->
<div :class="['classification',property=='2'?' classification-click':'']" @click="showopen(2)"><span>其他</span></div>
</div>
<div class="setUpThe">
<div class="filter-content">
<el-dropdown trigger="hover" size="small" @command="handleCommand">
<div class="el-dropdown-link dropdownList">
<i class="el-icon-document-checked "></i>
<!-- <i class="el-icon-document-checked "></i>-->
<el-button icon="el-icon-document-checked" style="border:0px;font-size: 18px;" size="mini"></el-button>
</div>
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-dropdown-item class="filter-item" command="0"><i class="el-icon-bottom"></i>按时间排序(正)
@ -80,7 +82,7 @@
<div class="filter-content">
<el-dropdown trigger="hover" size="small">
<div class="el-dropdown-link dropdownList">
<i class="el-icon-tickets "></i>
<el-button icon="el-icon-tickets" style="border:0px;font-size: 18px;" size="mini"></el-button>
</div>
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
@ -105,8 +107,8 @@
<div class="nullbookmark" v-if="showimg">
<div class="nullbookmark-img">
</div>
<div style="color: #000000" class="nullbookmark-text">
此目录还未添加收藏
<div class="nullbookmark-text">
空空如也
</div>
</div>
@ -411,7 +413,7 @@
}
console.log("routedata："+routedata)
if (routedata == 'newest'||routedata == 'asterisk'||routedata == 'seeYouLater'||routedata == 'recycle') {
if ((sousuo != null && sousuo != undefined && sousuo != '')||routedata == 'newest'||routedata == 'asterisk'||routedata == 'seeYouLater'||routedata == 'recycle') {
that.queryParams.menuId=null;
this.listByUserAndPolymerization(routedata);
@ -606,14 +608,25 @@
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}else{
this.msgError("新增失败,系统错误!");
this.open = false;
}
});
} else {
addBookmark(this.form).then(response => {
if (response.code === 200) {
if(response.data === 'repetition'){
this.msgSuccess("新增失败,此书签已经存在了!");
this.open = false;
return;
}
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}else{
this.msgError("新增失败,系统错误!");
this.open = false;
}
});
}
@ -705,24 +718,24 @@
}
});
},
/** 全部书签**/
getBookmarkList() {
this.loading = true;
selectByUseridList(this.queryParams).then(response => {
if (response.code == 200) {
this.bookmarkList = this.bookmarkList.concat(response.rows);
this.total = response.total;
this.listloading = false
this.loading = false;
console.log("请求完毕" + this.queryParams.pageNum)
} else {
//出错了加载完毕了 禁止滚动
this.noMore = true;
this.listloading = false
this.loading = false;
}
});
},
// /** 全部书签**/
// getBookmarkList() {
// this.loading = true;
// selectByUseridList(this.queryParams).then(response => {
// if (response.code == 200) {
// this.bookmarkList = this.bookmarkList.concat(response.rows);
// this.total = response.total;
// this.listloading = false
// this.loading = false;
// console.log("请求完毕" + this.queryParams.pageNum)
// } else {
// //出错了加载完毕了 禁止滚动
// this.noMore = true;
// this.listloading = false
// this.loading = false;
// }
// });
// },
/** 最新 星标 回收站 稍后看**/
listByUserAndPolymerization(str) {
console.log(" 最新 星标 回收站 稍后看");
@ -735,12 +748,16 @@
this.total = response.total;
this.listloading = false
this.loading = false;
if (response.total == 0){
this.showimg = true;//空提示
}
console.log("请求完毕" + this.queryParams.pageNum)
} else {
//出错了加载完毕了 禁止滚动
this.noMore = true;
this.listloading = false
this.loading = false;
this.showimg = true;
}
});
},
@ -787,7 +804,7 @@
/** 查询书签管理列表 */
getList() {
this.loading = true;
selectBymenuIdUserID(this.queryParams).then(response => {
listByUserAndPolymerization(this.queryParams).then(response => {
if (response.code == 200) {
this.bookmarkList = response.rows;
this.total = response.total;
@ -810,14 +827,9 @@
var routedata = this.queryParams.menuId;
if(routedata == 'newest'||routedata == 'asterisk'||routedata == 'seeYouLater'||routedata == 'recycle'){
this.listByUserAndPolymerization(routedata);
// //全部书签
// this.getBookmarkList();
// }else if (this.queryParams.menuId == 'RECYCLE') {
// //回收站书签
// this.getrecycleList();
}else{
//查看目录下的书签
this.getlistByMenuId();
this.listByUserAndPolymerization(routedata);
}
},
/**查询便签 滚动加载分页拼接*/
@ -965,7 +977,13 @@
<style scoped>
/*.isbookmarkContainer{*/
/* background-color: #f0f0f2;*/
/* background-image: url(https://shijiechao.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2020/12/top_bg.png);*/
/* background-repeat: no-repeat;*/
/* background-attachment: fixed;*/
/* background-position: center top;*/
/*}*/
.button-new-tag {
margin-left: 10px;
@ -1019,21 +1037,23 @@
.nullbookmark-img {
margin: 0 auto;
width: 250px;
width: 450px;
height: 250px;
justify-content: center;
align-content: center;
background-image: url("https://s1.ax1x.com/2020/08/22/dawFp9.png");
background-image: url("../../../assets/image/ts.png");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.75;
}
.nullbookmark-text {
margin: 0 auto;
width: 250px;
text-align: center;
color: #D4D4D4 !important;
color: #D4D4D4;
font-size: 18px;
/*font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;*/
}
.editBookamrk {
@ -1104,10 +1124,10 @@
height: 40px;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
box-sizing: border-box;
}
.filter-classification {
@ -1125,7 +1145,7 @@
}
.filter-content {
margin-left: 13px;
margin-left: 2px;
}
@ -1331,7 +1351,7 @@
display: flex;
justify-content: center;
align-items: center;
width: 50px;
width: 60px;
}
.sq-dropdown {

115
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -20,11 +20,26 @@
<div class="main-right">
<!-- <svg-icon icon-class="tool" class="svgicon"/>-->
<div class="aside-title" @click="goRouter(8)"><i class="el-icon-folder"></i><span>最新</span></div>
<div class="aside-title" @click="goRouter(9)"><i class="el-icon-star-off"></i><span>星标</span></div>
<div class="aside-title" @click="goRouter(10)"><i class="el-icon-reading"></i><span>稍后看</span></div>
<div class="aside-title"><i class="el-icon-view"></i><span>发现</span></div>
<div class="aside-title"><i class="el-icon-message"></i><span>收件箱</span></div>
<div class="aside-title" @click="goRouter(8)"><i class="el-icon-folder"></i>
<span>最新</span>
<span class="menuCount">112</span>
</div>
<div class="aside-title" @click="goRouter(9)"><i class="el-icon-star-off"></i>
<span>星标</span>
<span class="menuCount">92</span>
</div>
<div class="aside-title" @click="goRouter(10)"><i class="el-icon-reading"></i>
<span>稍后看</span>
<span class="menuCount">5</span>
</div>
<div class="aside-title"><i class="el-icon-view"></i>
<span>发现</span>
<span class="menuCount"></span>
</div>
<div class="aside-title"><i class="el-icon-message"></i>
<span>收件箱</span>
<span class="menuCount">5</span>
</div>
<div class="aside-titleB" @mouseenter="eidtMenuText=!eidtMenuText" @mouseleave="eidtMenuText=!eidtMenuText">
@ -73,32 +88,42 @@
</el-input>
<i v-if="!searchBkMenu" @click="searchBkMenuCk" class="el-icon-close" style="font-size: 25px;margin-left: 5px;margin-bottom: 2px"></i>
</div>
<!-- <transition name="el-zoom-in-top">-->
<!-- 目录-->
<div class="areaTree" v-show="menuListShow">
<ul id="treeDemo" class="ztree"></ul>
</div>
<!-- </transition>-->
<!-- <div class="reminder" STYLE="">工具箱</div>-->
<div class="aside-titleB" @mouseenter="eidtTAGText=!eidtTAGText" @mouseleave="eidtTAGText=!eidtTAGText">
<i @click="tagListShowCk" :class="tagListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i>
<i class="el-icon-price-tag aside-titleB_childi_two"></i>
<span >工具箱</span>
<div style="margin-left: 40%" v-show="eidtTAGText">
<i class="el-icon-search" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click="searchBkTagCk"></i>
<i class="el-icon-folder-add" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click="addBkTagCk"></i>
<el-collapse-transition>
<div class="areaTree transition-box" v-show="menuListShow">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</el-collapse-transition>
<div class="reminder" STYLE="">工具箱</div>
<!-- TAG标签 -->
<usertag/>
<!-- <div class="aside-title"><i class="el-icon-s-flag" style="color: #569cd5"></i><span>RSS订阅</span></div>-->
<div class="aside-title" @click="goRouter(7)"><i class="el-icon-collection"></i><span>标签管理</span></div>
<!-- <div class="aside-title" @click="goRouter(7)"><i class="el-icon-collection"></i><span>功能管理</span></div>-->
<div class="aside-title" @click="goRouter(6)"><i class="el-icon-delete" ></i><span>垃圾桶</span></div>
<div class="aside-title"><i class="el-icon-chat-dot-square"></i><span>意见反馈</span></div>
<div class="aside-title" @click="goRouter(2)"><i class="el-icon-suitcase"></i><span>小工具</span></div>
<!-- <div class="aside-title"><i class="el-icon-chat-dot-square"></i><span>意见反馈</span></div>-->
<!-- <div class="aside-title" @click="goRouter(2)"><i class="el-icon-suitcase"></i><span>小工具</span></div>-->
<div class="aside-title " style="margin-bottom: 100px" @click="goRouter(11)"><i class="el-icon-setting"></i><span>更多设置</span></div>
</div>
@ -111,8 +136,8 @@
<!-- 拖拽 -->
<!-- <div class="isresize" style="cursor:w-resize">-->
<!-- </div>-->
<div class="isresize" style="cursor:w-resize">
</div>
@ -173,11 +198,12 @@
import "../ztree/zTreeStyle.css"
import "../ztree/jquery.ztree.exedit.js"
import {listMenuByUserId,listByMenuId} from "@/api/bookmark/menu";
import usertag from '../tag/usertag.vue'
export default {
name: 'areaTree',
components: {
Treeselect
Treeselect,usertag
},
data: function () {
@ -187,10 +213,6 @@
menuListShow:true,//目录list
eidtMenuText:false,//我的收藏
addBkTAG:true,//添加书TAG
searchBkTAG:true,//搜索TAG
tagListShow:false,//TAGlist
eidtTAGText:false,//我的TAG
queryParams: {
@ -370,24 +392,7 @@
},
/**添加书签目录**/
addBkTagCk(){
this.addBkTAG = this.addBkTAG?false:true;
this.searchBkTAG = true;
this.tagListShow = true;
},
/**搜索书签目录**/
searchBkTagCk(){
this.searchBkMenu = this.searchBkTAG?false:true;
this.addBkTAG = true;
this.tagListShow = true;
},
/**搜索书签目录**/
tagListShowCk(){
this.tagListShow = this.tagListShow?false:true;
this.addBkTAG = true;
this.searchBkTAG = true;
},
/**图片失败显示**/
errorHandler() {
@ -413,7 +418,8 @@
console.log("开始拖拽")
var resize = document.getElementsByClassName('isresize');
var left = document.getElementsByClassName('main-right');
var mid = document.getElementsByClassName('el-container mid is-vertical');
// var mid = document.getElementsByClassName('el-container mid is-vertical');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
var transition = document.getElementsByClassName('transition-box');
@ -886,7 +892,8 @@
that.$router.push({
path: "/content",
query: {
menuId: 'recycle'
menuId: 'recycle',
t:Date.now()
}
})
break;
@ -1000,7 +1007,6 @@
</script>
<style scoped>
body {
/*font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;*/
font-family: "Merriweather", "Open Sans", "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
@ -1213,6 +1219,11 @@
.separator {
float: left;
}
.menuCount{
float: right;
margin-right:18px!important;
color: #9e9e9e
}
.filter-sort i {
margin-left: -4px;

159
ruoyi-ui/src/views/bookmark/tag/usertag.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div class="main" >
<div class="aside-titleB" @mouseenter="eidtTAGText=!eidtTAGText" @mouseleave="eidtTAGText=!eidtTAGText">
<i @click="tagListShowCk" :class="tagListShow ? 'el-icon-caret-bottom aside-titleB_childi_one':'el-icon-caret-right aside-titleB_childi_one'" ></i>
<i class="el-icon-price-tag aside-titleB_childi_two"></i>
<span >标签管理</span>
<div style="margin-left: 40%" v-show="eidtTAGText">
<i class="el-icon-search" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click="searchBkTagCk"></i>
<i class="el-icon-folder-add" style="font-size: 19px;margin-left: 5px;margin-top: 7px" @click="addBkTagCk"></i>
</div>
</div>
<div style="display: flex;justify-items: center;align-items: center">
<el-input
v-if="!addBkTAG"
placeholder="输入书签名字"
v-model="input4"
size="mini"
style="width: 80%;margin-left: 5%"
>
<i slot="prefix" class="el-input__icon el-icon-circle-plus-outline"></i>
</el-input>
<i v-if="!addBkTAG" @click="addBkTagCk" class="el-icon-close" style="font-size: 25px;margin-left: 5px;margin-bottom: 2px"></i>
</div>
<div style="display: flex;justify-items: center;align-items: center">
<el-input
v-if="!searchBkTAG"
placeholder="搜索书签"
v-model="input4"
size="mini"
style="width: 80%;margin-left: 5%"
>
<i slot="prefix" class="el-icon-search" style="margin-left: 5px"></i>
</el-input>
<i v-if="!searchBkTAG" @click="searchBkTagCk" class="el-icon-close" style="font-size: 25px;margin-left: 5px;margin-bottom: 2px"></i>
</div>
<el-collapse-transition>
<div v-if=" tagListShow">
<!-- TAG标签 -->
<div v-if=" !(tagList == undefined ||tagList == null || tagList.length <= 0)" v-for="item in tagList" >
<div class="aside-title name transition-box" id="item.id">
<i class="el-icon-collection-tag" style="font-size: 15px"/> {{item.name}}
<!-- <el-tag type="info" size="mini">{{item.name}}</el-tag>-->
</div>
</div>
<div v-if=" !(tagList == undefined ||tagList == null || tagList.length <= 0)" class="aside-title name transition-box" >加载更多</div>
<!-- 无标签 -->
<div v-if=" tagList == undefined ||tagList == null || tagList.length <= 0" class="aside-title name transition-box" >暂无标签</div>
</div>
</el-collapse-transition>
</div>
</template>
<script>
import {listByUser,listByUserLike} from "@/api/bookmark/tag";
export default {
name: 'areaTree',
components: {},
data: function () {
return {
msg:'暂无标签',
tagList:[],
tagParams: {
pageNum: 1,
pageSize: 8
},
addBkTAG:true,//添加书TAG
searchBkTAG:true,//搜索TAG
tagListShow:false,//TAGlist
eidtTAGText:false,//我的TAG
}
},
created(){
this.listByUser();
},
methods: {
/** 查询书签 */
listByUser: function () {
listByUser(this.tagParams).then(response => {
if (response.code === 200) {
this.tagList=response.rows;
}
});
},
/**添加书签目录**/
addBkTagCk(){
this.addBkTAG = this.addBkTAG?false:true;
this.searchBkTAG = true;
this.tagListShow = true;
},
/**搜索书签目录**/
searchBkTagCk(){
this.searchBkTAG = this.searchBkTAG?false:true;
this.addBkTAG = true;
this.tagListShow = true;
},
/**搜索书签目录**/
tagListShowCk(){
this.tagListShow = this.tagListShow?false:true;
this.addBkTAG = true;
this.searchBkTAG = true;
},
}
}
</script>
<style scoped>
.name{
padding-left: 50px;
}
.aside-title:hover{
background-color: #e8e8e8;
color: #1c84c6;
}
.aside-titleB{
display: flex;
height: 32px;
align-items: center;
justify-items: center;
}
.aside-titleB:hover {
background-color: #e8e8e8;
}
/**第一个元素**/
.aside-titleB_childi_one{
margin-left: 5px;
font-size: 15px;
margin-right: 11px;
vertical-align: middle;
}
/**第二个元素**/
.aside-titleB_childi_two{
margin-left: -4px;
font-size: 20px;
margin-right: 11px;
vertical-align: middle;
}
.aside-titleB span{
font-size: 14px;
}
</style>

2
ruoyi-ui/src/views/bookmark/ztree/jquery.ztree.core.js
View File

@ -1366,7 +1366,7 @@
if (!node.isAjaxing) {
var isParent = data.nodeIsParent(setting, node);
var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon];
if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;background-position:center;background-size:20px 20px;border-radius: 50%;");
if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;background-position:center;background-size:20px 20px;");//border-radius: 50%; 目录的图标
if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) {
icoStyle.push("display:none;");
}

199
ruoyi-ui/src/views/index.vue
View File

@ -1,98 +1,101 @@
<template>
<div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default {
name: 'Index',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
<template>
<div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default {
name: 'Index',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style lang="scss" scoped>
/*html{*/
/* overflow: hidden;*/
/*}*/
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>