企業(yè)微信截圖_17237076727339.png

<technical-standard 
standard='{"type":"同軸度","typeIcon":"⊙","icon":"#","theoretical":"23","standard":"A-G"}'></technical-standard>

<script src="technicalStandard.js"></script>

<script>
        // 異步修改組件值
        setTimeout(function(){
            let obj = {
                type: '',
                theoretical: '221',
                code: 'G',
                grade:'2',
                up:'+0.63',
                down:'-0.23'
            }
            
            // 顯示異步數(shù)據(jù)的方式
            document.querySelector('#ts1').setAttribute('standard',JSON.stringify(obj))

    
        },2000)
    </script>

// 原生H5組件,負(fù)責(zé)根據(jù)傳入的standard參數(shù)顯示技術(shù)要求標(biāo)準(zhǔn)
// type:公差類型 
// typeIcon:  同軸度 和位置度 符號(hào)
// icon: 公差符號(hào)
// theoretical: 理論值
// code: 公差代號(hào)
// grade: 公差等級(jí)
// value: 公差帶
// up: 上篇差
// down: 下篇差
// standard: 基準(zhǔn)
// 使用方式 : 
// <script src="technicalStandard.js"></script>
// <technical-standard standard='{"theoretical":"19","code":"h","grade":"3","value":"±6"}'>
class technicalStandard extends HTMLElement {
    constructor() {
        super()
        let template = document.createElement('template')
        this.shadow = this.attachShadow({
            mode: 'closed'
        })
        template.innerHTML = `<div><div/>`
        const style = document.createElement('style')
        style.textContent = `
                .b3{
                    display: inline-block;padding: 0 3px;border: 1px solid #333333;line-height: 26px;
                }
                `
        this.shadow.append(template.content.cloneNode(true))
        this.shadow.appendChild(style)
    }
    // 添加需要監(jiān)聽的屬性
    static get observedAttributes() {
        return ['standard']
    }


    //更新回調(diào)
    attributeChangedCallback(name, o, n) {

        if (name == 'standard') {
            let data = JSON.parse(n)
            let html = ''

            // 公差類型為空白 ，直徑公差，半徑公差 :（符號(hào)icon） 理論值theoretical + 公差代號(hào)code + 公差等級(jí)grade （上偏差up，下偏差down）
            if (!data?.type || ['直徑公差', '半徑公差'].includes(data.type)) {
                html = (data.icon || '') + data.theoretical + data?.code + data?.grade
                if (!data.value) { // 如果有偏差值就使用偏差值
                    html += `(<math>
                                        <mrow>
                                            <mfenced open="[" close="]">
                                                <mtable>
                                                    <mtr>
                                                        <mtd>
                                                            <mi style="font-size:10px;">${data.up}</mi>
                                                        </mtd>
                                                    </mtr>
                                                    <mtr>
                                                        <mtd>
                                                            <mi style="font-size:10px;">${data.down}</mi>
                                                        </mtd>
                                                    </mtr>
                                                </mtable>
                                            </mfenced>
                                        </mrow>
                                    </math>)`
                } else { // 沒有就顯示上下偏差
                    html += data.value
                } 
            } else if (data.type == '粗糙度') { 
                html = `Ra${data.theoretical}`
            }
            // 剩下的公差類型都是使用邊框包圍的類型，公差符號(hào)icon + 理論值theoretical + 基準(zhǔn)standard  3個(gè)框
            // 差別是：同軸度和位置度 第一個(gè)框?yàn)閷Ｓ梅?hào)，公差符號(hào)放在第二個(gè)框和理論值一起，平面度沒有基準(zhǔn)
            else if (['同軸度', '位置度'].includes(data.type)) {
                html =`<span class="b3">${data.typeIcon}</span><span class="b3">${data.icon+data.theoretical}</span><span class="b3">${data.standard}</span>`
             
            }
            //平面度沒有基準(zhǔn)
            else if (data.type == "平面度") {
                html = `<span class="b3">${data.icon}</span><span class="b3">${data.theoretical}</span>`
 
            } else {
                html =`<span class="b3">${data.icon}</span><span class="b3">${data.theoretical}</span><span class="b3">${data.standard}</span>`
                 
            }
            
            this.shadow.querySelector('div').innerHTML = html
        }
    }
}

window.customElements.define('technical-standard', technicalStandard)