调整

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">
+    <!-- 弹框组件dialig -->
+    <ywDialog @getYwxx='getYwxx' :app='this' v-if='showDialog' />
     <div class="bigTitle">
       一回路异物溯源态势图
     </div>
@@ -90,14 +92,43 @@
     </div> -->
     <!-- 左侧操作边框-->
     <div class="leftOpt">
-      <div class="flex1">
+      <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 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>
@@ -110,9 +141,15 @@
             <span>异物信息</span>
             <img :src="ksh33" alt="">
           </div>
-           	<div class="mkbody data-box1">
+          <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: 100%;overflow: hidden;">
+            <div class="com-count-body" style=" height:calc(100% - 30px);overflow: hidden;">
               <!-- 标题-->
               <div class="lbbt" style="font-size: 13px;">
                 <div class="flex1 text-center ">
@@ -131,11 +168,13 @@
                   标高
                 </div>
               </div>
-                               <ScrollSeamless :class-option="optionSingleHeight" :data="listData" 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 listData" >
-                                     <div  class="flex1" style="color: #68D8FE;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  ;"
+                  <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>
@@ -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,37 +333,40 @@
       }
   });
   */
+  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', () => {
@@ -342,6 +384,9 @@
       })
 
     },
+    components: {
+      ywDialog
+    },
     computed: {
       optionSingleHeight() {
         return {
@@ -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,7 +538,7 @@
                 /* */
                 if (this.xzjj) {
 
-                  const object =model;
+                  const object = model;
                   if (object) {
                     this.viewer.cameraControl.fitTo(object);
                   }
@@ -471,7 +547,7 @@
               }
             }
           });
-          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) {
@@ -728,7 +805,7 @@
           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,7 +892,7 @@
             })
             /* */
             if (this.xzjj) {
-              const object =model;
+              const object = model;
               if (object) {
                 this.viewer.cameraControl.fitTo(object);
               }
@@ -903,6 +980,20 @@
 </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;
@@ -924,9 +1015,10 @@
   .mkbody {
     width: 100%;
     height: calc(100% - 35px);
-    background-color: rgba(0, 0, 0, 0.6)!important;
+    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;
   }
 </style>

src/views/yhlywsytst/yhlywsytst/ywDialog.vue

+<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>