<!-- -->
|
<template>
|
<div style="width: 100%; height: 100%; display: flex">
|
<left-tree
|
:treedata="treeData"
|
:defaultSelectValue="defaultSelectValue"
|
:selectData="selectData"
|
:selectIsShow="true"
|
:defaultExpandedKeys="defaultExpandedKeys"
|
:currentNodeKey="currentNodeKey"
|
@selectchange="selectchange"
|
@click="handleNodeClick"
|
>
|
</left-tree>
|
<div class="boxright">
|
<titleBoxVue style="background-color:#fff;" :title="titleName"> </titleBoxVue>
|
|
<div class="faultTopBox">
|
<div class="faultTopBoxLeft">
|
<titleBoxVue title="故障树图"> </titleBoxVue>
|
<div style="height: calc(100% - 40px)">
|
<flow-view></flow-view>
|
</div>
|
</div>
|
<div class="faultTopBoxRight">
|
<titleBoxVue title="故障诊断模型">
|
<template v-slot:right>
|
<div class="titleSlotRight">
|
<fks-button icon="fks-icon-plus" type="primary" @click="addFaultModel"
|
>添加</fks-button
|
>
|
</div>
|
</template>
|
</titleBoxVue>
|
<div style="height: calc(100% - 40px)">
|
<fks-table
|
ref="multipleTable"
|
id="out-table"
|
:data="tableData"
|
stripe
|
tooltip-effect="dark"
|
@selection-change="handleSelectionChange"
|
style="width: 100%"
|
>
|
<fks-table-column type="selection"></fks-table-column>
|
<fks-table-column prop="name" label="名称" width="180">
|
</fks-table-column>
|
<fks-table-column prop="note" label="说明"> </fks-table-column>
|
<fks-table-column label="操作" width="100">
|
<template slot-scope="scope">
|
<fks-button
|
icon="fks-icon-edit"
|
@click="editFaultModel(scope.row)"
|
type="text"
|
size="small"
|
>编辑</fks-button
|
>
|
</template>
|
</fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
</div>
|
<div class="faultBottomBox">
|
<titleBoxVue title="模型01-诊断项">
|
<template v-slot:right>
|
<div class="titleSlotRight">
|
<fks-button icon="fks-icon-plus" type="primary" @click="addFaultItem"
|
>添加</fks-button
|
>
|
</div>
|
</template>
|
</titleBoxVue>
|
<div style="height: calc(100% - 40px)">
|
<fks-table
|
ref="multipleTable"
|
id="out-table"
|
:data="tableData2"
|
stripe
|
tooltip-effect="dark"
|
style="width: 100%;height: 100%;"
|
>
|
<fks-table-column prop="name" label="故障事件" width="140">
|
</fks-table-column>
|
<fks-table-column prop="zhibiao" label="指标" width="120">
|
</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 label="操作" width="70">
|
<template slot-scope="scope">
|
<fks-button
|
icon="fks-icon-edit"
|
@click="editFaultItem(scope.row)"
|
type="text"
|
size="small"
|
>编辑</fks-button
|
>
|
</template>
|
</fks-table-column>
|
</fks-table>
|
</div>
|
</div>
|
|
<fks-dialog
|
title="添加故障诊断项"
|
width="400px"
|
:visible.sync="addFaultItemFormVisible"
|
>
|
<fks-form :model="addFaultItemForm" label-width="80px">
|
<fks-form-item label="故障事件">
|
<fks-input
|
v-model="addFaultItemForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="指标">
|
<fks-input
|
v-model="addFaultItemForm.zhibiao"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="计算方法">
|
<fks-input
|
v-model="addFaultItemForm.fangfa"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="判断参数">
|
<fks-input
|
v-model="addFaultItemForm.canshu"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="addFaultItemForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
<div slot="footer" class="dialog-footer">
|
<fks-button @click="addFaultItemFormVisible = false"
|
>取 消</fks-button
|
>
|
<fks-button type="primary" @click="addFaultItemFormVisible = false"
|
>确 定</fks-button
|
>
|
</div>
|
</fks-dialog>
|
|
<fks-dialog
|
title="编辑故障诊断项"
|
width="400px"
|
:visible.sync="editFaultItemFormVisible"
|
>
|
<fks-form :model="editFaultItemForm" label-width="80px">
|
<fks-form-item label="故障事件">
|
<fks-input
|
v-model="editFaultItemForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="指标">
|
<fks-input
|
v-model="editFaultItemForm.zhibiao"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="计算方法">
|
<fks-input
|
v-model="editFaultItemForm.fangfa"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="判断参数">
|
<fks-input
|
v-model="editFaultItemForm.canshu"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="editFaultItemForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
<div slot="footer" class="dialog-footer">
|
<fks-button @click="editFaultItemFormVisible = false"
|
>取 消</fks-button
|
>
|
<fks-button type="primary" @click="editFaultItemFormVisible = false"
|
>确 定</fks-button
|
>
|
</div>
|
</fks-dialog>
|
|
<fks-dialog
|
title="添加故障诊断模型"
|
width="400px"
|
:visible.sync="addFaultModelFormVisible"
|
>
|
<fks-form :model="addFaultGroupForm" label-width="80px">
|
<fks-form-item label="名称">
|
<fks-input
|
v-model="addFaultGroupForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="addFaultGroupForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
<div slot="footer" class="dialog-footer">
|
<fks-button @click="addFaultModelFormVisible = false"
|
>取 消</fks-button
|
>
|
<fks-button type="primary" @click="addFaultModelFormVisible = false"
|
>确 定</fks-button
|
>
|
</div>
|
</fks-dialog>
|
<fks-dialog
|
title="编辑故障诊断模型"
|
width="400px"
|
:visible.sync="editFaultModelFormVisible"
|
>
|
<fks-form :model="editFaultGroupForm" label-width="80px">
|
<fks-form-item label="名称">
|
<fks-input
|
v-model="editFaultGroupForm.name"
|
autocomplete="off"
|
></fks-input>
|
</fks-form-item>
|
<fks-form-item label="说明">
|
<fks-input
|
type="textarea"
|
:rows="3"
|
autocomplete="off"
|
v-model="editFaultGroupForm.note"
|
>
|
</fks-input>
|
</fks-form-item>
|
</fks-form>
|
<div slot="footer" class="dialog-footer">
|
<fks-button @click="editFaultModelFormVisible = false"
|
>取 消</fks-button
|
>
|
<fks-button type="primary" @click="editFaultModelFormVisible = false"
|
>确 定</fks-button
|
>
|
</div>
|
</fks-dialog>
|
</div>
|
</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 = [
|
{
|
name: "模型01",
|
note: "",
|
},
|
{
|
name: "",
|
note: "",
|
},
|
];
|
|
const tableData2 = [
|
{
|
name: "弹簧力不足",
|
zhibiao: "压力",
|
fangfa: "自动",
|
canshu: "1.<0.2MPa=0.3;2.<0.1=0.7",
|
note: "",
|
},
|
{
|
name: "接触面有异物",
|
zhibiao: "表面光滑度",
|
fangfa: "人工",
|
canshu: "1.有较少杂物=0.1；2.有较多杂物=0.5",
|
note: "",
|
},
|
];
|
|
const treeData = [
|
{
|
label: "泵",
|
id: "s1",
|
children: [
|
{
|
id: "1",
|
label: "振动故障",
|
},
|
{
|
id: "2",
|
label: "噪音故障",
|
},
|
{
|
id: "3",
|
label: "运行故障",
|
children: [
|
{
|
id: "3.1",
|
label: "水泵无法启动",
|
},
|
{
|
id: "3.2",
|
label: "水泵出口压力过低",
|
children: [
|
{
|
id: "3.2.1",
|
label: "版本01",
|
},
|
{
|
id: "3.2.2",
|
label: "版本02",
|
},
|
],
|
},
|
{
|
id: "3.3",
|
label: "水泵不吸水",
|
},
|
{
|
id: "3.4",
|
label: "轴承过热",
|
},
|
],
|
},
|
],
|
},
|
];
|
export default {
|
name: "vibrationDemo",
|
components: {
|
titleBoxVue,
|
leftTree,
|
FlowView,
|
},
|
data() {
|
return {
|
titleName: "版本01",
|
tableData: tableData,
|
tableData2: tableData2,
|
multipleSelection: [],
|
addFaultItemFormVisible: false,
|
editFaultItemFormVisible: false,
|
addFaultModelFormVisible: false,
|
editFaultModelFormVisible: false,
|
treeData: treeData,
|
currentNodeKey: "3.2.1",
|
defaultExpandedKeys: ["s1", "3", "3.2"],
|
defaultSelectValue: "1",
|
selectData: [
|
{
|
value: "1",
|
label: "泵",
|
},
|
{
|
value: "2",
|
label: "电机",
|
},
|
],
|
|
addFaultItemForm: {
|
name: "",
|
zhibiao: "",
|
fangfa: "",
|
canshu: "",
|
note: "",
|
},
|
editFaultItemForm: {
|
name: "",
|
zhibiao: "",
|
fangfa: "",
|
canshu: "",
|
note: "",
|
},
|
addFaultGroupForm: {
|
name: "",
|
note: "",
|
},
|
editFaultGroupForm: {
|
name: "",
|
note: "",
|
},
|
};
|
},
|
created() {},
|
mounted() {},
|
computed: {},
|
watch: {},
|
methods: {
|
selectchange(value) {
|
console.log(value, 186);
|
},
|
handleNodeClick(data) {
|
console.log(data, 74);
|
this.titleName = data.label;
|
this.getTableData();
|
},
|
|
getTableData(id) {},
|
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
addFaultModel() {
|
this.addFaultModelFormVisible = true;
|
},
|
addFaultItem() {
|
this.addFaultItemFormVisible = true;
|
},
|
editFaultModel(row) {
|
// console.log(data,node,358)
|
this.editFaultModelFormVisible = true;
|
this.editFaultGroupForm.name = row.name;
|
this.editFaultGroupForm.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;
|
margin-top: 10px;
|
}
|
.faultTopBox .faultTopBoxLeft {
|
width: 40%;
|
height: 300px;
|
background-color: #fff;
|
}
|
.faultTopBox .faultTopBoxRight {
|
width:calc(60% - 10px);
|
height: 300px;
|
margin-left: 10px;
|
background-color: #fff;
|
}
|
.faultBottomBox {
|
height: calc(100% - 360px);
|
margin-top: 10px;
|
background-color: #fff;
|
}
|
</style>
|
