|
|
@@ -0,0 +1,869 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 头部区域 -->
|
|
|
+ <view class="header">
|
|
|
+ <view class="back-button" @click="goBack">
|
|
|
+ <text class="iconfont icon-back"></text>
|
|
|
+ </view>
|
|
|
+ <text class="page-title">选择地块</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <view class="search-box">
|
|
|
+ <view class="search-input">
|
|
|
+ <text class="iconfont icon-search"></text>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="searchKeyword"
|
|
|
+ placeholder="搜索地块名称/编号/负责人/农场"
|
|
|
+ confirm-type="search"
|
|
|
+ @input="handleSearch"
|
|
|
+ />
|
|
|
+ <text v-if="searchKeyword" class="clear-icon" @click="clearSearch">×</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 当前选中地块 -->
|
|
|
+ <view class="current-block">
|
|
|
+ <view class="block-header">
|
|
|
+ <view class="left">
|
|
|
+ <text class="icon-tag">当前</text>
|
|
|
+ <text class="title">当前地块</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="current-block-card">
|
|
|
+ <view class="current-tag">当前</view>
|
|
|
+
|
|
|
+ <view class="block-content">
|
|
|
+ <view class="block-icon">
|
|
|
+ <image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="block-info">
|
|
|
+ <!-- 标题区域：显示地块名称 + 所属农场名称 -->
|
|
|
+ <view class="block-name">{{ currentBlock.name }}</view>
|
|
|
+ <view class="block-farm">{{ currentBlock.farmName }}</view>
|
|
|
+
|
|
|
+ <!-- 次级信息区域：显示地块编号、负责人 -->
|
|
|
+ <view class="block-meta">
|
|
|
+ <text>编号：{{ currentBlock.code }}</text>
|
|
|
+ <text class="separator">|</text>
|
|
|
+ <text>负责人：{{ currentBlock.manager }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已有信息：面积、类型、作物 -->
|
|
|
+ <view class="block-details">
|
|
|
+ <text>{{ currentBlock.area }}亩</text>
|
|
|
+ <text class="separator">|</text>
|
|
|
+ <text>{{ currentBlock.type }}</text>
|
|
|
+ <text v-if="currentBlock.crop" class="separator">|</text>
|
|
|
+ <text v-if="currentBlock.crop">{{ currentBlock.crop }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="block-stats">
|
|
|
+ <view class="stat-item">
|
|
|
+ <image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
|
|
|
+ <text>设备：{{ currentBlock.deviceCount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item">
|
|
|
+ <image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit"></image>
|
|
|
+ <text>在线：{{ currentBlock.onlineDevices }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item" v-if="currentBlock.alerts > 0">
|
|
|
+ <image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit"></image>
|
|
|
+ <text class="alert-text">告警：{{ currentBlock.alerts }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 地块列表 -->
|
|
|
+ <view class="block-list">
|
|
|
+ <view class="block-header">
|
|
|
+ <view class="left">
|
|
|
+ <text class="icon-tag">列表</text>
|
|
|
+ <text class="title">可选地块列表</text>
|
|
|
+ </view>
|
|
|
+ <text class="count">共{{ filteredBlocks.length }}个地块</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载骨架屏 -->
|
|
|
+ <template v-if="isLoading">
|
|
|
+ <view class="skeleton-container">
|
|
|
+ <view class="skeleton-box" v-for="i in 3" :key="i">
|
|
|
+ <view class="skeleton-header">
|
|
|
+ <view class="skeleton-icon"></view>
|
|
|
+ <view class="skeleton-info">
|
|
|
+ <view class="skeleton-title"></view>
|
|
|
+ <view class="skeleton-detail"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="skeleton-stats"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <template v-else-if="filteredBlocks.length === 0">
|
|
|
+ <view class="empty-state">
|
|
|
+ <image src="/static/icons/empty-plots.svg" mode="aspectFit" class="empty-image"></image>
|
|
|
+ <text class="empty-text">暂无可选地块</text>
|
|
|
+ <text class="empty-subtext">请添加或关联地块后再试</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 地块列表 -->
|
|
|
+ <template v-else>
|
|
|
+ <view class="block-cards">
|
|
|
+ <view
|
|
|
+ class="block-card"
|
|
|
+ v-for="block in filteredBlocks"
|
|
|
+ :key="block.id"
|
|
|
+ :class="{'active-block': currentBlock.id === block.id, 'clickable': currentBlock.id !== block.id}"
|
|
|
+ @click="handleBlockClick(block)"
|
|
|
+ >
|
|
|
+ <view v-if="block.status === 'active'" class="status-badge status-active-badge">使用中</view>
|
|
|
+ <view v-if="block.status === 'idle'" class="status-badge status-idle-badge">闲置</view>
|
|
|
+ <view v-if="block.status === 'maintenance'" class="status-badge status-maintenance-badge">维护中</view>
|
|
|
+
|
|
|
+ <view class="block-content">
|
|
|
+ <view class="block-icon">
|
|
|
+ <image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="block-info">
|
|
|
+ <!-- 标题区域：显示地块名称 + 所属农场名称 -->
|
|
|
+ <view class="block-name">{{ block.name }}</view>
|
|
|
+ <view class="block-farm">{{ block.farmName }}</view>
|
|
|
+
|
|
|
+ <!-- 次级信息区域：显示地块编号、负责人 -->
|
|
|
+ <view class="block-meta">
|
|
|
+ <text>编号：{{ block.code }}</text>
|
|
|
+ <text class="separator">|</text>
|
|
|
+ <text>负责人：{{ block.manager }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已有信息：面积、类型、作物 -->
|
|
|
+ <view class="block-details">
|
|
|
+ <text>{{ block.area }}亩</text>
|
|
|
+ <text class="separator">|</text>
|
|
|
+ <text>{{ block.type }}</text>
|
|
|
+ <text v-if="block.crop" class="separator">|</text>
|
|
|
+ <text v-if="block.crop">{{ block.crop }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="block-stats">
|
|
|
+ <view class="stat-item">
|
|
|
+ <image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
|
|
|
+ <text>设备：{{ block.deviceCount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item">
|
|
|
+ <image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit"></image>
|
|
|
+ <text>在线：{{ block.onlineDevices }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item" v-if="block.alerts > 0">
|
|
|
+ <image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit"></image>
|
|
|
+ <text class="alert-text">告警：{{ block.alerts }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: true,
|
|
|
+ searchKeyword: '',
|
|
|
+ currentBlock: {
|
|
|
+ id: 'plot001',
|
|
|
+ code: 'FK20230001',
|
|
|
+ name: '东区智慧农场',
|
|
|
+ farmName: '绿色生态农业基地',
|
|
|
+ manager: '张三',
|
|
|
+ area: 15.5,
|
|
|
+ type: '大棚',
|
|
|
+ crop: '西红柿',
|
|
|
+ status: 'active',
|
|
|
+ deviceCount: 12,
|
|
|
+ onlineDevices: 10,
|
|
|
+ alerts: 1
|
|
|
+ },
|
|
|
+ blocks: [
|
|
|
+ {
|
|
|
+ id: 'plot001',
|
|
|
+ code: 'FK20230001',
|
|
|
+ name: '东区智慧农场',
|
|
|
+ farmName: '绿色生态农业基地',
|
|
|
+ manager: '张三',
|
|
|
+ area: 15.5,
|
|
|
+ type: '大棚',
|
|
|
+ crop: '西红柿',
|
|
|
+ status: 'active',
|
|
|
+ deviceCount: 12,
|
|
|
+ onlineDevices: 10,
|
|
|
+ alerts: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'plot002',
|
|
|
+ code: 'FK20230002',
|
|
|
+ name: '南区试验田',
|
|
|
+ farmName: '绿色生态农业基地',
|
|
|
+ manager: '李四',
|
|
|
+ area: 8.2,
|
|
|
+ type: '露天',
|
|
|
+ crop: '玉米',
|
|
|
+ status: 'active',
|
|
|
+ deviceCount: 8,
|
|
|
+ onlineDevices: 6,
|
|
|
+ alerts: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'plot003',
|
|
|
+ code: 'FK20230003',
|
|
|
+ name: '西区果园',
|
|
|
+ farmName: '现代农业示范园',
|
|
|
+ manager: '王五',
|
|
|
+ area: 20.0,
|
|
|
+ type: '果园',
|
|
|
+ crop: '苹果',
|
|
|
+ status: 'maintenance',
|
|
|
+ deviceCount: 15,
|
|
|
+ onlineDevices: 5,
|
|
|
+ alerts: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'plot004',
|
|
|
+ code: 'FK20230004',
|
|
|
+ name: '北区水稻田',
|
|
|
+ farmName: '水稻研究中心',
|
|
|
+ manager: '赵六',
|
|
|
+ area: 30.5,
|
|
|
+ type: '水田',
|
|
|
+ crop: '水稻',
|
|
|
+ status: 'active',
|
|
|
+ deviceCount: 10,
|
|
|
+ onlineDevices: 9,
|
|
|
+ alerts: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'plot005',
|
|
|
+ code: 'FK20230005',
|
|
|
+ name: '中央实验区',
|
|
|
+ farmName: '农业科技研究所',
|
|
|
+ manager: '钱七',
|
|
|
+ area: 5.0,
|
|
|
+ type: '育苗',
|
|
|
+ crop: '',
|
|
|
+ status: 'idle',
|
|
|
+ deviceCount: 6,
|
|
|
+ onlineDevices: 2,
|
|
|
+ alerts: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ filteredBlocks() {
|
|
|
+ if (!this.searchKeyword) return this.blocks
|
|
|
+
|
|
|
+ const keyword = this.searchKeyword.toLowerCase()
|
|
|
+ return this.blocks.filter(block => {
|
|
|
+ return block.name.toLowerCase().includes(keyword) ||
|
|
|
+ block.id.toLowerCase().includes(keyword) ||
|
|
|
+ block.code.toLowerCase().includes(keyword) ||
|
|
|
+ block.manager.toLowerCase().includes(keyword) ||
|
|
|
+ block.farmName.toLowerCase().includes(keyword)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // 尝试从本地存储中读取上次选择的地块
|
|
|
+ try {
|
|
|
+ const savedPlot = uni.getStorageSync('current_plot')
|
|
|
+ if (savedPlot) {
|
|
|
+ const plotData = JSON.parse(savedPlot)
|
|
|
+ // 如果存储的地块在当前地块列表中，则设置为当前选中地块
|
|
|
+ const matchedBlock = this.blocks.find(block => block.id === plotData.id)
|
|
|
+ if (matchedBlock) {
|
|
|
+ this.currentBlock = matchedBlock
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('读取保存的地块失败', e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟加载数据
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isLoading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSearch() {
|
|
|
+ // 搜索功能已通过计算属性实现
|
|
|
+ },
|
|
|
+
|
|
|
+ clearSearch() {
|
|
|
+ this.searchKeyword = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ handleBlockClick(block) {
|
|
|
+ // 如果点击当前已选中的地块，不做任何操作
|
|
|
+ if (this.currentBlock.id === block.id) return
|
|
|
+
|
|
|
+ // 弹出确认框
|
|
|
+ uni.showModal({
|
|
|
+ title: '切换地块',
|
|
|
+ content: '是否切换到该地块？切换后将查看该地块的相关设备数据。',
|
|
|
+ cancelText: '取消',
|
|
|
+ confirmText: '确定',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.selectBlock(block)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ selectBlock(block) {
|
|
|
+ this.currentBlock = block
|
|
|
+
|
|
|
+ // 保存当前选择的地块到本地存储
|
|
|
+ try {
|
|
|
+ uni.setStorageSync('current_plot', JSON.stringify({
|
|
|
+ id: block.id,
|
|
|
+ code: block.code,
|
|
|
+ name: block.name,
|
|
|
+ timestamp: Date.now()
|
|
|
+ }))
|
|
|
+ } catch (e) {
|
|
|
+ console.error('保存地块选择状态失败', e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触发选择事件，传递地块ID
|
|
|
+ this.$emit('selectBlock', block.id)
|
|
|
+
|
|
|
+ // 获取页面参数，检查是否需要返回
|
|
|
+ const pages = getCurrentPages()
|
|
|
+ const currentPage = pages[pages.length - 1]
|
|
|
+ let eventChannel
|
|
|
+
|
|
|
+ // 尝试获取页面参数和事件通道
|
|
|
+ let shouldReturn = true // 默认行为是返回
|
|
|
+ try {
|
|
|
+ const options = currentPage.options || {}
|
|
|
+ // 获取事件通道（如果存在）
|
|
|
+ eventChannel = currentPage.getOpenerEventChannel && currentPage.getOpenerEventChannel()
|
|
|
+
|
|
|
+ // 如果有redirect参数，则跳转到指定页面而不是返回
|
|
|
+ if (options.redirect) {
|
|
|
+ shouldReturn = false
|
|
|
+ uni.redirectTo({
|
|
|
+ url: decodeURIComponent(options.redirect),
|
|
|
+ success: () => {
|
|
|
+ // 跳转成功后传递选中的地块数据
|
|
|
+ if (eventChannel) {
|
|
|
+ eventChannel.emit('selectBlockResult', {
|
|
|
+ success: true,
|
|
|
+ blockId: block.id,
|
|
|
+ blockData: block
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (options.noReturn === 'true') {
|
|
|
+ // 如果设置了noReturn参数，则不执行返回操作
|
|
|
+ shouldReturn = false
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取页面参数失败', e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果需要返回上一页，则执行返回操作
|
|
|
+ if (shouldReturn) {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack({
|
|
|
+ success: () => {
|
|
|
+ // 返回成功后传递选中的地块数据
|
|
|
+ if (eventChannel) {
|
|
|
+ eventChannel.emit('selectBlockResult', {
|
|
|
+ success: true,
|
|
|
+ blockId: block.id,
|
|
|
+ blockData: block
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getStatusClass(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 'active': 'status-active',
|
|
|
+ 'idle': 'status-idle',
|
|
|
+ 'maintenance': 'status-maintenance'
|
|
|
+ }
|
|
|
+ return statusMap[status] || ''
|
|
|
+ },
|
|
|
+
|
|
|
+ getStatusText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 'active': '使用中',
|
|
|
+ 'idle': '闲置',
|
|
|
+ 'maintenance': '维护中'
|
|
|
+ }
|
|
|
+ return statusMap[status] || '未知'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 可以被父组件调用的方法
|
|
|
+ onBack(callback) {
|
|
|
+ if (typeof callback === 'function') {
|
|
|
+ callback(this.currentBlock.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 头部导航 */
|
|
|
+.header {
|
|
|
+ display: none; /* 隐藏整个头部标题栏 */
|
|
|
+}
|
|
|
+
|
|
|
+.back-button {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-back {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 60rpx; /* 平衡左侧返回按钮 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索框 */
|
|
|
+.search-box {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.03);
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search-header {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
|
|
|
+ border: 1rpx solid rgba(0, 0, 0, 0.03);
|
|
|
+}
|
|
|
+
|
|
|
+.icon-search {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input input {
|
|
|
+ flex: 1;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.clear-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+/* 块区域通用样式 */
|
|
|
+.current-block, .block-list {
|
|
|
+ margin: 0 30rpx 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.block-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-header .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-tag {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ box-shadow: 0 2rpx 5rpx rgba(59, 180, 74, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.block-header .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.block-header .count {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 当前选中地块卡片 */
|
|
|
+.current-block-card {
|
|
|
+ background: linear-gradient(to right, #F0F8F0, #E7F5E8);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ border: 2rpx solid rgba(59, 180, 74, 0.2);
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.current-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 20rpx;
|
|
|
+ background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
|
|
|
+ color: white;
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 0 0 12rpx 12rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+/* 地块列表卡片 */
|
|
|
+.block-cards {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-card {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ position: relative;
|
|
|
+ border: 1rpx solid rgba(0, 0, 0, 0.03);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.block-card:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
|
|
|
+}
|
|
|
+
|
|
|
+.block-card.active-block {
|
|
|
+ border: 2rpx solid #3BB44A;
|
|
|
+ background-color: #F0F8F0;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.block-card.clickable {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.block-card.clickable:hover {
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.block-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.location-icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.block-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-farm {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-meta {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.block-details {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.separator {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.check-mark {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.check-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态标签 */
|
|
|
+.status-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 0 16rpx 0 12rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.status-active-badge {
|
|
|
+ background-color: #E6F7E6;
|
|
|
+ color: #3BB44A;
|
|
|
+ border-left: 1rpx solid rgba(59, 180, 74, 0.2);
|
|
|
+ border-bottom: 1rpx solid rgba(59, 180, 74, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.status-idle-badge {
|
|
|
+ background-color: #F1F2F3;
|
|
|
+ color: #909399;
|
|
|
+ border-left: 1rpx solid rgba(144, 147, 153, 0.2);
|
|
|
+ border-bottom: 1rpx solid rgba(144, 147, 153, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.status-maintenance-badge {
|
|
|
+ background-color: #FEF0F0;
|
|
|
+ color: #F56C6C;
|
|
|
+ border-left: 1rpx solid rgba(245, 108, 108, 0.2);
|
|
|
+ border-bottom: 1rpx solid rgba(245, 108, 108, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+/* 地块统计信息 */
|
|
|
+.block-stats {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-top: 1rpx solid #F0F0F0;
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.online-icon {
|
|
|
+ /* 在线图标使用绿色 */
|
|
|
+ filter: hue-rotate(120deg) saturate(1.2);
|
|
|
+}
|
|
|
+
|
|
|
+.alert-icon {
|
|
|
+ /* 告警图标使用红色 */
|
|
|
+ filter: hue-rotate(0deg) saturate(1.5);
|
|
|
+}
|
|
|
+
|
|
|
+.alert-text {
|
|
|
+ color: #F56C6C;
|
|
|
+}
|
|
|
+
|
|
|
+/* 骨架屏 */
|
|
|
+.skeleton-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-box {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ animation: skeleton-loading 1.5s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes skeleton-loading {
|
|
|
+ 0% {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-title {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-detail {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ border-radius: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.skeleton-stats {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ border-top: 1rpx solid #F5F5F5;
|
|
|
+ height: 30rpx;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ border-radius: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空状态 */
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 60rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-image {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-subtext {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+/* 基础图标样式 */
|
|
|
+.iconfont {
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ font-style: normal;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+}
|
|
|
+</style>
|
