Merge remote-tracking branch 'origin/master'
6 files modified
9 files added
| | |
| | | :show-admin-boundary="true" :zoom-to-boundary="true" :enable-stage-emit="true" |
| | | :cluster-height="CLUSTER_HEIGHT" :detail-height="DETAIL_HEIGHT" @ready="handleMapReady" |
| | | @stage-change="handleStageChange" /> |
| | | <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }"> |
| | | <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.rightCollapsed }"> |
| | | <div class="layer-control-wrap" ref="layerWrapRef"> |
| | | <div class="layer-control" @click="toggleLayerPanel"> |
| | | <img :src="layerControlIcon" alt="图层控制" /> |
| | |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | leftCollapsed: { |
| | | rightCollapsed: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | |
| | | ) |
| | | |
| | | watch( |
| | | () => props.leftCollapsed, |
| | | () => props.rightCollapsed, |
| | | isCollapsed => { |
| | | if (isCollapsed) showLayerPanel.value = false |
| | | } |
| | |
| | | |
| | | .layer-control-root { |
| | | position: absolute; |
| | | left: 337px; |
| | | bottom: 22px; |
| | | z-index: 9; |
| | | right: 337px; |
| | | top: 95px; |
| | | z-index: 11; |
| | | transition: transform 0.3s ease-in-out; |
| | | pointer-events: none; |
| | | |
| | | &.collapsed { |
| | | transform: translateX(-317px); |
| | | transform: translateX(317px); |
| | | } |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: absolute; |
| | | left: 66px; |
| | | bottom: 0; |
| | | right: 66px; |
| | | top: 0; |
| | | width: 160px; |
| | | max-height: 442px; |
| | | background: #191932; |
| | | border-radius: 8px 8px 8px 8px; |
| | | z-index: 99; |
| | | |
| | | .panel-title { |
| | | padding: 0 16px; |
| | |
| | | <template> |
| | | <div class="avue-top"> |
| | | <div class="top-bar__title"> |
| | | <img :src="logoUrl" alt=""> |
| | | <span>低空飞行监管子系统</span> |
| | | <header class="header-container"> |
| | | <div class="content-wrap"> |
| | | <div class="logo-title-wrap"> |
| | | <img :src="logoUrl" alt="Logo"></img> |
| | | <p class="title">低空飞行监管子系统</p> |
| | | </div> |
| | | |
| | | <div class="top-bar__right"> |
| | | <div class="header-right"> |
| | | <nav class="nav-menu"> |
| | | <div v-for="(item, index) in topMenus" :key="index" class="nav-item" |
| | | :class="{ active: item.active }" @click="handleMenuClick(item)"> |
| | | <span>{{ item.label }}</span> |
| | | </div> |
| | | </nav> |
| | | |
| | | <div class="icon-group"> |
| | | <div class="top-user"> |
| | | <div class="icon-box"> |
| | | <img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </header> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | data () { |
| | | return { |
| | | logoUrl: logo, |
| | | activeMenu: 'drone-control', |
| | | topMenus: [ |
| | | { |
| | | key: 'twin-supervision', |
| | | label: '孪生监管', |
| | | path: '/flight-supervision/#/brain', |
| | | }, |
| | | { |
| | | key: 'airspace-collaboration', |
| | | label: '空域协同', |
| | | path: '/flight-supervision/#/space', |
| | | }, |
| | | { |
| | | key: 'air-traffic', |
| | | label: '空中交通', |
| | | path: '/flight-supervision/#/activity', |
| | | }, |
| | | { |
| | | key: 'information-service', |
| | | label: '信息服务', |
| | | path: '/flight-supervision/#/infoService', |
| | | }, |
| | | { |
| | | key: 'drone-control', |
| | | label: '无人机管控', |
| | | path: '', |
| | | active: true, |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | filters: {}, |
| | |
| | | }) |
| | | }, |
| | | jumpMH () { |
| | | |
| | | window.open(`${window.location.origin}/droneWeb/#/gateway`, '_blank') |
| | | }, |
| | | handleMenuClick (item) { |
| | | this.activeMenu = item.key |
| | | if (!item.path) return |
| | | window.open(`${window.location.origin}${item.path}`, '_blank') |
| | | }, |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .avue-top { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | height: 100%; |
| | | .header-container { |
| | | position: relative; |
| | | height: 110px; |
| | | background: url('@/assets/images/topContainer/top-bg.png') center / 100% 100% no-repeat !important; |
| | | background-repeat: no-repeat; |
| | | background-size: cover; |
| | | pointer-events: none; |
| | | z-index: 2; |
| | | |
| | | .bg { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .top-bar__left { |
| | | flex: 0 0 auto; |
| | | } |
| | | |
| | | .top-bar__title { |
| | | margin-top: 16px; |
| | | margin-left: 30px; |
| | | flex: 1; |
| | | .content-wrap { |
| | | position: absolute; |
| | | inset: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | height: pxToVh(48); |
| | | z-index: 1; |
| | | padding: 0 40px; |
| | | |
| | | .logo-title-wrap { |
| | | display: flex; |
| | | align-items: center; |
| | | transform: translateY(-10px); |
| | | |
| | | img { |
| | | margin-right: 17px; |
| | | width: 50px; |
| | | height: 50px; |
| | | width: 70px; |
| | | height: 63px; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | span { |
| | | .title { |
| | | margin-left: 16px; |
| | | margin-top: 0; |
| | | margin-bottom: 0; |
| | | |
| | | width: 353px; |
| | | height: 43px; |
| | | font-family: PangMen; |
| | |
| | | } |
| | | } |
| | | |
| | | .top-bar__right { |
| | | margin-right: 28px; |
| | | padding-top: 16px; |
| | | flex: 0 0 auto; |
| | | display: flex !important; |
| | | align-items: flex-start; |
| | | height: 100%; |
| | | .header-right { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: auto; |
| | | margin-top: -25px; |
| | | pointer-events: auto; |
| | | |
| | | .nav-menu { |
| | | display: flex; |
| | | margin-right: 30px; |
| | | gap: 0px; |
| | | |
| | | .nav-item { |
| | | width: 136px; |
| | | height: 34px; |
| | | box-sizing: border-box; |
| | | text-align: center; |
| | | color: #afafe0; |
| | | text-decoration: none; |
| | | font-size: 20px; |
| | | transition: color 0.3s; |
| | | padding: 0; |
| | | background: url('@/assets/images/menu-item.png') no-repeat center / 136px 34px; |
| | | cursor: pointer; |
| | | margin: 0 10px; |
| | | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding-bottom: 10px; |
| | | line-height: 1; |
| | | |
| | | font-family: YouSheBiaoTiHei; |
| | | |
| | | &:hover { |
| | | color: #fff; |
| | | } |
| | | |
| | | &.active { |
| | | color: #fff; |
| | | background: url('@/assets/images/active-menu-item.png') no-repeat center / 136px 34px; |
| | | |
| | | span { |
| | | background: linear-gradient(180deg, |
| | | #fff 22.11%, |
| | | #ffffff 86.69%); |
| | | background-size: contain; |
| | | background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | text-shadow: 0px 0px 13px 0px #5da6ef73; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .icon-group { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 20px; |
| | | gap: 15px; |
| | | |
| | | |
| | | .icon-box { |
| | | margin-top: 6px; |
| | |
| | | .el-dropdown-link:hover { |
| | | color: #409EFF; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="page-container"> |
| | | <DeviceMapContainer ref="deviceMapRef" :all-devices="allDevices" :alarm-drones="realWarningData" |
| | | :left-collapsed="leftCollapsed" container-id="data-cockpit-map" |
| | | :right-collapsed="rightCollapsed" container-id="data-cockpit-map" |
| | | @drone-signal="handleAlarmAction('signal', $event)" @drone-counter="handleAlarmAction('counter', $event)" |
| | | @drone-favorite="handleAlarmFavorite" /> |
| | | <LeftContainer class="left-container" v-model:activeId="leftActiveId" v-model:collapsed="leftCollapsed" |
| | |
| | | <view class="content"> |
| | | <view class="title">飞行设备</view> |
| | | <u-list :style="{ height: 'calc(100vh - 160rpx)' }" @scrolltolower="scrolltolower" :lower-threshold="50"> |
| | | <view class="card" v-for="(item, index) in equipmentList" :key="index" @click="handleClick(item)"> |
| | | <u-empty v-if="equipmentList.length === 0" |
| | | text="暂无数据" |
| | | icon="http://cdn.uviewui.com/uview/empty/car.png"> |
| | | </u-empty> |
| | | <view v-else class="card" v-for="(item, index) in equipmentList" :key="index" @click="handleClick(item)"> |
| | | <view class="left"> |
| | | <u-image :src="droneSvg" mode="aspectFill" :width="70" :height="90"></u-image> |
| | | </view> |
| | |
| | | // 获取轮播图 |
| | | async function getLBListTest() { |
| | | const res = await getLBList({}) |
| | | console.log(res, '8898') |
| | | lbList.value = res.data.data.map(item => ({ |
| | | // 排除annexUrl为空的项 |
| | | lbList.value = res.data.data.filter(item => item.annexUrl).map(item => ({ |
| | | ...item, |
| | | image: item.annexUrl, |
| | | title: item.bannerTitle, |
| | |
| | | <view class="sp-title"> |
| | | 审批记录 |
| | | </view> |
| | | |
| | | <u-list :style="{ height: 'calc(100vh - 240rpx)' }" @scrolltolower="scrolltolower" :lower-threshold="50"> |
| | | <view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex" @click="handleClick(approvalRecord)"> |
| | | <u-empty v-if="approvalRecords.length === 0" |
| | | text="暂无数据" |
| | | icon="http://cdn.uviewui.com/uview/empty/car.png"> |
| | | </u-empty> |
| | | <view v-else class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex" @click="handleClick(approvalRecord)"> |
| | | <view class="name-status"> |
| | | <view class="name-image"> |
| | | <u-image :src="spSvg" class="icon" width="16" height="16"></u-image> |