<!-- -->
|
<template>
|
<div style="height: 100%; background-color: transparent">
|
<titleBoxVue
|
style="background-color: #fff"
|
v-if="activeIndex !== 5"
|
:title="stepTitleName"
|
>
|
<template v-slot:right>
|
|
<fks-input v-if="activeIndex === 3||activeIndex === 2||activeIndex === 4"
|
style="width: 200px"
|
v-model="searchWord"
|
placeholder="请输入内容"
|
></fks-input>
|
<fks-button v-if="activeIndex === 3||activeIndex === 2||activeIndex === 4" style="margin-left: 10px" type="primary" icon="fks-icon-search" @click="query"
|
>搜索</fks-button
|
>
|
</template>
|
</titleBoxVue>
|
<div
|
:style="`width: 100%; height:${
|
activeIndex === 5 ? '100%' : 'calc(100% - 80px)'
|
} ; padding: ${activeIndex === 5 ? '0' : '10px 0'}`"
|
>
|
<div
|
v-show="activeIndex == 0"
|
style="width: 100%; height: 100%; display: flex"
|
>
|
<left-tree
|
:treedata="treeData"
|
titleName="泵站列表"
|
:defaultExpandedKeys="defaultExpandedKeys"
|
:currentNodeKey="currentNodeKey"
|
@click="handleNodeClick"
|
>
|
</left-tree>
|
<div class="boxright">
|
<titleBoxVue style="background-color: #fff" :title="titleName">
|
<template v-slot:right>
|
<div style="text-align: left; margin-left: 30px">
|
<fks-input
|
style="width: 200px"
|
v-model="searchWord"
|
placeholder="请输入内容"
|
></fks-input>
|
<fks-button
|
style="margin-left: 10px"
|
type="primary"
|
icon="fks-icon-search"
|
@click="query"
|
>搜索</fks-button
|
>
|
</div>
|
</template>
|
</titleBoxVue>
|
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData"
|
style="width: 100%; margin-top: 10px; height: calc(100% - 50px)"
|
row-key="id"
|
@getExpandNode="getExpand"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
>
|
<fks-table-column prop="name" label="名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="type" label="类别" width="180">
|
</fks-table-column>
|
<fks-table-column prop="code" label="规格" width="180">
|
</fks-table-column>
|
<fks-table-column prop="No" label="型号" width="180">
|
</fks-table-column>
|
<fks-table-column prop="status" label="状态" width="180">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
<div
|
v-show="activeIndex === 1"
|
style="width: 100%; height: 100%; display: flex"
|
>
|
<left-tree
|
:treedata="treeData1"
|
titleName="故障分组列表"
|
:defaultExpandedKeys="defaultExpandedKeys"
|
:currentNodeKey="currentNodeKey"
|
@click="handleNodeClick"
|
>
|
</left-tree>
|
<div class="boxright">
|
<titleBoxVue style="background-color: #fff" :title="titleName">
|
<template v-slot:right>
|
<div style="text-align: left; margin-left: 30px">
|
<fks-input
|
style="width: 200px"
|
v-model="searchWord"
|
placeholder="请输入内容"
|
></fks-input>
|
<fks-button
|
style="margin-left: 10px"
|
type="primary"
|
@click="query"
|
icon="fks-icon-search"
|
>搜索</fks-button
|
>
|
</div>
|
</template>
|
</titleBoxVue>
|
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData1"
|
style="width: 100%; margin-top: 10px; height: calc(100% - 50px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="故障名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="code" label="故障编码" width="180">
|
</fks-table-column>
|
<fks-table-column prop="labelName" label="标签名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
|
<div v-show="activeIndex === 2" style="width: 100%; height: 100%">
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData2"
|
style="width: 100%; height: calc(100% - 0px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="版本名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="startDate" label="发布时间" width="180">
|
</fks-table-column>
|
<fks-table-column prop="endDate" label="失效时间" width="180">
|
</fks-table-column>
|
<fks-table-column prop="labelName" label="标签名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
</fks-table>
|
</div>
|
<div v-show="activeIndex === 3" style="width: 100%; height: 100%">
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData3"
|
style="width: 100%; height: calc(100% - 0px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="模型名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="startDate" label="创建时间" width="180">
|
</fks-table-column>
|
|
<fks-table-column prop="userName" label="创建人" width="180">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
</fks-table>
|
</div>
|
|
<div v-if="activeIndex === 4" style="width: 100%; height: 100%">
|
|
<div style="background-color: #fff; ">
|
<titleBoxVue title="故障树"> </titleBoxVue>
|
<div style="width: 100%; height: 300px">
|
<flow-view></flow-view>
|
</div>
|
</div>
|
<div style="background-color: #fff; margin-top: 10px;height: calc(100% - 350px);overflow: auto;">
|
<titleBoxVue title="诊断项"> </titleBoxVue>
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData4"
|
style="width: 100%;"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="故障事件" width="180">
|
</fks-table-column>
|
<fks-table-column prop="zhibiao" label="指标" width="180">
|
</fks-table-column>
|
|
<fks-table-column prop="fangfa" label="计算方法" width="180">
|
</fks-table-column>
|
<fks-table-column prop="canshu" label="判断参数" width="320">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
<fks-table-column prop="gailv" label="发生概率" width="100">
|
</fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
|
<div
|
v-if="activeIndex === 5"
|
style="width: 100%; height: 100%; "
|
>
|
<titleBoxVue style="background-color: #fff" title="故障诊断报告">
|
<template v-slot:right>
|
<fks-button
|
style="margin-left: 10px"
|
type="primary"
|
@click="gobackActiveIndex"
|
>完成</fks-button
|
>
|
</template>
|
</titleBoxVue>
|
|
<div class="baogaotopbox">
|
<div class="baogaotopboxleft">
|
<titleBoxVue title="故障诊断报告概况"> </titleBoxVue>
|
|
<fks-form
|
style="width: 100%; height: calc(100% - 40px)"
|
:model="FaultReportForm"
|
label-width="80px"
|
>
|
<fks-form-item label="名称">
|
<fks-input
|
v-model="FaultReportForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
|
<fks-row :gutter="10">
|
<fks-col :span="12">
|
<fks-form-item label="泵站">
|
<fks-input
|
v-model="FaultReportForm.station"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
<fks-col :span="12">
|
<fks-form-item label="设备">
|
<fks-input
|
v-model="FaultReportForm.product"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
</fks-row>
|
<fks-row :gutter="10">
|
<fks-col :span="12">
|
<fks-form-item label="故障">
|
<fks-input
|
v-model="FaultReportForm.fault"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
<fks-col :span="12">
|
<fks-form-item label="诊断模型">
|
<fks-input
|
v-model="FaultReportForm.model"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
</fks-row>
|
<fks-row :gutter="10">
|
<fks-col :span="12">
|
<fks-form-item label="诊断人">
|
<fks-input
|
v-model="FaultReportForm.username"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
<fks-col :span="12">
|
<fks-form-item label="诊断时间">
|
<fks-input
|
v-model="FaultReportForm.date"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
</fks-col>
|
</fks-row>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="FaultReportForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
</div>
|
<div class="baogaotopboxright">
|
<titleBoxVue title="故障诊断结果"> </titleBoxVue>
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData5"
|
style="width: 100%; height: calc(100% - 40px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="最小割集">
|
</fks-table-column>
|
<fks-table-column prop="zhibiao" label="发生原因">
|
</fks-table-column>
|
<fks-table-column prop="fangfa" label="处理建议">
|
</fks-table-column>
|
<fks-table-column prop="gailv" label="发生概率">
|
</fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
<div class="baogaobottombox">
|
<div class="baogaobottomboxleft">
|
<titleBoxVue title="故障树底部重要事件"> </titleBoxVue>
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData6"
|
style="width: 100%; height: calc(100% - 40px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="底事件"> </fks-table-column>
|
<fks-table-column prop="gailv" label="发生概率">
|
</fks-table-column>
|
</fks-table>
|
</div>
|
<div class="baogaobottomboxright">
|
<titleBoxVue title="诊断项"> </titleBoxVue>
|
<fks-table
|
stripe
|
ref="table"
|
:data.sync="tableData4"
|
style="width: 100%; height: calc(100% - 40px)"
|
row-key="id"
|
>
|
<fks-table-column prop="name" label="故障事件" width="120">
|
</fks-table-column>
|
<fks-table-column prop="zhibiao" label="指标" width="100">
|
</fks-table-column>
|
|
<fks-table-column prop="fangfa" label="计算方法" width="120">
|
</fks-table-column>
|
<fks-table-column prop="canshu" label="判断参数" width="320">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
<fks-table-column prop="gailv" label="发生概率" width="100">
|
</fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div
|
v-if="activeIndex !== 5"
|
style="text-align: right; padding: 0 10px; background-color: #fff"
|
>
|
<fks-button style="margin-left: 10px" type="primary" @click="next">{{
|
nextName
|
}}</fks-button>
|
</div>
|
|
<fks-dialog
|
title="生成故障诊断报告"
|
width="400px"
|
:visible.sync="finishFaultReportVisible"
|
>
|
<fks-form :model="finishFaultReportForm" label-width="80px">
|
<fks-form-item label="名称">
|
<fks-input
|
v-model="finishFaultReportForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="finishFaultReportForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
<div slot="footer" class="dialog-footer">
|
<fks-button @click="finishFaultReportVisible = false">取 消</fks-button>
|
<fks-button type="primary" @click="finishFaultReport">确 定</fks-button>
|
</div>
|
</fks-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getDay } from "@/utils/istation/common";
|
import titleBoxVue from "@/views/main/components/titleBox.vue";
|
import leftTree from "@/views/main/components/leftTreeByData.vue";
|
import FlowView from "@/views/main/istation/viewFlowX6.vue";
|
|
const tableData = [
|
{
|
id: 1,
|
name: "1#机泵",
|
type: "机泵",
|
No: "",
|
code: "",
|
note: "",
|
status: "在用",
|
children: [
|
{
|
id: 11,
|
name: "1#泵",
|
type: "泵",
|
No: "",
|
code: "",
|
note: "",
|
status: "在用",
|
},
|
{
|
id: 12,
|
name: "1#电机",
|
type: "电机",
|
No: "",
|
code: "",
|
note: "",
|
status: "在用",
|
},
|
],
|
},
|
];
|
const tableData1 = [
|
{
|
name: "水泵无法启动",
|
code: "FAULT_PUMP_001",
|
labelName: "",
|
note: "",
|
},
|
{
|
name: "水泵出口压力过低",
|
code: "FAULT_PUMP_002",
|
labelName: "",
|
note: "",
|
},
|
{
|
name: "水泵不吸水",
|
code: "FAULT_PUMP_003",
|
labelName: "",
|
note: "",
|
},
|
{
|
name: "轴承过热",
|
code: "FAULT_PUMP_004",
|
labelName: "",
|
note: "",
|
},
|
];
|
const tableData2 = [
|
{
|
name: "版本01",
|
startDate: "2023-1-1",
|
endDate: "",
|
labelName: "",
|
note: "",
|
},
|
{
|
name: "版本02",
|
startDate: "2023-1-1",
|
endDate: "",
|
labelName: "",
|
note: "",
|
},
|
];
|
|
const tableData3 = [
|
{
|
name: "模型01",
|
startDate: "2023-1-1",
|
userName: "管理员",
|
note: "",
|
},
|
{
|
name: "模型02",
|
startDate: "2023-1-1",
|
endDate: "",
|
userName: "管理员",
|
note: "",
|
},
|
];
|
|
const tableData4 = [
|
{
|
name: "弹簧力不足",
|
zhibiao: "压力",
|
fangfa: "自动",
|
canshu: "1.<0.2MPa=0.3;2.<0.1=0.7",
|
gailv: 0.3,
|
note: "",
|
},
|
{
|
name: "接触面有异物",
|
zhibiao: "表面光滑度",
|
fangfa: "人工",
|
canshu: "1.有较少杂物=0.1；2.有较多杂物=0.5",
|
gailv: 0.6,
|
note: "",
|
},
|
];
|
const tableData5 = [
|
{
|
name: "弹簧压力、表面光滑度",
|
zhibiao: "压力不足，有异物",
|
fangfa: "更换弹簧，清理异常",
|
gailv: 0.6,
|
},
|
{
|
name: "轴承故障、绕组破损",
|
zhibiao: "轴承、绕组出现问题",
|
fangfa: "更换轴承、绕组",
|
gailv: 0.5,
|
},
|
];
|
const tableData6 = [
|
{
|
name: "弹簧力不足",
|
gailv: 0.3,
|
},
|
{
|
name: "表面有异物",
|
gailv: 0.5,
|
},
|
];
|
|
const treeData = [
|
{
|
label: "金刚沱泵站",
|
id: "s1",
|
},
|
{
|
label: "嘉陵江草街泵站",
|
id: "s2",
|
},
|
{
|
label: "江津德感加压站",
|
id: "s3",
|
},
|
{
|
label: "永川临江加压站",
|
id: "s4",
|
},
|
];
|
const treeData1 = [
|
{
|
label: "振动故障",
|
id: "s1",
|
},
|
{
|
label: "噪音故障",
|
id: "s2",
|
},
|
{
|
label: "运行故障",
|
id: "s3",
|
},
|
];
|
export default {
|
name: "vibrationDemo",
|
components: {
|
titleBoxVue,
|
leftTree,
|
FlowView,
|
},
|
data() {
|
return {
|
titleName: "金刚沱泵站-设备列表",
|
searchWord: "",
|
nextName: "下一步",
|
tableData: tableData,
|
tableData1: tableData1,
|
tableData2: tableData2,
|
tableData3: tableData3,
|
tableData4: tableData4,
|
tableData5: tableData5,
|
tableData6: tableData6,
|
multipleSelection: [],
|
activeIndex: 0,
|
treeData: treeData,
|
treeData1: treeData1,
|
currentNodeKey: "s1",
|
defaultExpandedKeys: ["s1"],
|
finishFaultReportVisible: false,
|
finishFaultReportForm: {
|
name: "",
|
note: "",
|
},
|
FaultReportForm: {
|
name: "测试01",
|
station: "测试01",
|
product: "1#泵",
|
fault: "水泵无法启动",
|
model: "模型01",
|
username: "管理员",
|
date: "2023-1-1",
|
note: "",
|
},
|
};
|
},
|
created() {},
|
mounted() {},
|
computed: {
|
stepTitleName() {
|
let name = "";
|
switch (this.activeIndex) {
|
case 0:
|
name = "选择设备";
|
break;
|
case 1:
|
name = "选择故障树";
|
break;
|
case 2:
|
name = "选择故障树版本";
|
break;
|
case 3:
|
name = "选择故障诊断模型";
|
break;
|
case 4:
|
name = "故障诊断";
|
break;
|
case 5:
|
name = "生成诊断结果";
|
break;
|
case 6:
|
name = "完成";
|
break;
|
}
|
return name;
|
},
|
},
|
watch: {
|
activeIndex(val) {
|
let name = "";
|
let nextName = "下一步";
|
switch (val) {
|
case 0:
|
name = "金刚沱泵站-设备列表";
|
break;
|
case 1:
|
name = "振动故障-故障列表";
|
break;
|
case 2:
|
name = "";
|
break;
|
case 3:
|
name = "选择故障诊断模型";
|
break;
|
case 4:
|
name = "故障诊断";
|
nextName = "生成诊断报告";
|
|
break;
|
case 5:
|
name = "生成诊断结果";
|
break;
|
case 6:
|
name = "完成";
|
break;
|
}
|
this.titleName = name;
|
this.nextName = nextName;
|
},
|
},
|
methods: {
|
gobackActiveIndex() {
|
this.activeIndex = 0;
|
},
|
finishFaultReport() {
|
this.finishFaultReportVisible = false;
|
this.activeIndex = 5;
|
},
|
next() {
|
if (this.activeIndex === 4) {
|
this.finishFaultReportVisible = true;
|
return;
|
}
|
this.activeIndex++;
|
// if (this.activeIndex === 5) {
|
// this.activeIndex = 0;
|
// }
|
},
|
query() {
|
console.log(this.searchWord, 105);
|
},
|
selectchange(value) {
|
console.log(value, 186);
|
},
|
handleNodeClick(data) {
|
console.log(data, 74);
|
|
this.titleName = data.label + "-设备列表";
|
if (this.activeIndex === 1) {
|
this.titleName = data.label + "-故障列表";
|
}
|
this.getTableData();
|
},
|
|
getTableData(id) {},
|
getExpand(node, id) {
|
console.log(node, id, 222);
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
addFaultModel() {
|
this.addFaultModelFormVisible = true;
|
},
|
addFaultItem() {
|
this.addFaultItemFormVisible = true;
|
},
|
editFaultModel(row) {
|
// console.log(data,node,358)
|
this.finishFaultReportVisible = true;
|
this.finishFaultReportForm.name = row.name;
|
this.finishFaultReportForm.note = row.note;
|
},
|
editFaultItem(row) {
|
this.editFaultItemFormVisible = true;
|
this.editFaultItemForm.name = row.name;
|
this.editFaultItemForm.zhibiao = row.zhibiao;
|
this.editFaultItemForm.fangfa = row.fangfa;
|
this.editFaultItemForm.canshu = row.canshu;
|
this.editFaultItemForm.note = row.note;
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.boxright {
|
flex: 1;
|
height: 100%;
|
overflow: auto;
|
background: transparent;
|
margin-left: 20px;
|
}
|
|
.titleSlotRight {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
.faultTopBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.faultTopBox .faultTopBoxLeft {
|
width: calc(40% - 20px);
|
height: 300px;
|
padding: 10px;
|
}
|
.faultTopBox .faultTopBoxRight {
|
width: calc(60% - 20px);
|
height: 300px;
|
padding: 10px;
|
}
|
.faultBottomBox {
|
height: calc(100% - 340px);
|
}
|
.baogaotopbox,
|
.baogaobottombox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: calc(50% - 30px);
|
margin-top: 10px;
|
}
|
.baogaotopboxleft,
|
.baogaobottomboxleft {
|
width: 40%;
|
height: 100%;
|
overflow: auto;
|
background-color: #fff;
|
}
|
.baogaotopboxright,
|
.baogaobottomboxright {
|
width: calc(60% - 10px);
|
height: 100%;
|
overflow: auto;
|
margin-left: 10px;
|
background-color: #fff;
|
}
|
</style>
|
