Skip to content

D
datax-cloud
Commit ea4049f4 by yuwei
Options

项目初始化

parent 36c153b5
Showing with 121 additions and 103 deletions
datax-ui/src/views/visual/databoard/DataBoardBuild.vue
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
</div> </div>
</div> </div>
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" /> <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
<div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}"></div>
</el-card> </el-card>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
...@@ -219,7 +220,9 @@ export default { ...@@ -219,7 +220,9 @@ export default {
window.close() window.close()
}, },
handleResize(i, newH, newW, newHPx, newWPx) { handleResize(i, newH, newW, newHPx, newWPx) {
this.$refs[`charts${i}`][0].$children[0].$emit('resized') if (this.charts.find(chart => chart.id === i).visible) {
this.$refs[`charts${i}`][0].$children[0].$emit('resized')
}
}, },
generatorImage() { generatorImage() {
html2canvas(document.getElementById('boardWrapper')).then(canvas => { html2canvas(document.getElementById('boardWrapper')).then(canvas => {
......
datax-ui/src/views/visual/databoard/DataBoardList.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</el-row> </el-row>
<el-divider /> <el-divider />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6" class="box-card-col">
<el-card :body-style="{ padding: '0px' }" class="box-card-item"> <el-card :body-style="{ padding: '0px' }" class="box-card-item">
<div class="box-card-item-add" @click="handleAdd"> <div class="box-card-item-add" @click="handleAdd">
<div class="icon-block"> <div class="icon-block">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6"> <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6" class="box-card-col">
<el-card :body-style="{ padding: '0px' }" class="box-card-item"> <el-card :body-style="{ padding: '0px' }" class="box-card-item">
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)"> <div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
<el-image :src="item.boardThumbnail ? item.boardThumbnail : ''"> <el-image :src="item.boardThumbnail ? item.boardThumbnail : ''">
...@@ -160,65 +160,72 @@ export default { ...@@ -160,65 +160,72 @@ export default {
.el-pagination { .el-pagination {
text-align: center; text-align: center;
} }
.box-card-item { .box-card-col {
width: 260px; width: 260px;
height: 185px; height: 185px;
margin-bottom: 20px; padding-left: 0px;
.box-card-item-body { padding-right: 0px;
display: flex; margin-right: 10px;
justify-content: center; margin-bottom: 10px;
align-items: center; .box-card-item {
.box-card-item-edit { width: 260px;
height: 185px;
.box-card-item-body {
display: flex;
justify-content: center;
align-items: center;
.box-card-item-edit {
width: 260px;
height: 150px;
text-align: center;
position: absolute;
background: rgba(4, 11, 28, 0.7);
opacity: 0.8;
button {
margin-top: 55px;
}
}
}
.el-image{
width: 260px; width: 260px;
height: 150px; height: 150px;
text-align: center; display: block;
position: absolute; ::v-deep .image-slot {
background: rgba(4, 11, 28, 0.7); display: flex;
opacity: 0.8; justify-content: center;
button { align-items: center;
margin-top: 55px; width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
} }
} }
} .box-card-item-add {
.el-image{ width: 260px;
width: 260px; height: 185px;
height: 150px;
display: block;
::v-deep .image-slot {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
}
}
.box-card-item-add {
width: 260px;
height: 185px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
i {
font-size: 30px;
}
}
.box-card-item-footer {
padding: 8px 5px;
background-color: #dcdcdc;
display: flex;
justify-content: space-between;
.box-card-item-footer-text {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
margin-right: 5px;
cursor: pointer; cursor: pointer;
i {
font-size: 30px;
}
}
.box-card-item-footer {
padding: 8px 5px;
background-color: #dcdcdc;
display: flex;
justify-content: space-between;
.box-card-item-footer-text {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
margin-right: 5px;
cursor: pointer;
}
} }
} }
} }
......
datax-ui/src/views/visual/databoard/DataBoardView.vue
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
</div> </div>
</div> </div>
<chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" /> <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
<div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}"></div>
</el-card> </el-card>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
......
datax-ui/src/views/visual/datachart/DataChartList.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</el-row> </el-row>
<el-divider /> <el-divider />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col class="box-card-col">
<el-card :body-style="{ padding: '0px' }" class="box-card-item"> <el-card :body-style="{ padding: '0px' }" class="box-card-item">
<div class="box-card-item-add" @click="handleAdd"> <div class="box-card-item-add" @click="handleAdd">
<div class="icon-block"> <div class="icon-block">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6"> <el-col v-for="(item, index) in tableDataList" :key="item.id" class="box-card-col">
<el-card :body-style="{ padding: '0px' }" class="box-card-item"> <el-card :body-style="{ padding: '0px' }" class="box-card-item">
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)"> <div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
<el-image :src="item.chartThumbnail ? item.chartThumbnail : ''"> <el-image :src="item.chartThumbnail ? item.chartThumbnail : ''">
...@@ -155,65 +155,72 @@ export default { ...@@ -155,65 +155,72 @@ export default {
.el-pagination { .el-pagination {
text-align: center; text-align: center;
} }
.box-card-item { .box-card-col {
width: 260px; width: 260px;
height: 185px; height: 185px;
margin-bottom: 20px; padding-left: 0px;
.box-card-item-body { padding-right: 0px;
display: flex; margin-right: 10px;
justify-content: center; margin-bottom: 10px;
align-items: center; .box-card-item {
.box-card-item-edit { width: 260px;
height: 185px;
.box-card-item-body {
display: flex;
justify-content: center;
align-items: center;
.box-card-item-edit {
width: 260px;
height: 150px;
text-align: center;
position: absolute;
background: rgba(4, 11, 28, 0.7);
opacity: 0.8;
button {
margin-top: 55px;
}
}
}
.el-image{
width: 260px; width: 260px;
height: 150px; height: 150px;
text-align: center; display: block;
position: absolute; ::v-deep .image-slot {
background: rgba(4, 11, 28, 0.7); display: flex;
opacity: 0.8; justify-content: center;
button { align-items: center;
margin-top: 55px; width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
} }
} }
} .box-card-item-add {
.el-image{ width: 260px;
width: 260px; height: 185px;
height: 150px;
display: block;
::v-deep .image-slot {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
}
}
.box-card-item-add {
width: 260px;
height: 185px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
i {
font-size: 30px;
}
}
.box-card-item-footer {
padding: 8px 5px;
background-color: #dcdcdc;
display: flex;
justify-content: space-between;
.box-card-item-footer-text {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
margin-right: 5px;
cursor: pointer; cursor: pointer;
i {
font-size: 30px;
}
}
.box-card-item-footer {
padding: 8px 5px;
background-color: #dcdcdc;
display: flex;
justify-content: space-between;
.box-card-item-footer-text {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i {
margin-right: 5px;
cursor: pointer;
}
} }
} }
} }
......
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