166 lines
5.9 KiB
JavaScript
166 lines
5.9 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("tower-crane-value-2", {
|
|
template: `
|
|
<div class="safe-tower-content">
|
|
<div class="safe-tower-content-title">
|
|
<span v-html="value.name"></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.postArmLength">0</span> m</div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>前臂长</p>
|
|
<div><span v-html="value.foreArmLength">0</span> m</div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>塔身高</p>
|
|
<div><span v-html="value.downHeight">0</span> m</div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>功率</p>
|
|
<div><span v-html="value.power"></span> kw</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="value.torqueData">0</span> %</div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>安全吊重</p>
|
|
<div><span v-html="value.overload">0</span> t</div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>进场时间</p>
|
|
<div class="safe-tower-content-data-list-time"><span v-html="value.enterTime">0</span></div>
|
|
</div>
|
|
<div class="safe-tower-content-data-list">
|
|
<p>扶墙高度</p>
|
|
<div><span style="font-size: 20px;" v-html="value.buttress"></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
|
|
},
|
|
ampdata:{
|
|
type:Number
|
|
},
|
|
forearmlength:{
|
|
type:Number
|
|
},
|
|
heightdata:{
|
|
type:Number
|
|
},
|
|
downheight:{
|
|
type:Number
|
|
},
|
|
angledata:{
|
|
type:Number
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
this.animation()
|
|
},
|
|
methods: {
|
|
animation(){
|
|
var leftValue = this.ampdata //幅度
|
|
var brachium = this.forearmlength //臂长 //定制
|
|
|
|
leftValue = leftValue < 0 ? 0 : leftValue
|
|
var left = leftValue / brachium * 100
|
|
|
|
|
|
|
|
var heightValue = this.heightdata //高度
|
|
var towerHeight = this.downheight //塔身高度
|
|
|
|
var height = (towerHeight - heightValue) * this.height / towerHeight
|
|
height = height > this.height ? this.height : height
|
|
|
|
var value = Number(this.angledata) //角度
|
|
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:{
|
|
ampdata:function () {
|
|
this.animation()
|
|
},
|
|
forearmlength:function () {
|
|
this.animation()
|
|
},
|
|
heightdata:function () {
|
|
this.animation()
|
|
},
|
|
downheight:function () {
|
|
this.animation()
|
|
},
|
|
angledata:function () {
|
|
this.animation()
|
|
},
|
|
}
|
|
|
|
})
|