Skip to content

Z
zghywpc-vue
Commit a665e38f authored by 李苏's avatar 李苏 💬
Browse files
Options

调整

parent 5711ee14
Show whitespace changes
Inline Side-by-side
Showing with 829 additions and 619 deletions
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ a665e38f
......@@ -2,7 +2,7 @@
* @Description:
* @Author: lisu lisu@gavelinfo.com
* @LastEditors: lisu lisu@gavelinfo.com
* @LastEditTime: 2024-09-11 17:27:35
* @LastEditTime: 2024-09-18 09:42:40
* @FilePath: /zghywpc-vue/src/views/yhlywsytst/yhlywsytst/index.vue
-->
<template>
......@@ -61,58 +61,17 @@
<el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div>
</div> -->
<div v-show="selectedModel.name" class="leftOpt" style="padding-top: 30px;">
<div class="leftOpt" style="padding-top: 30px;">
<div class="sbxxTitle" style="position: absolute;top: 5px;font-weight: 800;">
{{'设备:'+selectedModel.name}}
</div>
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>设备检修</span>
<img :src="ksh33" alt="">
</div>
<div v-show="!selectedModel.name" class="mkbody data-box1 flex-center nosbxxTitle">
请选中设备进行查询
</div>
<div v-show="selectedModel.name" class="mkbody data-box1">
<!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}}
</div> -->
<div class="com-count-body" style=" height:calc(100% - 0px)">
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div style="width: 130px;" class="text-center ">
检修时间
</div>
<div style="width: calc(100% - 130px);" class="text-center ">
检修内容
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="jxlistData" class="lbbody">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in jxlistData">
<div style="color: #68D8FE ;width: 120px;"
v-text="$moment(item.jxsj).format('YYYY-MM-DD HH:mm:ss') "></div>
<div style="color: #68D8FE ;width: calc(100% - 120px);text-align: left;padding-left: 5px;"
v-text="item.jxnr"></div>
</div>
</div>
</ScrollSeamless>
</div>
</div>
{{'设备:'+(selectedModel.name||'未选中')}}
</div>
</div>
<!-- 标高信息-->
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>异物信息</span>
<span>零部件数据</span>
<img :src="ksh33" alt="">
</div>
<div v-show="!selectedModel.name" class="mkbody data-box1 flex-center nosbxxTitle">
......@@ -127,44 +86,39 @@
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
名称
编码
</div>
<div class="flex1 text-center ">
规格
名称
</div>
<div class="flex1 text-center ">
尺寸
机组
</div>
<div class="flex1 text-center ">
材质
规格
</div>
<div class="flex1 text-center ">
标高
管径
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="ywlistData" class="lbbody"
<ScrollSeamless :class-option="optionSingleHeight" :data="lbjlistData" class="lbbody"
style="overflow: hidden;">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in ywlistData">
<div class="flex1"
style="color: #68D8FE;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ;"
v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.ggxh"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cc"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.bg"></div>
v-for="item in lbjlistData">
<div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gj"></div>
</div>
</div>
</ScrollSeamless>
</div>
</div>
</div>
</div>
<!-- 标高信息-->
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
......@@ -222,12 +176,54 @@
</div>
</div>
<!-- 标高信息-->
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>零部件数据</span>
<span>设备检修</span>
<img :src="ksh33" alt="">
</div>
<div v-show="!selectedModel.name" class="mkbody data-box1 flex-center nosbxxTitle">
请选中设备进行查询
</div>
<div v-show="selectedModel.name" class="mkbody data-box1">
<!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}}
</div> -->
<div class="com-count-body" style=" height:calc(100% - 0px)">
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div style="width: 130px;" class="text-center ">
检修时间
</div>
<div style="width: calc(100% - 130px);" class="text-center ">
检修内容
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="jxlistData" class="lbbody">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in jxlistData">
<div style="color: #68D8FE ;width: 120px;"
v-text="$moment(item.jxsj).format('YYYY-MM-DD HH:mm:ss') "></div>
<div style="color: #68D8FE ;width: calc(100% - 120px);text-align: left;padding-left: 5px;"
v-text="item.jxnr"></div>
</div>
</div>
</ScrollSeamless>
</div>
</div>
</div>
</div>
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>异物信息</span>
<img :src="ksh33" alt="">
</div>
<div v-show="!selectedModel.name" class="mkbody data-box1 flex-center nosbxxTitle">
......@@ -242,31 +238,33 @@
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
编码
名称
</div>
<div class="flex1 text-center ">
名称
规格
</div>
<div class="flex1 text-center ">
机组
尺寸
</div>
<div class="flex1 text-center ">
规格
材质
</div>
<div class="flex1 text-center ">
管径
标高
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="lbjlistData" class="lbbody"
<ScrollSeamless :class-option="optionSingleHeight" :data="ywlistData" class="lbbody"
style="overflow: hidden;">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in lbjlistData">
<div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gj"></div>
v-for="item in ywlistData">
<div class="flex1"
style="color: #68D8FE;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ;"
v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.ggxh"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cc"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.cz"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.bg"></div>
</div>
</div>
</ScrollSeamless>
......@@ -274,9 +272,7 @@
</div>
</div>
</div>
</div>
<!-- 溯源排查-->
<div class="sypc">
<div class="full data-box1" style="position: relative;">
......@@ -289,31 +285,90 @@
<span>溯源排查</span>
<b class="data-title-right">]</b>
</div>
<div class="full flex " style="height: calc(100% - 14px);padding-top: 12px;">
<div class="full " style="height: calc(100% - 14px);padding-top: 12px;">
<el-row :gutter="20" class="search-row-1" style="width: 100%;">
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">机组:</span>
<el-input v-model="queryParams.jzbm"></el-input>
<span class="search-span">功能位置:</span>
<el-input v-model="sypcQueryParams.sbxxCode"></el-input>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">最大管径:</span>
<el-input v-model="sypcQueryParams.zdgj"></el-input>
</div>
</el-col>
<el-col :span="8" class="search-col flex-center">
<div class="search-item">
<span class="search-span">近期引入:</span>
<RelSelect placeholder='' style="width: 100%;" :optionsData="[
{id:'Y',name:'是'},
{id:'N',name:'否'}
]" filterable clearable :match="{value:'id',label:'name'}" v-model='sypcQueryParams.jqyr'></RelSelect>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="search-row-1" style="width: 100%;">
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">规格:</span>
<RelSelect placeholder='' style="width: 100%;" src='sbgl/usbxx/init/ggxh ' filterable clearable
:match="{value:'id',label:'name'}" v-model='sypcQueryParams.ggxh'></RelSelect>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">材质:</span>
<el-input v-model="sypcQueryParams.cz"></el-input>
</div>
</el-col>
<el-col :span="8" class="search-col flex-center">
<div class="search-item">
<span class="search-span">流动特性:</span>
<RelSelect placeholder='' style="width: 100%;" src='ywxxgl/uywxx/init/ldtx ' filterable clearable
:match="{value:'id',label:'name'}" v-model='sypcQueryParams.ldtx'></RelSelect>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="search-row-1" style="width: 100%;">
<el-col :span="8" class="search-col">
<!-- <div class="search-item">
<span class="search-span">机组:</span>
<el-input v-model="queryParams.jzbm"></el-input>
</div> -->
</el-col>
<el-col :span="8" class="search-col">
<!-- <div class="search-item">
<span class="search-span">状态:</span>
<RelSelect placeholder='' style="width: 100%;" src='sbgl/usbxx/init/zt ' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.kshZt'></RelSelect>
</div>
</div> -->
<!-- <div class="search-item">
<span class="search-span">异物:</span>
<el-input v-model="sypcQueryParams.ywName"></el-input>
</div> -->
</el-col>
<el-col :span="8" class="search-col flex-center">
<el-col :span="14" class="search-col flex-center">
<el-button v-show='mxbshow'
style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;" size="mini"
@click="xsqbmx()" type="primary">显示全部模型</el-button>
</el-col>
<el-col :span="10" class="search-col flex-center">
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="sypc()" type="primary">溯源排查</el-button>
</el-col>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 设备查询-->
<div class="sbcx">
<!-- <div class="sbcx">
<div class="full data-box1" style="position: relative;">
<i class="topL"></i>
<i class="topR"></i>
......@@ -335,13 +390,12 @@
<el-col :span="12" class="search-col flex-center">
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="sbcx()" type="primary">设备查询</el-button>
<!-- 暂无信息-->
<span v-if="sbcxwcxdxx" style="color: red;font-size: 12px;padding-left: 10px;">{{sbcxwcxdxxText}}</span>
</el-col>
</el-row>
</div>
</div>
</div>
</div> -->
<!-- 溯源标记列表-->
<div v-show="sylbshow" class="sylb">
<div class="full data-box1" style="position: relative;">
......@@ -368,8 +422,8 @@
</div>
</div>
</div>
<!-- 设备流向-->
<div class="sblx">
<!-- <div class="sblx">
<div class="full data-box1" style="position: relative;">
<i class="topL"></i>
<i class="topR"></i>
......@@ -391,7 +445,7 @@
<el-col :span="12" class="search-col flex-center">
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="sblxcx()" type="primary">流向查询</el-button>
<!-- 暂无信息-->
<span v-if="sblxcxwcxdxx"
style="color: red;font-size: 12px;padding-left: 10px;">{{sblxcxwcxdxxText}}</span>
</el-col>
......@@ -422,7 +476,7 @@
</div>
</div>
</div> -->
<!-- 右侧操作边框-->
......@@ -448,7 +502,7 @@
this.loadAll()
this.tdClick()
this.tdblClick()
this.getData()
})
......@@ -469,6 +523,7 @@
},
data() {
return {
mxbshow: false,
sblxCode: '',
sblxcxwcxdxx: false,
sblxcxwcxdxxText: '',
......@@ -485,6 +540,17 @@
jzbm: '',
kshZt: ''
},
sypcQueryParams: {
sbxxCode: '',
jqyr: '',
zdgj: '',
ldtx: '',
ggxh: '',
cz: '',
// ywName: '异物1RIS0218',
// jzbm: '1',
// kshZt:'QT'
},
sbxxQueryParams: {
code: ''
},
......@@ -540,6 +606,14 @@
}
},
methods: {
xsqbmx() {
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
model.visible = true
}
});
this.mxbshow = false
},
/* 获取异物信息开始请求端口溯源*/
getYwxx(ywxx) {
this.queryParams.ywName = ywxx.name
......@@ -547,7 +621,93 @@
},
/* 点击按钮弹出异物，然后选中*/
sypc() {
this.showDialog = true
if (!this.sypcQueryParams.sbxxCode) {
this.$warning('请输入功能位置后进行查询!')
return
}
/* 先清空 选中的机组*/
this.jzReMaterialQue.forEach(item => {
item.revert()
})
this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
this.$post('ksh/query',
this.sypcQueryParams
).then(res => {
if (res.success) {
/* 绘制流向*/
let sbxxList = res.data.records || []
this.$success(`已标记${sbxxList.length}个设备`)
const sbxxCodeList = sbxxList.map(item => item.sbxxCode)
/* 匹配设备信息length==0 */
if(sbxxCodeList.length==0){
return
}
/* 解决 先缓存选中色，后渲染黄色，默认选中时颜色不对
bug: 1默认还原为原色
2.高亮为黄色触发默认选中(黄色存储在另一个队列)
3.默认选中会还原上一个颜色
4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色
*/
if (sbxxCodeList.length != 0) {
this.reMaterialQue.forEach(item => {
item.revert()
})
}
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 分割，在渲染高亮清空选中的*/
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (sbxxCodeList.includes(model.name)) {
model.visible = true
let jzReMaterialQueItem = {
model,
material: model.oldmaterial.clone(),
revert: function() {
this.model.material = this.material
}
}
this.jzReMaterialQue.push(jzReMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 164, 7, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
} else {
/* 隐藏其他设备*/
if (model.name && model.name != '地面') {
model.visible = false
}
}
}
});
/* 绘制全部流向图*/
/* 显示展示全部按钮*/
this.mxbshow = true
/* 匹配展示数据和本地数据*/
if (this.jzReMaterialQue.length != 0) {
this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
this.sylbshow = true
this.clickTag(this.jzReMaterialQue[0].model.name)
} else {
this.sylbshow = false
}
if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
this.$warning('存在与模型数据不匹配的数据!')
}
}
})
},
apiGetLbjxx() {
this.$post('sbgl/usbxx/query', {
......@@ -591,6 +751,7 @@
/* 查询*/
let iscx = false
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (model.name == this.sbxxQueryParams.code) {
......@@ -642,7 +803,7 @@
}
}
},
/**
/**
* @description:查询流向信息，没有查询所有
* @return {*}
* @author: lisu
......@@ -662,14 +823,14 @@
setTimeout(() => {
this.sblxcxwcxdxx = false
}, 2000)
}else{
} else {
}
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
if(res.data.records.length!=0){
if (res.data.records.length != 0) {
this.$success(`共查询到${res.data.records.length }条数据!共绘制${this.allPieData.length}条流向!`)
}
......@@ -875,6 +1036,45 @@
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
/* 绘制全部信息*/
// if (this.allFlowObject.length) {
// this.allFlowObject.forEach((item) => {
// item.removeFromParent();
// });
// this.allFlowObject = [];
// }
// let flowPieDatas=this.allPieData
// flowPieDatas.forEach(flowPieData=>{
// const children = this.allPieData.find((item) => item.name === flowPieData.name)?.children;
// if (!children) {
// return;
// }
// children.forEach((item) => {
// if (item.data.length >= 2) {
// const o = this.drawPipe(
// item.data.map((item) => [item.x, item.y, item.z]),
// item.radius,
// this.flowDirection,
// );
// o.traverse((node) => {
// if (node.isMesh) {
// node._thing_tag = "helper";
// }
// });
// this.allFlowObject.push(o);
// const box = new THREE.Box3();
// o.points.forEach((item) => {
// box.expandByPoint(new THREE.Vector3(...item));
// });
// o.points.forEach((item) => {
// box.expandByPoint(new THREE.Vector3(...item));
// });
// }
// });
// })
/* 绘制全部流向操作结束 */
}
})
},
......@@ -1028,6 +1228,9 @@
model.oldmaterial = model.material.clone()
}
})
this.getData()
});
this.viewer.scene.add(model);
......@@ -1081,12 +1284,19 @@
return
}
let model
/* 测试判定，实际根据模型实际特征来判定*/
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
/* 当模型隐藏 不继续触发*/
if (model.visible == false) {
rconsole.log('当前对象已屏蔽')
return
}
this.selectedModel = model
// model.visible=false
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
......@@ -1437,7 +1647,7 @@
transform: translate(-50%, 0%);
/* 使元素居中 */
position: absolute;
height: 90px;
height: 185px;
width: 40%;
z-index: 12;
background-color: rgba(0, 0, 0, 0.6);
......@@ -1455,7 +1665,7 @@
}
.sylb {
top: 415px;
top: 105px;
right: 15px;
/* 使元素居中 */
position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment