pdf 64转2进制转blob url / 样式/相机溯源逻辑等等等

src/views/sbxxgl/sblxgx/sblxtree/fullPage/index.vue

@@ -10,7 +10,7 @@
     <div style="padding: 10px;">
       <el-row :gutter="20">
         <el-col :span="19"  class="padding-10 flex-center" >
-          <el-input    v-model="dqjd" placeholder="请输入查询节点">
+          <el-input  :focus="true"  v-model="dqjd" placeholder="请输入查询节点">
           </el-input>
         </el-col>
         <el-col :span="2">

src/views/yhlywsytst/yhlywsytst/ywDialog.vue → src/views/yhlywsytst/yhlywsytst/czDialog.vue

@@ -167,7 +167,7 @@
       save() {
         const ctx = this.$refs.basePage
         if (ctx.singleItem && ctx.singleItem.id) {
-          this.$emit('getYwxx', ctx.singleItem)
+          this.$emit('getCz', ctx.singleItem)
           this.app.showDialog = false
         } else {
           this.$warning('请选中一条数据')

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -2,14 +2,14 @@
  * @Description:
  * @Author: lisu lisu@gavelinfo.com
  * @LastEditors: lisu lisu@gavelinfo.com
- * @LastEditTime: 2024-09-25 18:00:01
+ * @LastEditTime: 2024-09-26 15:41:14
  * @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">
     <!-- 弹框组件dialig -->
-    <ywDialog @getYwxx='getYwxx' :app='this' v-if='showDialog' />
+    <czDialog @getCz='getCz' :app='this' v-if='showDialog' />
     <div class="bigTitle">
       一回路异物溯源态势图
     </div>
@@ -279,11 +279,12 @@
           <span>溯源排查</span>
           <b class="data-title-right">]</b>
         </div>
-        <div class="full " style="height: calc(100% - 14px);padding-top: 12px;padding-left: 25px;">
+        <div class="full " style="height: calc(100% - 14px);padding-top: 12px;padding-left: 10px;">
           <el-row :gutter="20" class="search-row-1" style="width: 100%;">
             <el-col :span="3" class="search-col">
               <div class="search-item">
-                <span class="search-span"><span style="color: rgb(255, 73, 73); margin-right: 4px;">*</span>功能位置:</span>
+                <span class="search-span"><span
+                    style="color: rgb(255, 73, 73); margin-right: 4px;position: absolute;left: 11px;">*</span>功能位置:</span>
                 <el-input v-model="sypcQueryParams.gnwz"></el-input>
               </div>
             </el-col>
@@ -313,7 +314,9 @@
             <el-col :span="3" class="search-col">
               <div class="search-item">
                 <span class="search-span">材质:</span>
-                <el-input v-model="sypcQueryParams.cz"></el-input>
+                <!-- <el-input v-model="sypcQueryParams.cz"></el-input> -->
+                <AuxInput :overlayClick='czOverlayClick'  :onlyInput='true'  />
+
               </div>
             </el-col>
             <el-col :span="3" class="search-col flex-center">
@@ -323,20 +326,32 @@
                   :match="{value:'id',label:'name'}" v-model='sypcQueryParams.ldtx'></RelSelect>
               </div>
             </el-col>
+            <el-col :span="3" class="search-col flex-center">
+              <div class="search-item">
+                <span class="search-span">机组状态:</span>
+                <RelSelect placeholder='' style="width: 100%;" src='ywxxgl/uywxx/init/zt ' filterable clearable
+                  :match="{value:'id',label:'name'}" v-model='sypcQueryParams.ldtx'></RelSelect>
+              </div>
+            </el-col>
             <!-- <el-col :span="2" class="search-col flex-center">
             </el-col> -->
-            <el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
+            <el-col :span="3" class="search-col flex-center" style="padding-left: 20px;">
+              <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-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
-                size="mini" @click="sypc()" type="primary">溯源排查</el-button>
+                size="mini" @click="czmx()" type="primary">重置</el-button>
+              <el-button @click="savePdf()"
+                style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;" size="mini"
+                type="primary">日志</el-button>
             </el-col>
-            <el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
+            <!--   <el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
               <el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
-                 size="mini" @click="czmx()" type="primary">重置模型</el-button>
+                 size="mini" @click="czmx()" type="primary">重置</el-button>
             </el-col>
             <el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
               <el-button @click="savePdf()"  style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
-                size="mini" type="primary">溯源日志</el-button>
-            </el-col>
+                size="mini" type="primary">日志</el-button>
+            </el-col> -->
 
 
 
@@ -478,7 +493,7 @@
 </template>
 
 <script>
-  import ywDialog from './ywDialog.vue'
+  import czDialog from './czDialog.vue'
   import * as THREE from 'three'
   import gsap from 'gsap'
   import ksh33 from './static/ksh33.png'
@@ -497,7 +512,7 @@
 
     },
     components: {
-      ywDialog
+      czDialog
     },
     computed: {
       optionSingleHeight() {
@@ -512,15 +527,19 @@
     },
     data() {
       return {
+        /* 材质辅助输入*/
+        cztypeConfig:{
+
+        },
         /* pdf-*/
-        pdfBytes:'',
+        pdfBytes: '',
         mxbshow: false,
         sblxCode: '',
         sblxcxwcxdxx: false,
         sblxcxwcxdxxText: '',
         /* 弹框控制参数*/
         showDialog: false,
-        DialogTitle: '异物信息',
+        DialogTitle: '材质',
         DialogWidth: '65vw',
         ywlistData: [],
         jxlistData: [],
@@ -597,6 +616,12 @@
       }
     },
     methods: {
+      getCz(){
+
+      },
+      czOverlayClick(){
+        this.showDialog=true
+      },
       czmx() {
         this.viewer.scene.traverse((model) => {
           if (model.isMesh) {
@@ -626,17 +651,43 @@
         this.apiJzbm()
       },
       /* 点击按钮弹出异物，然后选中*/
-      savePdf(){
-        if( this.pdfBytes){
+      savePdf() {
+        if (this.pdfBytes) {
+
           const base64String = this.pdfBytes;
-          const linkSource = `data:application/pdf;base64,${base64String}`;
-          const downloadLink = document.createElement('a');
-          const fileName = '排除日志.pdf';
-          downloadLink.href = linkSource;
-          downloadLink.download = fileName;
-          downloadLink.click();
-          downloadLink.remove()
-        }else{
+          // const linkSource = `data:application/pdf;base64,${base64String}`
+          // var linkSource = `data:application/pdf;base64,${base64String}`
+
+                  // 将 Base64 编码的字符串转换为 Blob 对象
+                  function base64ToBlob(base64, contentType) {
+                      var byteCharacters = window.atob(base64);
+                      var byteNumbers = new Array(byteCharacters.length);
+                      for (var i = 0; i < byteCharacters.length; i++) {
+                          byteNumbers[i] = byteCharacters.charCodeAt(i);
+                      }
+                      var byteArray = new Uint8Array(byteNumbers);
+                      return new Blob([byteArray], {type: contentType});
+                  }
+
+                  // 创建 Blob 对象并生成 URL
+                  var blob = base64ToBlob(base64String, 'application/pdf');
+                  var url = URL.createObjectURL(blob);
+
+                  // 设置 <a> 标签的 href 属性
+                  var link =  document.createElement('a');
+                  link.href = url;
+                  link.target = '_blank'; // 在新标签页中打开
+                  link.click();
+                  link.remove()
+          // const downloadLink = document.createElement('a');
+
+          // downloadLink.href = linkSource;
+          // downloadLink.target = '_blank'
+          //  const fileName = '排除日志.pdf';
+          // downloadLink.download = fileName;
+          // downloadLink.click();
+          // downloadLink.remove()
+        } else {
           this.$warning('请溯源后,再保存为排除日志')
         }
       },
@@ -658,7 +709,7 @@
         // document.body.appendChild(a);
         // a.click();
         // a.remove()
-        this.pdfBytes=res.data.records.pdfBytes
+        this.pdfBytes = res.data.records.pdfBytes
 
 
         /* -
@@ -725,9 +776,21 @@
         this.mxbshow = true
         /* 匹配展示数据和本地数据*/
         if (this.jzReMaterialQue.length != 0) {
-          this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
+          let model;
+          /* 优先选中查询框的设备*/
+          let sbxxCode=this.sypcQueryParams.gnwz.replace(/\s+/g, '');
+          this.jzReMaterialQue.forEach(jzitem=>{
+            if(jzitem.model&&jzitem.model.name&&jzitem.model.name==sbxxCode){
+                model=jzitem.model
+            }
+          })
+
+
+
+          this.viewer.cameraControl.fitTo(model||this.jzReMaterialQue[0].model);
           this.sylbshow = true
-          this.clickTag(this.jzReMaterialQue[0].model.name)
+          /* */
+          this.clickTag(model.name||this.jzReMaterialQue[0].model.name)
         } else {
           this.sylbshow = false
         }
@@ -1598,6 +1661,11 @@
 </script>
 
 <style scoped lang="scss">
+  .search-span {
+    min-width: 60px;
+    float: right;
+  }
+
   .nosbxxTitle {
     color: #68D8FE;
     font-size: 18px;
@@ -1944,6 +2012,13 @@
     background-color: rgba(22, 84, 198, 0.7);
   }
 
+  button:hover {
+    background-color: #26c6f0 !important;
+    color: #fff !important;
+  }
+  .el-icon-search{
+    color: #61d2f7;
+  }
   .lbbody {
     height: calc(100% - 4vh);
     overflow: hidden;