Skip to content

D
dataease
提交 7d248904 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw
浏览文件
操作

feat: 合并仪表板代码

上级 4ab6a15c
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 596 行增加 和 195 行删除
frontend/src/components/vue-drag-resize-rotate/index.vue
浏览文件 @ 7d248904
......@@ -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)
......
frontend/src/router/index.js
浏览文件 @ 7d248904
......@@ -67,7 +67,7 @@ export const constantRoutes = [
children: [
{
path: 'edit',
component: () => import('@/views/panel/new/edit')
component: () => import('@/views/panel/edit')
}
]
},
......
frontend/src/styles/index.scss
浏览文件 @ 7d248904
......@@ -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;
}
}
frontend/src/views/panel/DrawingBoard/index.vue 0 → 100644
浏览文件 @ 7d248904
<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>
frontend/src/views/panel/edit/index.vue 0 → 100644
浏览文件 @ 7d248904
<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>
frontend/src/views/panel/filter/index.vue 0 → 100644
浏览文件 @ 7d248904
<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>
frontend/src/views/panel/index.vue
浏览文件 @ 7d248904
......@@ -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))
......
frontend/src/views/panel/list/PanelList.vue
浏览文件 @ 7d248904
......@@ -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')
}
}
}
......
frontend/src/views/panel/list/PanelViewShow.vue
浏览文件 @ 7d248904
<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() {
}
}
}
......
frontend/src/views/panel/new/edit.vue deleted 100644 → 0
浏览文件 @ 4ab6a15c
<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>
frontend/src/views/panel/new/index1.vue deleted 100644 → 0
浏览文件 @ 4ab6a15c
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论