【类 型】：factor 信息抽屉加上圆角
【原 因】： 【过 程】：自适应 宽屏 右侧划出 左侧加圆角 下侧划出 上册加圆角 【影 响】：
This commit is contained in:
tk
parent
7490cff74d
commit
8f275ed939
@ -3,7 +3,7 @@
|
|||||||
<el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
|
<el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
|
||||||
:color="statusColor"></el-progress>
|
:color="statusColor"></el-progress>
|
||||||
<tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
|
<tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
|
||||||
backgroundColor="#5cbb7a">
|
:backgroundColor="statusColor">
|
||||||
{{ batteryRemainingPower }} 毫安
|
{{ batteryRemainingPower }} 毫安
|
||||||
</tooltip>
|
</tooltip>
|
||||||
<tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
|
<tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
|
||||||
|
|||||||
@ -517,28 +517,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class CustomControl {
|
|
||||||
constructor({ label, onClick }) {
|
|
||||||
this._label = label
|
|
||||||
this._onClick = onClick
|
|
||||||
}
|
|
||||||
|
|
||||||
onAdd (map) {
|
|
||||||
this._map = map
|
|
||||||
this._container = document.createElement('div')
|
|
||||||
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
|
|
||||||
this._button = document.createElement('button')
|
|
||||||
this._button.textContent = this._label
|
|
||||||
this._button.onclick = this._onClick
|
|
||||||
this._container.appendChild(this._button)
|
|
||||||
return this._container
|
|
||||||
}
|
|
||||||
|
|
||||||
onRemove () {
|
|
||||||
this._container.parentNode.removeChild(this._container)
|
|
||||||
this._map = undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
103
src/components/PlaneStatus copy.vue
Normal file
103
src/components/PlaneStatus copy.vue
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-row class="m-15" type="flex" justify="space-between">
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3">
|
||||||
|
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
||||||
|
:getPlaneMode="plane.planeState.getPlaneMode" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HeartTag from '@/components/Tag/HeartTag'
|
||||||
|
import PublicTag from '@/components/Tag/PublicTag'
|
||||||
|
// import Tooltip from '@/components/Tag/Tooltip'
|
||||||
|
import geodist from 'geodist'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PlaneStatus',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
distance: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
plane: {
|
||||||
|
typeof: 'Object',
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
HeartTag,
|
||||||
|
PublicTag
|
||||||
|
// Tooltip
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
distance (val) {
|
||||||
|
console.log(val + '米')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
created () {
|
||||||
|
try {
|
||||||
|
const point1 = { lat: 52.518611, lon: 13.408056 }
|
||||||
|
const point2 = { lat: 51.507222, lon: -0.1275 }
|
||||||
|
this.distance = geodist(point1, point2, { unit: 'meters' })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error calculating distance:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/styles/theme.scss";
|
||||||
|
|
||||||
|
.el-row {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batteryBox {}
|
||||||
|
|
||||||
|
.batteryBox .el-progress {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batteryBox .el-tooltip {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,56 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row class="m-15" type="flex" justify="space-between">
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3">
|
|
||||||
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
|
||||||
:getPlaneMode="plane.planeState.getPlaneMode" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HeartTag from '@/components/Tag/HeartTag'
|
|
||||||
import PublicTag from '@/components/Tag/PublicTag'
|
|
||||||
// import Tooltip from '@/components/Tag/Tooltip'
|
|
||||||
import geodist from 'geodist'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PlaneStatus',
|
name: 'PlaneStatus',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
distance: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -60,44 +20,19 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HeartTag,
|
|
||||||
PublicTag
|
|
||||||
// Tooltip
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
distance (val) {
|
|
||||||
console.log(val + '米')
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
created () {
|
created () {
|
||||||
try {
|
|
||||||
const point1 = { lat: 52.518611, lon: 13.408056 }
|
|
||||||
const point2 = { lat: 51.507222, lon: -0.1275 }
|
|
||||||
this.distance = geodist(point1, point2, { unit: 'meters' })
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error calculating distance:', error)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/styles/theme.scss";
|
@import "@/styles/theme.scss";
|
||||||
|
|
||||||
.el-row {
|
|
||||||
z-index: 90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batteryBox {}
|
|
||||||
|
|
||||||
.batteryBox .el-progress {
|
|
||||||
z-index: 90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batteryBox .el-tooltip {
|
|
||||||
z-index: 90;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -88,6 +88,26 @@ label {
|
|||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-drawer {
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
}
|
||||||
|
/* 大于480px时的圆角样式 */
|
||||||
|
.el-drawer-large {
|
||||||
|
border-top-left-radius: 10px !important;
|
||||||
|
border-bottom-left-radius: 10px !important;
|
||||||
|
border-top-right-radius: 0px !important;
|
||||||
|
border-bottom-right-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小于480px时的圆角样式 */
|
||||||
|
.el-drawer-small {
|
||||||
|
border-top-left-radius: 10px !important;
|
||||||
|
border-top-right-radius: 10px !important;
|
||||||
|
border-bottom-left-radius: 0px !important;
|
||||||
|
border-bottom-right-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
//mapboxgl
|
//mapboxgl
|
||||||
.mapboxgl-ctrl-bottom-left a {
|
.mapboxgl-ctrl-bottom-left a {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|||||||
@ -32,8 +32,9 @@
|
|||||||
<el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
|
<el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
|
||||||
@click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
|
@click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
<el-drawer :visible.sync="drawer" :size="drawerSize" :append-to-body="true" :modal-append-to-body="false"
|
<el-drawer :custom-class="drawerAuto ? 'el-drawer-small' : 'el-drawer-large'" :visible.sync="drawer"
|
||||||
:direction="drawerDirection">
|
:size="drawerAuto ? '90%' : '60%'" :append-to-body="true" :modal-append-to-body="false"
|
||||||
|
:direction="drawerAuto ? 'btt' : 'rtl'">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<div>
|
<div>
|
||||||
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
|
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
|
||||||
@ -112,16 +113,10 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
/**
|
/**
|
||||||
* @description: 任务抽屉根据分辨率自适应
|
* @description: 屏幕宽度是否小于480
|
||||||
*/
|
*/
|
||||||
drawerDirection () {
|
drawerAuto () {
|
||||||
return window.innerWidth < 480 ? 'btt' : 'rtl'
|
return window.innerWidth < 480
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @description: 任务抽屉根据分辨率自适应
|
|
||||||
*/
|
|
||||||
drawerSize () {
|
|
||||||
return window.innerWidth < 480 ? '90%' : '60%' // 根据需要设置不同的宽度
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description: 侧边栏显隐
|
* @description: 侧边栏显隐
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user