xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug修复

Browse Source
This commit is contained in:
renpy 2023-07-24 18:23:12 +08:00
parent bd12085589
commit 8a2d62b33a
5 changed files with 231 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/abnormalAlarm/title_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
src/style.less
View File

@ -139,7 +139,7 @@ body {
width: 100%; width: 100%;
} }
&-required::before { &-required::before {
display: none !important; // display: none !important;
} }
} }
&-horizontal { &-horizontal {
@ -173,7 +173,7 @@ body {
} }
&-input { &-input {
background-color: transparent; background-color: red;
&-wrap { &-wrap {
border-color: @formInputBorderColor; border-color: @formInputBorderColor;
height: 32px; height: 32px;

107
src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
View File

@ -18,7 +18,7 @@
<a-button class="actions" shape="circle" @click.stop="editGroup(item.id)"> <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
<img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" /> <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
</a-button> </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="" /> <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button> </a-button>
</template> </template>
@ -50,15 +50,21 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="page.total" :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 show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<custom-modal :title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'" :width="845" v-model="visible" :okHandler="handleOk" destroy-on-close> <a-modal
<a-spin :spinning="false"> :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"> <div class="group-assign">
<a-transfer <a-transfer
:dataSource="userList" :dataSource="userList"
@ -72,13 +78,28 @@
</a-transfer> </a-transfer>
<!-- 穿梭框右上方搜索 --> <!-- 穿梭框右上方搜索 -->
<div class="group-name"> <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>
<!-- 穿梭框右上方搜索结束 --> <!-- 穿梭框右上方搜索结束 -->
</div> </div>
</a-spin> <!-- </a-spin> -->
</custom-modal> <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> </div>
</template> </template>
@ -136,7 +157,8 @@ export default {
'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden', 'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
targetKeys: [], targetKeys: [],
groupName: "", groupName: "",
currGroupId:"" currGroupId: "",
form: this.$form.createForm(this)
} }
}, },
mounted() { mounted() {
@ -173,7 +195,12 @@ export default {
if (res.success) { if (res.success) {
this.visible = true this.visible = true
this.isAdd = false 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.targetKeys = res.result.userIds
this.currGroupId = res.result.id this.currGroupId = res.result.id
} else { } else {
@ -195,29 +222,41 @@ export default {
} }
}) })
}, },
setGroupName(e) { // setGroupName(e) {
this.groupName = e.target.value // this.groupName = e.target.value
}, // },
handleChange(targetKeys, direction, moveKeys) { handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys, direction, moveKeys); console.log(targetKeys, direction, moveKeys);
this.targetKeys= targetKeys; this.targetKeys= targetKeys;
}, },
handleOk() { handleOk() {
if (this.isAdd) { this.form.validateFields((err, values) => {
this.createContactGroup() if (!err) {
} else { if (this.targetKeys.length>0) {
this.updateContactGroup() 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 = { let params = {
name: this.groupName, name,
description: "", description: "",
userIds: this.targetKeys, userIds: this.targetKeys,
id:this.currGroupId id:this.currGroupId
} }
httpAction("/alarmContactGroup/update", params, "put").then(res => { httpAction("/alarmContactGroup/update", params, "put").then(res => {
if (res.success) { if (res.success) {
this.visible = false
this.$message.success("success") this.$message.success("success")
this.getAlarmGroup() this.getAlarmGroup()
} else { } else {
@ -225,14 +264,15 @@ export default {
} }
}) })
}, },
createContactGroup() { createContactGroup(name) {
let params = { let params = {
name: this.groupName, name,
description: "", description: "",
userIds:this.targetKeys, userIds:this.targetKeys,
} }
postAction("/alarmContactGroup/create", params).then(res => { postAction("/alarmContactGroup/create", params).then(res => {
if (res.success) { if (res.success) {
this.visible = false
this.$message.success("success") this.$message.success("success")
this.getAlarmGroup() this.getAlarmGroup()
} else { } else {
@ -283,6 +323,11 @@ export default {
console.log('search:', dir, value); console.log('search:', dir, value);
}, },
showModal() { showModal() {
this.targetKeys = []
this.groupName = ""
this.form.setFieldsValue({
name: "",
});
this.visible = true; this.visible = true;
}, },
}, },
@ -290,6 +335,13 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.operators {
width: 100%;
justify-content: center;
.ant-btn {
width: 92px;
}
}
.group-header{ .group-header{
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
@ -303,6 +355,7 @@ export default {
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
box-shadow: 0px 1px 1px 0px #000000
} }
} }
.group-content{ .group-content{
@ -343,6 +396,10 @@ export default {
.ant-modal-title{ .ant-modal-title{
letter-spacing: 1px; letter-spacing: 1px;
} }
.ant-form-item-label > label{
font-family: ArialMT;
color: #5b9cba;
}
} }
.group-assign{ .group-assign{
position: relative; position: relative;
@ -375,9 +432,9 @@ export default {
} }
&:last-child { &:last-child {
height: 364px; height: 345px;
position: relative; position: relative;
top: 47px; top: 35px;
} }
} }
@ -453,7 +510,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 282px; width: 300px;
display: flex; display: flex;
align-items: center; align-items: center;
label { label {

149
src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
View File

@ -4,34 +4,51 @@
<div class="chart-layout" id="alarmChartBar"></div> <div class="chart-layout" id="alarmChartBar"></div>
<a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;"> <a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;">
<a-tabs default-active-key="alarmHistory" @change="handleTabChange"> <a-tabs default-active-key="alarmHistory" @change="handleTabChange">
<a-tab-pane key="alarmHistory" tab="ALARM HISTORY"> <a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY">
<custom-table <div style=" height: calc(100% - 30px);overflow: auto;">
size="middle" <custom-table
:rowKey="getUid()" size="middle"
:columns="columns" :rowKey="getUid()"
:list="dataSource" :columns="columns"
:pagination="ipagination" :list="dataSource"
:loading="loading" :loading="loading"
:canSelect="false" :canSelect="false"
@change="handleTableChange" @change="handleTableChange"
> >
<template slot="info" slot-scope="{text, record}"> <!-- :pagination="ipagination" -->
<div class="info-alarm">{{ text }}</div> <template slot="info" slot-scope="{ record}">
<div>{{ text }}</div> <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
</template> <div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}</div>
</custom-table> </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>
<a-tab-pane key="alarmAnalysis" tab="ALARM ANALYSIS"> <a-tab-pane key="alarmAnalysis" tab="ALARM ANALYSIS">
<div class="analysis-chart"> <div class="analysis-chart">
<div class="chart-left"> <div class="chart-left">
<div class="chart-title"> <div class="chart-title">
<span>Monitor Type Alarms</span> <span>Monitor Type Alarms</span>
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
</div> </div>
<div class="chart-content" id="chartLeft"></div> <div class="chart-content" id="chartLeft"></div>
</div> </div>
<div class="chart-right"> <div class="chart-right">
<div class="chart-title"> <div class="chart-title">
<span>Alarm Rule Top5</span> <span>Alarm Rule Top5</span>
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
</div> </div>
<div class="chart-content" id="chartRight"></div> <div class="chart-content" id="chartRight"></div>
</div> </div>
@ -107,6 +124,7 @@ export default {
xData_top: [], xData_top: [],
yData_top: [], yData_top: [],
pieData: [], pieData: [],
pieColors:["#d64618","#c99e0d","#b2a927"],
url: { url: {
list: '/alarmLog/findPage' list: '/alarmLog/findPage'
}, },
@ -171,24 +189,38 @@ export default {
axisTick: { axisTick: {
show:false show:false
}, },
axisLine: {
lineStyle: {
color: "rgba(119, 181, 213, 0.5)"
}
},
axisLabel: {
color: "rgba(173, 230, 238, 1)"
},
data: this.xData data: this.xData
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
show:true show:true,
lineStyle: {
color: "rgba(119, 181, 213, 0.5)"
}
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgbA(64, 105, 121, 0.2)" color: "rgba(119, 181, 213, 0.2)"
} }
}, },
axisLabel: {
color: "rgba(173, 230, 238, 1)"
},
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
barWidth: 30, barMaxWidth: 30,
itemStyle: { itemStyle: {
color: "#b87b1b" color: "#b87b1b"
}, },
@ -210,16 +242,26 @@ export default {
} }
postAction("/alarmLog/typeAlarms", params).then(res => { postAction("/alarmLog/typeAlarms", params).then(res => {
if (res.success) { if (res.success) {
// this.drawAlarmChart_pie()
this.pieData = res.result.pieData this.pieData = res.result.pieData
this.pieTotal = res.result.pieTotal this.pieTotal = res.result.pieTotal
this.drawAlarmChart_pie()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning("This operation fails. Contact your system administrator")
} }
}) })
}, },
handleTableChange(pagination) { // handleTableChange(pagination) {
this.ipagination = 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() this.getAlarmLogTable()
}, },
handleTabChange(key) { handleTabChange(key) {
@ -234,9 +276,6 @@ export default {
drawAlarmChart_pie() { drawAlarmChart_pie() {
this.alarmPie = echarts.init(document.getElementById("chartLeft")) this.alarmPie = echarts.init(document.getElementById("chartLeft"))
let options = { let options = {
tooltip: {
trigger: 'item'
},
graphic: [ graphic: [
{ {
type: "text", type: "text",
@ -266,15 +305,28 @@ export default {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, data: this.pieData.map((item, index) => {
label: { item.label = {
show: false, color: this.pieColors[index]
position: 'center' }
return item;
}),
itemStyle: {
color: (params) => {
var index = params.dataIndex;
return this.pieColors[index];
}
}, },
labelLine: { label:{
show: false 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(); this.alarmPie.resize();
}); });
}, },
getAlarmTop() { getAlarmTop(obj) {
let params = { let params = {
startDate:obj.startDate, startDate:obj.startDate,
endDate:obj.endDate, endDate:obj.endDate,
@ -295,6 +347,7 @@ export default {
if (res.success) { if (res.success) {
this.xData_top = res.result.yData this.xData_top = res.result.yData
this.yData_top = res.result.xData this.yData_top = res.result.xData
this.drawAlarmChart_top()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning("This operation fails. Contact your system administrator")
} }
@ -318,13 +371,14 @@ export default {
axisLabel: { axisLabel: {
show: false show: false
}, },
splitLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.2)" color: "rgba(115, 191, 255, 0.5)"
} }
}, },
// data: this.xData splitLine: {
show: false
},
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
@ -338,7 +392,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.2)" color: "rgba(115, 191, 255, 0.5)"
} }
}, },
splitLine: { splitLine: {
@ -389,6 +443,7 @@ export default {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: #02282b; background-color: #02282b;
overflow: hidden;
} }
} }
} }
@ -483,11 +538,20 @@ export default {
color: #0cebc9; color: #0cebc9;
border-bottom: 4px solid rgba(12, 235, 201, 0.2); border-bottom: 4px solid rgba(12, 235, 201, 0.2);
border-top: 1px 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{ span{
display: inline-block; display: inline-block;
padding: 0 15px; padding: 0 15px;
background-color: rgba(12, 235, 201, 0.05); background-color: rgba(12, 235, 201, 0.05);
} }
img{
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
} }
.chart-content{ .chart-content{
height: calc(100% - 40px); height: calc(100% - 40px);
@ -498,4 +562,13 @@ export default {
font-size: 18px; font-size: 18px;
color: #f62424; color: #f62424;
} }
.history_tab{
position: relative;
}
.ant-pagination{
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
</style> </style>

57
src/views/abnormalAlarm/components/searchBar.vue
View File

@ -41,7 +41,8 @@
<a-col flex="380px"> <a-col flex="380px">
<a-form-model-item label="Alarm date"> <a-form-model-item label="Alarm date">
<a-range-picker <a-range-picker
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]" dropdownClassName="asd"
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
@change="onRangeDateChange" @change="onRangeDateChange"
/> />
</a-form-model-item> </a-form-model-item>
@ -159,28 +160,33 @@ export default {
margin-right: 9px; margin-right: 9px;
} }
} }
::v-deep .ant-form-item { ::v-deep {
display: flex; .ant-form-item {
margin-bottom: 0; display: flex;
.ant-form-item-label,.ant-form-item-control { margin-bottom: 0;
line-height: 32px; .ant-form-item-label,.ant-form-item-control {
height: 32px; line-height: 32px;
} height: 32px;
.ant-form-item-label { }
flex-shrink: 0; .ant-form-item-label {
margin-right: 10px; flex-shrink: 0;
label { margin-right: 10px;
font-size: 16px; label {
font-family: ArialMT; font-size: 16px;
color: #ade6ee; font-family: ArialMT;
&::after { color: #ade6ee;
display: none; &::after {
display: none;
}
} }
} }
} .ant-calendar-range-picker-separator{
.ant-form-item-control-wrapper { color: white;
width: 100%; }
overflow: hidden; .ant-form-item-control-wrapper {
width: 100%;
overflow: hidden;
}
} }
} }
.ant-select { .ant-select {
@ -197,4 +203,13 @@ export default {
position: relative; position: relative;
background: #03353f; 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> </style>