341 lines
12 KiB
Vue
341 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="menu-title">
|
|||
|
|
风险预测
|
|||
|
|
<el-image
|
|||
|
|
class="img-item"
|
|||
|
|
:src="coverImg"
|
|||
|
|
:preview-src-list="srcList">
|
|||
|
|
</el-image>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<div class="search-input-box">
|
|||
|
|
<el-input
|
|||
|
|
class="search-input"
|
|||
|
|
placeholder="请输入内容"
|
|||
|
|
v-model="keyword">
|
|||
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|||
|
|
</el-input>
|
|||
|
|
<el-button type="primary" style="margin-left: 30px" @click="queryByKeyword">检 索</el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-tabs v-model="activeTab">
|
|||
|
|
<el-tab-pane label="故障案例" name="first">
|
|||
|
|
<el-table :data="faultCaseList" style="width: 100%">
|
|||
|
|
<el-table-column type="index" width="50"></el-table-column>
|
|||
|
|
<el-table-column prop="number" label="案例编号"></el-table-column>
|
|||
|
|
<el-table-column prop="name" label="案例名称"></el-table-column>
|
|||
|
|
<el-table-column prop="keyContent" label="关键词"></el-table-column>
|
|||
|
|
<el-table-column prop="name" label="操作" width="120">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button @click.native.prevent="showDetail(scope.row, 'faultCase')" type="text" size="small">
|
|||
|
|
查看说明
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="故障信息" name="third">
|
|||
|
|
<el-table :data="faultList" style="width: 100%">
|
|||
|
|
<el-table-column type="index" width="50"></el-table-column>
|
|||
|
|
<el-table-column prop="number" label="故障编号"></el-table-column>
|
|||
|
|
<el-table-column prop="name" label="故障名称"></el-table-column>
|
|||
|
|
<el-table-column prop="happenTime" label="发生时间"></el-table-column>
|
|||
|
|
<el-table-column prop="name" label="操作" width="120">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button @click.native.prevent="showDetail(scope.row, 'fault')" type="text" size="small">
|
|||
|
|
查看说明
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="维修手册" name="second">
|
|||
|
|
<el-table :data="repairList" style="width: 100%">
|
|||
|
|
<el-table-column type="index" width="50"></el-table-column>
|
|||
|
|
<el-table-column prop="title" label="标题"></el-table-column>
|
|||
|
|
<el-table-column prop="reason" label="原因">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<label>{{ scope.row.reason.substring(0, 30) + (scope.row.reason.length > 30 ? '...' : '') }}</label>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="influence" label="影响">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<label>{{
|
|||
|
|
scope.row.influence.substring(0, 30) + (scope.row.influence.length > 30 ? '...' : '')
|
|||
|
|
}}</label>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="program" label="程序">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<label>{{
|
|||
|
|
scope.row.program.substring(0, 30) + (scope.row.program.length > 30 ? '...' : '')
|
|||
|
|
}}</label>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" label="操作" width="120">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button @click.native.prevent="showDetail(scope.row, 'repair')" type="text" size="small">
|
|||
|
|
查看说明
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<div class="graph-box">
|
|||
|
|
<graph ref="graph"></graph>
|
|||
|
|
</div>
|
|||
|
|
<div class="result-label">
|
|||
|
|
<label>风险预测指标：{{ riskNum }};</label><br/>
|
|||
|
|
<label>风险预测原因：{{ riskLabel }};</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
<el-dialog
|
|||
|
|
title="查看说明"
|
|||
|
|
:visible.sync="detailVisible"
|
|||
|
|
width="50%">
|
|||
|
|
<el-tabs>
|
|||
|
|
<el-tab-pane label="故障描述">
|
|||
|
|
{{ cmd.description }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="排故过程">
|
|||
|
|
{{ cmd.checkFaultProcess }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="故障分析">
|
|||
|
|
{{ cmd.faultAnalysis }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="故障总结">
|
|||
|
|
{{ cmd.faultSummary }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="经验教训">
|
|||
|
|
{{ cmd.experience }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="detailVisible = false">关 闭</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
<el-dialog
|
|||
|
|
title="查看说明"
|
|||
|
|
:visible.sync="repairDetailVisible"
|
|||
|
|
width="50%">
|
|||
|
|
<el-tabs>
|
|||
|
|
<el-tab-pane label="标题">
|
|||
|
|
{{ cmd.title }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="原因">
|
|||
|
|
{{ cmd.reason }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="影响">
|
|||
|
|
{{ cmd.influence }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="程序">
|
|||
|
|
{{ cmd.program }}
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="repairDetailVisible = false">关 闭</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
<el-dialog
|
|||
|
|
title="查看说明"
|
|||
|
|
:visible.sync="faultDetailVisible"
|
|||
|
|
width="50%">
|
|||
|
|
<el-descriptions :column="2">
|
|||
|
|
<el-descriptions-item label="故障名称">{{ cmd.name }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="环境特点">{{ cmd.enviChar }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障件编号">{{ cmd.partNumber }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障件型号">{{ cmd.partModel }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障件名称">{{ cmd.partName }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="发生时间">{{ cmd.happenTime }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障场所">{{ cmd.faultPlace }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="处理时间">{{ cmd.handleTime }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="处理方式">{{ cmd.handleStyle }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="处理措施">{{ cmd.faultHandleMeasures }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障原因">{{ cmd.faultReason }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="故障现象">{{ cmd.faultPhenomenon }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="排故进度">{{ cmd.checkFaultProgress }}</el-descriptions-item>
|
|||
|
|
</el-descriptions>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="faultDetailVisible = false">关 闭</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '@/utils/request614';
|
|||
|
|
import graph from "@/components/graph/Graph614";
|
|||
|
|
import coverImg from "@/assets/image/icon/tupian.png";
|
|||
|
|
import aImg from "@/assets/image/614/6a.jpg";
|
|||
|
|
import bImg from "@/assets/image/614/6b.jpg";
|
|||
|
|
import cImg from "@/assets/image/614/6c.jpg";
|
|||
|
|
import dImg from "@/assets/image/614/6d.jpg";
|
|||
|
|
import eImg from "@/assets/image/614/6e.jpg";
|
|||
|
|
import fImg from "@/assets/image/614/6f.jpg";
|
|||
|
|
import gImg from "@/assets/image/614/6g.jpg";
|
|||
|
|
|
|||
|
|
var _this;
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
'graph': graph,
|
|||
|
|
},
|
|||
|
|
name: "riskPrediction",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
keyword: '',
|
|||
|
|
activeTab: 'first',
|
|||
|
|
faultCaseList: [],
|
|||
|
|
repairList: [],
|
|||
|
|
faultList: [],
|
|||
|
|
cmd: {},
|
|||
|
|
riskNum: 0,
|
|||
|
|
riskLabel: '',
|
|||
|
|
faultDetailVisible: false,
|
|||
|
|
detailVisible: false,
|
|||
|
|
repairDetailVisible: false,
|
|||
|
|
coverImg: coverImg,
|
|||
|
|
srcList: [
|
|||
|
|
aImg, bImg, cImg, dImg, eImg, fImg, gImg
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
_this = this;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
calcRisk(faultNum, repairNum) {// 计算风险
|
|||
|
|
_this.riskNum = (Math.log(faultNum + 1) / Math.log(faultNum + 2 * (repairNum + 1))).toFixed(3);
|
|||
|
|
if (_this.riskNum <= 0.7) {
|
|||
|
|
_this.riskLabel = "风险等级低，故障关联少";
|
|||
|
|
} else if (_this.riskNum <= 0.9 && _this.riskNum > 0.7) {
|
|||
|
|
_this.riskLabel = "风险等级中，有一定数量故障关联和维修方法";
|
|||
|
|
} else if (_this.riskNum > 0.9) {
|
|||
|
|
_this.riskLabel = "风险等级高，故障关联多，维修方法内容不足";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
queryByKeyword() {
|
|||
|
|
if (_this.keyword.length === 0) {
|
|||
|
|
_this.$message.warning("请输入内容再进行检索");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let sum = 0;
|
|||
|
|
for (let charStr in _this.keyword) {
|
|||
|
|
sum += charStr.charCodeAt(0);
|
|||
|
|
}
|
|||
|
|
_this.rateNum = "9" + sum.toString().substring(0, 1) + "." + sum.toString().substring(1);
|
|||
|
|
let formData = new FormData();
|
|||
|
|
formData.append("keyword", _this.keyword);
|
|||
|
|
|
|||
|
|
_this.queryFaultCaseListTogether(formData);
|
|||
|
|
_this.queryFaultGraph(formData);
|
|||
|
|
},
|
|||
|
|
queryFaultCaseListTogether(formData) {
|
|||
|
|
request({
|
|||
|
|
url: '/fault_case/query_like_keyword_together',
|
|||
|
|
method: 'post',
|
|||
|
|
data: formData
|
|||
|
|
}).then(res => {
|
|||
|
|
let item = res.data;
|
|||
|
|
_this.faultCaseList = item.faultCaseList;
|
|||
|
|
_this.faultList = item.faultList;
|
|||
|
|
_this.repairList = item.repairList;
|
|||
|
|
|
|||
|
|
_this.calcRisk(_this.faultCaseList.length + _this.faultList.length, _this.repairList.length);
|
|||
|
|
_this.$message.success("检索成功");
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
queryFaultGraph(formData) {
|
|||
|
|
request({
|
|||
|
|
url: '/fault_case/query_for_neo4j',
|
|||
|
|
method: 'post',
|
|||
|
|
data: formData
|
|||
|
|
}).then(res => {
|
|||
|
|
res.data.nodes.forEach(node => {
|
|||
|
|
node._label = node.label;
|
|||
|
|
node.label = node.properties.name;
|
|||
|
|
node.id = node.id.toString();
|
|||
|
|
});
|
|||
|
|
res.data.relations.forEach(edge => {
|
|||
|
|
delete edge.id;
|
|||
|
|
edge.source = edge.source.toString();
|
|||
|
|
edge.target = edge.target.toString();
|
|||
|
|
edge.label = edge.properties ? edge.properties.name : '';
|
|||
|
|
if (edge.source === edge.target) {
|
|||
|
|
edge.type = 'loop';
|
|||
|
|
} else {
|
|||
|
|
delete edge.type;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
_this.$refs['graph'].initGraph({
|
|||
|
|
nodes: res.data.nodes,
|
|||
|
|
edges: res.data.relations
|
|||
|
|
}, true);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
showDetail(row, type) {
|
|||
|
|
_this.cmd = row;
|
|||
|
|
if (type === 'repair') {
|
|||
|
|
_this.repairDetailVisible = true;
|
|||
|
|
} else if (type === 'faultCase') {
|
|||
|
|
_this.detailVisible = true;
|
|||
|
|
} else if (type === "fault") {
|
|||
|
|
_this.faultDetailVisible = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.img-item {
|
|||
|
|
width: 95px;
|
|||
|
|
height: 25px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30px;
|
|||
|
|
top: 80px;
|
|||
|
|
}
|
|||
|
|
.result-label {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-content {
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
|
|||
|
|
.search-input-box {
|
|||
|
|
display: flex;
|
|||
|
|
width: 40%;
|
|||
|
|
margin-bottom: 1.5625vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawer-content {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.graph-box {
|
|||
|
|
border: 1px solid #dcdddf;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500px;
|
|||
|
|
background: rgba(0, 0, 0, 0.1);
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|