Skip to content

D
datax-cloud
Commit 7fbea29c by yuwei
Options

项目初始化

parent 0e8fad88
Showing with 504 additions and 144 deletions
datax-ui/src/views/visual/datachart/chart.vue
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-container> <div class="widget-left-container">
<el-aside width="250px" class="widget-field-container"> <div class="widget-left-header">
<el-card class="box-card" shadow="always" style="height: 100%;">
<div slot="header" class="clearfix">
<span>数据集</span> <span>数据集</span>
<el-dropdown trigger="click" style="float: right; color: #499df3;" @command="handleCommand"> <el-dropdown trigger="click" style="float: right; color: #499df3;" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
切换<i class="el-icon-arrow-down el-icon--right" /> 切换<i class="el-icon-arrow-down el-icon--right" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in datasetOptions" :command="item.id" :key="item.id">{{ item.setName }}</el-dropdown-item> <el-dropdown-item v-for="item in datasetOptions" :key="item.id" :command="item.id">{{ item.setName }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<div style="margin: -20px;"> <div class="widget-left-field">
<div class="field-widget-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div> <div class="widget-left-field-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div>
<draggable v-model="dimensions" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}"> <draggable v-model="dimensions" class="widget-left-field-draggable" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
<el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag> <el-tag v-for="(item, index) in dimensions" :key="index" class="draggable-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
</draggable> </draggable>
<div class="field-widget-cate"><i class="icon iconfont icon-zhibiao" /><span>指标列</span></div> </div>
<draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}"> <div class="widget-left-field">
<el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag> <div class="widget-left-field-cate"><i class="icon iconfont icon-zhibiao" /><span>指标列</span></div>
<draggable v-model="measures" class="widget-left-field-draggable" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
<el-tag v-for="(item, index) in measures" :key="index" class="draggable-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
</draggable> </draggable>
</div> </div>
</el-card> </div>
</el-aside> <div class="widget-center-container">
<el-container> <div class="widget-center-header">
<el-header class="chart-action-bar" style="height: 40px;text-align: right;">
<el-button icon="el-icon-view" type="text"> <el-button icon="el-icon-view" type="text">
预览 预览
</el-button> </el-button>
<el-button icon="el-icon-delete" type="text"> <el-button icon="el-icon-delete" type="text" @click="handleReset">
清空 重置
</el-button> </el-button>
<el-button icon="el-icon-plus" type="text"> <el-button icon="el-icon-plus" type="text" @click="handleSubmit">
保存 保存
</el-button> </el-button>
<el-button icon="el-icon-close" type="text"> <el-button icon="el-icon-close" type="text" @click="handleCancel">
取消 取消
</el-button> </el-button>
</el-header> </div>
<el-main class="widget-center-container"> <div class="widget-center-content">
<el-row> <div class="widget-center-draggable-wrapper">
<el-divider content-position="left">行维</el-divider> <el-divider content-position="left">行维</el-divider>
<el-col> <div class="widget-center-draggable-text">
<div class="draggable-wrapper"> <draggable group="dimensions" :list="widget.keys">
<draggable group="dimensions" :list="form.keys"> <el-tag v-for="(item, index) in widget.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
<el-tag v-for="(item, index) in form.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
{{ item.alias ? item.alias : item.col }} {{ item.alias ? item.alias : item.col }}
</el-tag> </el-tag>
</draggable> </draggable>
</div> </div>
</el-col>
</el-row>
<el-row>
<el-divider content-position="left">列维</el-divider> <el-divider content-position="left">列维</el-divider>
<el-col> <div class="widget-center-draggable-text">
<div class="draggable-wrapper"> <draggable group="dimensions" :list="widget.groups">
<draggable group="dimensions" :list="form.groups"> <el-tag v-for="(item, index) in widget.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
<el-tag v-for="(item, index) in form.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
{{ item.alias ? item.alias : item.col }} {{ item.alias ? item.alias : item.col }}
</el-tag> </el-tag>
</draggable> </draggable>
</div> </div>
</el-col>
</el-row>
<el-row>
<el-divider content-position="left">指标</el-divider> <el-divider content-position="left">指标</el-divider>
<el-col> <div class="widget-center-draggable-text">
<div class="draggable-wrapper"> <draggable group="measures" :list="widget.values" @change="handleValueDragChange">
<draggable group="measures" :list="form.values" @change="handleValueDragChange"> <div v-for="(item, index) in widget.values" :key="index" class="draggable-item">
<div v-for="(item, index) in form.values" :key="index" class="draggable-item">
<el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag> <el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag>
<span v-if="item.radio" class="draggable-item-handle"> <el-popover
<el-radio-group v-model="item.aggregate_type" size="mini" @change="((label)=>{handleValueChangeTagType(label, index, item)})"> placement="top"
width="400"
trigger="click"
>
<el-radio-group v-model="item.aggregate_type" size="mini">
<el-radio label="sum" size="mini">求和</el-radio> <el-radio label="sum" size="mini">求和</el-radio>
<el-radio label="count" size="mini">计数</el-radio> <el-radio label="count" size="mini">计数</el-radio>
<el-radio label="avg" size="mini">平均值</el-radio> <el-radio label="avg" size="mini">平均值</el-radio>
<el-radio label="max" size="mini">最大值</el-radio> <el-radio label="max" size="mini">最大值</el-radio>
<el-radio label="min" size="mini">最小值</el-radio> <el-radio label="min" size="mini">最小值</el-radio>
</el-radio-group> </el-radio-group>
</span> <span slot="reference" class="draggable-item-handle"><i class="el-icon-edit-outline" /></span>
<span v-else class="draggable-item-handle" @click="handleValueTagType(index, item)"><i class="el-icon-edit-outline" /></span> </el-popover>
<span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span> <span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span>
</div> </div>
</draggable> </draggable>
</div> </div>
</el-col> </div>
</el-row> <div class="widget-center-pane">
<el-row>
<el-divider>预览区</el-divider>
<el-tabs type="card"> <el-tabs type="card">
<el-tab-pane label="预览"> <el-tab-pane label="图表预览">
<div class="data-tab-pane">预览</div> <div class="widget-center-pane-chart">图表预览</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="查询脚本"> <el-tab-pane label="查询脚本">
<div class="script-tab-pane">查询脚本</div> <div class="widget-center-pane-script">查询脚本</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-col /> </div>
</el-row> </div>
</el-main> </div>
</el-container> <div class="widget-right-container">
<el-aside width="300px" class="widget-config-container"> <el-tabs type="border-card" stretch class="widget-right-tab">
<el-container>
<el-tabs type="border-card" stretch style="width: 100%;">
<el-tab-pane label="图表属性"> <el-tab-pane label="图表属性">
<el-main> <div class="widget-right-tab-pane">图表属性</div>
<div class="chart-tab-pane">图表属性</div>
</el-main>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="图表配置"> <el-tab-pane label="图表配置">
<el-main> <div class="widget-right-tab-pane">图表配置</div>
<div class="chart-tab-pane">图表配置</div>
</el-main>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-container> </div>
</el-aside>
</el-container>
</div> </div>
</template> </template>
...@@ -136,7 +120,9 @@ export default { ...@@ -136,7 +120,9 @@ export default {
data() { data() {
return { return {
datachart: {}, datachart: {},
form: { widget: {
datasetId: undefined,
chartType: undefined,
keys: [], keys: [],
groups: [], groups: [],
values: [] values: []
...@@ -156,7 +142,6 @@ export default { ...@@ -156,7 +142,6 @@ export default {
getDataChart(id).then(response => { getDataChart(id).then(response => {
if (response.success) { if (response.success) {
this.datachart = response.data this.datachart = response.data
console.log(this.datachart)
} }
}) })
}, },
...@@ -171,17 +156,18 @@ export default { ...@@ -171,17 +156,18 @@ export default {
getDataSet(id).then(response => { getDataSet(id).then(response => {
if (response.success) { if (response.success) {
this.dataset = response.data this.dataset = response.data
this.dimensions = this.dataset.schemaConfig.dimensions this.widget.datasetId = this.dataset.id
this.measures = this.dataset.schemaConfig.measures this.dimensions = JSON.parse(JSON.stringify(this.dataset.schemaConfig.dimensions))
this.measures = JSON.parse(JSON.stringify(this.dataset.schemaConfig.measures))
} }
}) })
}, },
handleKeyTagClose(index, tag) { handleKeyTagClose(index, tag) {
this.form.keys.splice(index, 1) this.widget.keys.splice(index, 1)
this.dimensions.push(tag) this.dimensions.push(tag)
}, },
handleGroupTagClose(index, tag) { handleGroupTagClose(index, tag) {
this.form.groups.splice(index, 1) this.widget.groups.splice(index, 1)
this.dimensions.push(tag) this.dimensions.push(tag)
}, },
handleValueDragChange(tag) { handleValueDragChange(tag) {
...@@ -189,16 +175,26 @@ export default { ...@@ -189,16 +175,26 @@ export default {
this.$set(tag.added.element, 'aggregate_type', 'sum') this.$set(tag.added.element, 'aggregate_type', 'sum')
} }
}, },
handleValueChangeTagType(label, index, tag) {
this.$delete(tag, 'radio')
},
handleValueTagType(index, tag) {
this.$set(tag, 'radio', true)
},
handleValueTagClose(index, tag) { handleValueTagClose(index, tag) {
this.form.values.splice(index, 1) this.widget.values.splice(index, 1)
tag.aggregate_type = '' tag.aggregate_type = ''
this.measures.push(tag) this.measures.push(tag)
},
handleReset() {
this.dimensions = JSON.parse(JSON.stringify(this.dataset.schemaConfig.dimensions))
this.measures = JSON.parse(JSON.stringify(this.dataset.schemaConfig.measures))
this.widget.chartType = undefined
this.widget.keys = []
this.widget.groups = []
this.widget.values = []
},
handleSubmit() {
console.log(this.datachart)
console.log(this.widget)
},
handleCancel() {
window.location.href = 'about:blank'
window.close()
} }
} }
} }
...@@ -206,53 +202,67 @@ export default { ...@@ -206,53 +202,67 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-container { .chart-container {
height: 100%; height: 100vh;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
.el-container { overflow: hidden;
height: 100%; display: flex;
width: 100%; flex-direction: row;
.widget-field-container { flex: 1;
color: #333; flex-basis: auto;
padding: 0;
margin-bottom: 0;
background: #FFFFFF;
box-shadow: 0 0 1px 1px #ccc;
.el-card >>> .el-card__header {
padding: 0;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; min-width: 0;
background-color: lightgrey; ::-webkit-scrollbar {
width: 3px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 10px;
}
.widget-left-container {
width: 250px;
box-sizing: border-box;
.widget-left-header {
height: 40px;
line-height: 40px;
padding: 0 20px;
.el-dropdown {
cursor: pointer;
}
} }
.field-widget-cate{ .widget-left-field {
padding: 0px 10px; height: 250px;
font-size: 13px; .widget-left-field-cate {
background-color: #f5f7fa; height: 40px;
line-height: 40px;
text-align: center;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
.icon { i {
margin-right: 6px; margin-right: 5px;
} }
} }
.field-widget-tag { .widget-left-field-draggable {
position: relative; height: calc(100% - 40px);
overflow: hidden; padding: 20px;
padding: 10px 10px; overflow-x: hidden;
margin: 0; overflow-y: auto;
min-height: 200px; .draggable-label {
.field-widget-label {
font-size: 12px; font-size: 12px;
display: block; display: block;
width: 48%; width: 90px;
position: relative; position: relative;
float: left; float: left;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin: 1%; margin: 5px;
color: #333; color: #333;
border: 1px solid #F4F6FC; border: 1px solid #F4F6FC;
&:hover { &:hover {
...@@ -267,47 +277,46 @@ export default { ...@@ -267,47 +277,46 @@ export default {
} }
} }
} }
.widget-config-container {
color: #333;
padding: 0;
margin-bottom: 0;
background: #FFFFFF;
box-shadow: 0 0 1px 1px #ccc;
.chart-tab-pane {
} }
} .widget-center-container {
.el-main { width: calc(100% - 550px);
padding: 0; flex: 1;
} flex-basis: auto;
.chart-action-bar { box-sizing: border-box;
border-left: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
.widget-center-header {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
height: 40px;
text-align: right; text-align: right;
color: #333; padding: 0 20px;
border-bottom: 2px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
} }
.widget-center-container { .widget-center-content {
box-shadow: 0 0 1px 1px #ccc; height: 100%;
border: 1px dashed #999; .widget-center-draggable-wrapper {
.draggable-wrapper { height: 266px;
height: 40px; padding: 0 20px;
border-bottom: 1px solid #e4e7ed;
.widget-center-draggable-text {
min-height: 40px;
height: auto;
line-height: 40px; line-height: 40px;
border: 1px solid #d7dae2; border: 1px solid #d7dae2;
background: #f4f4f7; background: #f4f4f7;
margin: 0 10px; overflow-x: auto;
overflow-y: hidden;
width: 100%;
white-space: nowrap;
.draggable-item { .draggable-item {
margin: 0 5px; margin: 0 5px;
display: inline-block; display: inline-block;
border: 1px solid #ebecef; border: 1px solid #ebecef;
height: 32px;
line-height: 35px;
border-radius: 4px; border-radius: 4px;
.draggable-item-handle { .draggable-item-handle {
background-color: #ecf5ff; background-color: #ecf5ff;
border-color: #d9ecff; border-color: #d9ecff;
display: inline-block; display: inline-block;
height: 32px;
padding: 0 10px; padding: 0 10px;
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 12px;
...@@ -317,20 +326,35 @@ export default { ...@@ -317,20 +326,35 @@ export default {
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
margin-left: -5px;
} }
} }
} }
.data-tab-pane {
margin: 10px;
min-height: 200px;
} }
.script-tab-pane { .widget-center-pane {
margin: 10px; height: calc(100% - 266px);
border: 1px dashed rgb(153, 153, 153); .widget-center-pane-chart {
min-height: 200px; height: 200px;
padding: 0 20px;
overflow-x: hidden;
overflow-y: auto;
}
.widget-center-pane-script {
height: 200px;
padding: 0 20px;
overflow-x: hidden;
overflow-y: auto;
}
} }
} }
} }
.widget-right-container {
width: 300px;
box-sizing: border-box;
.widget-right-tab-pane {
height: calc(100vh - 40px);
overflow-x: hidden;
overflow-y: auto;
}
}
} }
</style> </style>
datax-ui/src/views/visual/datachart/chart_bak.vue 0 → 100644
<template>
<div class="chart-container">
<el-container>
<el-aside width="250px" class="widget-field-container">
<el-card class="box-card" shadow="always" style="height: 100%;">
<div slot="header" class="clearfix">
<span>数据集</span>
<el-dropdown trigger="click" style="float: right; color: #499df3;" @command="handleCommand">
<span class="el-dropdown-link">
切换<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in datasetOptions" :command="item.id" :key="item.id">{{ item.setName }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div style="margin: -20px;">
<div class="field-widget-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div>
<draggable v-model="dimensions" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
<el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
</draggable>
<div class="field-widget-cate"><i class="icon iconfont icon-zhibiao" /><span>指标列</span></div>
<draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
<el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
</draggable>
</div>
</el-card>
</el-aside>
<el-container>
<el-header class="chart-action-bar" style="height: 40px;text-align: right;">
<el-button icon="el-icon-view" type="text">
预览
</el-button>
<el-button icon="el-icon-delete" type="text">
清空
</el-button>
<el-button icon="el-icon-plus" type="text">
保存
</el-button>
<el-button icon="el-icon-close" type="text">
取消
</el-button>
</el-header>
<el-main class="widget-center-container">
<el-row>
<el-divider content-position="left">行维</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable group="dimensions" :list="form.keys">
<el-tag v-for="(item, index) in form.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</el-tag>
</draggable>
</div>
</el-col>
</el-row>
<el-row>
<el-divider content-position="left">列维</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable group="dimensions" :list="form.groups">
<el-tag v-for="(item, index) in form.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</el-tag>
</draggable>
</div>
</el-col>
</el-row>
<el-row>
<el-divider content-position="left">指标</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable group="measures" :list="form.values" @change="handleValueDragChange">
<div v-for="(item, index) in form.values" :key="index" class="draggable-item">
<el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag>
<span v-if="item.radio" class="draggable-item-handle">
<el-radio-group v-model="item.aggregate_type" size="mini" @change="((label)=>{handleValueChangeTagType(label, index, item)})">
<el-radio label="sum" size="mini">求和</el-radio>
<el-radio label="count" size="mini">计数</el-radio>
<el-radio label="avg" size="mini">平均值</el-radio>
<el-radio label="max" size="mini">最大值</el-radio>
<el-radio label="min" size="mini">最小值</el-radio>
</el-radio-group>
</span>
<span v-else class="draggable-item-handle" @click="handleValueTagType(index, item)"><i class="el-icon-edit-outline" /></span>
<span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span>
</div>
</draggable>
</div>
</el-col>
</el-row>
<el-row>
<el-divider>预览区</el-divider>
<el-tabs type="card">
<el-tab-pane label="预览">
<div class="data-tab-pane">预览</div>
</el-tab-pane>
<el-tab-pane label="查询脚本">
<div class="script-tab-pane">查询脚本</div>
</el-tab-pane>
</el-tabs>
<el-col />
</el-row>
</el-main>
</el-container>
<el-aside width="300px" class="widget-config-container">
<el-container>
<el-tabs type="border-card" stretch style="width: 100%;">
<el-tab-pane label="图表属性">
<el-main>
<div class="chart-tab-pane">图表属性</div>
</el-main>
</el-tab-pane>
<el-tab-pane label="图表配置">
<el-main>
<div class="chart-tab-pane">图表配置</div>
</el-main>
</el-tab-pane>
</el-tabs>
</el-container>
</el-aside>
</el-container>
</div>
</template>
<script>
import { getDataChart } from '@/api/visual/datachart'
import { getDataSet, listDataSet } from '@/api/visual/dataset'
import draggable from 'vuedraggable'
export default {
name: 'DataChartConfig',
components: {
draggable
},
data() {
return {
datachart: {},
form: {
keys: [],
groups: [],
values: []
},
datasetOptions: [],
dataset: {},
dimensions: [],
measures: []
}
},
created() {
this.getDataChart(this.$route.params.id)
this.getDataSetList()
},
methods: {
getDataChart(id) {
getDataChart(id).then(response => {
if (response.success) {
this.datachart = response.data
console.log(this.datachart)
}
})
},
getDataSetList() {
listDataSet().then(response => {
if (response.success) {
this.datasetOptions = response.data
}
})
},
handleCommand(id) {
getDataSet(id).then(response => {
if (response.success) {
this.dataset = response.data
this.dimensions = this.dataset.schemaConfig.dimensions
this.measures = this.dataset.schemaConfig.measures
}
})
},
handleKeyTagClose(index, tag) {
this.form.keys.splice(index, 1)
this.dimensions.push(tag)
},
handleGroupTagClose(index, tag) {
this.form.groups.splice(index, 1)
this.dimensions.push(tag)
},
handleValueDragChange(tag) {
if (tag.added) {
this.$set(tag.added.element, 'aggregate_type', 'sum')
}
},
handleValueChangeTagType(label, index, tag) {
this.$delete(tag, 'radio')
},
handleValueTagType(index, tag) {
this.$set(tag, 'radio', true)
},
handleValueTagClose(index, tag) {
this.form.values.splice(index, 1)
tag.aggregate_type = ''
this.measures.push(tag)
}
}
}
</script>
<style lang="scss" scoped>
.chart-container {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
.el-container {
height: 100%;
width: 100%;
.widget-field-container {
color: #333;
padding: 0;
margin-bottom: 0;
background: #FFFFFF;
box-shadow: 0 0 1px 1px #ccc;
.el-card >>> .el-card__header {
padding: 0;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
background-color: lightgrey;
}
.field-widget-cate{
padding: 0px 10px;
font-size: 13px;
background-color: #f5f7fa;
border-bottom: 1px solid #e4e7ed;
.icon {
margin-right: 6px;
}
}
.field-widget-tag {
position: relative;
overflow: hidden;
padding: 10px 10px;
margin: 0;
min-height: 200px;
.field-widget-label {
font-size: 12px;
display: block;
width: 48%;
position: relative;
float: left;
left: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1%;
color: #333;
border: 1px solid #F4F6FC;
&:hover {
color: #409EFF;
border: 1px dashed #409EFF;
}
& > div {
display: block;
cursor: move;
text-align: center;
}
}
}
}
.widget-config-container {
color: #333;
padding: 0;
margin-bottom: 0;
background: #FFFFFF;
box-shadow: 0 0 1px 1px #ccc;
.chart-tab-pane {
}
}
.el-main {
padding: 0;
}
.chart-action-bar {
height: 40px;
line-height: 40px;
height: 40px;
text-align: right;
color: #333;
border-bottom: 2px solid #e4e7ed;
}
.widget-center-container {
box-shadow: 0 0 1px 1px #ccc;
border: 1px dashed #999;
.draggable-wrapper {
height: 40px;
line-height: 40px;
border: 1px solid #d7dae2;
background: #f4f4f7;
margin: 0 10px;
.draggable-item {
margin: 0 5px;
display: inline-block;
border: 1px solid #ebecef;
height: 32px;
line-height: 35px;
border-radius: 4px;
.draggable-item-handle {
background-color: #ecf5ff;
border-color: #d9ecff;
display: inline-block;
height: 32px;
padding: 0 10px;
line-height: 30px;
font-size: 12px;
color: #409EFF;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
white-space: nowrap;
cursor: pointer;
margin-left: -5px;
}
}
}
.data-tab-pane {
margin: 10px;
min-height: 200px;
}
.script-tab-pane {
margin: 10px;
border: 1px dashed rgb(153, 153, 153);
min-height: 200px;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment