forked from github/dataease
Merge branch 'main' of github.com:dataease/dataease into main
This commit is contained in:
taojinlong
commit
ba34aef58a
@ -123,7 +123,7 @@ public class ChartViewService {
|
||||
} else if (table.getMode() == 1) {// 抽取
|
||||
DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
|
||||
String tableName = dataTableInfoDTO.getTable() + "-" + table.getDataSourceId();// todo hBase table name maybe change
|
||||
data = sparkCalc.getData(tableName, xAxis, yAxis, view.getId().split("-")[0]);
|
||||
data = sparkCalc.getData(tableName, xAxis, yAxis, "tmp_" + view.getId().split("-")[0]);
|
||||
}
|
||||
|
||||
// 图表组件可再扩展
|
||||
@ -136,7 +136,6 @@ public class ChartViewService {
|
||||
}
|
||||
for (String[] d : data) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
BigDecimal b = new BigDecimal("0");
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
@ -147,7 +146,7 @@ public class ChartViewService {
|
||||
x.add(a.toString());
|
||||
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
|
||||
int j = i - xAxis.size();
|
||||
series.get(j).getData().add(new BigDecimal(d[i]));
|
||||
series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
|
||||
}
|
||||
}
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "^0.21.1",
|
||||
"echarts": "^5.0.2",
|
||||
"element-resize-detector": "^1.2.2",
|
||||
"element-ui": "2.13.0",
|
||||
"fit2cloud-ui": "^0.1.12",
|
||||
"js-cookie": "2.2.0",
|
||||
|
||||
93
frontend/src/components/DragItem/index.vue
Normal file
93
frontend/src/components/DragItem/index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-dropdown trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
|
||||
<span>{{ $t('chart.delete') }}</span>
|
||||
</el-dropdown-item>
|
||||
<slot />
|
||||
</el-dropdown-menu>
|
||||
</span>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DragItem',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
clickItem(param) {
|
||||
if (!param) {
|
||||
return
|
||||
}
|
||||
switch (param.type) {
|
||||
case 'rename':
|
||||
this.showRename()
|
||||
break
|
||||
case 'remove':
|
||||
this.removeItem()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
beforeClickItem(type) {
|
||||
return {
|
||||
type: type
|
||||
}
|
||||
},
|
||||
showRename() {
|
||||
this.item.index = this.index
|
||||
this.item.renameType = 'dimension'
|
||||
this.$emit('onNameEdit', this.item)
|
||||
},
|
||||
removeItem() {
|
||||
this.item.index = this.index
|
||||
this.$emit('closeItem', this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-axis {
|
||||
padding: 1px 6px;
|
||||
margin: 0 3px 2px 3px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-axis:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,10 @@
|
||||
<template>
|
||||
<div class="bg">
|
||||
<div id="preview-parent" class="canvas-container">
|
||||
<div
|
||||
class="canvas"
|
||||
:style="{
|
||||
width: changeStyleWithScale(canvasStyleData.width) + 'px',
|
||||
height: changeStyleWithScale(canvasStyleData.height) + 'px',
|
||||
}"
|
||||
>
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentData"
|
||||
:key="index"
|
||||
:config="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="canvasInfo" class="bg">
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentDataInfo"
|
||||
:key="index"
|
||||
:config="item"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,6 +13,10 @@ import { getStyle } from '@/components/canvas/utils/style'
|
||||
import { mapState } from 'vuex'
|
||||
import ComponentWrapper from './ComponentWrapper'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
|
||||
export default {
|
||||
components: { ComponentWrapper },
|
||||
@ -36,20 +30,84 @@ export default {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'componentData',
|
||||
'canvasStyleData'
|
||||
]),
|
||||
data() {
|
||||
return {
|
||||
isShowPreview: false,
|
||||
panelId: '',
|
||||
needToChangeHeight: [
|
||||
'top',
|
||||
'height',
|
||||
'fontSize',
|
||||
'borderWidth'
|
||||
],
|
||||
needToChangeWidth: [
|
||||
'left',
|
||||
'width'
|
||||
],
|
||||
scaleWidth: '100',
|
||||
scaleHeight: '100',
|
||||
timer: null,
|
||||
componentDataShow: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 此处单独计算componentData的值 不放入全局mapState中
|
||||
componentDataInfo() {
|
||||
return this.componentDataShow
|
||||
},
|
||||
...mapState([
|
||||
'componentData',
|
||||
'canvasStyleData'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
// 计算组件当前合适宽度
|
||||
debugger
|
||||
const _this = this
|
||||
const erd = elementResizeDetectorMaker()
|
||||
// 监听div变动事件
|
||||
erd.listenTo(document.getElementById('canvasInfo'), element => {
|
||||
_this.$nextTick(() => {
|
||||
_this.restore()
|
||||
})
|
||||
})
|
||||
// 监听数据变动事件
|
||||
eventBus.$on('componentDataChange', () => {
|
||||
_this.restore()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeStyleWithScale,
|
||||
|
||||
getStyle,
|
||||
|
||||
close() {
|
||||
this.$emit('change', false)
|
||||
restore() {
|
||||
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
|
||||
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
|
||||
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
|
||||
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
|
||||
this.handleScaleChange()
|
||||
},
|
||||
resetID(data) {
|
||||
data.forEach(item => {
|
||||
item.id = uuid.v1()
|
||||
})
|
||||
return data
|
||||
},
|
||||
format(value, scale) {
|
||||
return value * parseInt(scale) / 100
|
||||
},
|
||||
handleScaleChange() {
|
||||
const componentData = deepCopy(this.componentData)
|
||||
componentData.forEach(component => {
|
||||
Object.keys(component.style).forEach(key => {
|
||||
if (this.needToChangeHeight.includes(key)) {
|
||||
component.style[key] = this.format(component.style[key], this.scaleHeight)
|
||||
}
|
||||
if (this.needToChangeWidth.includes(key)) {
|
||||
component.style[key] = this.format(component.style[key], this.scaleWidth)
|
||||
}
|
||||
})
|
||||
})
|
||||
this.componentDataShow = componentData
|
||||
eventBus.$emit('resizing', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,12 +115,14 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
min-width: 600px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #E6E6E6;
|
||||
.canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.canvas {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="element" class="bg">
|
||||
<div id="canvasInfo" class="bg">
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentDataInfo"
|
||||
:key="index"
|
||||
@ -10,12 +10,12 @@
|
||||
|
||||
<script>
|
||||
import { getStyle } from '@/components/canvas/utils/style'
|
||||
import { mapState } from 'vuex'
|
||||
import ComponentWrapper from './ComponentWrapper'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
import { get } from '@/api/panel/panel'
|
||||
|
||||
export default {
|
||||
@ -47,6 +47,7 @@ export default {
|
||||
scaleWidth: '100',
|
||||
scaleHeight: '100',
|
||||
timer: null,
|
||||
componentDataSource: {},
|
||||
componentData: {},
|
||||
canvasStyleData: {}
|
||||
|
||||
@ -58,8 +59,17 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const _this = this
|
||||
|
||||
// 加载数据
|
||||
this.restore()
|
||||
_this.restore()
|
||||
const erd = elementResizeDetectorMaker()
|
||||
// 监听div变动事件
|
||||
erd.listenTo(document.getElementById('canvasInfo'), element => {
|
||||
_this.$nextTick(() => {
|
||||
_this.resize()
|
||||
})
|
||||
})
|
||||
window.onresize = () => {
|
||||
debugger
|
||||
this.resize()
|
||||
@ -82,7 +92,7 @@ export default {
|
||||
this.panelId = this.$route.path.split('/')[2]
|
||||
// 加载视图数据
|
||||
get('panel/group/findOne/' + this.panelId).then(response => {
|
||||
this.componentData = this.resetID(JSON.parse(response.data.panelData))
|
||||
this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
|
||||
this.canvasStyleData = JSON.parse(response.data.panelStyle)
|
||||
this.resize()
|
||||
})
|
||||
@ -98,7 +108,7 @@ export default {
|
||||
return value * parseInt(scale) / 100
|
||||
},
|
||||
handleScaleChange() {
|
||||
const componentData = deepCopy(this.componentData)
|
||||
const componentData = deepCopy(this.componentDataSource)
|
||||
componentData.forEach(component => {
|
||||
Object.keys(component.style).forEach(key => {
|
||||
if (this.needToChangeHeight.includes(key)) {
|
||||
@ -118,6 +128,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
min-width: 800px;
|
||||
min-height: 600px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<!--<i v-if="asideHidden" class="el-icon-arrow-right"/>-->
|
||||
<!--</div>-->
|
||||
<slot />
|
||||
<de-horizontal-drag-bar />
|
||||
<de-horizontal-drag-bar v-if="showDragBar" />
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
@ -26,6 +26,10 @@ export default {
|
||||
enableAsideHidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showDragBar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -42,6 +42,12 @@ class TimeYearServiceImpl extends WidgetService {
|
||||
beforeToDraw() {
|
||||
|
||||
}
|
||||
|
||||
filterFieldMethod(fields) {
|
||||
return fields.filter(field => {
|
||||
return field['deType'] === 1
|
||||
})
|
||||
}
|
||||
}
|
||||
const timeYearServiceImpl = new TimeYearServiceImpl({ name: 'timeYearWidget' })
|
||||
export default timeYearServiceImpl
|
||||
|
||||
1
frontend/src/icons/svg/pie-rose.svg
Normal file
1
frontend/src/icons/svg/pie-rose.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617857636853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M172.860952 769.462857c55.832381 66.072381 132.291048 92.769524 208.725334 88.064l4.412952-251.562667c-10.288762-4.705524-24.990476-4.705524-35.279238-15.725714L172.860952 769.487238z m239.616-404.041143l-5.90019-169.813333c-55.832381 0-97.01181 15.725714-142.57981 59.733333l76.434286 136.801524c24.990476-15.725714 45.592381-26.721524 72.045714-26.721524z m122.002286 125.781334h357.229714c0-273.554286-199.92381-490.544762-449.828571-490.544762v371.053714c47.030857 4.705524 92.598857 59.733333 92.598857 119.466667z m-5.875809 22.016c-4.412952 26.721524-24.990476 55.02781-45.592381 77.043809l361.642666 386.755048C951.978667 862.232381 1024 698.733714 1024 517.924571H528.579048v-4.705523z m-111.713524 97.475047h-4.412953V997.424762c111.713524-4.705524 219.014095-55.02781 301.348572-125.781333L463.920762 604.40381c-16.164571 6.290286-30.866286 6.290286-47.055238 6.290285z m-224.914286-92.769524c0 55.02781 20.577524 92.769524 51.44381 130.486858l91.136-77.04381c-14.701714-15.701333-24.990476-33.01181-30.866286-59.733333l-111.713524 6.290285z m113.176381-33.011809c0-33.01181 14.701714-55.02781 30.866286-77.04381L172.860952 186.197333C90.526476 245.930667 39.082667 338.70019 24.380952 447.146667l280.771048 37.741714c0 6.290286 0 0 0 0z" p-id="860"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -693,7 +693,11 @@ export default {
|
||||
filter_null: '为空',
|
||||
filter_not_null: '不为空',
|
||||
filter_include: '包含',
|
||||
filter_not_include: '不包含'
|
||||
filter_not_include: '不包含',
|
||||
rose_type: '玫瑰图模式',
|
||||
radius_mode: '半径',
|
||||
area_mode: '面积',
|
||||
rose_radius: '圆角'
|
||||
},
|
||||
dataset: {
|
||||
datalist: '数据集',
|
||||
@ -770,7 +774,10 @@ export default {
|
||||
current_update_time: '当前更新时间',
|
||||
param: '参数',
|
||||
edit_sql: '编辑SQL',
|
||||
showRow: '显示行'
|
||||
showRow: '显示行',
|
||||
add_excel_table: '添加Excel数据集',
|
||||
add_custom_table: '添加自助数据集',
|
||||
upload_file: '上传文件'
|
||||
},
|
||||
datasource: {
|
||||
create: '新建数据连接',
|
||||
|
||||
@ -88,7 +88,7 @@ div:focus {
|
||||
.de-filter-dialog {
|
||||
min-width: 500px !important;
|
||||
width: 50% !important;
|
||||
|
||||
|
||||
.el-dialog__header{
|
||||
background-color: #f4f4f5;
|
||||
padding: 10px 20px !important;
|
||||
@ -144,3 +144,30 @@ div:focus {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.de-filter-data-table {
|
||||
.el-table__body-wrapper >table>{
|
||||
tbody {
|
||||
.el-table__row {
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
td {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.de-filter-data-table::before {
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
.custom-component-class {
|
||||
width: 100%;
|
||||
div {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ $subMenuHover:#1682e6;
|
||||
|
||||
$sideBarWidth: 210px;
|
||||
$topBarHeight: 56px;
|
||||
$contentHeight: calc(100vh - 56px);
|
||||
$contentHeight: 100vh;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
|
||||
@ -15,6 +15,8 @@ export const DEFAULT_SIZE = {
|
||||
lineArea: false,
|
||||
pieInnerRadius: 0,
|
||||
pieOuterRadius: 60,
|
||||
pieRoseType: 'radius',
|
||||
pieRoseRadius: 5,
|
||||
funnelWidth: 80,
|
||||
radarShape: 'polygon'
|
||||
}
|
||||
|
||||
@ -50,3 +50,18 @@ export function basePieOption(chart_option, chart) {
|
||||
return chart_option
|
||||
}
|
||||
|
||||
export function rosePieOption(chart_option, chart) {
|
||||
basePieOption(chart_option, chart)
|
||||
let customAttr = {}
|
||||
if (chart.customAttr) {
|
||||
customAttr = JSON.parse(chart.customAttr)
|
||||
if (customAttr.size) {
|
||||
chart_option.series[0].roseType = customAttr.size.pieRoseType
|
||||
chart_option.series[0].itemStyle = {
|
||||
borderRadius: customAttr.size.pieRoseRadius
|
||||
}
|
||||
}
|
||||
}
|
||||
return chart_option
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR } from '../chart/chart'
|
||||
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
|
||||
import { baseLineOption, stackLineOption } from '../chart/line/line'
|
||||
import { basePieOption } from '../chart/pie/pie'
|
||||
import { basePieOption, rosePieOption } from '../chart/pie/pie'
|
||||
import { baseFunnelOption } from '../chart/funnel/funnel'
|
||||
import { baseRadarOption } from '../chart/radar/radar'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
@ -73,6 +73,8 @@ export default {
|
||||
chart_option = stackLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
|
||||
} else if (chart.type === 'pie') {
|
||||
chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
|
||||
} else if (chart.type === 'pie-rose') {
|
||||
chart_option = rosePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
|
||||
} else if (chart.type === 'funnel') {
|
||||
chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
|
||||
} else if (chart.type === 'radar') {
|
||||
|
||||
@ -57,6 +57,18 @@
|
||||
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
|
||||
<span v-if="chart.type && chart.type.includes('pie-rose')">
|
||||
<el-form-item :label="$t('chart.rose_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
|
||||
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
|
||||
<el-form v-if="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
|
||||
@ -90,8 +90,15 @@
|
||||
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
|
||||
<el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
|
||||
<el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
|
||||
<el-radio value="pie-rose" label="pie-rose"><svg-icon icon-class="pie-rose" class="chart-icon" /></el-radio>
|
||||
<el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
|
||||
<el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
@ -321,7 +328,7 @@ export default {
|
||||
const view = JSON.parse(JSON.stringify(this.view))
|
||||
view.id = this.view.id
|
||||
view.sceneId = this.view.sceneId
|
||||
view.name = this.table.name
|
||||
view.name = this.view.name ? this.view.name : this.table.name
|
||||
view.tableId = this.view.tableId
|
||||
// view.xaxis.forEach(function(ele) {
|
||||
// if (!ele.summary || ele.summary === '') {
|
||||
|
||||
144
frontend/src/views/dataset/add/AddCustom.vue
Normal file
144
frontend/src/views/dataset/add/AddCustom.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;">
|
||||
<span style="line-height: 26px;">
|
||||
{{ $t('dataset.add_custom_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row>
|
||||
<el-col>
|
||||
123
|
||||
</el-col>
|
||||
<el-col>
|
||||
456
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'AddCustom',
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
mode: '0',
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// dataSource(val) {
|
||||
// if (val) {
|
||||
// post('/datasource/getTables', { id: val }).then(response => {
|
||||
// this.tables = response.data
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// searchTable(val) {
|
||||
// if (val && val !== '') {
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
|
||||
// } else {
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// this.initDataSource()
|
||||
},
|
||||
activated() {
|
||||
// this.initDataSource()
|
||||
},
|
||||
methods: {
|
||||
// initDataSource() {
|
||||
// listDatasource().then(response => {
|
||||
// this.options = response.data
|
||||
// })
|
||||
// },
|
||||
|
||||
save() {
|
||||
// console.log(this.checkTableList);
|
||||
// console.log(this.scene);
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
// const mode = this.mode
|
||||
this.checkTableList.forEach(function(name) {
|
||||
tables.push({
|
||||
name: name,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'excel',
|
||||
mode: 1
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
195
frontend/src/views/dataset/add/AddExcel.vue
Normal file
195
frontend/src/views/dataset/add/AddExcel.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;">
|
||||
<span style="line-height: 26px;">
|
||||
{{ $t('dataset.add_excel_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row>
|
||||
<el-row>
|
||||
<el-col style="width: 500px;">
|
||||
<el-form :model="form" :inline="true" size="mini" class="row-style">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.name" :placeholder="$t('commons.name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
>
|
||||
<el-button size="mini" type="primary">{{ $t('dataset.upload_file') }}</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-card class="box-card dataPreview" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t('dataset.data_preview') }}</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
/>
|
||||
</ux-grid>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'AddExcel',
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: ''
|
||||
},
|
||||
fields: [],
|
||||
mode: '1',
|
||||
height: 600
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// dataSource(val) {
|
||||
// if (val) {
|
||||
// post('/datasource/getTables', { id: val }).then(response => {
|
||||
// this.tables = response.data
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// searchTable(val) {
|
||||
// if (val && val !== '') {
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
|
||||
// } else {
|
||||
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// this.initDataSource()
|
||||
},
|
||||
activated() {
|
||||
// this.initDataSource()
|
||||
},
|
||||
methods: {
|
||||
// initDataSource() {
|
||||
// listDatasource().then(response => {
|
||||
// this.options = response.data
|
||||
// })
|
||||
// },
|
||||
|
||||
save() {
|
||||
// console.log(this.checkTableList);
|
||||
// console.log(this.scene);
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
this.checkTableList.forEach(function(name) {
|
||||
tables.push({
|
||||
name: name,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'excel',
|
||||
mode: parseInt(mode)
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row-style>>>.el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dataPreview>>>.el-card__header{
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.dataPreview>>>.el-card__body{
|
||||
padding:10px;
|
||||
}
|
||||
</style>
|
||||
@ -536,10 +536,10 @@ export default {
|
||||
this.addData('AddSQL')
|
||||
break
|
||||
case 'excel':
|
||||
this.$message(param.type)
|
||||
this.addData('AddExcel')
|
||||
break
|
||||
case 'custom':
|
||||
this.$message(param.type)
|
||||
this.addData('AddCustom')
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
@ -22,10 +22,12 @@ import DataHome from './data/DataHome'
|
||||
import ViewTable from './data/ViewTable'
|
||||
import AddDB from './add/AddDB'
|
||||
import AddSQL from './add/AddSQL'
|
||||
import AddExcel from './add/AddExcel'
|
||||
import AddCustom from './add/AddCustom'
|
||||
|
||||
export default {
|
||||
name: 'DataSet',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL },
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom },
|
||||
data() {
|
||||
return {
|
||||
component: DataHome,
|
||||
@ -46,6 +48,12 @@ export default {
|
||||
case 'AddSQL':
|
||||
this.component = AddSQL
|
||||
break
|
||||
case 'AddExcel':
|
||||
this.component = AddExcel
|
||||
break
|
||||
case 'AddCustom':
|
||||
this.component = AddCustom
|
||||
break
|
||||
default:
|
||||
this.component = DataHome
|
||||
break
|
||||
|
||||
@ -69,11 +69,31 @@
|
||||
</de-container>
|
||||
|
||||
<el-dialog
|
||||
v-if="filterVisible"
|
||||
title="过滤组件"
|
||||
:visible.sync="filterVisible"
|
||||
custom-class="de-filter-dialog"
|
||||
>
|
||||
<filter-dialog />
|
||||
<filter-dialog v-if="filterVisible" :widget-id="currentWidgetId">
|
||||
<de-drawing-widget
|
||||
v-if="filterVisible && currentComponent"
|
||||
:id="'component' + currentComponent.id"
|
||||
style="width: 100% !important;"
|
||||
class="component"
|
||||
:element="currentComponent"
|
||||
:item="currentComponent"
|
||||
/>
|
||||
</filter-dialog>
|
||||
<!-- <div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="editPasswordVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="editUserPassword('editPasswordForm')">确认</el-button>
|
||||
</div> -->
|
||||
<div style="text-align: end !important;margin: 0 15px !important;">
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelFilter">取 消</el-button>
|
||||
<el-button type="primary" @click="sureFilter">确 定</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-container>
|
||||
@ -123,7 +143,10 @@ export default {
|
||||
showIndex: -1,
|
||||
activeName: 'attr',
|
||||
reSelectAnimateIndex: undefined,
|
||||
filterVisible: false
|
||||
filterVisible: false,
|
||||
currentWidgetId: null,
|
||||
currentWidget: null,
|
||||
currentComponent: null
|
||||
}
|
||||
},
|
||||
|
||||
@ -224,11 +247,12 @@ export default {
|
||||
// 画布
|
||||
restore() {
|
||||
// 用保存的数据恢复画布
|
||||
if (localStorage.getItem('canvasData')) {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
|
||||
let canvasData = null
|
||||
if ((canvasData = localStorage.getItem('canvasData')) !== null && canvasData !== 'null') {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(canvasData)))
|
||||
}
|
||||
|
||||
if (localStorage.getItem('canvasStyle')) {
|
||||
if (canvasData && canvasData !== 'null') {
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
|
||||
}
|
||||
},
|
||||
@ -260,13 +284,17 @@ export default {
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const wd = ApplicationContext.getService(componentInfo.id)
|
||||
if (wd.filterDialog) {
|
||||
this.currentWidget = ApplicationContext.getService(componentInfo.id)
|
||||
if (this.currentWidget.filterDialog) {
|
||||
this.show = false
|
||||
this.openFilterDiolog()
|
||||
this.currentComponent = deepCopy(this.currentWidget)
|
||||
this.currentComponent.style.top = e.offsetY
|
||||
this.currentComponent.style.left = e.offsetX
|
||||
this.currentComponent.id = newComponentId
|
||||
this.openFilterDiolog(componentInfo.id)
|
||||
return
|
||||
}
|
||||
component = deepCopy(wd)
|
||||
component = deepCopy(this.currentWidget)
|
||||
}
|
||||
|
||||
component.style.top = e.offsetY
|
||||
@ -277,7 +305,6 @@ export default {
|
||||
},
|
||||
|
||||
handleDragOver(e) {
|
||||
console.log('handleDragOver123')
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
},
|
||||
@ -300,10 +327,22 @@ export default {
|
||||
this.$store.commit('hideContextMenu')
|
||||
}
|
||||
},
|
||||
openFilterDiolog() {
|
||||
openFilterDiolog(widgetId) {
|
||||
this.currentWidgetId = widgetId
|
||||
this.filterVisible = true
|
||||
},
|
||||
cancelFilter() {
|
||||
this.filterVisible = false
|
||||
this.currentWidgetId = null
|
||||
this.currentWidget = null
|
||||
this.currentComponent = null
|
||||
},
|
||||
sureFilter() {
|
||||
const component = deepCopy(this.currentComponent)
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot')
|
||||
this.cancelFilter()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -371,7 +410,6 @@ export default {
|
||||
.leftPanel {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,77 @@
|
||||
<template>
|
||||
|
||||
<de-container class="de-dialog-container">
|
||||
<de-aside-container class="ms-aside-container">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">按表选择</el-tab-pane>
|
||||
<de-aside-container :show-drag-bar="false" class="ms-aside-container">
|
||||
<el-tabs v-model="activeName" class="filter-dialog-tabs">
|
||||
<el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">
|
||||
<div class="component-header filter-common">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
|
||||
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a>
|
||||
<span v-else>{{ bread.label }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="component-search filter-common">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="component-result-content filter-common" @dragstart="handleDragStart" @dragend="handleDragEnd"> -->
|
||||
<div class="component-result-content filter-common">
|
||||
<el-tree
|
||||
v-if="showDomType === 'tree'"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
:render-content="renderNode"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
|
||||
<el-table
|
||||
v-else-if="showDomType === 'db'"
|
||||
class="de-filter-data-table"
|
||||
:data="sceneDatas"
|
||||
:show-header="false"
|
||||
size="mini"
|
||||
:highlight-current-row="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" label="名称">
|
||||
<template v-if="showDomType === 'db'" :id="scope.row.id" slot-scope="scope">
|
||||
<div class="filter-db-row" @click="showFieldDatas(scope.row)">
|
||||
<i class="el-icon-s-data" />
|
||||
<span> {{ scope.row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-else-if="showDomType === 'field'">
|
||||
<draggable
|
||||
v-model="fieldDatas"
|
||||
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
@end="end1"
|
||||
@start="start1"
|
||||
>
|
||||
<transition-group>
|
||||
<div v-for="item in fieldDatas" :key="item.id" class="filter-db-row">
|
||||
<i class="el-icon-s-data" />
|
||||
<span> {{ item.name }}</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :lazy="true" class="de-tab" label="按组件选择" name="assembly">按组件选择</el-tab-pane>
|
||||
</el-tabs>
|
||||
</de-aside-container>
|
||||
|
||||
<!--画布区域-->
|
||||
<de-main-container class="ms-main-container">
|
||||
<div>
|
||||
<el-row>
|
||||
@ -19,7 +82,22 @@
|
||||
<div class="field-content-text">字段</div>
|
||||
</div>
|
||||
|
||||
<div class="field-content-right">请拖入左侧字段</div>
|
||||
<div class="field-content-right">
|
||||
<el-row style="display:flex;height: 32px;">
|
||||
<draggable
|
||||
v-model="selectField"
|
||||
group="dimension"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@end="end2"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -42,7 +120,17 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="filter-content" />
|
||||
<div class="filter-content">
|
||||
<el-card class="box-card">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<span> {{ widget.label }}</span>
|
||||
</div>
|
||||
<div class="custom-component-class">
|
||||
<slot />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -54,24 +142,165 @@
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import draggable from 'vuedraggable'
|
||||
import DragItem from '@/components/DragItem'
|
||||
import { ApplicationContext } from '@/utils/ApplicationContext'
|
||||
import { groupTree, loadTable, fieldList } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'FilterDialog',
|
||||
components: {
|
||||
DeMainContainer,
|
||||
DeContainer,
|
||||
DeAsideContainer
|
||||
DeAsideContainer,
|
||||
draggable,
|
||||
DragItem
|
||||
},
|
||||
props: {
|
||||
widgetId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'dataset'
|
||||
activeName: 'dataset',
|
||||
showDomType: 'tree',
|
||||
dataSetBreads: [
|
||||
{ label: '数据列表', link: false, type: 'root' }
|
||||
],
|
||||
data: [],
|
||||
sceneDatas: [],
|
||||
fieldDatas: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
selectField: [],
|
||||
widget: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.widget = ApplicationContext.getService(this.widgetId)
|
||||
this.loadDataSetTree()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
if (data.type === 'scene') {
|
||||
this.showSceneTable(data)
|
||||
}
|
||||
},
|
||||
loadDataSetTree() {
|
||||
groupTree({}).then(res => {
|
||||
let datas = res.data
|
||||
if (this.widget && this.widget.filterFieldMethod) {
|
||||
datas = this.widget.filterFieldMethod(datas)
|
||||
}
|
||||
this.data = datas
|
||||
})
|
||||
},
|
||||
renderNode(h, { node, data, store }) {
|
||||
return (
|
||||
<div class='custom-tree-node' >
|
||||
|
||||
{ data.type === 'scene' ? (
|
||||
<el-button icon='el-icon-folder' type='text' size='mini' />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<span class='label-span' >{node.label}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
showSceneTable(node) {
|
||||
this.showDomType = 'db'
|
||||
this.setTailLink(node)
|
||||
this.addTail(node)
|
||||
this.loadTable(node.id)
|
||||
},
|
||||
setTailLink(node) {
|
||||
const tail = this.dataSetBreads[this.dataSetBreads.length - 1]
|
||||
tail.type = node.type
|
||||
tail.link = true
|
||||
},
|
||||
addTail(node) {
|
||||
const tail = { link: false, label: node.label || node.name, type: node.type }
|
||||
this.dataSetBreads.push(tail)
|
||||
},
|
||||
|
||||
removeTail() {
|
||||
this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
|
||||
this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
|
||||
},
|
||||
backToLink(bread) {
|
||||
if (bread.type === 'db') {
|
||||
this.showDomType = 'db'
|
||||
} else {
|
||||
this.showDomType = 'tree'
|
||||
}
|
||||
|
||||
this.removeTail()
|
||||
},
|
||||
loadTable(sceneId) {
|
||||
loadTable({ sceneId: sceneId, sort: 'type asc,create_time desc,name asc' }).then(res => {
|
||||
this.sceneDatas = res.data
|
||||
})
|
||||
},
|
||||
|
||||
loadField(tableId) {
|
||||
fieldList(tableId).then(res => {
|
||||
this.fieldDatas = res.data
|
||||
})
|
||||
},
|
||||
showFieldDatas(row) {
|
||||
this.showDomType = 'field'
|
||||
this.setTailLink(row)
|
||||
this.addTail(row)
|
||||
this.loadField(row.id)
|
||||
},
|
||||
test(row) {},
|
||||
onMove(e, originalEvent) {
|
||||
this.moveId = e.draggedContext.element.id
|
||||
return true
|
||||
},
|
||||
start1() {
|
||||
|
||||
},
|
||||
end1(e) {
|
||||
this.refuseMove(e)
|
||||
this.removeCheckedKey(e)
|
||||
this.save()
|
||||
},
|
||||
save() {
|
||||
|
||||
},
|
||||
end2(e) {
|
||||
this.refuseMove(e)
|
||||
},
|
||||
refuseMove(e) {
|
||||
const that = this
|
||||
const xItems = this.fieldDatas.filter(function(m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
|
||||
if (xItems && xItems.length > 1) {
|
||||
this.fieldDatas.splice(e.newDraggableIndex, 1)
|
||||
}
|
||||
},
|
||||
removeCheckedKey(e) {
|
||||
const that = this
|
||||
const xItems = this.selectField.filter(function(m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
|
||||
if (xItems && xItems.length > 1) {
|
||||
this.selectField.splice(e.newDraggableIndex, 1)
|
||||
}
|
||||
},
|
||||
closeItem(tag) {
|
||||
const index = tag.index
|
||||
this.selectField.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -86,9 +315,10 @@ export default {
|
||||
min-width: 230px !important;
|
||||
max-width: 260px !important;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
min-height: 390px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
@ -137,7 +367,7 @@ export default {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0px;
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -161,9 +391,46 @@ export default {
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
height: calc(50vh - 150px);
|
||||
height: calc(50vh - 130px);
|
||||
top: 160px;
|
||||
background: #99a9bf;
|
||||
|
||||
}
|
||||
|
||||
.filter-dialog-tabs {
|
||||
border: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.filter-common {
|
||||
margin: 10px 10px;
|
||||
|
||||
}
|
||||
|
||||
.component-header {
|
||||
margin: 20px 10px !important;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-weight: 450 !important;
|
||||
color: #409EFF;
|
||||
}
|
||||
.filter-db-row {
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
color: #409EFF;
|
||||
}
|
||||
// background-color: #3685f2;
|
||||
// color: #fff;
|
||||
}
|
||||
.draggable-group {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
.box-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,25 +2,6 @@
|
||||
|
||||
<div class="filter-container" @dragstart="handleDragStart">
|
||||
|
||||
<!-- <el-card class="filter-card-class">
|
||||
<div slot="header">
|
||||
<span>卡片名称</span>
|
||||
</div>
|
||||
<div style="position: relative;margin-left: 5px;" @dragstart="handleDragStart">
|
||||
<div
|
||||
v-for="(item, index) in componentList"
|
||||
:key="index"
|
||||
:data-id="item.id"
|
||||
draggable
|
||||
:data-index="index"
|
||||
>
|
||||
<span class="iconfont" :class="'icon-' + item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-card> -->
|
||||
|
||||
<div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
|
||||
<div class="filter-header">
|
||||
<div class="filter-header-text"> {{ key }} </div>
|
||||
|
||||
@ -1,85 +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>
|
||||
<panel-list />
|
||||
</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>
|
||||
<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 './list/PanelList'
|
||||
import PanelViewShow from './list/PanelViewShow'
|
||||
import ShareTree from './GrantAuth/shareTree'
|
||||
|
||||
export default {
|
||||
name: 'Panel',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, 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>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
|
||||
<de-main-container>
|
||||
<component :is="component" :param="param" />
|
||||
</de-main-container>
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 15px;
|
||||
padding: 0px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@ -1,156 +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-view" size="mini" circle />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-row>
|
||||
<!--TODO 仪表盘预览区域-->
|
||||
<section>
|
||||
<Preview />
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
import ChartEdit from '@/views/chart/view/ChartEdit'
|
||||
|
||||
export default {
|
||||
name: 'ChartViewEdit',
|
||||
components: { ChartEdit },
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@ -145,6 +145,7 @@ import GrantAuth from '../GrantAuth'
|
||||
import LinkGenerate from '@/views/link/generate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import bus from '@/utils/bus'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel'
|
||||
|
||||
export default {
|
||||
@ -417,8 +418,6 @@ export default {
|
||||
|
||||
nodeClick(data, node) {
|
||||
if (data.nodeType === 'panel') {
|
||||
this.$store.dispatch('panel/setPanelInfo', data)
|
||||
this.currGroup = data
|
||||
// 加载视图数据
|
||||
this.$nextTick(() => {
|
||||
localStorage.setItem('canvasData', null)
|
||||
@ -426,6 +425,9 @@ export default {
|
||||
get('panel/group/findOne/' + data.id).then(response => {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
|
||||
this.$store.dispatch('panel/setPanelInfo', data)
|
||||
this.currGroup = data
|
||||
eventBus.$emit('componentDataChange', '')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@ -57,12 +57,13 @@ export default {
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 15px;
|
||||
padding: 0px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<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-view" size="mini" circle @click="clickPreview" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-row>
|
||||
<!--TODO 仪表盘预览区域-->
|
||||
<section>
|
||||
<Preview />
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 100%;width: 100%;">
|
||||
<el-col v-if="panelInfo.name.length>0" class="panel-design">
|
||||
<el-row class="panel-design-head">
|
||||
<!--TODO 仪表盘头部区域-->
|
||||
<span>{{ panelInfo.name || '测试仪表板' }}</span>
|
||||
<span style="float: right;">
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-row>
|
||||
<!--TODO 仪表盘预览区域-->
|
||||
<el-row class="panel-design-preview">
|
||||
<Preview />
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col v-if="panelInfo.name.length===0" style="height: 100%;">
|
||||
<el-row style="height: 100%;" class="custom-position">
|
||||
请从左侧选择仪表盘
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.view-list {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
@ -81,18 +81,26 @@ export default {
|
||||
}
|
||||
|
||||
.panel-design {
|
||||
min-height: 400px;
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.panel-design-head {
|
||||
height: 40px;
|
||||
background-color: white;
|
||||
padding: 0 6px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.panel-design-show {
|
||||
height: 100%;
|
||||
.panel-design-preview {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
@ -165,4 +173,14 @@ export default {
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user