Skip to content

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

新增标高查询，样式调整

parent 8cf6ec1b
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 208 deletions
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ 2e9498cc
<!--
* @Description:
* @Author: lisu lisu@gavelinfo.com
* @LastEditors: lisu lisu@gavelinfo.com
* @LastEditTime: 2024-09-11 11:19:18
* @FilePath: /zghywpc-vue/src/views/yhlywsytst/yhlywsytst/index.vue
-->
<template> <template>
<div v-loading='loading' :element-loading-text='loadingText' element-loading-spinner="el-icon-loading" <div v-loading='loading' :element-loading-text='loadingText' element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" ref="app" class="min_full nullbp"> element-loading-background="rgba(0, 0, 0, 0.8)" ref="app" class="min_full nullbp">
...@@ -53,46 +60,12 @@ ...@@ -53,46 +60,12 @@
<div class="flex1 text-center"> <div class="flex1 text-center">
<el-checkbox v-model="xzjj">选中时近景</el-checkbox> <el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div> </div>
<!-- <div class="flex1 text-center">
<span style="cursor: pointer;" @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div>
<div class="flex1 text-center">
<span style="cursor: pointer;" @click="viewCenter"><i class="el-icon-view"></i>中心视角</span>
</div> -->
</div> </div>
<div v-show="selectedModel.name" class="leftOpt" style="padding-top: 30px;">
<!-- <div class="toolButton2"> <div class="sbxxTitle" style="position: absolute;top: 5px;font-weight: 800;">
<div class="flex1 text-center"> {{'设备:'+selectedModel.name}}
<el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div>
<div class="flex1 text-center">
<el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);"
@change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select>
</div>
<div class="flex1 text-center">
<el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向">
</el-switch>
</div>
</div> -->
<!--
<div class="toolButton">
<div class="flex1 text-center">
<span @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div> </div>
<div class="flex1 text-center"> <div class="flex1" style="height: 33%;overflow: hidden;">
<span @click="viewCenter"><i class="el-icon-view"></i>中心视角</span>
</div>
<div class="flex1 text-center">
<span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span>
</div>
</div> -->
<!-- 左侧操作边框-->
<div class="leftOpt">
<div class="flex1" style="height: 50%;overflow: hidden;">
<!-- 设备检修--> <!-- 设备检修-->
<div class="full"> <div class="full">
<div class="mktitle"> <div class="mktitle">
...@@ -103,10 +76,10 @@ ...@@ -103,10 +76,10 @@
请选中设备进行查询 请选中设备进行查询
</div> </div>
<div v-show="selectedModel.name" class="mkbody data-box1"> <div v-show="selectedModel.name" class="mkbody data-box1">
<div class="sbxxTitle"> <!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}} {{'设备:'+selectedModel.name}}
</div> </div> -->
<div class="com-count-body" style=" height:calc(100% - 30px)"> <div class="com-count-body" style=" height:calc(100% - 0px)">
<!-- 标题--> <!-- 标题-->
<div class="lbbt" style="font-size: 13px;"> <div class="lbbt" style="font-size: 13px;">
<div style="width: 130px;" class="text-center "> <div style="width: 130px;" class="text-center ">
...@@ -135,7 +108,7 @@ ...@@ -135,7 +108,7 @@
</div> </div>
</div> </div>
<div class="flex1" style="height: 50%;overflow: hidden;"> <div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修--> <!-- 设备检修-->
<div class="full"> <div class="full">
<div class="mktitle"> <div class="mktitle">
...@@ -146,11 +119,11 @@ ...@@ -146,11 +119,11 @@
请选中设备进行查询 请选中设备进行查询
</div> </div>
<div v-show="selectedModel.name" class="mkbody data-box1"> <div v-show="selectedModel.name" class="mkbody data-box1">
<div class="sbxxTitle"> <!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}} {{'设备:'+selectedModel.name}}
</div> </div> -->
<div class="com-count-body" style=" height:calc(100% - 30px);overflow: hidden;"> <div class="com-count-body" style=" height:calc(100% - 0px);overflow: hidden;">
<!-- 标题--> <!-- 标题-->
<div class="lbbt" style="font-size: 13px;"> <div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center "> <div class="flex1 text-center ">
...@@ -192,21 +165,62 @@ ...@@ -192,21 +165,62 @@
</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">
请选中设备进行查询
</div>
<div v-show="selectedModel.name" class="mkbody data-box1">
<!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}}
</div> -->
<!-- <div class="full padding5" style="padding-top: 10px;"> <div class="com-count-body" style=" height:calc(100% - 0px);overflow: hidden;">
<div class="full data-box1" style="position: relative;"> <!-- 标题-->
<i class="topL"></i> <div class="lbbt" style="font-size: 13px;">
<i class="topR"></i> <div class="flex1 text-center ">
<i class="bottomL"></i> 节点
<i class="bottomR"></i> </div>
<div class="full"> <div class="flex1 text-center ">
名称
</div>
<div class="flex1 text-center ">
X坐标
</div>
<div class="flex1 text-center ">
Y坐标
</div>
<div class="flex1 text-center ">
Z坐标
</div>
<div class="flex1 text-center ">
管径
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="bglistData" 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 bglistData">
<div class="flex1" style="color: #68D8FE ;" v-text="item.jdCode"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.x"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.y"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.z"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gj"></div>
</div>
</div>
</ScrollSeamless>
</div>
</div> </div>
</div> </div>
</div> --> </div>
</div> </div>
<!-- 溯源排查--> <!-- 溯源排查-->
...@@ -301,7 +315,7 @@ ...@@ -301,7 +315,7 @@
</div> </div>
</div> </div>
<!-- 设备流向--> <!-- 设备流向-->
<div class="sblx"> <div class="sblx">
<div class="full data-box1" style="position: relative;"> <div class="full data-box1" style="position: relative;">
<i class="topL"></i> <i class="topL"></i>
<i class="topR"></i> <i class="topR"></i>
...@@ -315,85 +329,31 @@ ...@@ -315,85 +329,31 @@
<div class="full flex " style="height: calc(100% - 14px);padding-top: 12px;"> <div class="full flex " style="height: calc(100% - 14px);padding-top: 12px;">
<el-row :gutter="20" class="search-row-1" style="width: 100%;"> <el-row :gutter="20" class="search-row-1" style="width: 100%;">
<el-col :span="12" class="search-col" > <el-col :span="12" class="search-col">
<div class="search-item"> <div class="search-item">
<span class="search-span">绘制流动:</span> <span class="search-span">绘制流动:</span>
<el-select :popper-append-to-body='false' style="width: 100%;background-color: rgba(0, 0, 0, 0.0);" <el-select :popper-append-to-body='false' style="width: 100%;background-color: rgba(0, 0, 0, 0.0);"
@change="flowPieDataChange" v-model="flowPieData" clearable placeholder=""> @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name"> <el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }} {{ item.name }}
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="search-col flex-center"> <el-col :span="12" class="search-col flex-center">
<div class="flex1 text-center"> <div class="flex1 text-center">
<el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向"> <el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向"
inactive-text="反向">
</el-switch> </el-switch>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- <div class="full" style="padding: 10px;;padding-top: 15px;height: calc(100% - 14px);">
<div class="toolButton2">
<div class="flex1 text-center">
<el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);"
@change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select>
</div>
<div class="flex1 text-center">
<el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向">
</el-switch>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
<!-- 右侧操作边框--> <!-- 右侧操作边框-->
<!-- <div class="rightOpt" ref="rightOpt">
<div class="full padding5" style="height: 100%;">
<div class="optTitle">
{{selectedModel.name?selectedModel.name+'的':''}}设备信息
</div>
<div class="full data-box1" style="position: relative;">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="full" style="margin-top: 50px;">
<el-row :gutter="20" class="search-row-1">
<el-col :span="24" 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="24" class="search-col">
<div class="search-item">
<span class="search-span">状态:</span>
<RelSelect style="width: 100%;" src='sbgl/usbxx/init/zt ' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.kshZt'></RelSelect>
</div>
</el-col>
<el-col :span="24" class="search-col flex-center">
<el-button type="primary" @click="apiJzbm()">查 看</el-button>
</el-col>
</el-row>
</div>
</div>
</div>
</div> -->
<!-- threeDdiv--> <!-- threeDdiv-->
<div id="container" ref="container" class="full"> <div id="container" ref="container" class="full">
...@@ -404,62 +364,20 @@ ...@@ -404,62 +364,20 @@
</template> </template>
<script> <script>
/*
常用遍历模型方法
this.viewer.scene.getObjectByName('1RCP002GV')
this.viewer.scene.traverse(function(obj) {
if (obj.isMesh) {
obj.material.color.set(0xffff00);
}
});
*/
import ywDialog from './ywDialog.vue' import ywDialog from './ywDialog.vue'
import * as THREE from 'three' import * as THREE from 'three'
import gsap from 'gsap' import gsap from 'gsap'
// import Viewer from '@/common/threeModules/Viewer'
// import Lights from '@/common/threeModules/Lights'
// import ModelLoader from '@/common/threeModules/ModelLoader'
import ksh33 from './static/ksh33.png' import ksh33 from './static/ksh33.png'
// import Labels from '@/common/threeModules/Labels'
// function fullScreen(element) {
// const elem = element || document.documentElement;
// if (elem.webkitRequestFullScreen) {
// elem.webkitRequestFullScreen();
// } else if (elem.mozRequestFullScreen) {
// elem.mozRequestFullScreen();
// } else if (elem.requestFullScreen) {
// elem.requestFullscreen();
// } else if (elem.msExitFullscreen) {
// elem.msExitFullscreen();
// } else if (elem.msRequestFullscreen) {
// elem.msRequestFullscreen();
// } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
// var wscript = new ActiveXObject("WScript.Shell");
// if (wscript !== null) {
// wscript.SendKeys("{F11}");
// }
// }
// }
export default { export default {
// name: 'yhlywsytst', // name: 'yhlywsytst',
mounted() { mounted() {
// this.apiGetYwxx()
// this.apiGetJxxx()
/* 测试列表*/
this.$nextTick(() => { this.$nextTick(() => {
// this.$refs.app.addEventListener('dblclick', () => {
// fullScreen(this.$refs.app);
// })
this.init() this.init()
this.loadAll() this.loadAll()
this.tdClick() this.tdClick()
this.getData() this.getData()
// this.canNotMousedown([
// this.$refs.rightOpt
// ])
}) })
...@@ -478,17 +396,6 @@ ...@@ -478,17 +396,6 @@
console.log(this.viewer) console.log(this.viewer)
this.viewer.destroy() this.viewer.destroy()
}, },
// deactivated() {
// this.viewer.canRequestAnimationFrame = false
// },
// activated() {
// try {
// this.viewer.canRequestAnimationFrame = true
// this.viewer.reInit()
// } catch (e) {
// rconsole.error(e)
// }
// },
data() { data() {
return { return {
/* 弹框控制参数*/ /* 弹框控制参数*/
...@@ -497,9 +404,8 @@ ...@@ -497,9 +404,8 @@
DialogWidth: '65vw', DialogWidth: '65vw',
ywlistData: [], ywlistData: [],
jxlistData: [], jxlistData: [],
/* 引用图片*/ bglistData:[],
ksh33: ksh33, ksh33: ksh33,
/* 测试代码*/
queryParams: { queryParams: {
jzbm: '', jzbm: '',
kshZt: '' kshZt: ''
...@@ -549,7 +455,7 @@ ...@@ -549,7 +455,7 @@
this.queryParams.sbxxCode = val.name this.queryParams.sbxxCode = val.name
this.apiGetJxxx() this.apiGetJxxx()
this.apiGetYwxx() this.apiGetYwxx()
this.apiGetBgxx()
} else { } else {
this.fileList = []; this.fileList = [];
return []; return [];
...@@ -581,6 +487,19 @@ ...@@ -581,6 +487,19 @@
this.jxlistData = res.data.records || [] this.jxlistData = res.data.records || []
}) })
}, },
apiGetBgxx() {
this.$post('jxgl/usbjx/query', {
sbxxCode: this.selectedModel.name
}).then(res => {
this.jxlistData = res.data.records || []
})
},
/**
* @description:选中标签后操作
* @param {String} code
* @return {*}
* @author: lisu
*/
clickTag(code) { clickTag(code) {
if (!code) { if (!code) {
return return
...@@ -728,7 +647,7 @@ ...@@ -728,7 +647,7 @@
3.默认选中会还原上一个颜色 3.默认选中会还原上一个颜色
4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色 4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色
*/ */
if(sbxxCodeList.length!=0){ if (sbxxCodeList.length != 0) {
this.reMaterialQue.forEach(item => { this.reMaterialQue.forEach(item => {
item.revert() item.revert()
}) })
...@@ -743,7 +662,7 @@ ...@@ -743,7 +662,7 @@
model, model,
material: model.oldmaterial.clone(), material: model.oldmaterial.clone(),
revert: function() { revert: function() {
this.model.material = this.material this.model.material = this.material
} }
} }
this.jzReMaterialQue.push(jzReMaterialQueItem) this.jzReMaterialQue.push(jzReMaterialQueItem)
...@@ -766,7 +685,7 @@ ...@@ -766,7 +685,7 @@
} else { } else {
this.sylbshow = false this.sylbshow = false
} }
if(sbxxList.length>0&&(this.jzReMaterialQue.length!=sbxxList.length)){ if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
this.$warning('存在与模型数据不匹配的数据!') this.$warning('存在与模型数据不匹配的数据!')
} }
...@@ -821,37 +740,24 @@ ...@@ -821,37 +740,24 @@
box.expandByPoint(new THREE.Vector3(...item)); box.expandByPoint(new THREE.Vector3(...item));
}); });
o.points.forEach((item) => { o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item)); box.expandByPoint(new THREE.Vector3(...item));
});
this.viewer.cameraControl.control.fitToBox(box, true, {
cover: true
}); });
this.viewer.cameraControl.control.fitToBox(box, true, { cover: true });
} }
}); });
}, },
/* 获取流向数据*/ /* 获取流向数据*/
getData() { getData() {
this.$post('sbgl/usblxgx/zbInfo',{}).then(res=>{ this.$post('sbgl/usblxgx/zbInfo', {}).then(res => {
if(res.success){ if (res.success) {
let data=res.data.records||[] let data = res.data.records || []
this.allPieData = data.filter((item) => { this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2); return item.children.some((child) => child.data.length >= 2);
}); });
} }
}) })
// fetch(`/data.json?${new Date().getTime()}`)
// .then(response => {
// if (!response.ok) {
// throw new Error('网络响应错误');
// } else {
// return response.json()
// }
// }).then(data => {
// this.allPieData = data.filter((item) => {
// return item.children.some((child) => child.data.length >= 2);
// });
// })
}, },
/* 流向动画*/ /* 流向动画*/
drawPipe(positions, radius, direction) { drawPipe(positions, radius, direction) {
...@@ -997,11 +903,11 @@ ...@@ -997,11 +903,11 @@
model.addEventListener("loaded", () => { model.addEventListener("loaded", () => {
this.loading = false this.loading = false
this.viewer.scene.traverse(model=>{ this.viewer.scene.traverse(model => {
if (model.isMesh) { if (model.isMesh) {
model.oldmaterial=model.material.clone() model.oldmaterial = model.material.clone()
} }
}) })
}); });
this.viewer.scene.add(model); this.viewer.scene.add(model);
...@@ -1380,7 +1286,8 @@ ...@@ -1380,7 +1286,8 @@
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
} }
.sblx{
.sblx {
top: 215px; top: 215px;
right: 15px; right: 15px;
/* 使元素居中 */ /* 使元素居中 */
......
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