|
|
@@ -12,82 +12,7 @@
|
|
|
:isGarden="true"
|
|
|
:gardenId="defaultGardenId"
|
|
|
></weather-info>
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="operation-button" :style="{ top: isHeaderShow ? '157px' : '117px' }">
|
|
|
- <div class="button-group">
|
|
|
- <div class="button-item" @click="toFarmInfo">
|
|
|
- <img class="button-icon" src="@/assets/img/tab_bar/home-active.png" alt="" />
|
|
|
- <span>基本信息</span>
|
|
|
- </div>
|
|
|
- <div class="button-item" @click="handlePage('/farm_photo')">
|
|
|
- <img class="button-icon" src="@/assets/img/home/photo-icon.png" alt="" />
|
|
|
- <span>农场相册</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <badge dot :offset="[-4, 5]" @click="handlePage('/message_list')">
|
|
|
- <div class="add-farm-button">
|
|
|
- <img class="icon" src="@/assets/img/monitor/notice.png" alt="" />
|
|
|
- <span>农场消息</span>
|
|
|
- </div>
|
|
|
- </badge>
|
|
|
- </div>
|
|
|
- <!-- 功能卡片网格 -->
|
|
|
- <div class="function-cards">
|
|
|
- <div
|
|
|
- v-for="(card, index) in functionCards"
|
|
|
- :key="index"
|
|
|
- class="function-card"
|
|
|
- @click="handleCardClick(card)"
|
|
|
- >
|
|
|
- <div class="card-title">{{ card.title }}</div>
|
|
|
- <img :src="require(`@/assets/img/monitor/grid-${index + 1}.png`)" :alt="card.title" />
|
|
|
- <div class="card-status" :class="card.className" v-if="card.status">
|
|
|
- {{ card.status }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 实时播报 -->
|
|
|
- <div class="realtime-broadcast">
|
|
|
- <div class="broadcast-header">
|
|
|
- <div class="header-left">
|
|
|
- <span class="broadcast-title">实时播报</span>
|
|
|
- <!-- <div class="broadcast-action" :class="{ speaking: isSpeaking }" @click="handleBroadcast">
|
|
|
- <img class="speaker-icon" src="@/assets/img/monitor/speaker.png" alt="播报" />
|
|
|
- <span class="broadcast-text">{{ isSpeaking ? '停止播报' : '点击播报' }}</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <list
|
|
|
- :loading="loading"
|
|
|
- :finished="finished"
|
|
|
- finished-text="暂无更多播报"
|
|
|
- :immediate-check="true"
|
|
|
- @load="onLoad"
|
|
|
- class="broadcast-list"
|
|
|
- :style="{ height: !isHeaderShow ? 'calc(100vh - 460px)' : 'calc(100vh - 535px)' }"
|
|
|
- >
|
|
|
- <div v-for="(item, index) in broadcastList" :key="index" class="broadcast-item">
|
|
|
- <div class="item-content">
|
|
|
- <div class="content-top">
|
|
|
- <div class="item-icon">
|
|
|
- <img src="@/assets/img/monitor/bell.png" alt="通知" />
|
|
|
- </div>
|
|
|
- <div class="item-title">{{ item.title }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-status van-multi-ellipsis--l2" v-html="item.content"></div>
|
|
|
- </div>
|
|
|
- <div class="item-zone" v-if="item.regionId">
|
|
|
- <div class="point"></div>
|
|
|
- <span>{{ item.regionId }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </list>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <!-- 农场信息 -->
|
|
|
- <farm-info-popup ref="farmInfoRef" :farmId="gardenId"></farm-info-popup>
|
|
|
|
|
|
<tip-popup
|
|
|
v-model:show="showFarmPopup"
|
|
|
@@ -97,15 +22,6 @@
|
|
|
:closeOnClickOverlay="false"
|
|
|
@confirm="toCreateFarm"
|
|
|
/>
|
|
|
-
|
|
|
- <!-- 农场详情操作按钮 -->
|
|
|
- <div class="custom-bottom-fixed-btns" v-if="isHeaderShow">
|
|
|
- <div class="bottom-btn secondary-btn" @click="handleFarm('delete')">删除农场</div>
|
|
|
- <div v-if="!isDefaultFarm" class="bottom-btn primary-btn" @click="handleFarm('setDefault')">
|
|
|
- 设为默认农场
|
|
|
- </div>
|
|
|
- <div v-else class="bottom-btn btn-text">当前已是 默认农场</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -451,7 +367,7 @@ function handlePage(url) {
|
|
|
height: 100%;
|
|
|
padding: 13px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- background-image: linear-gradient(250deg, #cbebff 0%, #dceffd 50%, #e7f3fd 100%);
|
|
|
+ background: linear-gradient(180deg, #F9F9F9 0%, #F0F8FF 31.47%, #F9F9F9 46.81%, #F9F9F9 69.38%, #F9F9F9 100%);
|
|
|
.weather-mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -466,258 +382,5 @@ function handlePage(url) {
|
|
|
position: absolute;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
- .operation-button {
|
|
|
- position: absolute;
|
|
|
- top: 117px;
|
|
|
- left: 12px;
|
|
|
- width: calc(100% - 24px);
|
|
|
- z-index: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- .button-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .button-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- color: rgba(0, 0, 0, 0.8);
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #f2f2f2;
|
|
|
- .button-icon {
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
- .button-item:first-child {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .add-farm-button {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- color: rgba(0, 0, 0, 0.8);
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border: 1px solid #fff;
|
|
|
- .icon {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- .button-item,
|
|
|
- .add-farm-button {
|
|
|
- border-radius: 25px;
|
|
|
- padding: 8px 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .function-cards {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 10px;
|
|
|
- margin-top: 155px;
|
|
|
-
|
|
|
- .function-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 20px 0;
|
|
|
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- .card-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #1d2129;
|
|
|
- }
|
|
|
- .card-status {
|
|
|
- position: absolute;
|
|
|
- top: -5px;
|
|
|
- right: 0;
|
|
|
- padding: 1px 4px;
|
|
|
- border-radius: 6px 8px 8px 2px;
|
|
|
- font-size: 11px;
|
|
|
- background: #2199f8;
|
|
|
- color: #fff;
|
|
|
- &.yellow {
|
|
|
- background: #fdcf4c;
|
|
|
- }
|
|
|
- &.blue {
|
|
|
- background: #8a87ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .realtime-broadcast {
|
|
|
- margin-top: 10px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- .broadcast-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 4px;
|
|
|
-
|
|
|
- .header-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- .broadcast-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1d2129;
|
|
|
- }
|
|
|
-
|
|
|
- .broadcast-action {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- .speaker-icon {
|
|
|
- width: 16px;
|
|
|
- height: 14px;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .broadcast-text {
|
|
|
- color: #2199f8;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- // 播放状态下的样式
|
|
|
- &.speaking {
|
|
|
- .speaker-icon {
|
|
|
- animation: pulse 1s infinite;
|
|
|
- }
|
|
|
- .broadcast-text {
|
|
|
- color: #ff4757;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes pulse {
|
|
|
- 0% {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .broadcast-list {
|
|
|
- height: calc(100vh - 460px);
|
|
|
- overflow: auto;
|
|
|
- .broadcast-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px 0;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .item-content {
|
|
|
- width: calc(100% - 50px);
|
|
|
- .content-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .item-icon {
|
|
|
- margin-right: 8px;
|
|
|
- background: rgba(255, 0, 0, 0.05);
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-title {
|
|
|
- color: #1d2129;
|
|
|
- }
|
|
|
-
|
|
|
- .item-status {
|
|
|
- margin-top: 3px;
|
|
|
- font-size: 13px;
|
|
|
- color: rgba(29, 33, 41, 0.5);
|
|
|
- ::v-deep{
|
|
|
- p{
|
|
|
- margin: 2px 0 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .countdown {
|
|
|
- color: #ff7254;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-zone {
|
|
|
- background: rgba(241, 243, 246, 0.5);
|
|
|
- color: #7c7e81;
|
|
|
- font-size: 12px;
|
|
|
- padding: 3px 11px;
|
|
|
- border-radius: 25px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- .point {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(124, 126, 129, 0.5);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.custom-bottom-fixed-btns {
|
|
|
- z-index: 99999;
|
|
|
- padding: 15px 12px 30px 12px;
|
|
|
- .primary-btn {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- color: #2199f8;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .btn-text {
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
wangsisi