YZProjectCloud/yanzhu-bigscreen/src/components/tower-crane-value-1.js

/**
 * 顶部header
 */
Vue.component("tower-crane-value-1", {
    template: `
        <div class="safe-tower-content">
            <div class="safe-tower-content-title">
                <span v-html="value.deviceName+' #前臂'+value.frontBrachium+' m'+' #后臂'+value.afterBrachium+' m'"></span>
            </div>
            <div class="safe-tower-content-data">
                <el-row>
                    <el-col :span="3">
                        <div class="safe-tower-content-data-list">
                            <p>塔身高度</p>
                            <div><span v-html="value.towerBodyHeight">0</span> m</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>当前吊重</p>
                            <div><span v-html="tLoad">0</span> t</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>当前回转</p>
                            <div><span v-html="tRotation">0</span> °</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>当前幅度</p>
                            <div><span v-html="tRange"></span> m</div>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="safe-tower-icon">
                            <!--<tower-crane-icon :width="360" :height="200" :top="55" :left="85" :ampdata="ampData"
                                              :forearmlength="foreArmLength" :heightdata="heightData" :downheight="downHeight"
                                              :angledata="angleData"></tower-crane-icon>-->
                            <div class="sf-equipment-overview-bgd">
                                <div class="sf-slider-track" :style="{'width':width+'px','height':height+'px','top':top+'px','left':left+'px'}">
                                    <div class="sf-slider-track-min" id="slider">
                                        <div class="sf-slider"></div>
                                        <div class="sf-towrope" id="towrope"></div>
                                        <div class="sf-hook"></div>
                                    </div>
                                </div>
                                <div class="circular">
                                    <div class="needle rotate" id="needle" >
                                        <div class="dot-track">
                                            <div class="dot" id="dot">
                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="safe-tower-content-data-list">
                            <p>水平倾角</p>
                            <div><span v-html="tLeanAngleX">0</span> °</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>垂直倾角</p>
                            <div><span v-html="tLeanAngleY">0</span> °</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>重量百分比</p>
                            <div><span v-html="tLoadPercent">0</span> %</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>力矩百分比</p>
                            <div><span v-html="tMomentPercent"></span> %</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
</div>
    `,
    props: {
        value:{
            type:Object
        },
        width:{
            type:Number
        },
        height:{
            type:Number
        },
        top:{
            type:Number
        },
        left:{
            type:Number
        },
        tHeight:{
            type:String
        },
        tLoad:{
            type:String
        },
        tRotation:{
            type:String
        },
        tRange:{
            type:String
        },
        tLeanAngleX:{
            type:String
        },
        tLeanAngleY:{
            type:String
        },
        tLoadPercent:{
            type:String
        },
        tMomentPercent:{
            type:String
        },
    },
    data() {
        return {

        }
    },
    mounted(){
        //this.animation()
    },
    methods: {
        animation(){
            var leftValue = this.tRange     //幅度
            var brachium = this.value.frontBrachium     //臂长 //定制

            leftValue = leftValue < 0 ? 0 : leftValue
            var left = leftValue / brachium * 100

            var heightValue = this.tHeight     //高度
            var towerHeight = this.towerBodyHeight    //塔身高度

            var height = (towerHeight - heightValue) * this.height / towerHeight
            height = height > this.height ? this.height : height

            var value = Number(this.tLeanAngleX)    //角度
            var degValue = -value
            setTimeout(function () {
                $("#slider").animate({left:left+'%'},1000);
                $("#dot").animate({left:left+'%'},1000);
                $("#needle").css("transform","rotate("+degValue+"deg)")
                setTimeout(function () {
                    $("#towrope").animate({height:height+'px'},1000);
                },1000)
            },1000)
        },
    },
    watch:{
        value:function () {
            this.animation()
        },
        tHeight:function () {
            this.animation()
        },
        tLoad:function () {
            this.animation()
        },
        tRotation:function () {
            this.animation()
        },
        tRange:function () {
            this.animation()
        },
        tLeanAngleX:function () {
            this.animation()
        },
        tLeanAngleY:function () {
            this.animation()
        },
        tLoadPercent:function () {
            this.animation()
        },
        tMomentPercent:function () {
            this.animation()
        },
    }

})