feat: panel-url类型图表
This commit is contained in:
陈劲松
@@ -1,5 +1,5 @@
|
||||
<style lang="scss" scoped>
|
||||
@import './chart-table.scss';
|
||||
<style lang="scss">
|
||||
@import 'chart.scss';
|
||||
</style>
|
||||
<style>
|
||||
.max-width-90{
|
||||
|
||||
@@ -65,8 +65,7 @@
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
:chart-data="item"
|
||||
:step-height="stepHeight"></line-chart-block>
|
||||
:chart-data="item"></line-chart-block>
|
||||
|
||||
<chart-single-stat v-if="item.type === 'singleStat'" :ref="'editChart'+item.id" :key="'inner' + item.id"
|
||||
@on-refresh-data="refreshChart"
|
||||
@@ -87,8 +86,7 @@
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
:step-height="stepHeight"></chart-table>
|
||||
:chart-index="index"></chart-table>
|
||||
|
||||
<chart-url v-if="item.type === 'url'" :ref="'editChart'+item.id" :key="'inner' + item.id"
|
||||
@on-refresh-data="refreshChart"
|
||||
@@ -98,12 +96,14 @@
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
:chart-index="index"></chart-url>
|
||||
|
||||
<chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
:chart-data="item"
|
||||
:editChartId="'editChartId' + item.id"
|
||||
></chart-asset-info>
|
||||
|
||||
@@ -551,7 +551,7 @@
|
||||
this.setChartSize(item, index);//设置该图表宽度
|
||||
if(!item.isLoaded){
|
||||
//获得当前显示在浏览器的图表，从后台获取数据
|
||||
let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
|
||||
let chartBox = document.getElementById('chart-' + item.id);
|
||||
this.handleElementInViewport(chartBox, 0, item, index);
|
||||
}
|
||||
});
|
||||
@@ -591,7 +591,7 @@
|
||||
if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
|
||||
this.$refs['editChart'+item.id][0].showLoad(item);
|
||||
}
|
||||
this.setChartSize(item.span, realIndex); // 设置该图表宽度
|
||||
this.setChartSize(item, realIndex); // 设置该图表宽度
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1286,18 +1286,14 @@
|
||||
item.isLoaded = true;
|
||||
if(chartType!=='url'){
|
||||
that.getChartDataForSearch(item,index);
|
||||
} else {
|
||||
console.info(that.$refs['editChart'+item.id])
|
||||
that.$refs['editChart'+item.id][0].showLoad(item);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
destroyed () {
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
/* ---------edit-chart-move--------- */
|
||||
.clearfix:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.loading-font{
|
||||
color:#232f3e !important;
|
||||
}
|
||||
.dialog-tool {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
.nz-chart-dropdown {
|
||||
height: 180px;
|
||||
li {
|
||||
/*padding: 0 20px !important;*/
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-single-stat {
|
||||
width: 100%;
|
||||
height: 100%;//calc(100% - 40px);
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border: 1px solid #d8dce1;
|
||||
padding: 0px 0px;
|
||||
box-sizing: border-box;
|
||||
.single-stat-container{
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
display:table;
|
||||
text-align:center;
|
||||
width:calc(100% - 16px);
|
||||
.single-stat-content{
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
display:table-cell;
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
.single-stat-screen-container{
|
||||
height:100%;
|
||||
display:table;
|
||||
text-align:center;
|
||||
width:calc(100% - 16px);
|
||||
color:#000;
|
||||
.single-stat-content{
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
display:table-cell;
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: se-resize;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vue-resizable-handle:after {
|
||||
border-right: 2px solid #555;
|
||||
border-bottom: 2px solid #555;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.dragTitle{
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
margin: -3px 0 3px 3px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.button-panel-height{
|
||||
height:26px;
|
||||
}
|
||||
.button-panel-height button{
|
||||
height:26px;
|
||||
}
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
.chart-select {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 25px;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
.chart-select-btn {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #5aacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*没有数据显示*/
|
||||
.null {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.element-bottom-border {
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
.element-top-border {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #dfe7f2;
|
||||
margin-top:-25px;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import './line-chart-block.scss';
|
||||
@import 'chart';
|
||||
</style>
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
/* ---------edit-chart-move--------- */
|
||||
.clearfix:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.loading-font{
|
||||
color:#232f3e !important;
|
||||
}
|
||||
.dialog-tool {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
.nz-chart-dropdown {
|
||||
height: 180px;
|
||||
li {
|
||||
/*padding: 0 20px !important;*/
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-table {
|
||||
width: 100%;
|
||||
height: 100%;//calc(100% - 40px);
|
||||
// min-height: 500px;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border: 1px solid #d8dce1;
|
||||
padding: 0px 0px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 3px;
|
||||
.table-container{
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: se-resize;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vue-resizable-handle:after {
|
||||
border-right: 2px solid #555;
|
||||
border-bottom: 2px solid #555;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
/*border-right: 2px solid rgba(0,0,0,.4);
|
||||
border-bottom: 2px solid rgba(0,0,0,.4);*/
|
||||
box-sizing: inherit;
|
||||
}
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.dragTitle{
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
margin: -3px 0 3px 3px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.button-panel-height{
|
||||
height:26px;
|
||||
}
|
||||
.button-panel-height button{
|
||||
height:26px;
|
||||
}
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 10;
|
||||
/*background: $btn-light-background-color;
|
||||
border-radius: 6px;;
|
||||
border: 1px solid #ccc;
|
||||
.set-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 5px 15px;
|
||||
border-right: 1px solid #ccc;
|
||||
|
||||
}
|
||||
.set-icon:hover{
|
||||
background: $btn-light-background-color-hover;
|
||||
}
|
||||
.set-icon:last-child{
|
||||
border-right: none !important;
|
||||
}
|
||||
.el-icon-refresh-right{
|
||||
color: #F0BF84;
|
||||
}
|
||||
i{
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
.list-icon {
|
||||
float: left;
|
||||
}
|
||||
.show-icon {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}*/
|
||||
}
|
||||
.chart-select {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 25px;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
.chart-select-btn {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #5aacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*没有数据显示*/
|
||||
.null {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chart-table-col{
|
||||
width: 100%;
|
||||
}
|
||||
.element-bottom-border {
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
.element-top-border {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #dfe7f2;
|
||||
margin-top:-25px;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import './line-chart-block.scss';
|
||||
@import 'chart';
|
||||
</style>
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
|
||||
@@ -1,206 +0,0 @@
|
||||
/* ---------edit-chart-move--------- */
|
||||
.clearfix:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.loading-font{
|
||||
color:#232f3e !important;
|
||||
}
|
||||
.dialog-tool {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
.nz-chart-dropdown {
|
||||
height: 180px;
|
||||
li {
|
||||
/*padding: 0 20px !important;*/
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-url {
|
||||
width: 100%;
|
||||
height: 100%;//calc(100% - 40px);
|
||||
// min-height: 500px;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border: 1px solid #d8dce1;
|
||||
padding: 0px 0px;
|
||||
box-sizing: border-box;
|
||||
.url-container{
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: se-resize;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vue-resizable-handle:after {
|
||||
border-right: 2px solid #555;
|
||||
border-bottom: 2px solid #555;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
/*border-right: 2px solid rgba(0,0,0,.4);
|
||||
border-bottom: 2px solid rgba(0,0,0,.4);*/
|
||||
box-sizing: inherit;
|
||||
}
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.dragTitle{
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
margin: -3px 0 3px 3px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.button-panel-height{
|
||||
height:26px;
|
||||
}
|
||||
.button-panel-height button{
|
||||
height:26px;
|
||||
}
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 10;
|
||||
/*background: $btn-light-background-color;
|
||||
border-radius: 6px;;
|
||||
border: 1px solid #ccc;
|
||||
.set-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 5px 15px;
|
||||
border-right: 1px solid #ccc;
|
||||
|
||||
}
|
||||
.set-icon:hover{
|
||||
background: $btn-light-background-color-hover;
|
||||
}
|
||||
.set-icon:last-child{
|
||||
border-right: none !important;
|
||||
}
|
||||
.el-icon-refresh-right{
|
||||
color: #F0BF84;
|
||||
}
|
||||
i{
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
.list-icon {
|
||||
float: left;
|
||||
}
|
||||
.show-icon {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}*/
|
||||
}
|
||||
.chart-select {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 25px;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
.chart-select-btn {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #5aacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*没有数据显示*/
|
||||
.null {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chart-table-col{
|
||||
width: 100%;
|
||||
}
|
||||
.element-bottom-border {
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
.element-top-border {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #dfe7f2;
|
||||
margin-top:-25px;
|
||||
}
|
||||
.center-content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss" scoped>
|
||||
@import './chart-url.scss';
|
||||
@import 'chart.scss';
|
||||
</style>
|
||||
<style>
|
||||
.max-width-90{
|
||||
@@ -7,11 +7,12 @@
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-url" ref="resizeBox">
|
||||
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
|
||||
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
@@ -54,7 +55,9 @@
|
||||
</div>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -69,6 +72,9 @@ export default {
|
||||
'loading': loading,
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
@@ -81,7 +87,8 @@ export default {
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -105,25 +112,21 @@ export default {
|
||||
showStatic:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
startResize(e) {
|
||||
let vm = this;
|
||||
this.$chartResizeTool.start(vm, this.chartData, e);
|
||||
},
|
||||
resize(chartItem) {
|
||||
let chartBox = document.getElementById('chartUrlDiv'+this.chartIndex);
|
||||
chartBox.querySelector(".url-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
console.log(chartItem)
|
||||
this.data = chartItem;
|
||||
this.panelIdInner = this.panelId;
|
||||
//设置高度
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartUrlDiv'+this.chartIndex);
|
||||
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
|
||||
if(height<this.minHeight){
|
||||
height = this.minHeight;
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const urlBox = document.getElementById('urlContainer'+this.chartIndex);
|
||||
urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.startLoading();
|
||||
|
||||
|
||||
@@ -164,6 +164,11 @@
|
||||
.resize-shadow-active {
|
||||
background-color: #888;
|
||||
}
|
||||
.resize-box-url {
|
||||
.vue-resizable-handle {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.resize-box {
|
||||
.pagination {
|
||||
padding-top: 0;
|
||||
@@ -195,7 +200,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-chart-block, .chart-table, .chart-single-stat {
|
||||
.line-chart-block, .chart-table, .chart-single-stat, .chart-url {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
@@ -205,8 +210,8 @@
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
padding: 0 3px;
|
||||
line-height: 26px;
|
||||
padding: 1px 3px 0 3px;
|
||||
box-sizing: border-box;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import './line-chart-block.scss';
|
||||
@import 'chart.scss';
|
||||
</style>
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
@@ -128,8 +128,7 @@
|
||||
isExplore:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
stepHeight: {type: Number}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '../../charts/line-chart-block.scss';
|
||||
@import '../../charts/chart';
|
||||
</style>
|
||||
<template>
|
||||
<div class="list">
|
||||
|
||||
@@ -329,7 +329,7 @@
|
||||
}
|
||||
</script>
|
||||
<!--<style>
|
||||
@import "../../../charts/line-chart-block.scss";
|
||||
@import "../../../charts/chart.scss";
|
||||
</style>-->
|
||||
<style scoped>
|
||||
.chart-room{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<style lang="scss">
|
||||
@import '../../charts/line-chart-block';
|
||||
@import '../../charts/chart';
|
||||
.project-calendar .el-input__inner {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user