monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit aab35b5487318055a6533a0a780598d6dc7b030a 1 parent eaec36db

基本信息二调整，导出按钮隐藏，进度条增加不刷新，水球/趋势图增加默认数据

Inline Side-by-side
Showing 15 changed files with 125 additions and 15 deletions
... ... @@ -4,8 +4,10 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://192.168.0.75:9095"',
MONITOR_GATEWAY: '"http://192.168.0.75:8080"'
BASE_API: '"http://192.168.0.59:9095"',
MONITOR_GATEWAY: '"http://192.168.0.59:8087"'
/* BASE_API: '"http://192.168.0.75:9095"',
MONITOR_GATEWAY: '"http://192.168.0.75:8080"'*/
// BASE_API: '"http://192.168.1.50:9095"',
// MONITOR_GATEWAY: '"http://192.168.1.50:8080"'
... ...
... ... @@ -28,7 +28,7 @@ textarea:focus {
input:-webkit-autofill {
/* -webkit-box-shadow: 0 0 0px 1000px black inset !important; */
/* background-color: #ffffff !important;*/
/* background-image: none !important;
/* background-image: none !important;
color: white !important; */
box-shadow: 0 0 0px 1000px rgb(229, 233, 238) inset !important;
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 1) inset !important;
... ... @@ -70,3 +70,27 @@ input:-webkit-autofill {
.el-table td {
padding: 8px 0;
}
.el-icon-my-toop{
background: url("../images/monitor/icon-toop.png") center no-repeat;
}
.el-icon-my-toop:before{
content: "\62d3";
font-size: 20px;
visibility: hidden;
}
.el-icon-my-toop-yellow{
background: url("../images/monitor/icon-toop-yellow.png") center no-repeat;
}
.el-icon-my-toop-yellow:before{
content: "\9ec4";
font-size: 20px;
visibility: hidden;
}
.el-icon-my-toop-white{
background: url("../images/monitor/icon-toop-white.png") center no-repeat;
}
.el-icon-my-toop-white:before{
content: "\767d";
font-size: 20px;
visibility: hidden;
}
... ...
... ... @@ -140,7 +140,7 @@ export default {
LineChartFnCustomTrend(chartProperties, data) {
const ananysicData = {};
let series = [];
if(data && data[0] && data[0].data){
if(data && data[0] && data[0].code==200 && data[0].data){
series = data[0].data;
}
ananysicData["series"] = series;
... ... @@ -157,7 +157,8 @@ export default {
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}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=['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=[]
}
if(data[0].data.kpiUnit){
kpiUnit=data[0].data.kpiUnit;
... ... @@ -201,7 +202,8 @@ export default {
}
}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=['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=[]
series = [{
name: "",
type:'bar',
... ...
... ... @@ -165,6 +165,27 @@ export const monitorBasicInformationTwo = {
value: true
},
{
type: 'el-switch',
label: '是否显示拓扑',
name: 'isToop',
required: false,
placeholder: '',
value: true
},
{
type: 'el-select',
label: '拓扑图标',
name: 'toop',
required: false,
placeholder: '',
selectOptions: [
{code: 'el-icon-my-toop', name: '蓝色图标'},
{code: 'el-icon-my-toop-white', name: '白色图标'},
{code: 'el-icon-my-toop-yellow', name: '黄色图标'},
],
value: 'el-icon-my-toop'
},
{
type: 'el-input-number',
label: '文字大小',
name: 'tableTitleFontSize',
... ...
... ... @@ -74,6 +74,14 @@ export const monitorButtonExport = {
placeholder: '',
value: require("../../../../../../../assets/images/monitor/capacityAnalysis/icon-export.png"),
},
{
type: 'el-switch',
label: '是否有导出',
name: 'isExport',
required: false,
placeholder: '',
value: true,
},
[
{
name: '标题设置',
... ...
... ... @@ -297,6 +297,14 @@ export const monitorProgressInformation = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: true
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ...
... ... @@ -37,7 +37,7 @@
content="查看拓扑图"
placement="top"
>
<i class="el-icon-orange" @click="resTopo({resId:resId,resType:resType})" ></i>
<i :class="optionsSetUp.toop" v-if="optionsSetUp.isToop" @click="resTopo({resId:resId,resType:resType})"></i>
</el-tooltip>
</el-col>
</el-row>
... ... @@ -371,6 +371,7 @@
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("aaaaa",res)
if (res && res[0].code == 0){
this.informationDataAll = res[0].data;
}else if(res && res.length>0){
... ... @@ -609,7 +610,7 @@
.basic-border-nowrap{
display: flex;
flex-flow: column;
min-width: 300px;
min-width: 400px;
}
.basic-img {
... ...
... ... @@ -4,7 +4,7 @@
<img :src="imgStyle.titleIcon" alt="" class="icon-title">
{{ transStyle.titleName }}
</div>
<div class="button-btn-item" :style="exportTitleStyle" v-for="(item,index) in btnGroup">
<div class="button-btn-item" v-if="optionsSetUp.isExport" :style="exportTitleStyle" v-for="(item,index) in btnGroup">
<img :src="imgStyle.exportTitleIcon" alt="" class="icon-title">
<span>{{item.name}}</span>
... ...
... ... @@ -495,7 +495,23 @@ export default {
});
},
renderingFn(val) {
this.options.xAxis.data = val.xAxis;
let xAxis=val.xAxis;
if(xAxis && xAxis.length>0){
this.options.xAxis.data =xAxis;
}else{
if(this.buttonVal=='year'){
this.options.xAxis.data=['今年'];
}else if(this.buttonVal=='quarter'){
this.options.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月'];
}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']
}
}
// series 模拟数据
/*val.series.push({
type:'line',
... ...
... ... @@ -378,6 +378,31 @@ export default {
xAxisList=data.map(function (item) {
return item.date;
})
}else {
if(this.buttonVal=='year'){
xAxisList=['今年'];
}else if(this.buttonVal=='quarter'){
xAxisList=['1季度','2季度','3季度','4季度'];
}else if(this.buttonVal=='month'){
xAxisList=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
}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']
}
data=[
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 },
{ "value": 0, "date": "", "l": 0, "u": 0 }
]
}
let base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
... ...
... ... @@ -2,7 +2,7 @@
<div :style="styleObj">
<div class="fillContainer-title" :style="titleStyle">
{{ optionsSetup.titleName }}
<span>(这里是结论建议及结论建议)</span>
<!-- <span>(这里是结论建议及结论建议)</span>-->
</div>
<div class="fillContainer" :style="flexFlowStyle">
<div class="fill-item" :style="fillItemStyle" v-for="(item,index) in fillData" :key="index">
... ... @@ -283,7 +283,7 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
if(res[0] && res[0].object) {
if(res[0] && res[0].code==200 && res[0].object) {
let resObj=res[0].object
if(typeof resObj=='object'){
let arr=[];
... ... @@ -296,6 +296,8 @@ export default {
this.fillData=[res[0].object];
}
}else{
this.fillData=[{num:0,name:'当前使用率'},{num:0,name:'当前增长率'}]
}
});
... ...
... ... @@ -152,7 +152,8 @@ export default {
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
optionsData.refreshTime,
optionsData.isRefresh
);
},
staticDataFn(val) {
... ... @@ -161,9 +162,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);
... ...