Skip to content

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

调整

parent 61021f02
Hide whitespace changes
Inline Side-by-side
Showing with 528 additions and 146 deletions
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ 01afd940
<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">
<!-- 弹框组件dialig -->
<ywDialog @getYwxx='getYwxx' :app='this' v-if='showDialog' />
<div class="bigTitle">
一回路异物溯源态势图
</div>
......@@ -51,7 +53,7 @@
<div class="flex1 text-center">
<el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div>
<!-- <div class="flex1 text-center">
<!-- <div class="flex1 text-center">
<span style="cursor: pointer;" @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div>
<div class="flex1 text-center">
......@@ -90,64 +92,101 @@
</div> -->
<!-- 左侧操作边框-->
<div class="leftOpt">
<div class="flex1">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>设备检修</span>
<img :src="ksh33" alt="">
</div>
<div class="mkbody data-box1">
</div>
</div>
<div class="flex1" style="height: 50%;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% - 30px)">
<!-- 标题-->
<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: 50%;overflow: hidden;">
<!-- 设备检修-->
<div class="full">
<div class="mktitle">
<span>异物信息</span>
<img :src="ksh33" alt="">
</div>
<div class="mkbody data-box1">
<div class="com-count-body" style="height: 100%;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 ">
尺寸
</div>
<div class="flex1 text-center ">
材质
</div>
<div class="flex1 text-center ">
标高
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="listData" 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 listData" >
<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>
</div>
</div>
<div class="flex1" style="height: 50%;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% - 30px);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 ">
尺寸
</div>
<div class="flex1 text-center ">
材质
</div>
<div class="flex1 text-center ">
标高
</div>
</div>
<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 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>
</div>
</div>
</div>
......@@ -198,7 +237,7 @@
</el-col>
<el-col :span="8" 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="apiJzbm()" type="primary">溯源排查</el-button>
size="mini" @click="sypc()" type="primary">溯源排查</el-button>
</el-col>
</el-row>
</div>
......@@ -294,38 +333,41 @@
}
});
*/
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 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}");
}
}
}
// 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.apiGetYwxx()
// this.apiGetJxxx()
/* 测试列表*/
this.$nextTick(() => {
// this.$refs.app.addEventListener('dblclick', () => {
// fullScreen(this.$refs.app);
......@@ -342,13 +384,16 @@
})
},
computed: {
optionSingleHeight() {
return {
singleHeight: 25
}
}
},
components: {
ywDialog
},
computed: {
optionSingleHeight() {
return {
singleHeight: 25
}
}
},
beforeDestroy() {
console.log(this.viewer)
this.viewer.destroy()
......@@ -366,9 +411,14 @@
// },
data() {
return {
listData:[],
/* 弹框控制参数*/
showDialog: false,
DialogTitle: '异物信息',
DialogWidth: '65vw',
ywlistData: [],
jxlistData: [],
/* 引用图片*/
ksh33:ksh33,
ksh33: ksh33,
/* 测试代码*/
queryParams: {
jzbm: '',
......@@ -409,13 +459,39 @@
item.reverseMapRotation();
});
}
},
selectedModel: {
handler(val) {
if (val.name) {
this.queryParams.sbxxCode = val.name
this.apiGetJxxx()
this.apiGetYwxx()
} else {
this.fileList = [];
return [];
}
}
}
},
methods: {
apiGetYwxx(){
this.$post('ywxxgl/uywxx/query',{}).then(res=>{
this.listData=res.data.records||[]
/* 获取异物信息开始请求端口溯源*/
getYwxx(ywxx) {
this.queryParams.ywxxid = ywxx.id
this.apiJzbm()
},
/* 点击按钮弹出异物，然后选中*/
sypc() {
this.showDialog = true
},
apiGetYwxx() {
this.$post('ywxxgl/uywxx/query', this.queryParams).then(res => {
this.ywlistData = res.data.records || []
})
},
apiGetJxxx() {
this.$post('jxgl/usbjx/query', this.queryParams).then(res => {
this.jxlistData = res.data.records || []
})
},
sbcx() {
......@@ -426,15 +502,15 @@
this.sbcxwcxdxx = false
}, 2000)
} else {
this.sbxxQueryParams.code=this.sbxxQueryParams.code.replace(/\s+/g, '');
this.sbxxQueryParams.code = this.sbxxQueryParams.code.replace(/\s+/g, '');
/* 查询*/
let iscx=false
let iscx = false
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (model.name == this.sbxxQueryParams.code) {
this.selectedModel = model
iscx=true
iscx = true
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
item.revert()
......@@ -462,16 +538,16 @@
/* */
if (this.xzjj) {
const object =model;
const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
this.viewer.cameraControl.fitTo(object);
}
}
}
}
});
if(iscx==false){
if (iscx == false) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '未查询到设备!'
setTimeout(() => {
......@@ -492,6 +568,7 @@
).then(res => {
if (res.success) {
let sbxxList = res.data.records || []
this.$success(`已标记${sbxxList.length}个设备`)
const sbxxCodeList = sbxxList.map(item => item.sbxxCode)
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
......@@ -697,38 +774,38 @@
// this.loadDm()
this.viewer = new VT.Viewer({
container: this.$refs.container,
scene: {
helper: {
grid: {
visible: true,
},
},
background: {
skyboxPath: "dark",
},
container: this.$refs.container,
scene: {
helper: {
grid: {
visible: true,
},
},
view: {
position: [44.81080132492321, 48.62916741352805, -75.73966237503983],
center: [48.15565686619112, 5.221820594458009, 5.975771281142078],
far: 10000,
near: 0.1,
aspect: null,
fov: 45,
isOrtho: false,
zoom: 1,
rotation: [-2.6532966628149923, -0.036133545863119475, -3.1224049976510337, "XYZ"],
background: {
skyboxPath: "dark",
},
},
view: {
position: [44.81080132492321, 48.62916741352805, -75.73966237503983],
center: [48.15565686619112, 5.221820594458009, 5.975771281142078],
far: 10000,
near: 0.1,
aspect: null,
fov: 45,
isOrtho: false,
zoom: 1,
rotation: [-2.6532966628149923, -0.036133545863119475, -3.1224049976510337, "XYZ"],
},
});
},
loadAll() {
var model = new VT.Model({
modelType: "gltf",
src: "/glb/all.glb",
modelType: "gltf",
src: "/glb/all.glb",
})
model.addEventListener("loaded", () => {
this.loading=false
this.loading = false
});
this.viewer.scene.add(model);
......@@ -788,7 +865,7 @@
model = intersects[0].object
}
this.selectedModel = model
rconsole.log('选择设备',model.name)
rconsole.log('选择设备', model.name)
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
item.revert()
......@@ -815,9 +892,9 @@
})
/* */
if (this.xzjj) {
const object =model;
const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
this.viewer.cameraControl.fitTo(object);
}
}
......@@ -903,30 +980,45 @@
</script>
<style scoped lang="scss">
.nosbxxTitle {
color: #68D8FE;
font-size: 18px;
font-weight: 700;
}
.sbxxTitle {
height: 30px;
line-height: 30px;
color: #68D8FE;
text-align: center;
}
.mktitle {
line-height: 35px;
font-size: 14px;
color: #68D8FE;
font-weight: 600;
height: 35px;
position: relative;
overflow: hidden
line-height: 35px;
font-size: 14px;
color: #68D8FE;
font-weight: 600;
height: 35px;
position: relative;
overflow: hidden
}
.mktitle img {
height: 15px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 15px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.mkbody {
width: 100%;
height: calc(100% - 35px);
background-color: rgba(0, 0, 0, 0.6)!important;
width: 100%;
height: calc(100% - 35px);
background-color: rgba(0, 0, 0, 0.6) !important;
}
.min_full {
height: 100vh;
width: 100vw;
......@@ -1027,6 +1119,7 @@
font-size: 13px;
// background-color: #07417a;
}
.toolButton3 {
display: flex;
bottom: 12px;
......@@ -1199,6 +1292,7 @@
color: #68D8FE !important;
}
.lbbt {
height: 4vh;
width: 100%;
......@@ -1206,9 +1300,11 @@
display: flex;
line-height: 4vh;
color: #61d2f7;
background-color:rgba(22, 84, 198, 0.7) ;
background-color: rgba(22, 84, 198, 0.7);
}
.lbbody {
height: calc(100% - 4vh);
overflow: hidden;
}
.lbbody {
height: calc(100% - 4vh);
}
</style>
src/views/yhlywsytst/yhlywsytst/ywDialog.vue 0 → 100644
View file @ 01afd940
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" class="min_full" style="border: 0px;height: 440px;">
<BasePage ref="basePage" :toolButton='false' :power='power' class="min_full" :config="config"
style="height: 100%;">
<template #dialog="ctx">
<!-- 嵌入默认页面额外弹框的插槽 ctx.pagePage来操作默认页面 -->
</template>
<template #toolbar="ctx">
<!-- 嵌入默认页面工具栏的插槽 ctx.pagePage来操作默认页面 -->
<!-- <el-button @click="demo(ctx.basePage)" size='mini' type="primary">示例按钮</el-button> -->
</template>
</BasePage>
</div>
<div slot="reFooter" class="refooter">
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="app.showDialog=false">取 消</el-button> -->
<el-button type="primary" @click="save()">确 定</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
// this.$nextTick(()=>{
// this.$refs['TablePager'].pageQuery()
// })
},
components: {
// Detail
},
data() {
return {
power: {
add: false,
copy: false,
/* 手动控制删除 */
delButton: false,
/* 手动控制编辑按钮权限 */
editButton: false,
/* 是否渲染右侧操作按钮 */
operateButtons: false,
/* 是否开启工作流按钮 */
workFlow: false,
/* 表格开启选择，以及记住选择 */
showSelection: false,
saveSelected: false,
},
config: {
/* 基本配置*/
url: 'ywxxgl/uywxx',
tableTitle: [{
label: "名称",
prop: "name",
fieldType: "ftString",
width: 120
},
{
label: "规格",
prop: "ggxh",
fieldType: "ftString",
width: 120
},
{
label: "尺寸",
prop: "cc",
fieldType: "ftString",
width: 120
},
{
label: "材质",
prop: "cz",
fieldType: "ftString",
width: 300
},
{
label: "地点",
prop: "dd",
fieldType: "ftString",
width: 300
},
{
label: "标高",
prop: "bg",
fieldType: "ftString",
width: 300
},
{
label: "异物放射性强度",
prop: "fsxqd",
fieldType: "ftString",
width: 300
},
{
label: "备注",
prop: "bz",
fieldType: "ftString",
width: 300
},
{
label: "附件数",
prop: "attachcount",
fieldType: "int"
},
{
title: "创建人",
field: "cjr",
width: 140
},
{
title: "创建时间",
field: "cjsj",
fieldType: 'ftDateTime'
},
{
title: "维护人",
field: "whr",
hidden: true
},
{
title: "维护时间",
field: "whsj",
fieldType: 'ftDateTime',
hidden: true
}
],
queryParams: [
[{
label: '名称',
prop: 'name',
span: 6,
type: 'input',
value: ''
}
]
],
/* 默认启停用 */
}
}
},
methods: {
save() {
const ctx = this.$refs.basePage
if (ctx.singleItem && ctx.singleItem.id) {
this.$emit('getYwxx', ctx.singleItem)
this.app.showDialog = false
} else {
this.$warning('请选中一条数据')
}
}
},
}
</script>
<style scoped>
/deep/.el-button--primary {
background-color: rgba(0, 0, 0, 0.6) !important;
color: #25c2da;
border: 1px solid #25c2da;
}
/deep/.el-dialog {
background: url(./static/bg.png);
background-size: 100% 100%;
opacity: 1;
}
/*
.el-dialog{
color: #61d2f7;
background-color:rgba(22, 84, 198, 0.7) ;
} */
/deep/.el-dialog__body {
/* background-color:rgba(22, 84, 198, 0.7) ; */
}
/deep/.el-dialog__title {
color: #fff;
}
/deep/.search-span {
color: #83c7e3 !important;
}
/* /deep/.el-table tr{
background-color: rgba(0, 0, 0, 0.6)!important;
} */
.min_full {
border: 0px solid !important;
}
/deep/.search {
border: 0px solid !important;
}
/deep/.refooter {
border: 0px solid !important;
padding-top: 10px;
height: 40px;
}
/deep/.el-dialog__title {
color: #61d2f7;
}
/deep/.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table tr {
background-color: rgba(0, 0, 0, 0.0) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table__row:hover {
background-color: rgba(0, 0, 0, 0.6) !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: rgba(199, 199, 199, 0.6) !important;
}
/deep/.el-table__body tr.current-row>td.el-table__cell {
background-color: rgba(199, 199, 199, 0.6) !important;
}
/deep/ .current-row {
background-color: rgba(0, 0, 0, 0.6) !important;
}
/deep/.el-table {
background-color: rgba(0, 0, 0, .2) !important;
}
/deep/.btn-prev {
background-color: rgba(0, 0, 0, 0.6) !important;
border: 1px solid #61d2f7;
}
/deep/.btn-next {
background-color: rgba(0, 0, 0, 0.6) !important;
border: 1px solid #61d2f7;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #25c2da;
color: #fff;
}
/deep/.el-pagination__total {
color: #25c2da;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
background: #f1f1f1!important;
/* 滚动槽的背景颜色 */
border-radius: 10px;
/* 滚动槽的圆角 */
}
{}
</style>
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