bug修复
This commit is contained in:
parent
bd12085589
commit
8a2d62b33a
BIN
src/assets/images/abnormalAlarm/title_right.png
Normal file
BIN
src/assets/images/abnormalAlarm/title_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -139,7 +139,7 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
&-required::before {
|
||||
display: none !important;
|
||||
// display: none !important;
|
||||
}
|
||||
}
|
||||
&-horizontal {
|
||||
|
|
@ -173,7 +173,7 @@ body {
|
|||
}
|
||||
|
||||
&-input {
|
||||
background-color: transparent;
|
||||
background-color: red;
|
||||
&-wrap {
|
||||
border-color: @formInputBorderColor;
|
||||
height: 32px;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
|
||||
<img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
|
||||
</a-button>
|
||||
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteGroup(item.id)">
|
||||
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
|
||||
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -50,15 +50,21 @@
|
|||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="page.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${currentPage} / ${Math.ceil(total / page.pageSize)}`"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<custom-modal :title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'" :width="845" v-model="visible" :okHandler="handleOk" destroy-on-close>
|
||||
<a-spin :spinning="false">
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'"
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
destroy-on-close
|
||||
>
|
||||
<!-- <a-spin :spinning="false"> -->
|
||||
<div class="group-assign">
|
||||
<a-transfer
|
||||
:dataSource="userList"
|
||||
|
|
@ -72,13 +78,28 @@
|
|||
</a-transfer>
|
||||
<!-- 穿梭框右上方搜索 -->
|
||||
<div class="group-name">
|
||||
<label>Group Name</label>
|
||||
<a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" />
|
||||
|
||||
<!-- <label>Group Name</label>
|
||||
<a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" /> -->
|
||||
<a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
|
||||
<a-form-item label="Group Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 穿梭框右上方搜索结束 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
</custom-modal>
|
||||
<!-- </a-spin> -->
|
||||
<template slot="footer">
|
||||
<slot name="custom-footer"></slot>
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="handleOk" >Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -136,7 +157,8 @@ export default {
|
|||
'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
|
||||
targetKeys: [],
|
||||
groupName: "",
|
||||
currGroupId:""
|
||||
currGroupId: "",
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -173,7 +195,12 @@ export default {
|
|||
if (res.success) {
|
||||
this.visible = true
|
||||
this.isAdd = false
|
||||
this.groupName = res.result.name
|
||||
// this.groupName = res.result.name
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.name,
|
||||
});
|
||||
})
|
||||
this.targetKeys = res.result.userIds
|
||||
this.currGroupId = res.result.id
|
||||
} else {
|
||||
|
|
@ -195,29 +222,41 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
setGroupName(e) {
|
||||
this.groupName = e.target.value
|
||||
},
|
||||
// setGroupName(e) {
|
||||
// this.groupName = e.target.value
|
||||
// },
|
||||
handleChange(targetKeys, direction, moveKeys) {
|
||||
console.log(targetKeys, direction, moveKeys);
|
||||
this.targetKeys= targetKeys;
|
||||
},
|
||||
handleOk() {
|
||||
if (this.isAdd) {
|
||||
this.createContactGroup()
|
||||
} else {
|
||||
this.updateContactGroup()
|
||||
}
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (this.targetKeys.length>0) {
|
||||
if (this.isAdd) {
|
||||
this.createContactGroup(values.name)
|
||||
} else {
|
||||
this.updateContactGroup(values.name)
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("Please select User")
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
updateContactGroup() {
|
||||
onCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
updateContactGroup(name) {
|
||||
let params = {
|
||||
name: this.groupName,
|
||||
name,
|
||||
description: "",
|
||||
userIds: this.targetKeys,
|
||||
id:this.currGroupId
|
||||
}
|
||||
httpAction("/alarmContactGroup/update", params, "put").then(res => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getAlarmGroup()
|
||||
} else {
|
||||
|
|
@ -225,14 +264,15 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
createContactGroup() {
|
||||
createContactGroup(name) {
|
||||
let params = {
|
||||
name: this.groupName,
|
||||
name,
|
||||
description: "",
|
||||
userIds:this.targetKeys,
|
||||
}
|
||||
postAction("/alarmContactGroup/create", params).then(res => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getAlarmGroup()
|
||||
} else {
|
||||
|
|
@ -283,6 +323,11 @@ export default {
|
|||
console.log('search:', dir, value);
|
||||
},
|
||||
showModal() {
|
||||
this.targetKeys = []
|
||||
this.groupName = ""
|
||||
this.form.setFieldsValue({
|
||||
name: "",
|
||||
});
|
||||
this.visible = true;
|
||||
},
|
||||
},
|
||||
|
|
@ -290,6 +335,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.operators {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
.group-header{
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -303,6 +355,7 @@ export default {
|
|||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0px 1px 1px 0px #000000
|
||||
}
|
||||
}
|
||||
.group-content{
|
||||
|
|
@ -343,6 +396,10 @@ export default {
|
|||
.ant-modal-title{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-form-item-label > label{
|
||||
font-family: ArialMT;
|
||||
color: #5b9cba;
|
||||
}
|
||||
}
|
||||
.group-assign{
|
||||
position: relative;
|
||||
|
|
@ -375,9 +432,9 @@ export default {
|
|||
}
|
||||
|
||||
&:last-child {
|
||||
height: 364px;
|
||||
height: 345px;
|
||||
position: relative;
|
||||
top: 47px;
|
||||
top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -453,7 +510,7 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 282px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
label {
|
||||
|
|
|
|||
|
|
@ -4,34 +4,51 @@
|
|||
<div class="chart-layout" id="alarmChartBar"></div>
|
||||
<a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;">
|
||||
<a-tabs default-active-key="alarmHistory" @change="handleTabChange">
|
||||
<a-tab-pane key="alarmHistory" tab="ALARM HISTORY">
|
||||
<custom-table
|
||||
size="middle"
|
||||
:rowKey="getUid()"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:canSelect="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template slot="info" slot-scope="{text, record}">
|
||||
<div class="info-alarm">{{ text }}</div>
|
||||
<div>{{ text }}</div>
|
||||
</template>
|
||||
</custom-table>
|
||||
<a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY">
|
||||
<div style=" height: calc(100% - 30px);overflow: auto;">
|
||||
<custom-table
|
||||
size="middle"
|
||||
:rowKey="getUid()"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:canSelect="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- :pagination="ipagination" -->
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}</div>
|
||||
</template>
|
||||
</custom-table>
|
||||
</div>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="alarmAnalysis" tab="ALARM ANALYSIS">
|
||||
<div class="analysis-chart">
|
||||
<div class="chart-left">
|
||||
<div class="chart-title">
|
||||
<span>Monitor Type Alarms</span>
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||
</div>
|
||||
<div class="chart-content" id="chartLeft"></div>
|
||||
</div>
|
||||
<div class="chart-right">
|
||||
<div class="chart-title">
|
||||
<span>Alarm Rule Top5</span>
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||
</div>
|
||||
<div class="chart-content" id="chartRight"></div>
|
||||
</div>
|
||||
|
|
@ -107,6 +124,7 @@ export default {
|
|||
xData_top: [],
|
||||
yData_top: [],
|
||||
pieData: [],
|
||||
pieColors:["#d64618","#c99e0d","#b2a927"],
|
||||
url: {
|
||||
list: '/alarmLog/findPage'
|
||||
},
|
||||
|
|
@ -171,24 +189,38 @@ export default {
|
|||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
data: this.xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show:true
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgbA(64, 105, 121, 0.2)"
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
color: "#b87b1b"
|
||||
},
|
||||
|
|
@ -210,16 +242,26 @@ export default {
|
|||
}
|
||||
postAction("/alarmLog/typeAlarms", params).then(res => {
|
||||
if (res.success) {
|
||||
// this.drawAlarmChart_pie()
|
||||
this.pieData = res.result.pieData
|
||||
this.pieTotal = res.result.pieTotal
|
||||
this.drawAlarmChart_pie()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTableChange(pagination) {
|
||||
this.ipagination = pagination
|
||||
// handleTableChange(pagination) {
|
||||
// this.ipagination = pagination
|
||||
// this.getAlarmLogTable()
|
||||
// },
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
this.getAlarmLogTable()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.page.pageSize = size
|
||||
this.getAlarmLogTable()
|
||||
},
|
||||
handleTabChange(key) {
|
||||
|
|
@ -234,9 +276,6 @@ export default {
|
|||
drawAlarmChart_pie() {
|
||||
this.alarmPie = echarts.init(document.getElementById("chartLeft"))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
|
|
@ -266,15 +305,28 @@ export default {
|
|||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
data: this.pieData.map((item, index) => {
|
||||
item.label = {
|
||||
color: this.pieColors[index]
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
var index = params.dataIndex;
|
||||
return this.pieColors[index];
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
label:{
|
||||
formatter:'{q|{b}}\n{q|{c}} {q|({d})%}',
|
||||
rich: {
|
||||
q: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'ArialMT',
|
||||
lineHeight: 22
|
||||
},
|
||||
}
|
||||
},
|
||||
data: this.pieData
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -283,7 +335,7 @@ export default {
|
|||
this.alarmPie.resize();
|
||||
});
|
||||
},
|
||||
getAlarmTop() {
|
||||
getAlarmTop(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
|
|
@ -295,6 +347,7 @@ export default {
|
|||
if (res.success) {
|
||||
this.xData_top = res.result.yData
|
||||
this.yData_top = res.result.xData
|
||||
this.drawAlarmChart_top()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
|
|
@ -318,13 +371,14 @@ export default {
|
|||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
},
|
||||
// data: this.xData
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -338,7 +392,7 @@ export default {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -389,6 +443,7 @@ export default {
|
|||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #02282b;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -483,11 +538,20 @@ export default {
|
|||
color: #0cebc9;
|
||||
border-bottom: 4px solid rgba(12, 235, 201, 0.2);
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.2);
|
||||
position: relative;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
}
|
||||
img{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.chart-content{
|
||||
height: calc(100% - 40px);
|
||||
|
|
@ -498,4 +562,13 @@ export default {
|
|||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
.history_tab{
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,7 +41,8 @@
|
|||
<a-col flex="380px">
|
||||
<a-form-model-item label="Alarm date">
|
||||
<a-range-picker
|
||||
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
dropdownClassName="asd"
|
||||
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
|
|
@ -159,28 +160,33 @@ export default {
|
|||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-form-item {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
.ant-form-item-label,.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
color: #ade6ee;
|
||||
&::after {
|
||||
display: none;
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
.ant-form-item-label,.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
color: #ade6ee;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.ant-calendar-range-picker-separator{
|
||||
color: white;
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-select {
|
||||
|
|
@ -197,4 +203,13 @@ export default {
|
|||
position: relative;
|
||||
background: #03353f;
|
||||
}
|
||||
:global{
|
||||
.asd{
|
||||
.ant-calendar-range .ant-calendar-input ,
|
||||
.ant-calendar-range .ant-calendar-time-picker-input{
|
||||
color: red !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user