monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 5876a217a7bed6da6c054acb67f5861c96926831 1 parent 7dfc3fff

折线图折线点添加点击事件，表格表头与动态数据进行配置(用vuex实现)

Inline Side-by-side
Showing 10 changed files with 292 additions and 87 deletions
... ... @@ -104,6 +104,7 @@ export function getHealth(data) {
method: 'get',
})
}
//获取表格数据
export function getDetailTableData(params,urlObj){
let str='';
if(params.sortBy){
... ... @@ -118,6 +119,7 @@ export function getDetailTableData(params,urlObj){
method: 'get',
})
}
//获取性能指标
export function getKpiPage(params,urlObj){
let paramsStr=+'&resType='+params.resType
+'&kpiIdent='+params.kpiIdent+'&kpiCategory='+params.kpiCategory+'&kpiDataType='+params.kpiDataType+'&kpiUnit='+params.kpiUnit
... ...
import cacheView from "./modules/cachaView"
import tableHead from "./modules/tableHead"
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
accessUser: state => state.user.accessUser,
cacheViews: state => state.cacheView.cacheViews
cacheViews: state => state.cacheView.cacheViews,
//lsq 2022-02-25
tableHeads:state => state.tableHead.tableHeadData
}
export default getters
... ...
... ... @@ -7,6 +7,8 @@ import app from './modules/app'
import user from './modules/user'
import cacheView from './modules/cachaView'
import help from './modules/help'
//lsq 2022-02-25
import tableHead from './modules/tableHead'
Vue.use(Vuex)
... ... @@ -18,7 +20,8 @@ const store = new Vuex.Store({
app,
user,
cacheView,
help
help,
tableHead
},
state: { },
plugins: [initPlugin],
... ...
const tableHead = {
state: {
tableHeadData: []
},
mutations: {
CHANGE_HEAD: (state, val) => {
state.tableHeadData=val;
}
},
actions: {
}
}
export default tableHead
... ...
<template>
<div>
<el-button
<!-- <el-button
type="primary"
size="small"
plain
@click="handleAddClick"
>配置表头</el-button
>
<el-table :data="formData" style="width: 100%">
>-->
<span>表头设置</span>
<el-table :data="formDataNew" style="width: 100%">
<el-table-column prop="name" label="名称" width="60" />
<el-table-column prop="key" label="key值" width="70" />
<el-table-column prop="width" label="宽度" width="50" />
... ... @@ -104,6 +105,21 @@
</span>
</el-dialog>
<el-dialog
title="表头数据"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
>确 定</el-button
>
</span>
</el-dialog>
<!-- <el-dialog
title="性能指标"
:visible.sync="dialogVisible"
width="60%"
... ... @@ -135,7 +151,7 @@
<template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
</el-table-column>
</el-table>
<!-- 分页 -->
&lt;!&ndash; 分页 &ndash;&gt;
<div style='text-align: left;background-color: white'>
<el-pagination
v-if="currentPage"
... ... @@ -158,12 +174,13 @@
>
</el-tooltip>
</span>
</el-dialog>
</el-dialog>-->
</div>
</template>
<script>
import {getKpiPage} from "@/api/platform";
import {getKpiPage,getDetailTableData} from "@/api/platform";
import {formatDate} from "../../../../../filter";
import {mapGetters} from "vuex";
export default {
model: {
prop: "formData",
... ... @@ -173,9 +190,9 @@ export default {
formData: Array
},
watch:{
headTable:{
tableHeads:{
handler(val){
console.log("*(*(",val)
this.setFormData();
},
deep:true
}
... ... @@ -219,9 +236,11 @@ export default {
value:'textToBg'
}
],//关联组件
formDataNew:this.formData,//表头数据
};
},
computed:{
...mapGetters(['tableHeads']),
//获取url地址中的token
getUrlToken(){
let locationUrl=this.$route.query;
... ... @@ -234,7 +253,15 @@ export default {
return urlObj;
}
},
created() {
this.setFormData();
},
methods: {
setFormData(){
if(this.tableHeads){
this.formDataNew=this.tableHeads;
}
},
//搜索指标
searchKpi(){
this.getKpi();
... ... @@ -252,20 +279,6 @@ export default {
this.tableData=data;
}
},
//回显数据
setCheckedData(){
/*if(this.multipleSelection && this.multipleSelection.length>0){
this.tableData.map(item=>{
this.multipleSelection.map(v=>{
if(item.kpiId==v.kpiId){
setTimeout(()=>{
this.$refs.multipleTableRef.toggleRowSelection(item)
},300)
}
})
})
}*/
},
//多选操作
handleSelectionChange(val) {
this.multipleSelection = val
... ... @@ -325,7 +338,6 @@ export default {
handleSaveClick() {
if (this.flag) {
// 新增
// this.formData.push(this.rowFormData);
let arr=[];
if(this.primaryTypeFlg){
//追加
... ... @@ -333,7 +345,7 @@ export default {
this.multipleSelection.map((item,index)=>{
arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
})
arr=this.formData.concat(arr1);
arr=this.formDataNew.concat(arr1);
}else{
//重新选择
this.multipleSelection.map((item,index)=>{
... ... @@ -341,19 +353,19 @@ export default {
})
}
this.formData=arr;
this.formData.sort(this.compare('columnSort'));
this.formDataNew=arr;
this.formDataNew.sort(this.compare('columnSort'));
this.dialogVisible = false;
} else {
// 编辑
this.formData[this.indexEditor] = this.rowFormData;
this.$set(this.formData, this.indexEditor, this.rowFormData);
this.formData.sort(this.compare('columnSort'));
this.formDataNew[this.indexEditor] = this.rowFormData;
this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
this.formDataNew.sort(this.compare('columnSort'));
this.editDialogVisible = false;
}
console.log("AVX", this.formData)
this.$emit("input", this.formData);
this.$emit("change", this.formData);
console.log("AVX", this.formDataNew)
this.$emit("input", this.formDataNew);
this.$emit("change", this.formDataNew);
},
//数组排序
compare(property){
... ... @@ -365,10 +377,10 @@ export default {
},
// 删除
handleDeleteClick(index,row) {
this.formData.splice(index, 1);
this.formDataNew.splice(index, 1);
this.setTableChecked(row.key);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
this.$emit("input", this.formDataNew);
this.$emit("change", this.formDataNew);
},
//设置表格选中状态
setTableChecked(kpiId){
... ...
... ... @@ -118,7 +118,6 @@ export default {
chartProperties: this.chartProperties,
contextData
};
console.log("^&^&",params)
this.$emit("input", params);
this.$emit("change", params);
},
... ...
... ... @@ -49,6 +49,14 @@ export const monitorCustomLineChart = {
],
value: 'KPID339D51B',
},
{
type: 'el-input-text',
label: 'flag',
name: 'flag',
required: false,
placeholder: '',
value: '',
},
[
{
name: '折线设置',
... ... @@ -67,7 +75,7 @@ export const monitorCustomLineChart = {
name: 'pointSize',
required: false,
placeholder: '',
value: 10,
value: 6,
},
{
type: 'vue-color',
... ... @@ -107,7 +115,7 @@ export const monitorCustomLineChart = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
value: 1,
},
],
},
... ...
... ... @@ -78,7 +78,7 @@ export const monitorGaugeRate = {
name: 'flag',
required: false,
placeholder: '',
value: '',
value: 'net',
},
[
{
... ...
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
<v-chart ref="myEchart" :options="options" autoresize/>
<!-- 直接点击数据展示 性能趋势弹框-->
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
:widthStyle="widthStyle" :title-name="optionsSetup.titleText"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div class="txtScroll-top">
{{trendSrc}} <br/>
{{tableDataValue.name}}--{{tableDataValue.data}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
</template>
</customDialog>
</div>
</template>
<script>
import customDialog from "../../designerComponents/customDialog";
import {getTrendBaseUrl} from "@/api/platform";
export default {
name: "customLineChart",
components: {},
components: {customDialog},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
dynamicData:'',//动态数据值
refreshTime:'',//刷新时间
flagInter:null,//定时
trendVisible:false,//性能趋势弹框
dataValue:'',
trendSrc:'',//性能趋势图地址
marginStyle:'',//弹框距离顶部距离
heightStyle:'',//弹框遮罩层高度
widthStyle:';',//弹框宽度样式
tableDataValue: {kpiId:'',name:'',data:''},
tableDataValueHead: {},
resType:'',
options: {
grid: {},
color: [],
... ... @@ -74,7 +102,29 @@ export default {
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
//获取url地址中的token
getUrlToken(){
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
let urlObj={
resId:resId,
token:token
}
return urlObj;
},
//设置
kpiIdStyle(){
this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
this.tableDataValue.kpiId=this.optionsSetup.kpiId;
let obj={
kpiId:this.optionsSetup.kpiId,
targetId:this.optionsSetup.targetId,
flag:this.optionsSetup.flag
}
return obj;
},
},
watch: {
value: {
... ... @@ -107,6 +157,7 @@ export default {
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsColor();
window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
},
// 标题修改
setOptionsTitle() {
... ... @@ -369,6 +420,8 @@ export default {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.dynamicData=val;
this.refreshTime=refreshTime;
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
... ... @@ -392,7 +445,88 @@ export default {
series[i].data = val.series[i].datas;
}
}
}
this.echartsClick();
},
echartsClick(){
let that=this;
this.$refs.myEchart.chart.on('click',function (params){
console.log("()()()()()",params.name,params.data,params)
that.$set(that.tableDataValue,'name',params.name)
that.$set(that.tableDataValue,'data',params.data)
that.goTrend();
})
},
//设置性能趋势图
setTrend(data){
let flg='&flg=';
if(data.flag){
flg+=data.flag;
}else {
flg+=data.subResId;
}
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
+'&ident='+data.ident
+'&trend='+data.trend
+'&name='+data.name;
let baseUrl=getTrendBaseUrl();
this.resType=data.resType;
this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
},
goTrend(){
this.setTrend(this.tableDataValue);
this.trendVisible=true;
if(this.flagInter){
clearInterval(this.flagInter);
}
},
//弹框关闭确定
hideDialog(){
this.trendVisible=false;
this.flagInter = setInterval(() => {
this.getEchartData(this.dynamicData);
}, this.refreshTime);
},
okFunc(){
this.trendVisible=false;
this.flagInter = setInterval(() => {
this.getEchartData(this.dynamicData);
}, this.refreshTime);
},
handleScroll(e){
let serviceTop = 44;
let hotelTop = 344;
if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
this.selectNum = 0;
}
if (e.target.scrollTop > 344) {
this.selectNum = 1;
}
// let scroll=window.pageYOffset;
let scroll=document.documentElement.scrollTop;
let documentHeight=document.documentElement.clientHeight;
if (self != top) {
//嵌入到监控系统iframe中弹框位置样式
// let documentHeight=document.body.scrollHeight;
this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px';
if(scroll<600){
this.marginStyle+="margin-top:"+(110)+'px;';
}else{
this.marginStyle+="margin-top:"+(230)+'px;';
}
}else{
//ajreport中弹框位置样式
this.heightStyle="height:"+(documentHeight+scroll)+'px;';
this.marginStyle+="margin-top:"+(scroll+100)+'px;';
}
},
}
};
</script>
... ...
... ... @@ -198,6 +198,8 @@ import textToImage from "../../designerComponents/textToImage";//文字转图片
import textToBg from "../../designerComponents/textToBg";
import {saveClearAalarm} from "../../../../../../api/platform";
import {Message} from "element-ui";
import {mapGetters} from "vuex";
import tableHead from "../../../../../../store/modules/tableHead";
//文字转背景
vue.use(VueSuperSlide);
... ... @@ -542,7 +544,7 @@ export default {
}
this.tableFiledColumnSort();
},
async handlerDetailData(valData,sortBy){
async handlerDetailData(valData,sortBy,order){
let kpiArr=[]
let kpiIdStr='';
if(this.header && this.header.length>0){
... ... @@ -564,10 +566,13 @@ export default {
page:this.currentPage,
size:this.pageSize
}
let sort=this.sortBy;
let sort=sortBy;
if(sort){
param.sortBy=sort;
}
if(order){
param.order=order;
}
let headTable = valData;
if(kpiIdStr){
//根据kpiId集合获取表格数据
... ... @@ -585,7 +590,7 @@ export default {
}
},
//打开更多表格
async handlerDetailDataNoPage(){
async handlerDetailDataNoPage(sortBy){
let kpiArr=[];
let kpiIdStr='';
if(this.header && this.header.length>0){
... ... @@ -607,7 +612,7 @@ export default {
kpiId:kpiIdStr,
flagPrifix:this.getUrlToken.flag,
}
let sort=this.sortBy;
let sort=sortBy;
if(sort){
param.sortBy=sort;
}
... ... @@ -687,11 +692,12 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
let resTable='';
if(res && res.length>0){
// this.handlerDetailData(res[0].data[0]);
if(!this.getUrlToken.isAlarm){
//普通详情表格
console.log("lllll",res[0].data[0])
resTable=res[0].data[0];
this.handleHeadContent(res[0].data[0]);
}else{
... ... @@ -733,50 +739,50 @@ export default {
header:head,
content:content
}
resTable=obj;
this.handleHeadContent(obj);
let isNewData=false;
let addTableData=[];
let addTableDataOld=this.optionsSetUp.dynamicAddTable;
addTableDataOld.map(v=>{
head.map((item,index)=>{
if(v.key==item.key){
isNewData=false;
addTableData.push({
columnSort:v.columnSort?v.columnSort:index,
componentName:v.componentName?v.componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:v.width
})
}else{
isNewData=true;
}
}
})
}
}
// this.list = res;
let isNewData=false;
let addTableData=[];
let head=resTable.header;
let addTableDataOld=this.optionsSetUp.dynamicAddTable;
addTableDataOld.map(v=>{
head.map((item,index)=>{
if(v.key==item.key){
isNewData=false;
addTableData.push({
columnSort:v.columnSort?v.columnSort:index,
componentName:v.componentName?v.componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:v.width
})
if(isNewData){
head.map((item,index)=>{
addTableData.push({
columnSort:index,
componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:"50%"
})
})
}
console.log("addTableData",addTableData)
// this.optionsSetUp.dynamicAddTable=addTableData;
console.log("this.optionsSetUp.dynamicAddTable",this.optionsSetUp.dynamicAddTable)
}else{
isNewData=true;
}
}
})
})
if(isNewData){
head.map((item,index)=>{
addTableData.push({
columnSort:index,
componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:"50%"
})
})
}
// this.list = res;
this.$store.commit('CHANGE_HEAD', addTableData);
this.hackResetFun();
});
},
... ... @@ -917,16 +923,37 @@ export default {
this.sortCaret=flg;
this.sortBy=item.key;
}
console.log(" this.optionsData", this.optionsData)
console.log("iiiiiiii",item)
if(this.sortCaret=='ascending'){
//正序
this.order='ASC';
}else if(this.sortCaret=='ascending'){
//倒序
this.order='DESC';
}else{
//不排序
this.order='';
}
// this.handlerDetailData('',item.key)
this.handlerDetailData('',this.sortBy,this.order)
// this.handlerDetailDataNoPage();
},
//获取表格数据
async reGetDetailTableData(param){
let tableData='';
let headTable='';
const { success,data } = await getDetailTableData(param,this.getUrlToken);
if (success ){
tableData=data;
}
if(tableData && tableData.length>0){
headTable=tableData[0];
}
if(headTable){
this.handleHeadContent(headTable)
}
},
// 每页展示多少条
handleSizeChange(val){
// 切换页码重置初始页
... ...