Skip to content

D
datax-cloud
Commit 7fbea29c by yuwei
Options

项目初始化

parent 0e8fad88
Showing with 572 additions and 212 deletions
datax-ui/src/views/visual/datachart/chart.vue
<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>
<div class="widget-left-container">
<div class="widget-left-header">
<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" :key="item.id" :command="item.id">{{ item.setName }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="widget-left-field">
<div class="widget-left-field-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div>
<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="draggable-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
</draggable>
</div>
<div class="widget-left-field">
<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>
</div>
</div>
<div class="widget-center-container">
<div class="widget-center-header">
<el-button icon="el-icon-view" type="text">
预览
</el-button>
<el-button icon="el-icon-delete" type="text" @click="handleReset">
重置
</el-button>
<el-button icon="el-icon-plus" type="text" @click="handleSubmit">
保存
</el-button>
<el-button icon="el-icon-close" type="text" @click="handleCancel">
取消
</el-button>
</div>
<div class="widget-center-content">
<div class="widget-center-draggable-wrapper">
<el-divider content-position="left">行维</el-divider>
<div class="widget-center-draggable-text">
<draggable group="dimensions" :list="widget.keys">
<el-tag v-for="(item, index) in widget.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</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>
</div>
<el-divider content-position="left">列维</el-divider>
<div class="widget-center-draggable-text">
<draggable group="dimensions" :list="widget.groups">
<el-tag v-for="(item, index) in widget.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</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>
<el-divider content-position="left">指标</el-divider>
<div class="widget-center-draggable-text">
<draggable group="measures" :list="widget.values" @change="handleValueDragChange">
<div v-for="(item, index) in widget.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-popover
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="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 slot="reference" class="draggable-item-handle"><i class="el-icon-edit-outline" /></span>
</el-popover>
<span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span>
</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>
</draggable>
</div>
</div>
<div class="widget-center-pane">
<el-tabs type="card">
<el-tab-pane label="图表预览">
<div class="widget-center-pane-chart">图表预览</div>
</el-tab-pane>
<el-tab-pane label="图表配置">
<el-main>
<div class="chart-tab-pane">图表配置</div>
</el-main>
<el-tab-pane label="查询脚本">
<div class="widget-center-pane-script">查询脚本</div>
</el-tab-pane>
</el-tabs>
</el-container>
</el-aside>
</el-container>
</div>
</div>
</div>
<div class="widget-right-container">
<el-tabs type="border-card" stretch class="widget-right-tab">
<el-tab-pane label="图表属性">
<div class="widget-right-tab-pane">图表属性</div>
</el-tab-pane>
<el-tab-pane label="图表配置">
<div class="widget-right-tab-pane">图表配置</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
......@@ -136,7 +120,9 @@ export default {
data() {
return {
datachart: {},
form: {
widget: {
datasetId: undefined,
chartType: undefined,
keys: [],
groups: [],
values: []
......@@ -156,7 +142,6 @@ export default {
getDataChart(id).then(response => {
if (response.success) {
this.datachart = response.data
console.log(this.datachart)
}
})
},
......@@ -171,17 +156,18 @@ export default {
getDataSet(id).then(response => {
if (response.success) {
this.dataset = response.data
this.dimensions = this.dataset.schemaConfig.dimensions
this.measures = this.dataset.schemaConfig.measures
this.widget.datasetId = this.dataset.id
this.dimensions = JSON.parse(JSON.stringify(this.dataset.schemaConfig.dimensions))
this.measures = JSON.parse(JSON.stringify(this.dataset.schemaConfig.measures))
}
})
},
handleKeyTagClose(index, tag) {
this.form.keys.splice(index, 1)
this.widget.keys.splice(index, 1)
this.dimensions.push(tag)
},
handleGroupTagClose(index, tag) {
this.form.groups.splice(index, 1)
this.widget.groups.splice(index, 1)
this.dimensions.push(tag)
},
handleValueDragChange(tag) {
......@@ -189,16 +175,26 @@ export default {
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)
this.widget.values.splice(index, 1)
tag.aggregate_type = ''
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 {
<style lang="scss" scoped>
.chart-container {
height: 100%;
height: 100vh;
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;
overflow: hidden;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
min-width: 0;
::-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{
padding: 0px 10px;
font-size: 13px;
background-color: #f5f7fa;
}
.widget-left-field {
height: 250px;
.widget-left-field-cate {
height: 40px;
line-height: 40px;
text-align: center;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
.icon {
margin-right: 6px;
i {
margin-right: 5px;
}
}
.field-widget-tag {
position: relative;
overflow: hidden;
padding: 10px 10px;
margin: 0;
min-height: 200px;
.field-widget-label {
.widget-left-field-draggable {
height: calc(100% - 40px);
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
.draggable-label {
font-size: 12px;
display: block;
width: 48%;
width: 90px;
position: relative;
float: left;
left: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1%;
margin: 5px;
color: #333;
border: 1px solid #F4F6FC;
&:hover {
......@@ -267,70 +277,84 @@ export default {
}
}
}
.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 {
}
.widget-center-container {
width: calc(100% - 550px);
flex: 1;
flex-basis: auto;
box-sizing: border-box;
border-left: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
.widget-center-header {
height: 40px;
line-height: 40px;
height: 40px;
text-align: right;
color: #333;
border-bottom: 2px solid #e4e7ed;
padding: 0 20px;
border-bottom: 1px 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;
.widget-center-content {
height: 100%;
.widget-center-draggable-wrapper {
height: 266px;
padding: 0 20px;
border-bottom: 1px solid #e4e7ed;
.widget-center-draggable-text {
min-height: 40px;
height: auto;
line-height: 40px;
border: 1px solid #d7dae2;
background: #f4f4f7;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
white-space: nowrap;
.draggable-item {
margin: 0 5px;
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;
border: 1px solid #ebecef;
border-radius: 4px;
.draggable-item-handle {
background-color: #ecf5ff;
border-color: #d9ecff;
display: inline-block;
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;
}
}
}
}
.data-tab-pane {
margin: 10px;
min-height: 200px;
}
.script-tab-pane {
margin: 10px;
border: 1px dashed rgb(153, 153, 153);
min-height: 200px;
.widget-center-pane {
height: calc(100% - 266px);
.widget-center-pane-chart {
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>
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