feat:新增功能
1.dashboard-panel图表加载修改为懒加载 fix:修改BUG 1.dashboard图表全屏去掉cancle和ok按钮
This commit is contained in:
hanyuxia
@@ -60,17 +60,83 @@ export default {
|
||||
},
|
||||
panelId: '',
|
||||
timer: null,
|
||||
dataTotalList:[],//懒加载：总记录数
|
||||
isPage:true,//是否分页懒加载
|
||||
currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
|
||||
lineNum:3,//每页加载的行数
|
||||
pagePanelId:''//当前分页的panelId
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
initCurrentRecordNum(){
|
||||
this.currentRecordNum = 0;
|
||||
},
|
||||
cleanData(){
|
||||
if (this.dataList.length > 0 && this.$refs.editChart) {
|
||||
this.$refs.editChart.forEach((item) => {
|
||||
item.clearData();
|
||||
});
|
||||
}
|
||||
this.dataList = [];
|
||||
},
|
||||
initData(filter) {
|
||||
this.dataList = [];
|
||||
// 内含 panelId,开始时间,结束时间
|
||||
this.filter = filter;
|
||||
this.pagePanelId = this.filter.panelId;
|
||||
this.getData(this.filter);
|
||||
},
|
||||
pageDataList(isAdd,panelId){
|
||||
if(panelId!==this.pagePanelId){
|
||||
this.currentRecordNum = 0;
|
||||
}
|
||||
if(this.dataTotalList && this.dataTotalList.length>0){
|
||||
if(this.currentRecordNum>=this.dataTotalList.length){
|
||||
//alert('数据加载完毕！');
|
||||
}else {
|
||||
let dataTmpList = [];
|
||||
let spanSum = 0;
|
||||
let line = 0;//行数
|
||||
let isDataFull=false;
|
||||
let curRecNum = this.currentRecordNum;
|
||||
let len = this.dataTotalList.length;
|
||||
for(let i=curRecNum;!isDataFull && i<len;i++){
|
||||
if(line<this.lineNum){
|
||||
let item = this.dataTotalList[i];
|
||||
let span = item.span;
|
||||
let sumTmp = spanSum+span;
|
||||
if(sumTmp<=12){
|
||||
spanSum =sumTmp;
|
||||
}else{//大于12表示够1行了，
|
||||
line = line +1;
|
||||
spanSum = span;
|
||||
}
|
||||
if(line<this.lineNum){
|
||||
dataTmpList.push(item);
|
||||
this.currentRecordNum = i+1;
|
||||
}else{
|
||||
this.currentRecordNum = i
|
||||
break;
|
||||
}
|
||||
}else {//数据加载够了
|
||||
isDataFull=true;
|
||||
this.currentRecordNum = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(isAdd){
|
||||
let oldDataListLen = this.dataList.length;
|
||||
let dataListTmp = this.dataList;
|
||||
this.dataList = dataListTmp.concat(dataTmpList);
|
||||
this.dataSetFirst(dataTmpList,oldDataListLen);
|
||||
}else {
|
||||
this.dataList = dataTmpList;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取panel详情数据,获取panel下所有chart列表
|
||||
getData(params) {
|
||||
//param 目前没有用
|
||||
@@ -87,25 +153,33 @@ export default {
|
||||
this.$get('panel/'+ params.panelId+'/charts'+searchTitleStr).then(response => {
|
||||
if (response.code === 200) {
|
||||
if(response.data.list){
|
||||
this.dataList = response.data.list;
|
||||
this.dataTotalList = response.data.list;
|
||||
}else {
|
||||
this.dataList = response.data;
|
||||
this.dataTotalList = response.data;
|
||||
}
|
||||
if(this.isPage){
|
||||
this.pageDataList();
|
||||
}else {
|
||||
this.dataList = this.dataTotalList;
|
||||
}
|
||||
if (this.dataList.length > 0 && this.$refs.editChart) {
|
||||
this.$refs.editChart.forEach((item) => {
|
||||
item.showLoad();//之后要实现
|
||||
});
|
||||
}
|
||||
//alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
|
||||
this.dataSetFirst(this.dataList);
|
||||
}
|
||||
});
|
||||
},
|
||||
// arr: 该panel下图表list,生成该看板下所有图表
|
||||
dataSetFirst(arr) {
|
||||
dataSetFirst(arr,oldDataListLen) {
|
||||
if (arr.length) {
|
||||
arr.forEach((item, index) => {
|
||||
this.getChartData(item, index);
|
||||
let realIndex = index;
|
||||
if(oldDataListLen){
|
||||
realIndex += oldDataListLen;
|
||||
}
|
||||
this.getChartData(item, realIndex);
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -136,11 +210,9 @@ export default {
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
}
|
||||
//this.$emit('@on-refresh-time', startTime,endTime);
|
||||
} else if(filterType==='searchTime'){
|
||||
startTime = this.filter.start_time;
|
||||
endTime = this.filter.end_time;
|
||||
//this.$emit('@on-refresh-time', startTime,endTime);
|
||||
this.$parent.refreshTime(startTime,endTime);
|
||||
}else {
|
||||
startTime = this.filter.start_time;
|
||||
@@ -248,7 +320,6 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
// chartData, seriesItem, panelsId, filter
|
||||
if (chartItem.type === 'table') {//表格
|
||||
this.$refs.editChart[index].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter);
|
||||
@@ -285,7 +356,6 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementsByClassName('chartBox');
|
||||
chartBox[index].style.width = `${(size / 12) * 100}%`;
|
||||
//chartBox[index].style.height = height;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
</el-table>
|
||||
</div>
|
||||
<!--全屏-->
|
||||
<el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" >
|
||||
<el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
|
||||
<div class="clearfix element-top-border">
|
||||
<div class="float-left table-title">
|
||||
{{data.title}}
|
||||
@@ -65,10 +65,7 @@
|
||||
</el-table>
|
||||
</div>
|
||||
<div class=" element-bottom-border"></div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
|
||||
</span>
|
||||
<span slot="footer" class="dialog-footer"></span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -218,6 +215,8 @@ export default {
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
clearData(){
|
||||
},
|
||||
showLoad() {
|
||||
this.tableLoading = true;
|
||||
},
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
<el-dialog class="line-chart-block-modal"
|
||||
:title="$t('dashboard.panel.view')"
|
||||
:visible.sync="screenModal"
|
||||
width="90%"
|
||||
:before-close="handleClose"
|
||||
width="90%"
|
||||
@close="screenModal = false"
|
||||
@opened="initDialog">
|
||||
<el-row class="element-top-border" >
|
||||
<div class="float-right pt10" >
|
||||
@@ -53,10 +53,7 @@
|
||||
</el-row>
|
||||
<div class="line-area " ref="screenShowArea" id="screenShowArea"></div>
|
||||
<div class=" element-bottom-border" ></div>
|
||||
<span slot="footer" class="dialog-footer" >
|
||||
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
|
||||
</span>
|
||||
<span slot="footer" class="dialog-footer" ></span>
|
||||
|
||||
</el-dialog>
|
||||
<!--</Modal>-->
|
||||
@@ -212,6 +209,11 @@ export default {
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
clearData(){
|
||||
if(this.echartStore){
|
||||
this.echartStore.clear();
|
||||
}
|
||||
},
|
||||
// chartSite用于区分是全屏显示还是局部显示
|
||||
initChart(chartInfo, dataArg, ele, chartSite,legend) {
|
||||
this.firstShow = true; // 展示操作按键
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-list">
|
||||
<div class="table-list" @scroll="onScroll" id="tableList">
|
||||
<div class="box-content">
|
||||
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" ref="chartList"></chart-list>
|
||||
</div>
|
||||
@@ -287,6 +287,8 @@ export default {
|
||||
//this.$refs.searchInput.select();
|
||||
this.showPanel = val
|
||||
this.filter.panelId = this.showPanel.id;
|
||||
this.$refs.chartList.initCurrentRecordNum();
|
||||
this.$refs.chartList.cleanData();
|
||||
this.getData(this.filter);
|
||||
|
||||
},
|
||||
@@ -513,7 +515,17 @@ export default {
|
||||
}
|
||||
this.filter.panelId = this.showPanel.id;
|
||||
this.getData(this.filter);
|
||||
}
|
||||
},
|
||||
// 滚动事件触发下拉加载
|
||||
onScroll () {
|
||||
let dom = document.getElementById('tableList');
|
||||
let scrollHeight = dom.scrollHeight;//整个可滑动区域高度
|
||||
let clientHeight = dom.clientHeight;//可视高度
|
||||
let scrollTop = dom.scrollTop;//滚动条顶部与整个scrollHeight顶部的距离
|
||||
if (scrollHeight - clientHeight - scrollTop <= 20) {//滚动到底部，才加载新数据
|
||||
this.$refs.chartList.pageDataList(true,this.showPanel.id);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
|
||||
Reference in New Issue
Block a user