【类 型】：feat 设计电量 组件
【原 因】： 【过 程】： 【影 响】：
This commit is contained in:
tk
parent
94485ccf2c
commit
20f55808e2
847
package-lock.json
generated
847
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,39 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row class="m-15" type="flex" justify="space-between">
|
<div>
|
||||||
<el-col :span="2">
|
<el-row class="m-15" type="flex" justify="space-between">
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
||||||
<el-col :span="3">
|
</el-col>
|
||||||
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
<el-col :span="3">
|
||||||
:getPlaneMode="plane.planeState.getPlaneMode" />
|
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
||||||
</el-col>
|
:getPlaneMode="plane.planeState.getPlaneMode" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
||||||
<el-col :span="2">
|
</el-col>
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="%" state="danger" />
|
<el-col :span="2">
|
||||||
</el-col>
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.batteryRemaining" unit="%" state="danger" />
|
||||||
</el-row>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div class="batteryBox">
|
||||||
|
<el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
|
||||||
|
<tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
|
||||||
|
H
|
||||||
|
</tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HeartTag from '@/components/Tag/HeartTag'
|
import HeartTag from '@/components/Tag/HeartTag'
|
||||||
import PublicTag from '@/components/Tag/PublicTag'
|
import PublicTag from '@/components/Tag/PublicTag'
|
||||||
|
import Tooltip from '@/components/Tag/Tooltip'
|
||||||
import geodist from 'geodist'
|
import geodist from 'geodist'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -51,7 +61,8 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HeartTag,
|
HeartTag,
|
||||||
PublicTag
|
PublicTag,
|
||||||
|
Tooltip
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
},
|
},
|
||||||
@ -79,4 +90,14 @@ export default {
|
|||||||
.el-row {
|
.el-row {
|
||||||
z-index: 90;
|
z-index: 90;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.batteryBox {}
|
||||||
|
|
||||||
|
.batteryBox .el-progress {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batteryBox .el-tooltip {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
58
src/components/Tag/Tooltip.vue
Normal file
58
src/components/Tag/Tooltip.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tooltip-container no-select" :style="{ left: horizontalPosition }">
|
||||||
|
<div class="tooltip-content fb" :style="{ backgroundColor: backgroundColor }">
|
||||||
|
<div class="tooltip-arrow" :style="{ borderBottomColor: backgroundColor }"></div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Tooltip',
|
||||||
|
props: {
|
||||||
|
horizontalPosition: {
|
||||||
|
type: String,
|
||||||
|
default: '50%' // 百分比，默认为 50%
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333' // 默认背景颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tooltip-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-content {
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-bottom: 5px solid #333;
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -30,9 +30,11 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" label="已绑航线" width="200">
|
<el-table-column align="center" label="已绑航线" width="200">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-tag class="iconfont" :class="scope.row.bind_route === null || scope.row.bind_route === '' ?'icon-ic_tingyong': 'icon-feihangluxian'"
|
<el-tag class="iconfont"
|
||||||
:type="scope.row.bind_route === null || scope.row.bind_route === '' ?'danger': '' ">
|
:class="scope.row.bind_route === null || scope.row.bind_route === '' ? 'icon-ic_tingyong' : 'icon-feihangluxian'"
|
||||||
<font class="m-l-5">{{ scope.row.bind_route === null || scope.row.bind_route === ''?"未绑定": scope.row.bind_route}}</font>
|
:type="scope.row.bind_route === null || scope.row.bind_route === '' ? 'danger' : ''">
|
||||||
|
<font class="m-l-5">{{ scope.row.bind_route === null || scope.row.bind_route === '' ? "未绑定" :
|
||||||
|
scope.row.bind_route }}</font>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user