forked from github/dataease
feat: 合并仪表板代码
This commit is contained in:
fit2cloud-chenyw
parent
4ab6a15c93
commit
7d248904d3
@ -409,7 +409,6 @@ export default {
|
||||
},
|
||||
style() {
|
||||
if (!this.panelDesign.styleInit && this.panelDesign.componentPosition) {
|
||||
debugger
|
||||
// 设置定位
|
||||
const componentPosition = JSON.parse(this.panelDesign.componentPosition)
|
||||
this.left = componentPosition.left
|
||||
@ -636,7 +635,6 @@ export default {
|
||||
|
||||
methods: {
|
||||
removeView() {
|
||||
debugger
|
||||
this.panelDesign.keepFlag = false
|
||||
// console.log(this.panelDesignId);
|
||||
// this.$emit('removeView', this.panelDesign.id)
|
||||
|
||||
@ -67,7 +67,7 @@ export const constantRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: 'edit',
|
||||
component: () => import('@/views/panel/new/edit')
|
||||
component: () => import('@/views/panel/edit')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -110,3 +110,15 @@ div:focus {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.filter-card-class {
|
||||
width: 100%;
|
||||
.el-card__header {
|
||||
padding: 5px 0 !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
253
frontend/src/views/panel/DrawingBoard/index.vue
Normal file
253
frontend/src/views/panel/DrawingBoard/index.vue
Normal file
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<el-row class="panel-design-show">
|
||||
<div class="container" :style="panelDetails.gridStyle">
|
||||
<vue-drag-resize-rotate
|
||||
v-for="panelDesign in panelDetails.panelDesigns"
|
||||
v-show="panelDesign.keepFlag"
|
||||
:key="panelDesign.id"
|
||||
:panel-design="panelDesign"
|
||||
:parent="true"
|
||||
@newStyle="newStyle"
|
||||
>
|
||||
<!--视图显示 panelDesign.componentType==='view'-->
|
||||
<chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
|
||||
|
||||
<!--组件显示（待开发）-->
|
||||
|
||||
</vue-drag-resize-rotate>
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
import { post, get } from '@/api/panel/panel'
|
||||
import ChartComponent from '@/views/chart/components/ChartComponent'
|
||||
import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
components: { ChartComponent, VueDragResizeRotate },
|
||||
data() {
|
||||
return {
|
||||
panelDetails: {
|
||||
viewsUsable: [],
|
||||
panelDesigns: [],
|
||||
gridStyle: null
|
||||
},
|
||||
gridStyleDefault: {
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
backgroundColor: '#f2f2f2',
|
||||
// background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
|
||||
backgroundSize: '20px 20px, 20px 20px'
|
||||
},
|
||||
ViewActiveName: 'Views'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
panelInfo(newVal, oldVal) {
|
||||
this.panelDesign(newVal.id)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
},
|
||||
mounted() {
|
||||
const panelId = this.$store.state.panel.panelInfo.id
|
||||
if (panelId) {
|
||||
this.panelDesign(panelId)
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
methods: {
|
||||
// 加载公共组件
|
||||
|
||||
// 加载panel design
|
||||
panelDesign(panelId) {
|
||||
get('panel/group/findOne/' + panelId).then(res => {
|
||||
const panelDetailsInfo = res.data
|
||||
if (panelDetailsInfo) {
|
||||
this.panelDetails = panelDetailsInfo
|
||||
}
|
||||
if (!panelDetailsInfo.gridStyle) {
|
||||
this.panelDetails.gridStyle = this.gridStyleDefault
|
||||
}
|
||||
})
|
||||
},
|
||||
panelViewAdd(view) {
|
||||
const panelDesigns = this.panelDetails.panelDesigns
|
||||
this.panelDetails.viewsUsable.forEach(function(item, index) {
|
||||
if (item.id === view.id) {
|
||||
const newComponent = {
|
||||
id: uuid.v1(),
|
||||
keepFlag: true,
|
||||
chartView: item,
|
||||
componentType: 'view',
|
||||
styleInit: false
|
||||
}
|
||||
panelDesigns.push(newComponent)
|
||||
}
|
||||
})
|
||||
},
|
||||
// removeView(panelDesignId) {
|
||||
// this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
|
||||
// if (panelDesign.id === panelDesignId) {
|
||||
// panelDesign.keepFlag = false
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
newStyle(viewId, newStyleInfo) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[viewId][0].chartResize()
|
||||
})
|
||||
this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
|
||||
console.log(viewId)
|
||||
console.log(JSON.stringify(newStyleInfo))
|
||||
},
|
||||
|
||||
// 左边往右边拖动时的事件
|
||||
start1(e) {
|
||||
console.log(e)
|
||||
},
|
||||
end1(e) {
|
||||
console.log(e)
|
||||
},
|
||||
// 右边往左边拖动时的事件
|
||||
start2(e) {
|
||||
console.log(e)
|
||||
},
|
||||
end2(e) {
|
||||
console.log(e)
|
||||
},
|
||||
// move回调方法
|
||||
onMove(e, originalEvent) {
|
||||
console.log(e)
|
||||
return true
|
||||
},
|
||||
preViewShow() {
|
||||
|
||||
},
|
||||
savePanel() {
|
||||
post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
|
||||
})
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-list {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
min-width: 180px;
|
||||
max-width: 220px;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-left: 0 solid;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.view-list-thumbnails-outline {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.view-list-thumbnails {
|
||||
width: 100%;
|
||||
padding: 0px 15px 15px 0px;
|
||||
}
|
||||
|
||||
.panel-design {
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.panel-design-head {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.panel-design-show {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.padding-lr {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.itxst {
|
||||
margin: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 40%;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: solid 1px #eee;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col + .col {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 2px 12px;
|
||||
margin: 3px 3px 0 3px;
|
||||
border: solid 1px #eee;
|
||||
background-color: #f1f1f1;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
border-top: none;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-axis {
|
||||
padding: 2px 12px;
|
||||
margin: 3px 3px 0 3px;
|
||||
border: solid 1px #eee;
|
||||
background-color: #f1f1f1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-axis:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid #000;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
229
frontend/src/views/panel/edit/index.vue
Normal file
229
frontend/src/views/panel/edit/index.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<!-- <de-header>Header</de-header> -->
|
||||
<el-header class="de-header">
|
||||
<el-row class="panel-design-head">
|
||||
<span style="float: left;line-height: 35px; color: gray">
|
||||
|
||||
<span>名称：测试仪表板</span>
|
||||
|
||||
</span>
|
||||
<span style="float: right;line-height: 35px;">
|
||||
|
||||
<el-tooltip content="返回目录">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="背景图">
|
||||
<el-button class="el-icon-full-screen" size="mini" circle />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-view" size="mini" circle @click="save" />
|
||||
</el-tooltip>
|
||||
|
||||
</span>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<de-container>
|
||||
<de-aside-container class="ms-aside-container">
|
||||
<div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
|
||||
|
||||
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
|
||||
<!-- 视图图表 -->
|
||||
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
|
||||
<el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
|
||||
</div>
|
||||
<!-- 视图文字 -->
|
||||
<div style="position: relative; margin: 18px auto 30px">
|
||||
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
|
||||
视图
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视图分割线 -->
|
||||
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
|
||||
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
|
||||
</div>
|
||||
<!-- 过滤组件 -->
|
||||
<div tabindex="-1" style="position: relative; margin: 20px auto">
|
||||
|
||||
<div style="height: 60px; position: relative">
|
||||
|
||||
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
|
||||
|
||||
<!-- <i class="el-icon-s-tools" style="width: 24px; height: 24px;position: relative;flex-shrink: 0;font-size:150%;" /> -->
|
||||
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
|
||||
|
||||
</div>
|
||||
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
|
||||
|
||||
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
|
||||
|
||||
组件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
|
||||
<div class="leftPanel-background" />
|
||||
<div v-if="show" class="leftPanel">
|
||||
|
||||
<div class="leftPanel-items">
|
||||
<filter-group />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</de-aside-container>
|
||||
<de-main-container class="ms-main-container">
|
||||
<drawing-board />
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import { addClass, removeClass } from '@/utils'
|
||||
import FilterGroup from '../filter'
|
||||
import DrawingBoard from '../DrawingBoard'
|
||||
export default {
|
||||
components: {
|
||||
DeMainContainer,
|
||||
DeContainer,
|
||||
DeAsideContainer,
|
||||
FilterGroup,
|
||||
DrawingBoard
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
clickNotClose: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(value) {
|
||||
if (value && !this.clickNotClose) {
|
||||
this.addEventClick()
|
||||
}
|
||||
if (value) {
|
||||
addClass(document.body, 'showRightPanel')
|
||||
} else {
|
||||
removeClass(document.body, 'showRightPanel')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.insertToBody()
|
||||
},
|
||||
beforeDestroy() {
|
||||
const elx = this.$refs.rightPanel
|
||||
elx.remove()
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
|
||||
},
|
||||
toDir() {
|
||||
this.$router.replace('/panel/index')
|
||||
},
|
||||
showPanel(type) {
|
||||
this.show = !this.show
|
||||
},
|
||||
addEventClick() {
|
||||
window.addEventListener('click', this.closeSidebar)
|
||||
},
|
||||
closeSidebar(evt) {
|
||||
const parent = evt.target.closest('.button-div-class')
|
||||
const self = evt.target.closest('.leftPanel')
|
||||
if (!parent && !self) {
|
||||
this.show = false
|
||||
window.removeEventListener('click', this.closeSidebar)
|
||||
}
|
||||
},
|
||||
insertToBody() {
|
||||
this.$nextTick(() => {
|
||||
const elx = this.$refs.leftPanel
|
||||
const body = document.querySelector('body')
|
||||
body.insertBefore(elx, body.firstChild)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 91px);
|
||||
padding: 15px;
|
||||
min-width: 60px;
|
||||
max-width: 60px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 91px);
|
||||
}
|
||||
|
||||
.de-header {
|
||||
height: 35px !important;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.showLeftPanel {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: calc(100% - 15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftPanel-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
||||
background: rgba(0, 0, 0, .2);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
height: calc(100vh - 91px);
|
||||
position: fixed;
|
||||
top: 91px;
|
||||
left: 60px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: #fff;
|
||||
z-index: 40000;
|
||||
}
|
||||
|
||||
.show {
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||||
|
||||
.leftPanel-background {
|
||||
z-index: 20000;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
57
frontend/src/views/panel/filter/index.vue
Normal file
57
frontend/src/views/panel/filter/index.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<el-card class="filter-card-class">
|
||||
<div slot="header">
|
||||
<span>卡片名称</span>
|
||||
</div>
|
||||
<div style="position: relative;margin-left: 5px;">
|
||||
<div v-for="o in 4" :key="o" class="item">
|
||||
<el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FilterGroup',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.item {
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane name="PanelList">
|
||||
<span slot="label"><i class="el-icon-document" />列表</span>
|
||||
<PanelList @switchComponent="switchComponent" />
|
||||
<PanelList />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="panels_star">
|
||||
<span slot="label"><i class="el-icon-star-off" />收藏</span>
|
||||
@ -15,17 +15,14 @@
|
||||
<span slot="label"><i class="el-icon-share" />分享</span>
|
||||
<share-tree v-if="showShare" />
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane name="example">-->
|
||||
<!-- <span slot="label"><i class="el-icon-star-on"></i>示例</span>-->
|
||||
<!-- <group @switchComponent="switchComponent"/>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
|
||||
</el-tabs>
|
||||
|
||||
</de-aside-container>
|
||||
|
||||
<de-main-container>
|
||||
<!--<router-view/>-->
|
||||
<component :is="component" :param="param" @switchComponent="switchComponent" />
|
||||
<component :is="component" :param="param" />
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</template>
|
||||
@ -58,15 +55,15 @@ export default {
|
||||
this.refreshShare()
|
||||
}
|
||||
},
|
||||
switchComponent(c) {
|
||||
console.log(c)
|
||||
this.param = c.param
|
||||
switch (c.name) {
|
||||
case 'PanelViewShow':
|
||||
this.component = PanelViewShow
|
||||
break
|
||||
}
|
||||
},
|
||||
// switchComponent(c) {
|
||||
// console.log(c)
|
||||
// this.param = c.param
|
||||
// switch (c.name) {
|
||||
// case 'PanelViewShow':
|
||||
// this.component = PanelViewShow
|
||||
// break
|
||||
// }
|
||||
// },
|
||||
refreshShare() {
|
||||
this.showShare = false
|
||||
this.$nextTick(() => (this.showShare = true))
|
||||
|
||||
@ -88,6 +88,9 @@
|
||||
<el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
|
||||
{{ $t('panel.share') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
|
||||
{{ $t('panel.edit') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
@ -229,6 +232,9 @@ export default {
|
||||
case 'share':
|
||||
this.share(param.data)
|
||||
break
|
||||
case 'edit':
|
||||
this.edit(param.data)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
@ -487,6 +493,9 @@ export default {
|
||||
closeGrant() {
|
||||
this.authResourceId = null
|
||||
this.authVisible = false
|
||||
},
|
||||
edit(data) {
|
||||
this.$router.replace('/panelEdit')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,50 +1,29 @@
|
||||
<template>
|
||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||
<el-row style="display: flex;height: 100%">
|
||||
<el-col class="view-list">
|
||||
<el-tabs v-model="ViewActiveName">
|
||||
<!--视图展示操作-->
|
||||
<el-tab-pane name="Views" class="view-list-thumbnails-outline">
|
||||
<span slot="label"><i class="el-icon-s-data" />视图</span>
|
||||
<draggable
|
||||
v-model="panelDetails.viewsUsable"
|
||||
:options="{group:{name: 'itxst',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
style="height: 100%;overflow:auto"
|
||||
@end="end1"
|
||||
>
|
||||
<transition-group>
|
||||
<div v-for="item in panelDetails.viewsUsable" :key="item.name" @dblclick="panelViewAdd(item)">
|
||||
<span style="color: gray">{{ item.name }}</span>
|
||||
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id+'/VIEW_DEFAULT_IMAGE'" alt="">
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</el-tab-pane>
|
||||
|
||||
<!--通用组件操作-->
|
||||
<el-tab-pane name="PublicTools">
|
||||
<span slot="label"><i class="el-icon-s-grid" />组件</span>
|
||||
开发中...
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
|
||||
<el-col class="panel-design">
|
||||
<!--TODO 仪表盘设计公共设置区域-->
|
||||
<el-row class="panel-design-head">
|
||||
<span style="float: left;line-height: 40px; color: gray">名称：{{ panelInfo.name }}</span>
|
||||
<span style="float: left;line-height: 40px; color: gray">
|
||||
|
||||
<span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
|
||||
|
||||
</span>
|
||||
<span style="float: right;line-height: 40px;">
|
||||
<el-button size="mini">
|
||||
背景图
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="savePanel">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="preViewShow">
|
||||
预览
|
||||
</el-button>
|
||||
|
||||
<el-tooltip content="返回目录">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="背景图">
|
||||
<el-button class="el-icon-full-screen" size="mini" circle />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-view" size="mini" circle @click="save" />
|
||||
</el-tooltip>
|
||||
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row class="panel-design-show">
|
||||
@ -64,23 +43,20 @@
|
||||
|
||||
</vue-drag-resize-rotate>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
</el-row></el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post, get } from '@/api/panel/panel'
|
||||
import draggable from 'vuedraggable'
|
||||
import ChartComponent from '../../chart/components/ChartComponent'
|
||||
import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
components: { draggable, ChartComponent, VueDragResizeRotate },
|
||||
components: { ChartComponent, VueDragResizeRotate },
|
||||
data() {
|
||||
return {
|
||||
panelDetails: {
|
||||
@ -189,11 +165,12 @@ export default {
|
||||
|
||||
},
|
||||
savePanel() {
|
||||
debugger
|
||||
post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
|
||||
debugger
|
||||
})
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
},
|
||||
save() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,542 +0,0 @@
|
||||
<template xmlns:el-col="http://www.w3.org/1999/html">
|
||||
<el-col>
|
||||
<!-- panel list -->
|
||||
<el-col>
|
||||
<el-row>
|
||||
<span class="header-title">默认仪表盘</span>
|
||||
<div class="block">
|
||||
<el-tree
|
||||
:default-expanded-keys="expandedArray"
|
||||
:data="defaultData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="panelDefaultClick"
|
||||
>
|
||||
<span slot-scope="{ data }" class="custom-tree-node">
|
||||
<span>
|
||||
<span>
|
||||
<el-button
|
||||
icon="el-icon-picture-outline"
|
||||
type="text"
|
||||
/>
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<span class="header-title">仪表盘列表</span>
|
||||
</el-row>
|
||||
<el-col class="custom-tree-container">
|
||||
<div class="block">
|
||||
<el-tree
|
||||
:default-expanded-keys="expandedArray"
|
||||
:data="tData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span>
|
||||
<span v-if="data.nodeType === 'panel'">
|
||||
<el-button
|
||||
icon="el-icon-picture-outline"
|
||||
type="text"
|
||||
/>
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span v-if="data.nodeType ==='folder'" @click.stop>
|
||||
<el-dropdown trigger="click" size="small" @command="clickAdd">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('folder',data,node)">
|
||||
{{ $t('panel.groupAdd') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('panel',data,node)">
|
||||
{{ $t('panel.panelAdd') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
<span style="margin-left: 12px;" @click.stop>
|
||||
<el-dropdown trigger="click" size="small" @command="clickMore">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-more"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
|
||||
{{ $t('panel.rename') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
|
||||
{{ $t('panel.delete') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
|
||||
{{ $t('panel.share') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:title="authTitle"
|
||||
:visible.sync="authVisible"
|
||||
custom-class="de-dialog"
|
||||
>
|
||||
<grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="authVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="authVisible = false">确 定</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GrantAuth from '../GrantAuth'
|
||||
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree } from '@/api/panel/panel'
|
||||
|
||||
export default {
|
||||
name: 'PanelList',
|
||||
components: { GrantAuth },
|
||||
data() {
|
||||
return {
|
||||
authTitle: null,
|
||||
authResourceId: null,
|
||||
authVisible: false,
|
||||
defaultData: [],
|
||||
dialogTitle: '',
|
||||
search: '',
|
||||
editGroup: false,
|
||||
editTable: false,
|
||||
tData: [],
|
||||
tableData: [],
|
||||
currGroup: {},
|
||||
expandedArray: [],
|
||||
groupForm: {
|
||||
name: null,
|
||||
pid: null,
|
||||
level: 0,
|
||||
nodeType: null,
|
||||
children: [],
|
||||
sort: 'node_type desc,name asc'
|
||||
},
|
||||
tableForm: {
|
||||
name: '',
|
||||
mode: '',
|
||||
sort: 'node_type asc,create_time desc,name asc'
|
||||
},
|
||||
groupFormRules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
tableFormRules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
|
||||
],
|
||||
mode: [
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
// search(val){
|
||||
// this.groupForm.name = val;
|
||||
// this.tree(this.groupForm);
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
this.defaultTree()
|
||||
this.tree(this.groupForm)
|
||||
this.refresh()
|
||||
this.tableTree()
|
||||
// this.$router.push('/dataset');
|
||||
},
|
||||
methods: {
|
||||
clickAdd(param) {
|
||||
// console.log(param);
|
||||
this.add(param.type)
|
||||
this.groupForm.pid = param.data.id
|
||||
this.groupForm.level = param.data.level + 1
|
||||
},
|
||||
|
||||
beforeClickAdd(type, data, node) {
|
||||
return {
|
||||
'type': type,
|
||||
'data': data,
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
clickMore(param) {
|
||||
console.log(param)
|
||||
switch (param.type) {
|
||||
case 'rename':
|
||||
this.add(param.data.nodeType)
|
||||
this.groupForm = JSON.parse(JSON.stringify(param.data))
|
||||
break
|
||||
case 'move':
|
||||
|
||||
break
|
||||
case 'delete':
|
||||
this.delete(param.data)
|
||||
break
|
||||
case 'editTable':
|
||||
this.editTable = true
|
||||
this.tableForm = JSON.parse(JSON.stringify(param.data))
|
||||
this.tableForm.mode = this.tableForm.mode + ''
|
||||
break
|
||||
case 'deleteTable':
|
||||
this.deleteTable(param.data)
|
||||
break
|
||||
case 'share':
|
||||
this.share(param.data)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
beforeClickMore(type, data, node) {
|
||||
return {
|
||||
'type': type,
|
||||
'data': data,
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
add(nodeType) {
|
||||
switch (nodeType) {
|
||||
case 'folder':
|
||||
this.dialogTitle = this.$t('panel.groupAdd')
|
||||
break
|
||||
case 'panel':
|
||||
this.dialogTitle = this.$t('panel.panelAdd')
|
||||
break
|
||||
}
|
||||
this.groupForm.nodeType = nodeType
|
||||
this.editGroup = true
|
||||
},
|
||||
|
||||
saveGroup(group) {
|
||||
// console.log(group);
|
||||
this.$refs['groupForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
addGroup(group).then(res => {
|
||||
this.close()
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.tree(this.groupForm)
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('commons.input_content'),
|
||||
type: 'error',
|
||||
showClose: true
|
||||
})
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
saveTable(table) {
|
||||
// console.log(table)
|
||||
table.mode = parseInt(table.mode)
|
||||
this.$refs['tableForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
addTable(table).then(response => {
|
||||
this.closeTable()
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.tableTree()
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('commons.input_content'),
|
||||
type: 'error',
|
||||
showClose: true
|
||||
})
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
delete(data) {
|
||||
this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
|
||||
confirmButtonText: this.$t('panel.confirm'),
|
||||
cancelButtonText: this.$t('panel.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delGroup(data.id).then(response => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('panel.delete_success'),
|
||||
showClose: true
|
||||
})
|
||||
this.tree(this.groupForm)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
deleteTable(data) {
|
||||
this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
|
||||
confirmButtonText: this.$t('panel.confirm'),
|
||||
cancelButtonText: this.$t('panel.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delTable(data.id).then(response => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('panel.delete_success'),
|
||||
showClose: true
|
||||
})
|
||||
this.tableTree()
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.editGroup = false
|
||||
this.groupForm = {
|
||||
name: null,
|
||||
pid: null,
|
||||
level: 0,
|
||||
nodeType: null,
|
||||
children: [],
|
||||
sort: 'node_type desc,name asc'
|
||||
}
|
||||
},
|
||||
|
||||
closeTable() {
|
||||
this.editTable = false
|
||||
this.tableForm = {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
|
||||
tree(group) {
|
||||
groupTree(group).then(res => {
|
||||
this.tData = res.data
|
||||
})
|
||||
},
|
||||
defaultTree() {
|
||||
const requestInfo = {
|
||||
panelType: 'system'
|
||||
}
|
||||
defaultTree(requestInfo).then(res => {
|
||||
this.defaultData = res.data
|
||||
})
|
||||
},
|
||||
|
||||
tableTree() {
|
||||
this.tableData = []
|
||||
if (this.currGroup.id) {
|
||||
loadTable({
|
||||
sort: 'type asc,create_time desc,name asc',
|
||||
sceneId: this.currGroup.id
|
||||
}).then(res => {
|
||||
this.tableData = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
nodeClick(data, node) {
|
||||
if (data.nodeType === 'panel') {
|
||||
this.currGroup = data
|
||||
// this.$store.dispatch('panel/setPanelInfo', data)
|
||||
this.$router.replace('/panelEdit')
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id)
|
||||
} else {
|
||||
const index = this.expandedArray.indexOf(data.id)
|
||||
if (index > -1) {
|
||||
this.expandedArray.splice(index, 1)
|
||||
}
|
||||
}
|
||||
// console.log(this.expandedArray);
|
||||
},
|
||||
|
||||
back() {
|
||||
this.sceneMode = false
|
||||
// const route = this.$store.state.permission.currentRoutes
|
||||
// console.log(route)
|
||||
// this.$router.push('/dataset/index')
|
||||
this.$store.dispatch('dataset/setSceneData', null)
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
clickAddData(param) {
|
||||
// console.log(param);
|
||||
switch (param.type) {
|
||||
case 'db':
|
||||
this.addDB()
|
||||
break
|
||||
case 'sql':
|
||||
this.$message(param.type)
|
||||
break
|
||||
case 'excel':
|
||||
this.$message(param.type)
|
||||
break
|
||||
case 'custom':
|
||||
this.$message(param.type)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
beforeClickAddData(type) {
|
||||
return {
|
||||
'type': type
|
||||
}
|
||||
},
|
||||
|
||||
addDB() {
|
||||
// this.$router.push({
|
||||
// name: 'add_db',
|
||||
// params: {
|
||||
// scene: this.currGroup
|
||||
|
||||
// }
|
||||
// })
|
||||
this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
|
||||
},
|
||||
|
||||
sceneClick(data, node) {
|
||||
// console.log(data);
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
this.$store.dispatch('dataset/setTable', data.id)
|
||||
// this.$router.push({
|
||||
// name: 'table',
|
||||
// params: {
|
||||
// table: data
|
||||
// }
|
||||
// })
|
||||
this.$emit('switchComponent', { name: 'ViewTable' })
|
||||
},
|
||||
|
||||
refresh() {
|
||||
const path = this.$route.path
|
||||
if (path === '/dataset/table') {
|
||||
this.sceneMode = true
|
||||
const sceneId = this.$store.state.dataset.sceneData
|
||||
getScene(sceneId).then(res => {
|
||||
this.currGroup = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
panelDefaultClick(data, node) {
|
||||
console.log(data)
|
||||
console.log(node)
|
||||
this.$store.dispatch('panel/setPanelInfo', data)
|
||||
// 切换view
|
||||
this.$emit('switchComponent', { name: 'PanelView' })
|
||||
},
|
||||
share(data) {
|
||||
this.authResourceId = data.id
|
||||
this.authTitle = '把[' + data.label + ']分享给'
|
||||
this.authVisible = true
|
||||
},
|
||||
closeGrant() {
|
||||
this.authResourceId = null
|
||||
this.authVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-css {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,398 +0,0 @@
|
||||
<template>
|
||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||
<el-row style="display: flex;height: 100%">
|
||||
|
||||
<el-col class="panel-design">
|
||||
<!--TODO 仪表盘设计公共设置区域-->
|
||||
<el-row class="panel-design-head">
|
||||
<span style="float: left;line-height: 40px; color: gray">
|
||||
|
||||
<span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
|
||||
|
||||
</span>
|
||||
<span style="float: right;line-height: 40px;">
|
||||
|
||||
<el-tooltip content="返回目录">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="背景图">
|
||||
<el-button class="el-icon-full-screen" size="mini" circle />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-view" size="mini" circle @click="save" />
|
||||
</el-tooltip>
|
||||
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row class="panel-design-show">
|
||||
<div class="container" style="overflow-y: auto">
|
||||
|
||||
<div :style="gridStyle">
|
||||
<!-- <draggable-->
|
||||
<!-- v-model="thumbnailsTmp"-->
|
||||
<!-- :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
|
||||
<!-- animation="300"-->
|
||||
<!-- :move="onMove"-->
|
||||
<!-- style="height: 100%;overflow:auto"-->
|
||||
<!-- @end="end1"-->
|
||||
<!-- >-->
|
||||
<vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
|
||||
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
|
||||
</vdrr>
|
||||
<!-- </draggable>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
|
||||
<!-- <div id="echart" style="width: 100%;height: 80vh;"/>-->
|
||||
<!-- </div>-->
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
data() {
|
||||
return {
|
||||
gridStyle: {
|
||||
position: 'relative',
|
||||
height: '2000px',
|
||||
width: '2000px',
|
||||
backgroundColor: '#808080',
|
||||
background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
|
||||
backgroundSize: '20px 20px, 20px 20px'
|
||||
},
|
||||
ViewActiveName: 'Views',
|
||||
table: {},
|
||||
thumbnailsTmp: [
|
||||
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
|
||||
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
|
||||
],
|
||||
thumbnails: [
|
||||
{ id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
|
||||
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
|
||||
{ id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
|
||||
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
|
||||
],
|
||||
quota: [],
|
||||
view: {
|
||||
xaxis: [],
|
||||
yaxis: [],
|
||||
show: true,
|
||||
type: 'bar',
|
||||
title: ''
|
||||
},
|
||||
// 定义要被拖拽对象的数组
|
||||
arr1: [
|
||||
{ id: 1, name: 'id' },
|
||||
{ id: 2, name: '名称' },
|
||||
{ id: 3, name: '类型' },
|
||||
{ id: 5, name: '状态' },
|
||||
{ id: 4, name: '指标指标指标' }
|
||||
],
|
||||
arr2: [
|
||||
{ id: 11, name: '容量' }
|
||||
],
|
||||
moveId: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
}
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
},
|
||||
mounted() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
this.getData(this.$store.state.chart.viewId)
|
||||
// this.myEcharts();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
methods: {
|
||||
panelViewAdd(item) {
|
||||
const pushItem = {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
keepFlag: true
|
||||
}
|
||||
debugger
|
||||
this.thumbnailsTmp.push(pushItem)
|
||||
console.log(this.thumbnailsTmp)
|
||||
},
|
||||
removeView(viewId) {
|
||||
this.thumbnailsTmp.forEach(function(item, index) {
|
||||
if (item.id === viewId) {
|
||||
item.keepFlag = false
|
||||
}
|
||||
})
|
||||
},
|
||||
newStyle(viewId, newStyleInfo) {
|
||||
console.log(viewId)
|
||||
console.log(JSON.stringify(newStyleInfo))
|
||||
},
|
||||
initTableData(id) {
|
||||
if (id != null) {
|
||||
post('/dataset/table/get/' + id, null).then(response => {
|
||||
this.table = response.data
|
||||
this.initTableField(id)
|
||||
})
|
||||
}
|
||||
},
|
||||
initTableField(id) {
|
||||
post('/dataset/table/getFieldsFromDE', this.table).then(response => {
|
||||
this.thumbnails = response.data.thumbnails
|
||||
this.quota = response.data.quota
|
||||
})
|
||||
},
|
||||
click1(item) {
|
||||
// console.log(item);
|
||||
const c = this.view.xaxis.filter(function(ele) {
|
||||
return ele.id === item.id
|
||||
})
|
||||
// console.log(c);
|
||||
if (c && c.length === 0) {
|
||||
this.view.xaxis.push(item)
|
||||
}
|
||||
},
|
||||
click2(item) {
|
||||
// console.log(item);
|
||||
const c = this.view.yaxis.filter(function(ele) {
|
||||
return ele.id === item.id
|
||||
})
|
||||
// console.log(c);
|
||||
if (c && c.length === 0) {
|
||||
this.view.yaxis.push(item)
|
||||
}
|
||||
},
|
||||
clear1(index) {
|
||||
this.view.xaxis.splice(index, 1)
|
||||
},
|
||||
clear2(index) {
|
||||
this.view.yaxis.splice(index, 1)
|
||||
},
|
||||
get(id) {
|
||||
if (id) {
|
||||
post('/chart/view/get/' + id, null).then(response => {
|
||||
this.view = response.data
|
||||
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
})
|
||||
} else {
|
||||
this.view = {}
|
||||
}
|
||||
},
|
||||
save() {
|
||||
const view = JSON.parse(JSON.stringify(this.view))
|
||||
view.id = this.view.id
|
||||
view.sceneId = this.sceneId
|
||||
view.name = this.table.name
|
||||
view.tableId = this.$store.state.chart.tableId
|
||||
view.xaxis = JSON.stringify(view.xaxis)
|
||||
view.yaxis = JSON.stringify(view.yaxis)
|
||||
post('/chart/view/save', view).then(response => {
|
||||
// this.get(response.data.id);
|
||||
this.getData(response.data.id)
|
||||
this.$store.dispatch('chart/setChartSceneData', null)
|
||||
this.$store.dispatch('chart/setChartSceneData', this.sceneId)
|
||||
})
|
||||
},
|
||||
getData(id) {
|
||||
// if (id) {
|
||||
// post('/chart/view/getData/' + id, null).then(response => {
|
||||
// this.view = response.data
|
||||
// this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
// this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
|
||||
// const chart = response.data
|
||||
// const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
|
||||
// // console.log(chart_option);
|
||||
// if (chart.data) {
|
||||
// chart_option.title.text = chart.title
|
||||
// chart_option.xAxis.data = chart.data.x
|
||||
// chart.data.series.forEach(function(y) {
|
||||
// chart_option.legend.data.push(y.name)
|
||||
// chart_option.series.push(y)
|
||||
// })
|
||||
// }
|
||||
// // console.log(chart_option);
|
||||
// this.myEcharts(chart_option)
|
||||
// })
|
||||
// } else {
|
||||
// this.view = {}
|
||||
// }
|
||||
},
|
||||
|
||||
// 左边往右边拖动时的事件
|
||||
end1(e) {
|
||||
// console.log(e)
|
||||
// var that = this;
|
||||
// var items = this.arr2.filter(function (m) {
|
||||
// return m.id == that.moveId
|
||||
// })
|
||||
// //如果左边
|
||||
// if (items.length < 2) return;
|
||||
// this.arr2.splice(e.newDraggableIndex, 1)
|
||||
},
|
||||
// 右边往左边拖动时的事件
|
||||
end2(e) {
|
||||
// console.log(e)
|
||||
// var that = this;
|
||||
// var items = this.yAxisData.filter(function (m) {
|
||||
// return m.id == that.moveId
|
||||
// })
|
||||
// //如果左边
|
||||
// if (items.length < 2) return;
|
||||
// this.yAxisData.splice(e.newDraggableIndex, 1)
|
||||
},
|
||||
end3(e) {
|
||||
|
||||
},
|
||||
end4(e) {
|
||||
|
||||
},
|
||||
// move回调方法
|
||||
onMove(e, originalEvent) {
|
||||
console.log(e)
|
||||
// this.moveId = e.relatedContext.element.id;
|
||||
// //不允许停靠
|
||||
// if (e.relatedContext.element.id == 1) return false;
|
||||
// //不允许拖拽
|
||||
// if (e.draggedContext.element.id == 4) return false;
|
||||
// if (e.draggedContext.element.id == 11) return false;
|
||||
return true
|
||||
},
|
||||
|
||||
myEcharts(option) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = this.$echarts.init(document.getElementById('echart'))
|
||||
// 指定图表的配置项和数据
|
||||
setTimeout(myChart.setOption(option, true), 500)
|
||||
window.onresize = function() {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-list {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
min-width: 180px;
|
||||
max-width: 220px;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-left: 0 solid;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.view-list-thumbnails-outline {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.view-list-thumbnails {
|
||||
width: 100%;
|
||||
padding: 0px 15px 15px 0px;
|
||||
}
|
||||
|
||||
.panel-design {
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.panel-design-head {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.panel-design-show {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.padding-lr {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.itxst {
|
||||
margin: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 40%;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: solid 1px #eee;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col + .col {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 2px 12px;
|
||||
margin: 3px 3px 0 3px;
|
||||
border: solid 1px #eee;
|
||||
background-color: #f1f1f1;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
border-top: none;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-axis {
|
||||
padding: 2px 12px;
|
||||
margin: 3px 3px 0 3px;
|
||||
border: solid 1px #eee;
|
||||
background-color: #f1f1f1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-axis:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid #000;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<!-- <de-header>Header</de-header> -->
|
||||
<el-header class="de-header">Header</el-header>
|
||||
<de-container>
|
||||
<de-aside-container class="ms-aside-container">Aside</de-aside-container>
|
||||
<de-main-container class="ms-main-container"> Main</de-main-container>
|
||||
</de-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DeMainContainer,
|
||||
DeContainer,
|
||||
DeAsideContainer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 91px);
|
||||
padding: 15px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 91px);
|
||||
}
|
||||
|
||||
.de-header {
|
||||
height: 35px !important;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<de-container>
|
||||
|
||||
<de-aside-container>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane name="PanelList">
|
||||
<span slot="label"><i class="el-icon-document" />列表</span>
|
||||
<PanelList />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="panels_star">
|
||||
<span slot="label"><i class="el-icon-star-off" />收藏</span>
|
||||
开发中...
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="panels_share" :lazy="true">
|
||||
<span slot="label"><i class="el-icon-share" />分享</span>
|
||||
<share-tree v-if="showShare" />
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
|
||||
</de-aside-container>
|
||||
|
||||
<de-main-container>
|
||||
<!--<router-view/>-->
|
||||
<component :is="component" :param="param" />
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
// import Group from './group/Group'
|
||||
import PanelList from './PanelList'
|
||||
import PanelView from '../list/PanelView'
|
||||
import PanelViewShow from './PanelViewShow'
|
||||
import ShareTree from '../GrantAuth/shareTree'
|
||||
|
||||
export default {
|
||||
name: 'Panel',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelView, PanelViewShow, ShareTree },
|
||||
data() {
|
||||
return {
|
||||
component: PanelViewShow,
|
||||
param: {},
|
||||
activeName: 'PanelList',
|
||||
showShare: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
// 点击分析面板需要刷新分享内容
|
||||
if (tab.name === 'panels_share') {
|
||||
this.refreshShare()
|
||||
}
|
||||
},
|
||||
// switchComponent(c) {
|
||||
// console.log(c)
|
||||
// this.param = c.param
|
||||
// switch (c.name) {
|
||||
// case 'PanelViewShow':
|
||||
// this.component = PanelViewShow
|
||||
// break
|
||||
// }
|
||||
// },
|
||||
refreshShare() {
|
||||
this.showShare = false
|
||||
this.$nextTick(() => (this.showShare = true))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 15px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user