3d模型无法展示的时候用文字替换

web_widget_model_viewer/static/src/js/3d_viewer.js

@@ -1,14 +1,14 @@
 /** @odoo-module **/
 
-import { registry } from "@web/core/registry";
-import { _lt } from "@web/core/l10n/translation";
-import { standardFieldProps } from "@web/views/fields/standard_field_props";
-import { useInputField } from "@web/views/fields/input_field_hook";
-import { FileUploader } from "@web/views/fields/file_handler";
-import { session } from "@web/session";
-import { useService } from "@web/core/utils/hooks";
-import { isBinarySize } from "@web/core/utils/binary";
-import { download } from "@web/core/network/download";
+import {registry} from "@web/core/registry";
+import {_lt} from "@web/core/l10n/translation";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+import {useInputField} from "@web/views/fields/input_field_hook";
+import {FileUploader} from "@web/views/fields/file_handler";
+import {session} from "@web/session";
+import {useService} from "@web/core/utils/hooks";
+import {isBinarySize} from "@web/core/utils/binary";
+import {download} from "@web/core/network/download";
 import utils from 'web.utils';
 
 import core from 'web.core';
@@ -16,13 +16,14 @@ import rpc from 'web.rpc';
 
 var QWeb = core.qweb;
 
-import { Component, onWillUpdateProps, useState, useRef, useEffect } from "@odoo/owl";
+import {Component, onWillUpdateProps, useState, useRef, useEffect} from "@odoo/owl";
 
 export class StepViewer extends Component {
     setup() {
         this.props.url = this.formatUrl();
     }
-    formatUrl(){
+
+    formatUrl() {
         var url = '';
         if (this.props.value) {
             if (this.props.value.slice(-1) == 'b' && !isNaN(this.props.value.split(' ')[0])) {
@@ -30,14 +31,15 @@ export class StepViewer extends Component {
                     base_url: session['web.base.url'],
                     model: this.props.record.resModel,
                     id: JSON.stringify(this.props.record.data['id']),
-                    field: this.props.name}
-                url = url_props['base_url'].replace('http://', 'https://') +'/web/content/'+url_props['model']+'/'+url_props['id']+'/'+url_props['field']+'?download=true'
+                    field: this.props.name
+                }
+                url = url_props['base_url'].replace('http://', 'https://') + '/web/content/' + url_props['model'] + '/' + url_props['id'] + '/' + url_props['field'] + '?download=true'
                 // url = 'http://localhost:8069'+'/web/content/'+url_props['model']+'/'+url_props['id']+'/'+url_props['field']+'?download=true'
-                console.log('url111111',url)
+                console.log('url111111', url)
                 return url
             } else {
                 url = "data:model/gltf-binary;base64," + this.props.value;
-                    console.log('url2',url)
+                console.log('url2', url)
                 return url
                 // localStorage.setItem('url',url)
                 // let new_url = localStorage.getItem(('url'))
@@ -45,6 +47,9 @@ export class StepViewer extends Component {
                 // return new_url
                 // url = "web_widget_model_viewer/static/src/images/not_model.png";
             }
+        } else {
+            var oImg = document.getElementsByClassName('test')[0]
+            console.log(oImg)
         }
     }
 }
@@ -56,10 +61,10 @@ StepViewer.supportedTypes = ["binary"];
 
 StepViewer.props = {
     ...standardFieldProps,
-    url: { type: String, optional: true },
+    url: {type: String, optional: true},
 };
 
-StepViewer.extractProps = ({ attrs }) => {
+StepViewer.extractProps = ({attrs}) => {
     return {
         url: attrs.options.url,
     };

web_widget_model_viewer/static/src/js/3d_viewer.xml

@@ -3,33 +3,38 @@
     
     <t t-name="web_widget_model_viewer.BinaryField3d" owl="1">
 
+        <t t-if="props.value">
             <model-viewer
                     t-att-src='props.url'
                     name="3D model"
                     alt="3D model"
                     auto-rotate="1"
                     camera-controls="1"
-                style ="background-color: #0D1D54;"
+                    style="background-color: #0D1D54;"
             >
 <!--                <div class="text-center mt-4 mb-4 mr-4">-->
-<!--                    <span-->
-<!--		                    id="model-viewer-fullscreen"-->
-<!--		                    title="View fullscreen"-->
-<!--		                    role="img"-->
-<!--		                    aria-label="Fullscreen"-->
-<!--                    >-->
-<!--                        <i class="fa fa-arrows-alt fa-2x"/>-->
-<!--                    </span>-->
-<!--                </div>-->
+                <!--                    <span-->
+                <!--		                    id="model-viewer-fullscreen"-->
+                <!--		                    title="View fullscreen"-->
+                <!--		                    role="img"-->
+                <!--		                    aria-label="Fullscreen"-->
+                <!--                    >-->
+                <!--                        <i class="fa fa-arrows-alt fa-2x"/>-->
+                <!--                    </span>-->
+                <!--                </div>-->
             </model-viewer>
+        </t>
+        <t t-if="!props.value">
+           <div style="color:red">当前制造订单暂无模型</div>
+        </t>
 
-<!--	    <model-viewer-->
-<!--			    src='/jikimo_model_viewer/static/src/js/3d_viewer/test.glb'-->
-<!--			    name="Test 3D model"-->
-<!--			    alt="Test 3D model"-->
-<!--			    auto-rotate="1"-->
-<!--			    camera-controls="1"-->
-<!--	    />-->
+        <!--	    <model-viewer-->
+        <!--			    src='/jikimo_model_viewer/static/src/js/3d_viewer/test.glb'-->
+        <!--			    name="Test 3D model"-->
+        <!--			    alt="Test 3D model"-->
+        <!--			    auto-rotate="1"-->
+        <!--			    camera-controls="1"-->
+        <!--	    />-->
 
         <script type="module"
                 src="/web_widget_model_viewer/static/src/lib/model-viewer.min.js">