Skip to content

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

新增标高查询，样式调整

parent 8cf6ec1b
Show 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>
<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">
......@@ -53,46 +60,12 @@
<div class="flex1 text-center">
<el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</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 class="toolButton2">
<div class="flex1 text-center">
<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 class="flex1 text-center">
<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 v-show="selectedModel.name" class="leftOpt" style="padding-top: 30px;">
<div class="sbxxTitle" style="position: absolute;top: 5px;font-weight: 800;">
{{'设备:'+selectedModel.name}}
</div>
</div> -->
<!-- 左侧操作边框-->
<div class="leftOpt">
<div class="flex1" style="height: 50%;overflow: hidden;">
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
......@@ -103,10 +76,10 @@
请选中设备进行查询
</div>
<div v-show="selectedModel.name" class="mkbody data-box1">
<div class="sbxxTitle">
<!-- <div class="sbxxTitle">
{{'设备:'+selectedModel.name}}
</div>
<div class="com-count-body" style=" height:calc(100% - 30px)">
</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 ">
......@@ -135,7 +108,7 @@
</div>
</div>
<div class="flex1" style="height: 50%;overflow: hidden;">
<div class="flex1" style="height: 33%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
......@@ -146,11 +119,11 @@
请选中设备进行查询
</div>
<div v-show="selectedModel.name" class="mkbody data-box1">
<div class="sbxxTitle">
<!-- <div class="sbxxTitle">
{{'设备:'+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="flex1 text-center ">
......@@ -192,21 +165,62 @@
</div>
</div>
<!-- <div class="full padding5" style="padding-top: 10px;">
<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="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);overflow: hidden;">
<!-- 标题-->
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
节点
</div>
<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>
<!-- 溯源排查-->
......@@ -315,7 +329,7 @@
<div class="full flex " style="height: calc(100% - 14px);padding-top: 12px;">
<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">
<span class="search-span">绘制流动:</span>
<el-select :popper-append-to-body='false' style="width: 100%;background-color: rgba(0, 0, 0, 0.0);"
......@@ -328,73 +342,19 @@
</el-col>
<el-col :span="12" class="search-col flex-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>
</div>
</el-col>
</el-row>
</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 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-->
<div id="container" ref="container" class="full">
......@@ -404,62 +364,20 @@
</template>
<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 * as THREE from 'three'
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 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 {
// name: 'yhlywsytst',
mounted() {
// this.apiGetYwxx()
// this.apiGetJxxx()
/* 测试列表*/
this.$nextTick(() => {
// this.$refs.app.addEventListener('dblclick', () => {
// fullScreen(this.$refs.app);
// })
this.init()
this.loadAll()
this.tdClick()
this.getData()
// this.canNotMousedown([
// this.$refs.rightOpt
// ])
})
......@@ -478,17 +396,6 @@
console.log(this.viewer)
this.viewer.destroy()
},
// deactivated() {
// this.viewer.canRequestAnimationFrame = false
// },
// activated() {
// try {
// this.viewer.canRequestAnimationFrame = true
// this.viewer.reInit()
// } catch (e) {
// rconsole.error(e)
// }
// },
data() {
return {
/* 弹框控制参数*/
......@@ -497,9 +404,8 @@
DialogWidth: '65vw',
ywlistData: [],
jxlistData: [],
/* 引用图片*/
bglistData:[],
ksh33: ksh33,
/* 测试代码*/
queryParams: {
jzbm: '',
kshZt: ''
......@@ -549,7 +455,7 @@
this.queryParams.sbxxCode = val.name
this.apiGetJxxx()
this.apiGetYwxx()
this.apiGetBgxx()
} else {
this.fileList = [];
return [];
......@@ -581,6 +487,19 @@
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) {
if (!code) {
return
......@@ -728,7 +647,7 @@
3.默认选中会还原上一个颜色
4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色
*/
if(sbxxCodeList.length!=0){
if (sbxxCodeList.length != 0) {
this.reMaterialQue.forEach(item => {
item.revert()
})
......@@ -766,7 +685,7 @@
} else {
this.sylbshow = false
}
if(sbxxList.length>0&&(this.jzReMaterialQue.length!=sbxxList.length)){
if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
this.$warning('存在与模型数据不匹配的数据!')
}
......@@ -823,35 +742,22 @@
o.points.forEach((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() {
this.$post('sbgl/usblxgx/zbInfo',{}).then(res=>{
if(res.success){
let data=res.data.records||[]
this.$post('sbgl/usblxgx/zbInfo', {}).then(res => {
if (res.success) {
let data = res.data.records || []
this.allPieData = data.filter((item) => {
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) {
......@@ -997,9 +903,9 @@
model.addEventListener("loaded", () => {
this.loading = false
this.viewer.scene.traverse(model=>{
this.viewer.scene.traverse(model => {
if (model.isMesh) {
model.oldmaterial=model.material.clone()
model.oldmaterial = model.material.clone()
}
})
});
......@@ -1380,7 +1286,8 @@
background-color: rgba(0, 0, 0, 0.6);
}
.sblx{
.sblx {
top: 215px;
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