Skip to content

D
dataease
提交 915ccf32 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat:增加仪表盘设计组件及设计

上级 1e0ebd8c
显示空白字符变更
内嵌 并排
正在显示 包含 518 行增加 和 29 行删除
frontend/src/components/vue-drag-resize-rotate/index.vue
浏览文件 @ 915ccf32
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
> >
<slot :name="handle"></slot> <slot :name="handle"></slot>
</div> </div>
<i class="el-icon-circle-close" @click.stop="removeView()"></i>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
...@@ -68,6 +69,10 @@ export default { ...@@ -68,6 +69,10 @@ export default {
replace: true, replace: true,
name: 'vue-drag-resize-rotate', name: 'vue-drag-resize-rotate',
props: { props: {
viewId: {
type: String,
default: ''
},
className: { className: {
type: String, type: String,
default: 'vdr' default: 'vdr'
...@@ -394,6 +399,11 @@ export default { ...@@ -394,6 +399,11 @@ export default {
}, },
methods: { methods: {
removeView(){
debugger
console.log(this.viewId);
this.$emit('removeView',this.viewId)
},
// 重置边界和鼠标状态 // 重置边界和鼠标状态
resetBoundsAndMouseState() { resetBoundsAndMouseState() {
this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 } this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
...@@ -1310,13 +1320,15 @@ export default { ...@@ -1310,13 +1320,15 @@ export default {
} }
}, },
style() { style() {
return { let newStyle ={
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`, transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth, width: this.computedWidth,
height: this.computedHeight, height: this.computedHeight,
zIndex: this.zIndex, zIndex: this.zIndex,
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto) ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
}; };
this.$emit('newStyle', this.viewId,newStyle);
return newStyle;
}, },
// 控制柄显示与否 // 控制柄显示与否
actualHandles() { actualHandles() {
...@@ -1503,4 +1515,11 @@ export default { ...@@ -1503,4 +1515,11 @@ export default {
height: 7px; height: 7px;
background-color: #666; background-color: #666;
} }
.close {
float: right;
padding-top: 8px;
padding-bottom: 8px;
}
</style> </style>
frontend/src/main.js
浏览文件 @ 915ccf32
...@@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message' ...@@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message'
import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive' import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
import directives from './directive' import directives from './directive'
import './styles/vdrr/common-temp.scss'
import vdrr from './components/vue-drag-resize-rotate' import vdrr from './components/vue-drag-resize-rotate'
Vue.component('vdrr', vdrr) Vue.component('vdrr', vdrr)
......
frontend/src/styles/vdrr/common-temp.scss 0 → 100644
浏览文件 @ 915ccf32
.vdr {
border: 1px dashed;
}
.vdrr {
border: 1px dashed;
}
frontend/src/views/panel/list/PanelPreview.vue 0 → 100644
浏览文件 @ 915ccf32
<template xmlns:el-col="http://www.w3.org/1999/html">
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<span>仪表盘名称：{{panelName}}</span>
</el-row>
</template>
<script>
import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
export default {
name: 'PanelView',
data() {
return {
sceneMode: false,
dialogTitle: '',
search: '',
editGroup: false,
editTable: false,
tData: [],
tableData: [],
currGroup: {},
expandedArray: [],
groupForm: {
name: '',
pid: null,
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
},
tableForm: {
name: '',
mode: '',
sort: '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: {
panelName: function () {
console.log(this.$store.state.panel.panelName)
return this.$store.state.panel.panelName
}
},
watch: {
// search(val){
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
},
mounted() {
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.type)
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
}
},
beforeClickMore(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
add(type) {
switch (type) {
case 'group':
this.dialogTitle = this.$t('dataset.group')
break
case 'scene':
this.dialogTitle = this.$t('dataset.scene')
break
}
this.groupForm.type = type
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('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true
})
this.tree(this.groupForm)
})
}).catch(() => {
})
},
deleteTable(data) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
delTable(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.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: '',
pid: null,
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
closeTable() {
this.editTable = false
this.tableForm = {
name: ''
}
},
tree(group) {
groupTree(group).then(res => {
this.tData = 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) {
// console.log(data);
// console.log(node);
if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
}
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);
},
}
}
</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>
frontend/src/views/panel/list/PanelViewShow.vue
浏览文件 @ 915ccf32
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-tabs v-model="ViewActiveName"> <el-tabs v-model="ViewActiveName">
<!--视图展示操作--> <!--视图展示操作-->
<el-tab-pane name="Views" class="view-list-thumbnails-outline"> <el-tab-pane name="Views" class="view-list-thumbnails-outline">
<span slot="label"><i class="el-icon-s-data" />视图</span> <span slot="label"><i class="el-icon-s-data"/>视图</span>
<draggable <draggable
v-model="thumbnails" v-model="thumbnails"
:options="{group:{name: 'itxst',pull:'clone'},sort: true}" :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
...@@ -15,14 +15,17 @@ ...@@ -15,14 +15,17 @@
@end="end1" @end="end1"
> >
<transition-group> <transition-group>
<img class="view-list-thumbnails" v-for="item in thumbnails" :key="item.name" :src="'/common-files/images/'+item.id" alt=""/> <div v-for="item in thumbnails" :key="item.name" v-on:dblclick = panelViewAdd(item)>
<span style="color: gray">{{item.name}}</span>
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
</div>
</transition-group> </transition-group>
</draggable> </draggable>
</el-tab-pane> </el-tab-pane>
<!--通用组件操作--> <!--通用组件操作-->
<el-tab-pane name="PublicTools"> <el-tab-pane name="PublicTools">
<span slot="label"><i class="el-icon-s-grid" />组件</span> <span slot="label"><i class="el-icon-s-grid"/>组件</span>
开发中... 开发中...
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -36,14 +39,33 @@ ...@@ -36,14 +39,33 @@
背景图 背景图
</el-button> </el-button>
<el-button type="primary" size="mini" @click="save"> <el-button type="primary" size="mini" @click="save">
透视 预览
</el-button> </el-button>
</span> </span>
</el-row> </el-row>
<el-row class="panel-design-show"> <el-row class="panel-design-show">
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;"> <div class="container" style="overflow-y: auto">
<div id="echart" style="width: 100%;height: 80vh;"/>
<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-if="item.keepFlag" :view-id="item.id" :parent="true" v-for="item in thumbnailsTmp" :key="item.name" @newStyle="newStyle" @removeView="removeView">
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
</vdrr>
<!-- </draggable>-->
</div> </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-row>
</el-col> </el-col>
...@@ -52,22 +74,34 @@ ...@@ -52,22 +74,34 @@
</template> </template>
<script> <script>
import { post } from '@/api/dataset/dataset' import {post} from '@/api/dataset/dataset'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { BASE_BAR } from '../chart/chart' import {BASE_BAR} from '../chart/chart'
export default { export default {
name: 'PanelViewShow', name: 'PanelViewShow',
components: { draggable }, components: {draggable},
data() { data() {
return { return {
ViewActiveName:'Views', 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: {}, 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: [ thumbnails: [
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST1'}, {id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1'},
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST2'}, {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2'},
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST3'}, {id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3'},
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST4'} {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4'}
], ],
quota: [], quota: [],
view: { view: {
...@@ -79,14 +113,14 @@ export default { ...@@ -79,14 +113,14 @@ export default {
}, },
// 定义要被拖拽对象的数组 // 定义要被拖拽对象的数组
arr1: [ arr1: [
{ id: 1, name: 'id' }, {id: 1, name: 'id'},
{ id: 2, name: '名称' }, {id: 2, name: '名称'},
{ id: 3, name: '类型' }, {id: 3, name: '类型'},
{ id: 5, name: '状态' }, {id: 5, name: '状态'},
{ id: 4, name: '指标指标指标' } {id: 4, name: '指标指标指标'}
], ],
arr2: [ arr2: [
{ id: 11, name: '容量' } {id: 11, name: '容量'}
], ],
moveId: -1 moveId: -1
} }
...@@ -120,6 +154,28 @@ export default { ...@@ -120,6 +154,28 @@ export default {
activated() { activated() {
}, },
methods: { methods: {
panelViewAdd(item){
let 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) { initTableData(id) {
if (id != null) { if (id != null) {
post('/dataset/table/get/' + id, null).then(response => { post('/dataset/table/get/' + id, null).then(response => {
...@@ -136,7 +192,7 @@ export default { ...@@ -136,7 +192,7 @@ export default {
}, },
click1(item) { click1(item) {
// console.log(item); // console.log(item);
const c = this.view.xaxis.filter(function(ele) { const c = this.view.xaxis.filter(function (ele) {
return ele.id === item.id return ele.id === item.id
}) })
// console.log(c); // console.log(c);
...@@ -146,7 +202,7 @@ export default { ...@@ -146,7 +202,7 @@ export default {
}, },
click2(item) { click2(item) {
// console.log(item); // console.log(item);
const c = this.view.yaxis.filter(function(ele) { const c = this.view.yaxis.filter(function (ele) {
return ele.id === item.id return ele.id === item.id
}) })
// console.log(c); // console.log(c);
...@@ -199,7 +255,7 @@ export default { ...@@ -199,7 +255,7 @@ export default {
if (chart.data) { if (chart.data) {
chart_option.title.text = chart.title chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x chart_option.xAxis.data = chart.data.x
chart.data.series.forEach(function(y) { chart.data.series.forEach(function (y) {
chart_option.legend.data.push(y.name) chart_option.legend.data.push(y.name)
chart_option.series.push(y) chart_option.series.push(y)
}) })
...@@ -257,12 +313,12 @@ export default { ...@@ -257,12 +313,12 @@ export default {
var myChart = this.$echarts.init(document.getElementById('echart')) var myChart = this.$echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据 // 指定图表的配置项和数据
setTimeout(myChart.setOption(option, true), 500) setTimeout(myChart.setOption(option, true), 500)
window.onresize = function() { window.onresize = function () {
myChart.resize() myChart.resize()
} }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
...@@ -270,15 +326,17 @@ export default { ...@@ -270,15 +326,17 @@ export default {
height: 100%; height: 100%;
width: 20%; width: 20%;
min-width: 180px; min-width: 180px;
max-width:220px; max-width: 220px;
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
border-left: 0 solid; border-left: 0 solid;
overflow-y: auto;
} }
.view-list-thumbnails-outline { .view-list-thumbnails-outline {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.view-list-thumbnails { .view-list-thumbnails {
width: 100%; width: 100%;
padding: 0px 15px 15px 0px; padding: 0px 15px 15px 0px;
...@@ -358,6 +416,14 @@ export default { ...@@ -358,6 +416,14 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
.container {
width: 100%;
height: 600px;
border: 1px solid #000;
position: relative;
box-sizing: border-box;
}
span { span {
font-size: 12px; font-size: 12px;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论