forked from github/dataease
feat:增加仪表盘设计组件及设计
This commit is contained in:
wangjiahao
parent
1e0ebd8c59
commit
915ccf326e
@ -26,6 +26,7 @@
|
||||
>
|
||||
<slot :name="handle"></slot>
|
||||
</div>
|
||||
<i class="el-icon-circle-close" @click.stop="removeView()"></i>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -68,6 +69,10 @@ export default {
|
||||
replace: true,
|
||||
name: 'vue-drag-resize-rotate',
|
||||
props: {
|
||||
viewId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'vdr'
|
||||
@ -141,7 +146,7 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 新增 外部传入纵横比 w/h
|
||||
// 新增 外部传入纵横比 w/h
|
||||
outsideAspectRatio: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
@ -394,6 +399,11 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
removeView(){
|
||||
debugger
|
||||
console.log(this.viewId);
|
||||
this.$emit('removeView',this.viewId)
|
||||
},
|
||||
// 重置边界和鼠标状态
|
||||
resetBoundsAndMouseState() {
|
||||
this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
|
||||
@ -1310,13 +1320,15 @@ export default {
|
||||
}
|
||||
},
|
||||
style() {
|
||||
return {
|
||||
let newStyle ={
|
||||
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
|
||||
width: this.computedWidth,
|
||||
height: this.computedHeight,
|
||||
zIndex: this.zIndex,
|
||||
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
|
||||
};
|
||||
this.$emit('newStyle', this.viewId,newStyle);
|
||||
return newStyle;
|
||||
},
|
||||
// 控制柄显示与否
|
||||
actualHandles() {
|
||||
@ -1503,4 +1515,11 @@ export default {
|
||||
height: 7px;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message'
|
||||
import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
|
||||
import directives from './directive'
|
||||
|
||||
import './styles/vdrr/common-temp.scss'
|
||||
|
||||
|
||||
import vdrr from './components/vue-drag-resize-rotate'
|
||||
Vue.component('vdrr', vdrr)
|
||||
|
||||
|
||||
8
frontend/src/styles/vdrr/common-temp.scss
Normal file
8
frontend/src/styles/vdrr/common-temp.scss
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
.vdr {
|
||||
border: 1px dashed;
|
||||
}
|
||||
|
||||
.vdrr {
|
||||
border: 1px dashed;
|
||||
}
|
||||
393
frontend/src/views/panel/list/PanelPreview.vue
Normal file
393
frontend/src/views/panel/list/PanelPreview.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<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>
|
||||
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<span slot="label"><i class="el-icon-s-data"/>视图</span>
|
||||
<draggable
|
||||
v-model="thumbnails"
|
||||
:options="{group:{name: 'itxst',pull:'clone'},sort: true}"
|
||||
@ -15,35 +15,57 @@
|
||||
@end="end1"
|
||||
>
|
||||
<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>
|
||||
</draggable>
|
||||
</el-tab-pane>
|
||||
|
||||
<!--通用组件操作-->
|
||||
<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-tabs>
|
||||
</el-col>
|
||||
|
||||
<el-col class="panel-design">
|
||||
<!--TODO 仪表盘设计公共设置区域-->
|
||||
<el-row class="panel-design-head">
|
||||
<!--TODO 仪表盘设计公共设置区域-->
|
||||
<el-row class="panel-design-head">
|
||||
<span style="float: right;line-height: 40px;">
|
||||
<el-button size="mini">
|
||||
背景图
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="save">
|
||||
透视
|
||||
预览
|
||||
</el-button>
|
||||
</span>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="panel-design-show">
|
||||
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
|
||||
<div id="echart" style="width: 100%;height: 80vh;"/>
|
||||
<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-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 class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
|
||||
<!-- <div id="echart" style="width: 100%;height: 80vh;"/>-->
|
||||
<!-- </div>-->
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
@ -52,217 +74,251 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import draggable from 'vuedraggable'
|
||||
import { BASE_BAR } from '../chart/chart'
|
||||
import {post} from '@/api/dataset/dataset'
|
||||
import draggable from 'vuedraggable'
|
||||
import {BASE_BAR} from '../chart/chart'
|
||||
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
components: { draggable },
|
||||
data() {
|
||||
return {
|
||||
ViewActiveName:'Views',
|
||||
table: {},
|
||||
thumbnails: [
|
||||
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST1'},
|
||||
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST2'},
|
||||
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST3'},
|
||||
{id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST4'}
|
||||
],
|
||||
quota: [],
|
||||
view: {
|
||||
xaxis: [],
|
||||
yaxis: [],
|
||||
show: true,
|
||||
type: 'bar',
|
||||
title: ''
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
components: {draggable},
|
||||
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: {
|
||||
tableId() {
|
||||
// console.log(this.$store.state.chart.tableId);
|
||||
this.initTableData(this.$store.state.chart.tableId)
|
||||
return this.$store.state.chart.tableId
|
||||
},
|
||||
// 定义要被拖拽对象的数组
|
||||
arr1: [
|
||||
{ id: 1, name: 'id' },
|
||||
{ id: 2, name: '名称' },
|
||||
{ id: 3, name: '类型' },
|
||||
{ id: 5, name: '状态' },
|
||||
{ id: 4, name: '指标指标指标' }
|
||||
],
|
||||
arr2: [
|
||||
{ id: 11, name: '容量' }
|
||||
],
|
||||
moveId: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableId() {
|
||||
// console.log(this.$store.state.chart.tableId);
|
||||
this.initTableData(this.$store.state.chart.tableId)
|
||||
return this.$store.state.chart.tableId
|
||||
sceneId() {
|
||||
// console.log(this.$store.state.chart.sceneId);
|
||||
return this.$store.state.chart.sceneId
|
||||
},
|
||||
vId() {
|
||||
// console.log(this.$store.state.chart.viewId);
|
||||
this.getData(this.$store.state.chart.viewId)
|
||||
return this.$store.state.chart.viewId
|
||||
}
|
||||
|
||||
},
|
||||
sceneId() {
|
||||
// console.log(this.$store.state.chart.sceneId);
|
||||
return this.$store.state.chart.sceneId
|
||||
watch: {},
|
||||
created() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
},
|
||||
vId() {
|
||||
// console.log(this.$store.state.chart.viewId);
|
||||
mounted() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
this.getData(this.$store.state.chart.viewId)
|
||||
return this.$store.state.chart.viewId
|
||||
}
|
||||
|
||||
},
|
||||
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: {
|
||||
initTableData(id) {
|
||||
if (id != null) {
|
||||
post('/dataset/table/get/' + id, null).then(response => {
|
||||
this.table = response.data
|
||||
this.initTableField(id)
|
||||
// this.myEcharts();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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) : []
|
||||
},
|
||||
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
|
||||
})
|
||||
} 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)
|
||||
},
|
||||
click1(item) {
|
||||
// console.log(item);
|
||||
const c = this.view.xaxis.filter(function (ele) {
|
||||
return ele.id === item.id
|
||||
})
|
||||
} else {
|
||||
this.view = {}
|
||||
}
|
||||
},
|
||||
// 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) : []
|
||||
|
||||
// 左边往右边拖动时的事件
|
||||
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) {
|
||||
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 = {}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
end4(e) {
|
||||
// 左边往右边拖动时的事件
|
||||
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) {
|
||||
|
||||
},
|
||||
// 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
|
||||
},
|
||||
},
|
||||
end4(e) {
|
||||
|
||||
myEcharts(option) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = this.$echarts.init(document.getElementById('echart'))
|
||||
// 指定图表的配置项和数据
|
||||
setTimeout(myChart.setOption(option, true), 500)
|
||||
window.onresize = function() {
|
||||
myChart.resize()
|
||||
},
|
||||
// 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>
|
||||
@ -270,15 +326,17 @@ export default {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
min-width: 180px;
|
||||
max-width:220px;
|
||||
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;
|
||||
@ -358,6 +416,14 @@ export default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid #000;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user