monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit dbcdf2a7682922a0500351b45a9d9f083c1611c4 1 parent 2cb51c9a

增加故障诊断书路由

Inline Side-by-side
Showing 4 changed files with 7 additions and 615 deletions
<title>故障诊断书</title>
<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -119,6 +119,11 @@ const routes = [{
path: '/analysis/view',
name: 'view',
component: () => myImport('views/analysis/view/index')
},
{
path: '/fault/index',
name: 'view',
component: () => myImport('views/faultDiagnosis/index')
}
];
... ...
<div class="analysis-add-container">
<el-row>
<div class="add-top">
<el-row>
<el-col :span="16" class="add-top-title">
<el-input v-model="input" placeholder="请输入场景名称" />
</el-col>
<el-col :span="8" class="add-top-select">
<el-dropdown>
<el-button type="primary">
时间范围
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu slot = "dropdown">
<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"/>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown @command="handleCommand">
<el-button type="primary">
契合频率
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item v-for="item in frequencyArr"
:key = "item.ddicId"
:command="{value:item.ddicId,label:item.ddicName,flag:1}">{{item.ddicName}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary">保存</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="classLine" id="responsemonitor_ref">
<LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
</div>
</el-col>
</el-row>
</div>
</el-row>
<el-row>
<div class="add-bottom">
<el-row>
<el-col :span="6" class="bottom-condition">
<el-row class="condition-row">
<el-col :span="24">
<i class="icon-condition"></i>
<span class="condition-title">查询条件</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
</el-col>
</el-row>
<el-row>
<el-col span="6" class="analysis-bottom-button">
<el-button type="primary" @click="onReset()">重置</el-button>
</el-col>
<el-col span="6" class ="analysis-bottom-button">
<el-button type="primary" @click="onBtnSearch()">查询</el-button>
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="已添加">
<cm-table-page :columns="columns" :dataList="addedObj" @loaddata="getPage"
:showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="addedTotal" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
<template #tools>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="text" size="mini" @click.prevent="deleteRow(row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>
</el-table-column>
</template>
</cm-table-page>
</el-tab-pane>
<el-tab-pane label="未添加">
<cm-table-page :columns="columns" :dataList="noaddObj" @loaddata="getPage"
:showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="noaddTotal" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
<template #tools>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="text" size="mini" @click.prevent="handleUpdate(row,scope.$index)">
<i class="el-icon-folder-add"/>
</el-button>
</template>
</el-table-column>
</template>
</cm-table-page>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</el-row>
<el-dialog :title="选择追加分类" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
<el-form-item label="flag" prop="flag">
<div style="display:inline-block;">
<el-radio-group v-model="autoWidth">
<el-radio :label="true" border>
追加场景分类
</el-radio>
<el-radio :label="false" border>
新增场景分类
</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item label="Status">
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
取消
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
确认
</el-button>
</div>
</el-dialog>
</div>
export default {
name: 'addIndex',
template: '',
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
)
},
data() {
return {
commandVal:'max',
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/ContrastAnalysis/getLineData',
optionData:'',
titleFontSize:'30',
allData: '',
newCommandVal:this.commandVal,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null,// 定时器的标识
props: {
label: 'label',
children: 'children'
}
}
},
created() {
this.loadResList();
this.loadFrequency();
this.getData()
},
props: {
dialogFormVisible:false,
height: {
type: Number,
default: 0
},
pageSize: {
type: Number,
default: 10
},
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 分页信息
const pageInfo = Vue.reactive({
total: 0,
limit: 50,
page: 1,
keyWords: ''
})
let temp ={
}
let dialogFormVisible= false
let dialogStatus= ''
let textMap ={
update: '追加场景',
create: 'Create'
}
let columns = Vue.ref([
{
prop: 'busId',
label: '业务系统',
sortable: true,
align: 'right',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'right',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'right',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'right',
},
{
prop: 'kpiId',
label: '指标类型',
sortable: true,
align: 'right',
}
]);
const allData=Vue.ref({});
let currentPage = Vue.ref(1);
let frequencyArr= Vue.ref([]);
// 表格数据对象
const addedObj = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
// 搜索框内容
let addedTotal = Vue.ref(0);
// 表格数据对象
const noaddObj = Vue.ref([]);
let noaddTotal = Vue.ref(0);
// 计算减去左侧树的宽度
let max = (function () {
let right = window.innerWidth;
let treeWidth = (right / 24) * 4;
return right - treeWidth;
})();
let loadFrequency = ()=> {
let param = {
ddicName:'Day'
}
proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
if (res && res.data) {
frequencyArr = res.data;
console.log(frequencyArr);
}
});
}
let loadResList = () => {
// 查询参数
let params = {
page: pageInfo.page,
limit: pageInfo.limit,
// keyWords: this.form.keyWords.value,
resType: resTypeArr.value.join(','),
kpiType: kpiTypeArr.value.join(','),
bizType: busTypeArr.value.join(','),
configId: 64,
}
proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
if (res && res.data) {
addedObj.value = res.data;
addedTotal.value = res.count;
}
});
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
if (res && res.data) {
noaddObj.value = res.data;
noaddTotal.value = res.count;
}
});
}
let deleteRow = (row,index) => {
proxy.$global.confirm("确认删除该项吗？", function () {
if(row.isAdd && row.isAdd == 1){
proxy.$global.showMsg("删除成功！")
dataList.value.splice(index, 1);
} else {
// 删除配置项
proxy.$http.post(`/api-web/ContrastAnalysis/delete/${row.id}`, {}, function (res) {
if (res && res.success) {
proxy.$global.showMsg("删除成功！");
dataList.value.splice(index, 1);
} else {
proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "删除失败！", "error");
}
});
}
})
}
let handleUpdate =(row,index) =>{
console.log(row);
console.log(index);
// this.temp = Object.assign({}, row) // copy obj
// this.temp.timestamp = new Date(this.temp.timestamp)
// this.dialogStatus = 'update'
dialogFormVisible = true
// this.nextTick(() => {
// this.$refs['dataForm'].clearValidate()
// })
}
// 点击按钮搜索
let onBtnSearch = () => {
pageInfo.page = 1;
loadResList();
}
let onReset = () => {
}
let getResType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {
return v.id;
});
resTypeArr.value = types;
loadResList();
}
let getKpiType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {e
return v.kpiId;
});
kpiTypeArr.value = types;
loadResList();
}
let getBizType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {
return v.busId;
});
busTypeArr.value = types;
loadResList();
}
return {
allData,
temp,
dialogFormVisible,
dialogStatus,
textMap,
loadFrequency,
frequencyArr,
loadResList,
getResType,
getKpiType,
onBtnSearch,
handleUpdate,
deleteRow,
currentPage,
columns,
addedObj,
addedTotal,
noaddObj,
noaddTotal,
max
}
},
mounted () {
this.getData()
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
unmounted () {
window.removeEventListener('resize', this.screenAdapter)
},
watch:{
commandVal(newValue, oldValue) {
this.newCommandVal=newValue
this.getData()
}
},
methods: {
getData () {
let that=this;
console.log(this.domainName)
console.log(this.apiUrl)
// 查询参数
let params = {
access_token: localStorage.getItem('access_token'),
timeScope: 'Day',
frequency: 5,
resource :{
resId :'i-k5e0597zznlzz1iaa8cc',
kpiId : 'KPI05227E45',
kpiFlg : 'base'
}
}
that.$http.post(this.domainName +this.apiUrl, params, function (ret) {
if(ret){
let dataArr=[];
let xAxisData='';
if(ret.map){
dataArr=ret.map.y
xAxisData=ret.map.x
}else{
for(let i=0;i<12;i++){
dataArr.push('0')
}
}
that.allData= {
polyline: {
title: '',
legend : ret.map.legend,
unit: ret.map.units,
data: {
data: dataArr
}
},
xAxis: xAxisData
}
that.updateChart()
}
})
},
updateChart () {
console.log("ddd",this.allData)
// 半透明的颜色值
const colorArr1 = [
'rgba(11, 168, 44, 0.5)',
'rgba(44, 110, 255, 0.5)',
'rgba(22, 242, 217, 0.5)',
'rgba(35, 255, 255, 0.5)',
'rgba(254, 33, 30, 0.5)',
'rgba(250, 105, 0, 0.5)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(11, 168, 44, 0)',
'rgba(44, 110, 255, 0)',
'rgba(22, 242, 217, 0)',
'rgba(35, 255, 255, 0)',
'rgba(254, 33, 30, 0)',
'rgba(250, 105, 0, 0)'
]
const timeArr = this.allData.xAxis
const seriesData = this.allData.polyline.data
// 图例的数据
// const legendArr = this.allData.polyline.data.map(item => {
// return item.name
// })
const legendArr=[];
legendArr.push(this.allData.polyline.legend);
const title = this.allData.polyline.title
this.optionData = {
title: {
text: title,
left: '10%',
textStyle: {
fontSize: this.titleFontSize*0.6,
color:'#ffffff'
}
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
},
legend: {
data: legendArr,
itemHeight:0,//图例圆圈大小设置
top:'10%',
right:'20%',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: timeArr,
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
},
yAxis: {
axisLabel: {
color:'#ffffff',
},
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
},
series: {
type: 'line',
data: seriesData,
smooth: true,
showSymbol:false,
color:colorArr1[1],
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr1[1]
}, // %0的颜色值
{
offset: 1,
color: colorArr2[1]
} // 100%的颜色值
])
}
},
itemStyle:{
showSymbol:false
}
};
},
screenAdapter () {
this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
const adapterOption = {
title: {
textStyle: {
fontSize: this.titleFontSize / 1.5
}
},
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
itemGap: this.titleFontSize,
textStyle: {
fontSize: this.titleFontSize / 2
}
}
}
},
}
}