monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 8be986eaf9d63de2cd0b7efcf2b42303f0022d64 2 parents 6916e6c3 4a40cec5 master-mj-joke ... master-500-dev master-500-dev-lushangqing master-500-dev-lzc master-mj

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

业务容量分析



See merge request !65
Inline Side-by-side
Showing 27 changed files with 2093 additions and 89 deletions
... ... @@ -4,10 +4,12 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://192.168.0.59:9095"',
MONITOR_GATEWAY: '"http://192.168.0.59:8080"'
/* BASE_API: '"http://192.168.0.75:9095"',
/*BASE_API: '"http://192.168.0.59:9095"',
MONITOR_GATEWAY: '"http://192.168.0.59:8080"'*/
/*BASE_API: '"http://192.168.0.75:9095"',
MONITOR_GATEWAY: '"http://192.168.0.75:8080"'*/
BASE_API: '"https://192.168.0.248:8089"',
MONITOR_GATEWAY: '"https://192.168.0.248:8080"'
/*BASE_API: '"http://192.168.1.52:8089"',
MONITOR_GATEWAY: '"http://192.168.1.52:8080"'*/
... ...
... ... @@ -152,8 +152,8 @@ export default {
let xAxisList = [];
let series = [];
let kpiUnit='';
if(data && data[0] ){
if(data[0].data){
if(data && data[0] && data[0].code==0){
if(data[0].data && data[0].series){
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}else{
... ... @@ -173,34 +173,48 @@ export default {
}];
}
}else{
//容量分析柱线图数据结构
let seriesCapacityData=[];//容量
let seriesUsageRateData=[];//使用率
let seriesUsageValueData=[];//使用量
data.map(item=>{
xAxisList.push(item.periodVal);
seriesCapacityData.push(item.capacityValue)
seriesUsageRateData.push(item.usageRate)
seriesUsageValueData.push(item.usageValue)
let dataData='';
if(data[0].data && data[0].data.length>=0){
dataData=data[0].data;
}else{
dataData=data;
}
if(dataData.length>0){
//容量分析柱线图数据结构
let seriesCapacityData=[];//容量
let seriesUsageRateData=[];//使用率
let seriesUsageValueData=[];//使用量
dataData.map(item=>{
xAxisList.push(item.periodVal);
seriesCapacityData.push(item.capacityValue)
seriesUsageRateData.push(item.usageRate)
seriesUsageValueData.push(item.usageValue)
})
series.push({
type:'bar',
name:'使用量',
data:seriesUsageValueData
})
series.push({
type:'line',
name:'容量',
data:seriesCapacityData
})
series.push({
type:'line',
name:'使用率',
data:seriesUsageRateData
})
})
series.push({
type:'bar',
name:'使用量',
data:seriesUsageValueData
})
series.push({
type:'line',
name:'容量',
data:seriesCapacityData
})
series.push({
type:'line',
name:'使用率',
data:seriesUsageRateData
})
}else{
xAxisList=[]
series = [{
name: "",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
}
}else{
// xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
xAxisList=[]
... ...
... ... @@ -16,6 +16,8 @@ const getters = {
//按钮月季度年切换
buttonVals:state => state.buttonVal.buttonValData,
//树形控件点击切换
elTreeDatas:state => state.elTreeData.treeDatas
elTreeDatas:state => state.elTreeData.treeDatas,
//进度条的数据
progressDatas:state => state.progress.progressData,
}
export default getters
... ...
... ... @@ -11,6 +11,7 @@ import help from './modules/help'
import tableHead from './modules/tableHead'
import buttonVal from "./modules/button";
import elTreeData from "./modules/elTree";
import progress from "./modules/progress";
Vue.use(Vuex)
... ... @@ -25,7 +26,8 @@ const store = new Vuex.Store({
help,
tableHead,
buttonVal,
elTreeData
elTreeData,
progress,
},
state: { },
plugins: [initPlugin],
... ...
const progress = {
state: {
progressData: ''
},
mutations: {
CHANGE_PROGRESS: (state, val) => {
state.progressData=val;
}
},
actions: {
}
}
export default progress
... ...
/*
* @Descripttion: 柱线图
* @version:
* @Author: lsq
* @Date: 2022-03-01
* @LastEditors: lsq
* @LastEditTime: 2022-03-01
*/
export const monitorCustomBarLineChartArray = {
code: 'monitor-custom-bar-line-chart-array',
type: 'chart',
label: '柱线图-双线-循环',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '与按钮组件联动',
name: 'isVuex',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '与flag联动',
name: 'isFlag',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '柱线图高度',
name: 'itemHeight',
required: false,
placeholder: '',
value: 250
},
{
type: 'el-input-number',
label: '柱线图下边距',
name: 'itemMarginBottom',
required: false,
placeholder: '',
value: 5
},
{
type: 'vue-color',
label: '每组柱线图背景色',
name: 'itemBackground',
required: false,
placeholder: '',
value: '#fff'
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 2,
},
],
},
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#1e9fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'bold'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-select',
label: '标题垂直位置',
name: 'textAlignVertical',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '靠上'},
{code: 'bottom', name: '靠下'},
],
value: 'top'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '左显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '左坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '左坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '左坐标字号',
name: 'namefontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '左均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '右显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '右坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '右坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '右坐标字号',
name: 'namefontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '右均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipFontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#e68b55'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '图例文字显示',
name: 'isShowLegendText',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#3b91ff'}, {color: '#ff1111'}, {color: '#2c2f90'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "1月", "bar": 2.6, "line": 2},
{"axis": "2月", "bar": 5.9, "line": 2.2},
{"axis": "3月", "bar": 9, "line": 3.3},
{"axis": "4月", "bar": 26.4, "line": 4.5},
{"axis": "5月", "bar": 28.7, "line": 6.3},
{"axis": "6月", "bar": 70.7, "line": 10.2},
{"axis": "7月", "bar": 175.6, "line": 20.3},
{"axis": "8月", "bar": 182.2, "line": 23.4},
{"axis": "9月", "bar": 48.7, "line": 23},
{"axis": "10月", "bar": 18.8, "line": 16.5},
{"axis": "11月", "bar": 6, "line": 12},
{"axis": "12月", "bar": 2.3, "line": 6.2},
]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'custom-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 1403,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 800,
},
],
}
}
... ...
... ... @@ -728,6 +728,14 @@ export const monitorCustomBarLineChart = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: false
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -646,6 +646,14 @@ export const monitorCustomLineTrend = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: false
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -332,6 +332,14 @@ export const monitorCustomLiquidFillChart = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: false
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -74,6 +74,15 @@ export const monitorProgressInformation = {
],
value: 'column'
},
{
type: 'el-input-number',
label: '每组进度条高度',
name: 'itemHeight',
required: false,
placeholder: '',
value: '250'
},
[
{
name: '标题设置',
... ...
... ... @@ -206,6 +206,14 @@ export const monitorSystemInformation = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: false
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -291,6 +291,14 @@ export const monitorTablePage = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: false
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -140,6 +140,14 @@ export const monitorTreeShape = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: true
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ... @@ -242,7 +250,7 @@ export const monitorTreeShape = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
... ...
... ... @@ -55,6 +55,7 @@ import {monitorSystemInformation} from "./echartsConfigJson/monitorConfigJson/mo
import {monitorTreeShape} from "./echartsConfigJson/monitorConfigJson/monitor-tree-shape";
import {monitorTablePage} from "./echartsConfigJson/monitorConfigJson/monitor-table-page";
import {monitorButtonExport} from "./echartsConfigJson/monitorConfigJson/monitor-button-export";
import {monitorCustomBarLineChartArray} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart-array";
export const {widgetTool,monitor} = {
... ... @@ -110,6 +111,8 @@ export const {widgetTool,monitor} = {
monitorCustomLineStack,
// 柱线图-双线
monitorCustomBarLineChart,
// 柱线图-双线-循环
monitorCustomBarLineChartArray,
//月季度年按钮
monitorButtonGroup,
//折线趋势图
... ...
... ... @@ -296,6 +296,8 @@
this.optionsData = val.data;
this.handlerData();
// this.setDisplay();
this.getTitleName();
},
deep: true
}
... ... @@ -372,7 +374,7 @@
const data = this.queryEchartsData(val);
data.then(res => {
console.log("aaaaa",res)
if (res && res[0].code == 0){
if (res && res[0] && (res[0].code == 0 || res[0].code == 200)){
this.informationDataAll = res[0].data;
}else if(res && res.length>0){
this.informationDataAll=res;
... ...
... ... @@ -2,7 +2,7 @@
<div class="button-container" :style="styleObj">
<div class="button-title" :style="titleStyle">
<img :src="imgStyle.titleIcon" alt="" class="icon-title">
{{ transStyle.titleName }}
{{elTreeBtnTitleName}}{{ transStyle.titleName }}
</div>
<div class="button-btn-item">
<el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'"
... ... @@ -16,7 +16,7 @@
</template>
<script>
import {mapGetters} from "vuex";
export default {
name: "buttonGroup",
data() {
... ... @@ -31,7 +31,8 @@ export default {
{name:'季度',code:'quarter',isDisplay:'true'},
{name:'年',code:'year',isDisplay:'true'},
],
btnActive:'month'
btnActive:'month',
dataTitle:''
}
},
components: {},
... ... @@ -40,6 +41,10 @@ export default {
ispreview: Boolean
},
computed: {
elTreeBtnTitleName(){
let btnTitleName=this.$route.query.btnTitleName
return btnTitleName;
},
transStyle() {
return this.objToOne(this.options);
},
... ...
<template>
<div :style="styleObj">
<div :style="styleObj" v-if="isDisplay">
<v-chart :options="options" autoresize/>
</div>
</template>
... ... @@ -16,6 +16,8 @@ export default {
},
data() {
return {
chartData:[],
isDisplay:true,
kpiUnit:'',
options: {
color: [],
... ... @@ -112,11 +114,16 @@ export default {
buttonVal(){
return this.buttonVals;
},
//进度条flag数据
...mapGetters(['progressDatas']),
progressData(){
return this.progressDatas;
},
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
height: this.isDisplay?this.optionsStyle.height + "px":'0',
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
... ... @@ -135,6 +142,27 @@ export default {
deep: true
},
//监听月季度年按钮切换值
progressData:{
handler(val){
console.log("_______",val)
/* let arr=[];
let newArr=[];
if(val){
arr=val.split(',')
arr.map(item=>{
newArr.push({flag:item})
})
}
this.chartData=arr;
if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
this.isDisplay=true;
}else{
this.isDisplay=false;
}*/
},
deep:true
},
//监听进度条flag
buttonVal:{
handler(val){
if(this.optionsSetup.isVuex){
... ... @@ -454,7 +482,7 @@ export default {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime,optionsData.isRefresh);
},
staticDataFn(val) {
const series = this.options.series;
... ... @@ -477,9 +505,9 @@ export default {
}
}
},
dynamicDataFn(val, refreshTime) {
dynamicDataFn(val, refreshTime,isRefresh) {
if (!val) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
... ... @@ -495,6 +523,7 @@ export default {
});
},
renderingFn(val) {
console.log("*************",val)
let xAxis=val.xAxis;
if(xAxis && xAxis.length>0){
this.options.xAxis.data =xAxis;
... ... @@ -554,6 +583,11 @@ export default {
})
}
this.options.series=series;
/* if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
this.isDisplay=true;
}else{
this.isDisplay=false;
}*/
}
}
};
... ...
<template>
<div :style="styleObj" >
<div :style="itemStyle" v-for="(item,index) in chartData" :key="index">
{{item.flag}}
<v-chart :ref="item.flag" :options="options[index]" autoresize/>
</div>
</div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
name: "customBarlinechart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
kpiUnit:'',
chartData:[
{flag:'cpu'},
],
chartDataItem:[],
options: [{
color: [],
grid: {},
title: {
text: "",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis",
formatter: "{a} <br/>{b} : {c} '%'"
},
legend: {
textStyle: {
color: "#fff"
},
},
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show: false,
textStyle: {
color: "#fff"
}
}
}
],
yAxis: [
{
type: "value",
name: "",
min: 0,
max: 2,
interval: 1,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
{
type: "value",
name: "",
min: 0,
max: 100,
interval: 10,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
}
],
series: [
{
name: "",
type: "bar",
data: [],
itemStyle: {
barBorderRadius: null
}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
}
]
}],
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
};
},
computed: {
//月季度年按钮通过vuex接收值
...mapGetters(['buttonVals']),
buttonVal(){
return this.buttonVals;
},
//进度条flag数据
...mapGetters(['progressDatas']),
progressData(){
return this.progressDatas;
},
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
},
itemStyle(){
return{
height:this.optionsSetup.itemHeight + "px",
width: this.optionsStyle.width + "px",
background:this.optionsSetup.itemBackground,
'margin-bottom':this.optionsSetup.itemMarginBottom+'px'
}
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.collapse;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
},
//监听月季度年按钮切换值
buttonVal:{
handler(val){
if(this.optionsSetup.isVuex){
let optionsData=this.optionsData;
if(this.optionsData.dataType=="dynamicData"){
//改变参数值-月季度年，重新加载动态数据--待测
this.optionsData.dynamicData.contextData.time=val;
// this.editorOptions();
}
}
},
deep:true
},
//监听进度条数据
progressData:{
handler(val){
console.log("_______",val);
let arr=[];
let newArr=[];
if(val){
arr=val.split(',')
arr.map(item=>{
newArr.push({flag:item})
})
/*
if (this.optionsData.dataType == "dynamicData") {
console.log("(*)(*)",this.optionsData.dynamicData.contextData.flag)
this.optionsData.dynamicData.contextData.flag = val;
}
this.editorOptions();
if(this.chartDataItem.indexOf(val)==-1){
this.chartDataItem.push(val)
}
this.chartDataItem.map(item=>{
newArr.push({flag:item})
})*/
}
this.chartData=newArr;
this.chartData.map((item,index) => {
this.options[index]={
flag:item.flag,
color: [],
grid: {},
title: {
text: "",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis",
formatter: "{a} <br/>{b} : {c} '%'"
},
legend: {
textStyle: {
color: "#fff"
},
},
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show: false,
textStyle: {
color: "#fff"
}
}
}
],
yAxis: [
{
type: "value",
name: "",
min: 0,
max: 2,
interval: 1,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
{
type: "value",
name: "",
min: 0,
max: 100,
interval: 10,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
}
],
series: [
{
name: "",
type: "bar",
data: [],
itemStyle: {
barBorderRadius: null
}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
}
]
}
console.log("_+111_+_+_", this.$refs[item.flag])
if (this.optionsData.dataType == "dynamicData") {
console.log("(*)(*)",this.optionsData.dynamicData.contextData.flag,item.flag)
this.optionsData.dynamicData.contextData.flag = item.flag;
}
this.editorOptions();
})
// this.thenData();
// this.forData();
},
deep:true
},
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
// this.forData();
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsBar();
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsColor();
},
// 标题修改
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
if(optionsSetup.textAlignVertical=='bottom'){
title.bottom='0';
this.options[this.chartData.length-1].title = title;
}else{
title.top='8px';
this.options[0].title = title;
}
// this.options[0].title = title;
},
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, // 文字角度
inverse: optionsSetup.reversalX, // 轴反转
axisLabel: {
show: true,
interval: optionsSetup.textInterval, // 文字间隔
rotate: optionsSetup.textAngle, // 文字角度
textStyle: {
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
}
},
boundaryGap:['1','2']//坐标轴两边留白，为false则从0开始
};
// this.options.xAxis = xAxis;
this.options.map(item=>{
item.xAxis=xAxis;
})
},
// Y轴设置
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: "value",
splitNumber: optionsSetup.splitNumberLeft,// 均分
show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.namefontSizeYLeft
},
inverse: optionsSetup.reversalY, // 轴反转
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
}
},
splitLine: {
show: false,
}
},
{
type: "value",
splitNumber: optionsSetup.splitNumberRight,// 均分
show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.namefontSizeYRight
},
inverse: optionsSetup.reversalY, // 轴反转
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeY
},
formatter: '{value} %'
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
}
},
splitLine: {
show: false,
}
}
];
// this.options.yAxis = yAxis;
this.options.map(item=>{
item.yAxis=yAxis;
})
},
// 折线设置 数值设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
this.options.map(item=>{
// const series = this.options.series;
const series = item.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
opacity: 0
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth
};
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
})
// this.options.series = series;
/*this.options.map(item=>{
item.series=series;
})*/
},
// 柱体设置 数值设置
setOptionsBar() {
const optionsSetup = this.optionsSetup;
this.options.map(item=>{
// const series = this.options.series;
const series = item.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsSetup.isShowBar,
position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar
};
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
}
}
})
// this.options.series = series;
// this.options.map(item=>{
// item.series=series;
// })
},
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let that=this;
const tooltip = {
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
},
formatter:function (param) {
let kpiName=optionsSetup.titleText;
// 鼠标悬浮线上提示
// 顶部提示
let tips = '<table>';
if (param.length == 1) {
tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
} else {
tips += "<tr><td style='text-align:left;' colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
}
// 每一条提示
$.each(param, function (i, v) {
let kpiUnit='';
tips += "<tr><td>" + v.marker + "</td>";
tips += '<td style="text-align: left;">';
if (v.seriesName.indexOf('率') != -1) {
kpiUnit='%';
}else{
kpiUnit=that.kpiUnit
}
tips += (v.seriesName + ' ');
// tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
tips += '</td>'
tips += "<td>:&nbsp;</td><td>" + v.value;
tips += kpiUnit + "</td></tr>";
});
tips += '</table>'
return tips;
}
};
// this.options.tooltip = tooltip;
this.options.map(item=>{
item.tooltip=tooltip;
})
},
// 边距设置
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
// this.options.grid = grid;
this.options.map(item=>{
item.grid=grid;
})
},
// 图例操作 legend
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
this.options.map(item=>{
// const legend = this.options.legend;
const legend = item.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
if(!optionsSetup.isShowLegendText){
legend.formatter= function (name) {
return '';
}
}else{
legend.formatter= function (name) {
return name;
}
}
legend.itemHeight= 5;
legend.tooltip= {
show: true
}
})
},
// 图例颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
// this.options.color = arrColor;
this.options.map(item=>{
item.color=arrColor;
})
// this.options = Object.assign({}, this.options);
this.options.map(item=>{
item=Object.assign({}, this.options);
})
},
// 数据处理
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
// const series = this.options.series;
let axis = [];
let bar = [];
let line = [];
for (const i in val) {
axis[i] = val[i].axis;
bar[i] = val[i].bar;
line[i] = val[i].line;
}
// x轴
// this.options.xAxis.data = axis;
/* this.options.map(item=>{
item.xAxis.data=axis;
})*/
// series
/* for (const i in series) {
if (series[i].type == "bar") {
series[i].data = bar;
} else {
series[i].data = line;
}
}*/
this.options.map(item=>{
console.log(")(()(",item.series)
for (const i in item.series) {
if (item.series[i].type == "bar") {
item.series[i].data = bar;
} else {
item.series[i].data = line;
}
}
})
this.chartData.map((item,index)=>{
console.log("))))))",this.options[index])
this.options[index].xAxis.data=axis;
/* for (const i in this.options[index].series) {
if (this.options[index].series[i].type == "bar") {
this.options[index].series[i].data = bar;
} else {
this.options[index].series[i].data = line;
}
}*/
})
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
async getEchartData(val) {
const data = this.queryEchartsData(val);
this.chartDataItem.push(data);
console.log("900000",this.optionsData.dynamicData?this.optionsData.dynamicData.contextData.flag:'009')
// return await Promise.all(this.chartDataItem)//.then(data => {console.log("data",data,this.optionsData.dynamicData.contextData.flag )})
/*if(this.chartData.length==this.chartDataItem.length){
let arr=[];
this.chartDataItem.map(item=>{
item.then(res => {
this.renderingFn(res,this.optionsData.dynamicData.contextData.flag);
});
})
}*/
// data.then(res => {
// this.renderingFn(res,this.optionsData.dynamicData.contextData.flag);
// });
},
async thenData(){
const res = await this.getEchartData()
console.log("res",res)
},
renderingFn(val,flag) {
console.log("*************",val,flag)
// this.forData(val);
this.setData(val);
},
setData(val){
let xAxis=val.xAxis;
if(xAxis && xAxis.length>0){
// this.options.xAxis.data =xAxis;
this.options.map(item=>{
item.xAxis.data=xAxis;
})
}else{
if(this.buttonVal=='year'){
// this.options.xAxis.data=['今年'];
this.options.map(item=>{
item.xAxis.data=['今年'];
})
}else if(this.buttonVal=='quarter'){
// this.options.xAxis.data=['1季度','2季度','3季度','4季度'];
this.options.map(item=>{
item.xAxis.data=['1季度','2季度','3季度','4季度'];
})
}else if(this.buttonVal=='month'){
this.options.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
this.options.map(item=>{
item.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
})
}else{
// this.options.xAxis.data=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
this.options.map(item=>{
item.xAxis.data=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'];
})
}
}
const series = val.series;
if(series && series.length>0){
series.map((item,index)=>{
if(item.name.indexOf('率')!=-1){
item.yAxisIndex= 1;
}else{
item.yAxisIndex=0;
}
// if(index%2==0){
// item.yAxisIndex= 1;
// }else{
// item.yAxisIndex=0;
// }
if(item.type=='bar'){
item.itemStyle= {
barBorderRadius: null
}
item.barMinHeight=2;
}else if(item.type=='line'){
item.itemStyle= {
borderRadius: null
}
item.symbol='line';//设置图列为直线不带空心圆
}
})
}
// this.forData()
// this.chartData.map((item,index)=>{
console.log("66666666666666",this.optionsData.dynamicData.contextData.flag)
let flag=this.optionsData.dynamicData.contextData.flag;
// if(this.optionsData.dynamicData.contextData.flag==item.flag){
if(series){
// this.$refs[flag].options.series=series;
this.options.map((item,index)=>{
if(item.flag==flag){
this.options[index].series=series;
}
})
}else{
/* this.$refs[flag].options.series=[{
name: "",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];*/
this.options.map((item,index)=>{
if(item.flag==flag){
this.options[index].series= [{
name: "",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
})
}
// }
// })
// console.log("123445",this.options)
// this.options.series=series;
},
forData(val){
let that=this;
let arr=this.chartData;
/*arr.map((item,index) => {
this.options[index]={
flag:item.flag,
color: [],
grid: {},
title: {
text: "",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis",
formatter: "{a} <br/>{b} : {c} '%'"
},
legend: {
textStyle: {
color: "#fff"
},
},
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show: false,
textStyle: {
color: "#fff"
}
}
}
],
yAxis: [
{
type: "value",
name: "",
min: 0,
max: 2,
interval: 1,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
{
type: "value",
name: "",
min: 0,
max: 100,
interval: 10,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
}
],
series: [
{
name: "",
type: "bar",
data: [],
itemStyle: {
barBorderRadius: null
}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
}
]
}
console.log("_+_+_+_", this.$refs[item.flag])
})*/
/*for(let i in arr){
if (this.optionsData.dataType == "dynamicData") {
console.log("(*)(*)",that.optionsData.dynamicData.contextData.flag,arr[i].flag)
that.optionsData.dynamicData.contextData.flag = arr[i].flag;
// that.setOptionsData();
}
}*/
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
... ...
... ... @@ -348,7 +348,8 @@ export default {
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
optionsSetup,
optionsData.isRefresh
);
},
//去重
... ... @@ -468,9 +469,9 @@ export default {
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
dynamicDataFn(val, refreshTime, optionsSetup,isRefresh) {
if (!val) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
... ...
... ... @@ -250,7 +250,8 @@ export default {
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
optionsData.refreshTime,
optionsData.isRefresh
);
},
staticDataFn(val) {
... ... @@ -269,9 +270,9 @@ export default {
'top':num+'%'
};
},
dynamicDataFn(val, refreshTime) {
dynamicDataFn(val, refreshTime,isRefresh) {
if (!val) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
... ...
... ... @@ -282,24 +282,26 @@ export default {
let arrstorage=[];
let optionArr=[]
dataArr.map(item=>{
if(item.cpuSetRate){
if(item.cpuSetRate || item.cpuSetRate==0){
arrCpu=[{
num:item.cpuSetRate,
name:'cpu容量'
}]
}
if(item.storageSetRate){
if(item.storageSetRate || item.storageSetRate==0){
arrmemory=[{
num:item.storageSetRate,
name:'存储容量'
}]
}
if(item.memorySetRate){
if(item.memorySetRate || item.memorySetRate==0){
arrstorage=[{
num:item.memorySetRate,
name:'内存容量'
}]
}
console.log("####",arrCpu,arrmemory,arrstorage)
if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){
item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
... ...
... ... @@ -49,7 +49,8 @@ export default {
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background,
'flex-flow':this.optionsSetup.flexFlow
'flex-flow':this.optionsSetup.flexFlow,
'justify-content':'flex-start'
};
},
//进度条宽度样式设置
... ... @@ -68,6 +69,8 @@ export default {
itemStyle(){
return{
width:this.optionsSetup.flexFlow=='column'?'100%':'auto',
height:this.optionsSetup.itemHeight+'px',
flex:this.optionsSetup.flexFlow!='column'?'1':'',
// 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
// 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none',
'background':this.optionsSetup.itemBackground
... ... @@ -177,7 +180,37 @@ export default {
const data = this.queryEchartsData(val);
data.then(res => {
if(res && res.length>0){
this.progressData=res;
if(res[0].code==0){
if(res[0].data.length>0){
this.progressData=res[0].data;
}else{
let name='';
if(this.optionsData.dynamicData.contextData.kpiId=='KPI7054BC34,KPIBDB60856,KPID3EBE40F'){
name='cpu';
}else if(this.optionsData.dynamicData.contextData.kpiId=='KPI1584BE1C,KPI31CB8D97'){
name='内存';
}else if(this.optionsData.dynamicData.contextData.kpiId=='KPI98306224,KPIA91F44E7'){
name='存储';
}else if(this.optionsData.dynamicData.contextData.kpiId=='KPI2EC3F15A,KPI6AD9EBD6'){
name='表空间';
}else if(this.optionsData.dynamicData.contextData.kpiId=='KPI4D710FDA,KPI811E751E'){
name='ASM磁盘组';
}
this.progressData=[{name:name,rate:0}];
}
}else{
this.progressData=res;
}
let flagArr=[];
let flagStr='';
this.progressData.map(item=>{
flagArr.push(item.flag)
item.rate=Number(item.rate)
})
if(flagArr.length>0){
flagStr=flagArr.join(',')
}
this.$store.commit('CHANGE_PROGRESS',flagStr)
}
});
},
... ... @@ -195,7 +228,7 @@ export default {
.progress-item{
font-size: 14px;
text-align: left;
flex:1;
//flex:1;
padding:10px 20px;
//border:1px solid #ccc;
display: flex;
... ...
... ... @@ -166,7 +166,8 @@ export default {
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
optionsData.refreshTime,
optionsData.isRefresh
);
},
staticDataFn(val) {
... ... @@ -175,9 +176,9 @@ export default {
}
},
dynamicDataFn(val, refreshTime) {
dynamicDataFn(val, refreshTime,isRefresh) {
if (!val) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
... ... @@ -189,8 +190,13 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("&&&&",res)
if(res && res.length>0){
this.systemData=res;
if(res[0].code==0){
this.systemData=res[0].data;
}else{
this.systemData=res;
}
}
});
},
... ...
... ... @@ -298,7 +298,7 @@ export default {
const tableData = this.optionsData;
tableData.dataType == "staticData"
? this.handlerStaticData(tableData.staticData)
: this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
: this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime,tableData.isRefresh);
},
handlerStaticData(data) {
this.list = data;
... ... @@ -306,9 +306,9 @@ export default {
this.loading = false;
this.loadingAll = false;
},
handlerDynamicData(data, refreshTime) {
handlerDynamicData(data, refreshTime,isRefresh) {
if (!data) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
... ...
... ... @@ -2,8 +2,8 @@
<div :style="styleObj" class="treeContainer">
<div class="tree-left" :style="treeLeftStyle">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
<el-tab-pane label="业务系统" name="first"></el-tab-pane>
<el-tab-pane label="资源系统" name="second"></el-tab-pane>
<el-tab-pane label="业务系统" name="bos"></el-tab-pane>
<el-tab-pane label="资源系统" name="res"></el-tab-pane>
</el-tabs>
<el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
node-key="id" :default-checked-keys="checkedKeys"
... ... @@ -26,10 +26,10 @@ export default {
data() {
return {
iframeSrc:'',
activeName:'first',
activeName:'bos',
defaultProps : {
children: 'children',
label: 'label',
children: 'child',
label: 'typeName',//resTypeName
},
treeData: [], // 所有的树结点
checkedKeys: [], // 当前选中的keys
... ... @@ -55,7 +55,9 @@ export default {
treeLeftStyle(){
return{
'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none',
'max-height':this.optionsStyle.height + "px",
'overflow':'auto',
}
},
//文字样式设置
... ... @@ -86,34 +88,46 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
this.setSrc({id:1})
},
mounted() {
},
methods: {
handleClick(tab,event){
this.handleTableData();
//切换类型获取树结构数据
if (this.optionsData.dataType == "dynamicData" && this.optionsSetup.isType) {
//改变参数值-类型
this.optionsData.dynamicData.contextData.type = this.activeName;
}
},
//树节点点击事件
handleNodeClick(data,node){
console.log("*(*(*(",node,data);
if(this.optionsSetup.isFrame){
this.setSrc(data,node.level);
this.setSrc(data,node);
}
this.$store.commit('CHANGE_TREE',data)
},
setSrc(data,level){
setSrc(data,node){
let origin=window.location.origin;//当前域名
let srcName=origin+'/#/bigscreen/viewer?reportCode=';
// serviceCode,resourceCode
let codeArr=[];
if(this.activeName=='first'){
if(this.activeName=='bos'){
codeArr=this.optionsSetup.serviceCode.split(',');
}else{
codeArr=this.optionsSetup.resourceCode.split(',');
}
if(level>0){
srcName+=codeArr[level-1];
// if(level>0){
if(data.propType){
if(data.propType=='busType'){
srcName+=codeArr[0];
}else if(data.propType=='resType'){
srcName+=codeArr[1];
}else{
srcName+=codeArr[2];
}
}else{
srcName+=codeArr[0];
}
... ... @@ -124,23 +138,45 @@ export default {
srcName+='capacity_analysis_second';
}*/
let locationUrl=this.$route.query;
let access_token=locationUrl.locationUrl;
let access_token=locationUrl.access_token;
let tokenUrl='';
if(access_token){
tokenUrl='&access_token='+access_token
}
this.iframeSrc=srcName+tokenUrl;
let busId='';
if(data.busId){
busId='&busId='+data.busId;
}else if(node && node.parent && node.parent.data.busId){
busId='&busId='+node.parent.data.busId;
}else if(node && node.parent && node.parent.parent && node.parent.parent.data.busId){
busId='&busId='+node.parent.parent.data.busId;
}
let resId='';
if(data.resId){
resId='&resId='+data.resId;
}
let resType='';
if(data.type){
resType='&resType='+data.type;
}else if(this.activeName=='res' && data.typeCode){
resType='&resType='+data.typeCode;
}
let btnTitleName='';
let titleName='';
if(data.typeName){
btnTitleName='&btnTitleName='+data.typeName;
titleName='&titleName='+data.typeName;
}
this.iframeSrc=srcName+tokenUrl+busId+resId+resType+btnTitleName+titleName;
console.log("iframeSrc",busId+resId+resType+btnTitleName)
},
editorOptions() {
this.setOptionsData();
},
//切换类型获取树结构数据
handleTableData() {
if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {
//改变参数值-类型
this.optionsData.dynamicData.contextData.type = this.activeName;
}
},
// 数据解析
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
... ... @@ -148,18 +184,19 @@ export default {
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
optionsData.refreshTime,optionsData.isRefresh
);
},
staticDataFn(val) {
if(val && val.length>0) {
this.treeData=val;
this.setSrc(this.treeData[0])
}
},
dynamicDataFn(val, refreshTime) {
dynamicDataFn(val, refreshTime,isRefresh) {
if (!val) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
... ... @@ -171,8 +208,11 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
if(res && res.length>0){
this.treeData=res;
console.log("aaaa",res)
if(res[0] && res[0].data){
this.treeData=res[0].data;
this.setSrc(this.treeData[0])
}
});
},
... ...
... ... @@ -48,6 +48,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorCustomBarLineChartArray from "./monitor/customBarLineChartArray";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
... ... @@ -99,6 +100,7 @@ export default {
monitorBasicInformationTwo,
monitorCustomLineStack,
monitorCustomBarLineChart,
monitorCustomBarLineChartArray,
monitorButtonGroup,
monitorCustomLineTrend,
monitorCustomLiquidFillChart,
... ...
... ... @@ -59,6 +59,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorCustomBarLineChartArray from "./monitor/customBarLineChartArray";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
... ... @@ -109,6 +110,7 @@ export default {
monitorBasicInformationTwo,
monitorCustomLineStack,
monitorCustomBarLineChart,
monitorCustomBarLineChartArray,
monitorButtonGroup,
monitorCustomLineTrend,
monitorCustomLiquidFillChart,
... ...