akira
/
Cloud-API-Demo-Web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

lz修改透明度问题1-20230807

pull/19/head
李钊 2 years ago
parent
af55d475ac
commit
3eea204877
2 changed files with 126 additions and 118 deletions
Unified View
  1. 240
      src/components/GMap.vue
  2. 4
      src/hooks/use-g-map-cover.ts

240
src/components/GMap.vue
Unescape View File

@ -22,125 +22,127 @@
</div> </div>
<!-- 飞机OSD --> <!-- 飞机OSD -->
<div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12"> <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
<div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;"> <div style="opacity: 0.8;background: #000;">
<span>{{ osdVisible.callsign }}</span> <div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;">
<span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span> <span>{{ osdVisible.callsign }}</span>
</div> <span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>
<div style="height: 82%;">
<div class="flex-column flex-align-center flex-justify-center" style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model">
<div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
<span><a-image :src="M30" :preview="false"/></span>
<span>{{ osdVisible.model }}</span>
</div>
</a-tooltip>
</div> </div>
<div class="osd"> <div style="height: 82%;">
<a-row> <div class="flex-column flex-align-center flex-justify-center" style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d;">
<a-col span="16" :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">{{ EModeCode[deviceInfo.device.mode_code] }}</a-col> <a-tooltip :title="osdVisible.model">
</a-row> <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
<a-row> <span><a-image :src="M30" :preview="false"/></span>
<a-col span="6"> <span>{{ osdVisible.model }}</span>
<a-tooltip title="Signal strength"> </div>
<span>HD</span> </a-tooltip>
<span class="ml10">{{ deviceInfo.gateway?.transmission_signal_quality }}</span> </div>
</a-tooltip> <div class="osd">
</a-col> <a-row>
<a-col span="6"> <a-col span="16" :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">{{ EModeCode[deviceInfo.device.mode_code] }}</a-col>
<a-tooltip title="RC Battery Level"> </a-row>
<span><ThunderboltOutlined class="fz14"/></span> <a-row>
<span class="ml10">{{ deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str ? deviceInfo.gateway.capacity_percent + ' %' : deviceInfo.gateway.capacity_percent }}</span> <a-col span="6">
</a-tooltip> <a-tooltip title="Signal strength">
</a-col> <span>HD</span>
<span class="ml10">{{ deviceInfo.gateway?.transmission_signal_quality }}</span>
</a-tooltip>
</a-col>
<a-col span="6">
<a-tooltip title="RC Battery Level">
<span><ThunderboltOutlined class="fz14"/></span>
<span class="ml10">{{ deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str ? deviceInfo.gateway.capacity_percent + ' %' : deviceInfo.gateway.capacity_percent }}</span>
</a-tooltip>
</a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Drone Battery Level"> <a-tooltip title="Drone Battery Level">
<span><ThunderboltOutlined class="fz14"/></span> <span><ThunderboltOutlined class="fz14"/></span>
<span class="ml10">{{ deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device.battery.capacity_percent + ' %' : deviceInfo.device.battery.capacity_percent }}</span> <span class="ml10">{{ deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device.battery.capacity_percent + ' %' : deviceInfo.device.battery.capacity_percent }}</span>
</a-tooltip> </a-tooltip>
</a-col>
</a-row>
<a-row>
<a-tooltip title="RTK Fixed">
<a-col span="6" class="flex-row flex-align-center flex-justify-start">
<span>Fixed</span>
<span class="ml10 circle" :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>
</a-col> </a-col>
</a-tooltip> </a-row>
<a-col span="6"> <a-row>
<a-tooltip title="GPS"> <a-tooltip title="RTK Fixed">
<span>GPS</span> <a-col span="6" class="flex-row flex-align-center flex-justify-start">
<span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</span> <span>Fixed</span>
</a-tooltip> <span class="ml10 circle" :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>
</a-col> </a-col>
<a-col span="6"> </a-tooltip>
<a-tooltip title="RTK"> <a-col span="6">
<span><TrademarkOutlined class="fz14"/></span> <a-tooltip title="GPS">
<span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span> <span>GPS</span>
</a-tooltip> <span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</span>
</a-col> </a-tooltip>
</a-row> </a-col>
<a-row> <a-col span="6">
<a-col span="6"> <a-tooltip title="RTK">
<a-tooltip title="Flight Mode"> <span><TrademarkOutlined class="fz14"/></span>
<span><ControlOutlined class="fz16" /></span> <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>
<span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span> </a-tooltip>
</a-tooltip> </a-col>
</a-col> </a-row>
<a-col span="6"> <a-row>
<a-tooltip title="Altitude above sea level"> <a-col span="6">
<span>ASL</span> <a-tooltip title="Flight Mode">
<span class="ml10">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span> <span><ControlOutlined class="fz16" /></span>
</a-tooltip> <span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span>
</a-col> </a-tooltip>
<a-col span="6"> </a-col>
<a-tooltip title="Altitude above takeoff level"> <a-col span="6">
<span>ALT</span> <a-tooltip title="Altitude above sea level">
<span class="ml10">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}</span> <span>ASL</span>
</a-tooltip> <span class="ml10">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span>
</a-col> </a-tooltip>
<a-col span="6"> </a-col>
<a-tooltip title="Distance to Home Point"> <a-col span="6">
<span>H</span> <a-tooltip title="Altitude above takeoff level">
<span class="ml10">{{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m' }}</span> <span>ALT</span>
</a-tooltip> <span class="ml10">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}</span>
</a-col> </a-tooltip>
</a-row> </a-col>
<a-row> <a-col span="6">
<a-col span="6"> <a-tooltip title="Distance to Home Point">
<a-tooltip title="Horizontal Speed"> <span>H</span>
<span>H.S</span> <span class="ml10">{{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m' }}</span>
<span class="ml10">{{ deviceInfo.device.horizontal_speed === str ? str : deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s'}}</span> </a-tooltip>
</a-tooltip> </a-col>
</a-col> </a-row>
<a-col span="6"> <a-row>
<a-tooltip title="Vertical Speed"> <a-col span="6">
<span>V.S</span> <a-tooltip title="Horizontal Speed">
<span class="ml10">{{ deviceInfo.device.vertical_speed === str ? str : deviceInfo.device.vertical_speed.toFixed(2) + ' m/s'}}</span> <span>H.S</span>
</a-tooltip> <span class="ml10">{{ deviceInfo.device.horizontal_speed === str ? str : deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s'}}</span>
</a-col> </a-tooltip>
<a-col span="6"> </a-col>
<a-tooltip title="Wind Speed"> <a-col span="6">
<span>W.S</span> <a-tooltip title="Vertical Speed">
<span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'}}</span> <span>V.S</span>
</a-tooltip> <span class="ml10">{{ deviceInfo.device.vertical_speed === str ? str : deviceInfo.device.vertical_speed.toFixed(2) + ' m/s'}}</span>
</a-col> </a-tooltip>
</a-row> </a-col>
<a-col span="6">
<a-tooltip title="Wind Speed">
<span>W.S</span>
<span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'}}</span>
</a-tooltip>
</a-col>
</a-row>
</div>
</div> </div>
</div> <div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0">
<div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0"> <div style="background: #535759;" class="width-100"></div>
<div style="background: #535759;" class="width-100"></div> <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></div>
<div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></div> <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%'}"></div>
<div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%'}"></div> <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div>
<div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%'}"></div>
<div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
<div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }"> {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
{{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}: {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
{{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }} </div>
</div>
<div class="fz14">
<div @click="play()">直播视频</div>
</div> </div>
</div>
<div class="fz14">
<div @click="play()">直播视频</div>
</div> </div>
<div class="live" v-if="showLive"> <div class="live" v-if="showLive">
<!-- <div>2222</div> --> <!-- <div>2222</div> -->
@ -148,6 +150,9 @@
<LiveNewOthers></LiveNewOthers> <LiveNewOthers></LiveNewOthers>
</div> </div>
</div> </div>
<!-- <div class="osd-panel2 fz12">
</div> -->
<!-- 机场OSD --> <!-- 机场OSD -->
<div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12"> <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
<div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;"> <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;">
@ -902,10 +907,13 @@ export default defineComponent({
left: 10px; left: 10px;
top: 10px; top: 10px;
width: 480px; width: 480px;
background: #000; /* background: #000; */
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
opacity: 0.8; /* opacity: 0.8; */
}
.live{
background: #000;
} }
.osd > div:not(.dock-control-panel) { .osd > div:not(.dock-control-panel) {
margin-top: 5px; margin-top: 5px;

4
src/hooks/use-g-map-cover.ts
Unescape View File

@ -94,7 +94,7 @@ export function useGMapCover () {
// console.log(dis) // console.log(dis)
store.state.Layers.forEach(item => { store.state.Layers.forEach(item => {
item.elements.forEach(item2 => { item.elements.forEach(item2 => {
if (item2.id == data.id) { if (item2.id === data.id) {
item2.around = dis item2.around = dis
} }
}) })
@ -158,7 +158,7 @@ export function useGMapCover () {
// console.log(store.state.Layers) // console.log(store.state.Layers)
store.state.Layers.forEach(item => { store.state.Layers.forEach(item => {
item.elements.forEach(item2 => { item.elements.forEach(item2 => {
if (item2.id == data.id) { if (item2.id === data.id) {
item2.area = area item2.area = area
item2.around = around item2.around = around
} }

Write Preview
Loading…
Cancel
Save