475 lines
17 KiB
Vue
475 lines
17 KiB
Vue
<template>
|
|
<div v-if="dialogShow" id="faultChoose">
|
|
<div class="falutChooseTitle">{{ title }}</div>
|
|
<div class="closeFalutChoose" @click="closeFaultChoose">
|
|
<span class="el-icon-close closeFalutChooseIn" />
|
|
</div>
|
|
<el-card class="triggerFaultInfo">
|
|
<div class="triggerFaultTitle">待触发故障信息</div>
|
|
<div v-if="simulationFault.id" class="triggerFaultList">
|
|
<div class="triggerFaultListLeft">
|
|
触发条件: {{ getTriangleInfo(simulationFault) }}<br>
|
|
故障设备: {{ deviceMap[simulationFault.targetDeviceType]+formatNameByCode(simulationFault.targetDeviceCode) }}<br>
|
|
故障类型: {{ covertFaultType(simulationFault) }}
|
|
</div>
|
|
<div class="triggerFaultBtn">
|
|
<el-button type="primary" size="medium" @click="cancleAutoFault">取消自动故障</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<div class="card">
|
|
<QueryListPage ref="pageRules" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" class="queryList" />
|
|
<addFault v-if="isAdd" ref="addFault" @closeAddRules="closeAddRules" @reload="reloadTable" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFailureRulesNew, setFailureModeNew, deleteFailureRule, getSimulationFaultRules } from '@/api/simulation';
|
|
// getFailureGenerateRules
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
|
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
|
import ModelType from '@/jmap/constant/deviceType';
|
|
import AddFault from './addFault';
|
|
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
|
|
|
|
// 故障列表
|
|
export default {
|
|
name: 'FaultChoose',
|
|
components:{
|
|
AddFault
|
|
},
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogShow: false,
|
|
loading: false,
|
|
isAdd:false,
|
|
deviceMap: {},
|
|
simulationFault:{},
|
|
pagerConfig: {
|
|
pageSize: 'pageSize',
|
|
pageIndex: 'pageNum'
|
|
},
|
|
queryForm: {
|
|
reset: true,
|
|
leftSpan:17,
|
|
labelWidth: '120px',
|
|
queryObject: {
|
|
deviceType:{
|
|
type: 'select',
|
|
label:'故障设备类型',
|
|
config: {
|
|
data: ConstConfig.ConstSelect.simulationDeviceList
|
|
}
|
|
}
|
|
// faultType:{
|
|
// type:'select',
|
|
// label:'故障类型',
|
|
// config: {
|
|
// data:
|
|
// // ConstConfig.ConstSelect.simulationDeviceList
|
|
// }
|
|
// }
|
|
}
|
|
},
|
|
queryList: {
|
|
query: this.getFailureRulesNew,
|
|
selectCheckShow: false,
|
|
indexShow: true,
|
|
columns: [
|
|
{
|
|
type:'basicText',
|
|
title: '触发条件',
|
|
columnValue: (row) => {
|
|
return this.getTriangleInfo(row);
|
|
}
|
|
},
|
|
{
|
|
type:'basicText',
|
|
title: '故障设备',
|
|
columnValue: (row) => {
|
|
return `${this.deviceMap[row.targetDeviceType]}${this.formatNameByCode(row.targetDeviceCode)}`;
|
|
}
|
|
},
|
|
{
|
|
type:'basicText',
|
|
title:'故障类型',
|
|
columnValue: (row) => {
|
|
return this.covertFaultType(row);
|
|
}
|
|
},
|
|
{
|
|
type: 'button',
|
|
title: '操 作',
|
|
width: '150',
|
|
buttons: [
|
|
{
|
|
name: '设置',
|
|
handleClick: this.settingFailure,
|
|
type: 'primary'
|
|
},
|
|
{
|
|
name: '删除',
|
|
handleClick: this.deleteFailure,
|
|
type: 'danger'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
actions: [
|
|
{ text: this.$t('global.add'), handler: this.handleAdd }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
return '自动故障设置';
|
|
},
|
|
lineCode() {
|
|
return this.$route.query.lineCode;
|
|
}
|
|
},
|
|
watch:{
|
|
// $store.state.config.menuBarLoadedCount
|
|
// 'offset': function (val) {
|
|
// this.dialogShow && this.dragEvent();
|
|
// },
|
|
'$store.state.socket.autoFaultTrigger':function(val) {
|
|
this.dialogShow && this.getSimulationFaultRules();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.deviceMap = [];
|
|
ConstConfig.ConstSelect.simulationDeviceList.forEach(elem => {
|
|
this.deviceMap[elem.value] = elem.label;
|
|
});
|
|
},
|
|
methods: {
|
|
formatNameByCode(code) {
|
|
let name = '';
|
|
const device = this.$store.getters['map/getDeviceByCode'](code);
|
|
if (device) {
|
|
switch (device._type) {
|
|
case ModelType.Signal:
|
|
case ModelType.Switch:
|
|
case ModelType.Station:
|
|
case ModelType.Section: {
|
|
if (device.parentName) {
|
|
name += device.parentName + '-' + device.name;
|
|
} else {
|
|
name += device.name;
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
if (device.stationCode) {
|
|
const station = this.$store.getters['map/getDeviceByCode'](device.stationCode);
|
|
if (station) {
|
|
name += '【' + station.name + '】';
|
|
}
|
|
}
|
|
}
|
|
|
|
return name;
|
|
},
|
|
getTriangleInfo(row) {
|
|
if (row && row.id) {
|
|
return `${this.deviceMap[row.condition.triggerDeviceType]}${this.formatNameByCode(row.condition.triggerDeviceCode)} 状态：${FaultStatusEnum[row.condition.triggerDeviceType][row.condition.triggerDeviceStatus]}`;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
covertType(type) {
|
|
switch (type) {
|
|
case 'SECTION':return 'Section';
|
|
case 'SIGNAL':return 'Signal';
|
|
case 'SWITCH':return 'Switch';
|
|
case 'STATION':return 'Station';
|
|
case 'ZC':return 'ZcControl';
|
|
case 'STAND':return 'StationStand';
|
|
case 'TRAIN':return 'Train';
|
|
}
|
|
},
|
|
covertFaultType(row) {
|
|
let faultType = '';
|
|
if (row && row.id) {
|
|
let type = this.covertType(row.targetDeviceType);
|
|
if (type == 'Station') {
|
|
type = 'ZcControl';
|
|
}
|
|
const currentList = deviceFaultType[type];
|
|
currentList.forEach(temp=>{
|
|
if (temp.value === row.faultType) {
|
|
faultType = temp.label;
|
|
}
|
|
});
|
|
}
|
|
return faultType;
|
|
},
|
|
closeFaultChoose() {
|
|
this.dialogShow = false;
|
|
this.isAdd = false;
|
|
if (this.$refs.addFault) {
|
|
this.$refs.addFault.resetForm();
|
|
}
|
|
},
|
|
closeAddRules() {
|
|
this.isAdd = false;
|
|
},
|
|
getFailureRulesNew(params) {
|
|
if (this.dialogShow) {
|
|
console.log(params, this.dialogShow, '=====');
|
|
params['lineCode'] = this.$route.query.lineCode;
|
|
return getFailureRulesNew(params);
|
|
}
|
|
},
|
|
getSimulationFaultRules() {
|
|
getSimulationFaultRules(this.group).then(res=>{
|
|
this.simulationFault = {};
|
|
if (res.data) {
|
|
this.simulationFault = res.data;
|
|
}
|
|
}).catch(error=>{
|
|
this.$messageBox('获取待触发故障失败:' + error.message);
|
|
});
|
|
},
|
|
doShow() {
|
|
this.dialogShow = true;
|
|
this.reloadTable();
|
|
this.getSimulationFaultRules();
|
|
this.$nextTick(()=>{
|
|
this.dragEvent();
|
|
});
|
|
// this.queryList.data = [];
|
|
// getFailureGenerateRules({ skin: this.lineCode, group: this.group }).then(response => {
|
|
// const data = response.data;
|
|
// data.forEach(elem => {
|
|
// this.queryList.data.push({
|
|
// id: elem.id,
|
|
// condition: `${this.deviceMap[elem.condition.triggerDeviceType]}${this.formatNameByCode(elem.condition.triggerDeviceCode)} 状态：${FaultStatusEnum[elem.condition.triggerDeviceType][elem.condition.triggerDeviceStatus]}`,
|
|
// target: `${this.deviceMap[elem.targetDeviceType]}${this.formatNameByCode(elem.targetDeviceCode)}`
|
|
// });
|
|
// });
|
|
// });
|
|
},
|
|
doClose() {
|
|
this.dialogShow = false;
|
|
},
|
|
handleAdd() {
|
|
this.isAdd = true;
|
|
},
|
|
deleteFailure(index, row) {
|
|
event.cancelBubble = true;
|
|
this.$confirm('删除故障规则，是否继续？', '提 示', {
|
|
confirmButtonText: '确 定',
|
|
cancelButtonText: '取 消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
deleteFailureRule(row.id).then(resp => {
|
|
this.reloadTable();
|
|
}).catch(error => {
|
|
this.$message.error(`删除故障规则失败: ${error.message}`);
|
|
});
|
|
}).catch( () => { });
|
|
},
|
|
settingFailure(index, row, idx) {
|
|
const faultModel = {ruleId: row.id, auto:true};
|
|
// row['loading' + idx] = true;
|
|
setFailureModeNew(faultModel, this.group).then(() => {
|
|
this.getSimulationFaultRules();
|
|
this.$message.success('设置自动故障成功');
|
|
}).catch(() => {
|
|
this.$messageBox('设置自动故障失败');
|
|
});
|
|
},
|
|
reloadTable() {
|
|
this.queryList.reload && this.queryList.reload();
|
|
},
|
|
cancleAutoFault() {
|
|
const faultModel = {auto:false};
|
|
setFailureModeNew(faultModel, this.group).then(() => {
|
|
this.getSimulationFaultRules();
|
|
this.$message.success('取消自动故障成功');
|
|
}).catch(() => {
|
|
this.$messageBox('取消自动故障失败');
|
|
});
|
|
},
|
|
dragEvent() {
|
|
const offset = this.offset;
|
|
const dialogHeaderEl = document.querySelector('.falutChooseTitle');
|
|
const dragDom = document.querySelector('#faultChoose');
|
|
dialogHeaderEl.style.cursor = 'move';
|
|
|
|
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
|
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
|
|
|
dialogHeaderEl.onmousedown = (e) => {
|
|
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
|
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
|
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
|
|
|
/** 获取到的值带px 正则匹配替换*/
|
|
let styL, styT;
|
|
|
|
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
|
if (sty.left.includes('%')) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
|
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
|
} else {
|
|
// eslint-disable-next-line no-useless-escape
|
|
styL = +sty.left.replace(/\px/g, '');
|
|
// eslint-disable-next-line no-useless-escape
|
|
styT = +sty.top.replace(/\px/g, '');
|
|
}
|
|
|
|
document.onmousemove = function (e) {
|
|
/** 通过事件委托，计算移动的距离*/
|
|
const l = e.clientX - disX;
|
|
const t = e.clientY - disY;
|
|
|
|
/** 移动当前元素*/
|
|
// dragDom.style.left = `${l + styL}px`;
|
|
// dragDom.style.top = `${t + styT}px`;
|
|
|
|
/** 移动当前元素*/
|
|
if (l + styL < 0) {
|
|
dragDom.style.left = `0px`;
|
|
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
|
|
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
|
|
} else {
|
|
dragDom.style.left = `${l + styL}px`;
|
|
}
|
|
if (t + styT <= offset) {
|
|
dragDom.style.top = offset + `px`;
|
|
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
|
|
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
|
|
} else {
|
|
dragDom.style.top = `${t + styT}px`;
|
|
}
|
|
|
|
/** 将此时的位置传出去*/
|
|
// binding.value({ x: e.pageX, y: e.pageY });
|
|
};
|
|
|
|
document.onmouseup = function () {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
|
height: 135px !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
#faultChoose .el-button--mini {
|
|
margin-left: 5px;
|
|
}
|
|
.triggerFaultListLeft{
|
|
display: inline-block;
|
|
float: left;
|
|
width: 730px;
|
|
}
|
|
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
// height: 110px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
border-radius: 10px;
|
|
background-color: #FFFFFF;;
|
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
|
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
background-color: #eaeaea;
|
|
}
|
|
/*滑块效果*/
|
|
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
|
border-radius: 5px;
|
|
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
background: rgba(0,0,0,0.4);
|
|
}
|
|
/*IE滚动条颜色*/
|
|
html {
|
|
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
scrollbar-highlight-color:#000;
|
|
scrollbar-3dlight-color:#000;
|
|
scrollbar-darkshadow-color:#000;
|
|
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
}
|
|
</style>
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|
.triggerFaultInfo{
|
|
margin-bottom:10px;
|
|
padding: 10px 0px 10px 15px;
|
|
}
|
|
.triggerFaultList{
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
line-height: 20px;
|
|
}
|
|
.triggerFaultTitle{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.falutChooseTitle{
|
|
padding: 15px;
|
|
cursor: all-scroll;
|
|
}
|
|
#faultChoose{
|
|
width: 900px;
|
|
position: absolute;
|
|
left: 30%;
|
|
top: 20%;
|
|
background: #fff;
|
|
padding:0px 0px 15px 0px;
|
|
// transform: translate3d(-50%,-50%,0);
|
|
border-radius: 6px;
|
|
z-index:999;
|
|
}
|
|
.faultChooseFoot{
|
|
display: inline-block;
|
|
float: right;
|
|
margin-right: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.closeFalutChoose{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
width: 35px;
|
|
height: 35px;
|
|
cursor: pointer;
|
|
}
|
|
.closeFalutChooseIn{
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|