|
|
@@ -154,67 +154,93 @@
|
|
|
<el-dialog :title="title" :visible.sync="openView" width="800px" append-to-body>
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleClick">
|
|
|
<el-tab-pane label="基本信息" name="basicInfo">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>设备基础信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>设备编号：</strong> {{ formView.deviceId }}</li>
|
|
|
- <li><strong>设备名称：</strong> {{ formView.deviceName }}</li>
|
|
|
-
|
|
|
- <li><strong style="float: left;">设备类型：</strong><dict-tag :options="dict.type.device_type"
|
|
|
- :value="formView.deviceTypeId" /></li>
|
|
|
- <li><strong>设备型号：</strong> {{ formView.model }}</li>
|
|
|
- <li><strong>制造厂商：</strong> {{ formView.manufacturer }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <div class="device-basic-info">
|
|
|
+ <!-- 设备基础信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">设备基础信息</span>
|
|
|
</div>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备编号</div>
|
|
|
+ <div class="info-value">{{ formView.deviceId }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备名称</div>
|
|
|
+ <div class="info-value">{{ formView.deviceName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备类型</div>
|
|
|
+ <div class="info-value">
|
|
|
+ <dict-tag :options="dict.type.device_type" :value="formView.deviceTypeId" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备型号</div>
|
|
|
+ <div class="info-value">{{ formView.model }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">制造厂商</div>
|
|
|
+ <div class="info-value">{{ formView.manufacturer }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>位置信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>所属农场：</strong> {{ formView.deptName }}</li>
|
|
|
- <li><strong>所属地块：</strong> {{ formView.fieldName }}</li>
|
|
|
- <li><strong>安装日期：</strong> {{ formView.installDate }}</li>
|
|
|
- <li><strong>GPS坐标：</strong> {{ formView.longitude }} - {{ formView.latitude }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <!-- 位置信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">位置信息</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <h3>运行状态</h3>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>当前状态：
|
|
|
- <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>最后活动：{{ formView.lastActiveTime }}</p>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属农场</div>
|
|
|
+ <div class="info-value">{{ formView.deptName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属地块</div>
|
|
|
+ <div class="info-value">{{ formView.fieldName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">安装日期</div>
|
|
|
+ <div class="info-value">{{ formView.installDate }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">GPS坐标</div>
|
|
|
+ <div class="info-value">{{ formView.longitude }} - {{ formView.latitude }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
+ <!-- 运行状态卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">运行状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-grid">
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">当前状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>电量状态：
|
|
|
- <el-progress :percentage="deviceStatus.battery" :stroke-width="10"></el-progress>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>信号强度：良好</p>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">最后活动</div>
|
|
|
+ <div class="status-value">{{ formView.lastActiveTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">电量状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-progress :percentage="deviceStatus.battery" :stroke-width="8" class="battery-progress"></el-progress>
|
|
|
+ <span class="battery-text">{{ deviceStatus.battery }}%</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">信号强度</div>
|
|
|
+ <div class="status-value status-good">良好</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="实时数据" name="realTimeData">
|
|
|
<el-card class="box-card">
|
|
|
@@ -313,67 +339,93 @@
|
|
|
<el-dialog :title="title" :visible.sync="cameraView" @close="handleDialogClose" width="800px" append-to-body>
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleClickCamera">
|
|
|
<el-tab-pane label="基本信息" name="basicInfo">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>设备基础信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>设备编号：</strong> {{ formView.deviceId }}</li>
|
|
|
- <li><strong>设备名称：</strong> {{ formView.deviceName }}</li>
|
|
|
-
|
|
|
- <li><strong style="float: left;">设备类型：</strong><dict-tag :options="dict.type.device_type"
|
|
|
- :value="formView.deviceTypeId" /></li>
|
|
|
- <li><strong>设备型号：</strong> {{ formView.model }}</li>
|
|
|
- <li><strong>制造厂商：</strong> {{ formView.manufacturer }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <div class="device-basic-info">
|
|
|
+ <!-- 设备基础信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">设备基础信息</span>
|
|
|
</div>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备编号</div>
|
|
|
+ <div class="info-value">{{ formView.deviceId }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备名称</div>
|
|
|
+ <div class="info-value">{{ formView.deviceName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备类型</div>
|
|
|
+ <div class="info-value">
|
|
|
+ <dict-tag :options="dict.type.device_type" :value="formView.deviceTypeId" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备型号</div>
|
|
|
+ <div class="info-value">{{ formView.model }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">制造厂商</div>
|
|
|
+ <div class="info-value">{{ formView.manufacturer }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>位置信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>所属农场：</strong> {{ formView.deptName }}</li>
|
|
|
- <li><strong>所属地块：</strong> {{ formView.fieldName }}</li>
|
|
|
- <li><strong>安装日期：</strong> {{ formView.installDate }}</li>
|
|
|
- <li><strong>GPS坐标：</strong> {{ formView.longitude }} - {{ formView.latitude }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <!-- 位置信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">位置信息</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <h3>运行状态</h3>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>当前状态：
|
|
|
- <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>最后活动：{{ formView.lastActiveTime }}</p>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属农场</div>
|
|
|
+ <div class="info-value">{{ formView.deptName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属地块</div>
|
|
|
+ <div class="info-value">{{ formView.fieldName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">安装日期</div>
|
|
|
+ <div class="info-value">{{ formView.installDate }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">GPS坐标</div>
|
|
|
+ <div class="info-value">{{ formView.longitude }} - {{ formView.latitude }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
+ <!-- 运行状态卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">运行状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-grid">
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">当前状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>电量状态：
|
|
|
- <el-progress :percentage="deviceStatus.battery" :stroke-width="10"></el-progress>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>信号强度：良好</p>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">最后活动</div>
|
|
|
+ <div class="status-value">{{ formView.lastActiveTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">电量状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-progress :percentage="deviceStatus.battery" :stroke-width="8" class="battery-progress"></el-progress>
|
|
|
+ <span class="battery-text">{{ deviceStatus.battery }}%</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">信号强度</div>
|
|
|
+ <div class="status-value status-good">良好</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="实时数据" name="realTimeData">
|
|
|
|
|
|
@@ -390,175 +442,162 @@
|
|
|
<el-dialog :title="title" :visible.sync="openWeatherView" width="800px" append-to-body>
|
|
|
<el-tabs v-model="activeWeatherTab" @tab-click="handleClickWeather">
|
|
|
<el-tab-pane label="基本信息" name="basicInfoWeather">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>设备基础信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>设备编号：</strong> {{ formView.deviceId }}</li>
|
|
|
- <li><strong>设备名称：</strong> {{ formView.deviceName }}</li>
|
|
|
-
|
|
|
- <li><strong style="float: left;">设备类型：</strong><dict-tag :options="dict.type.device_type"
|
|
|
- :value="formView.deviceTypeId" /></li>
|
|
|
- <li><strong>设备型号：</strong> {{ formView.model }}</li>
|
|
|
- <li><strong>制造厂商：</strong> {{ formView.manufacturer }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <div class="device-basic-info">
|
|
|
+ <!-- 设备基础信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">设备基础信息</span>
|
|
|
</div>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备编号</div>
|
|
|
+ <div class="info-value">{{ formView.deviceId }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备名称</div>
|
|
|
+ <div class="info-value">{{ formView.deviceName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备类型</div>
|
|
|
+ <div class="info-value">
|
|
|
+ <dict-tag :options="dict.type.device_type" :value="formView.deviceTypeId" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备型号</div>
|
|
|
+ <div class="info-value">{{ formView.model }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">制造厂商</div>
|
|
|
+ <div class="info-value">{{ formView.manufacturer }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>位置信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>所属农场：</strong> {{ formView.deptName }}</li>
|
|
|
- <li><strong>所属地块：</strong> {{ formView.fieldName }}</li>
|
|
|
- <li><strong>安装日期：</strong> {{ formView.installDate }}</li>
|
|
|
- <li><strong>GPS坐标：</strong> {{ formView.longitude }} - {{ formView.latitude }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <!-- 位置信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">位置信息</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <h3>运行状态</h3>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>当前状态：
|
|
|
- <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>最后活动：{{ formView.lastActiveTime }}</p>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属农场</div>
|
|
|
+ <div class="info-value">{{ formView.deptName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属地块</div>
|
|
|
+ <div class="info-value">{{ formView.fieldName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">安装日期</div>
|
|
|
+ <div class="info-value">{{ formView.installDate }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">GPS坐标</div>
|
|
|
+ <div class="info-value">{{ formView.longitude }} - {{ formView.latitude }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
+ <!-- 运行状态卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">运行状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-grid">
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">当前状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>电量状态：
|
|
|
- <el-progress :percentage="deviceStatus.battery" :stroke-width="10"></el-progress>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>信号强度：良好</p>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">最后活动</div>
|
|
|
+ <div class="status-value">{{ formView.lastActiveTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">电量状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-progress :percentage="deviceStatus.battery" :stroke-width="8" class="battery-progress"></el-progress>
|
|
|
+ <span class="battery-text">{{ deviceStatus.battery }}%</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">信号强度</div>
|
|
|
+ <div class="status-value status-good">良好</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="实时数据" name="realTimeData">
|
|
|
- <el-card class="box-card">
|
|
|
+ <el-card class="weather-data-card">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>实时气象数据</span>
|
|
|
<el-badge style="margin-left: 70%;">最后更新: {{ weatherRealTime.collectTime }}</el-badge>
|
|
|
</div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value" style="color: #059669;">{{ weatherRealTime.temperature }}°C</div>
|
|
|
- <div class="item-title">气温 (°C)</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value" style="color: #2563eb;">{{ weatherRealTime.humidity }}%</div>
|
|
|
- <div class="item-title">湿度</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value">{{ weatherRealTime.rainfall }}mm</div>
|
|
|
- <div class="item-title">降雨量 (lux)</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value" style="color: #7c3aed;">{{ weatherRealTime.windDirection }}</div>
|
|
|
- <div class="item-title">风向</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value" style="color: #059669;">{{ weatherRealTime.windSpeed }}m/s</div>
|
|
|
- <div class="item-title">风速</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value" style="color: #2563eb;">{{ weatherRealTime.airPressure }}hPa</div>
|
|
|
- <div class="item-title">气压</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value">{{ weatherRealTime.lightIntensity }}lux</div>
|
|
|
- <div class="item-title">光照</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value">{{ weatherRealTime.soilN }}</div>
|
|
|
- <div class="item-title">土壤氮</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value">{{ weatherRealTime.soilP }}</div>
|
|
|
- <div class="item-title">土壤磷</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
-
|
|
|
- <div class="item-value">{{ weatherRealTime.soilK }}</div>
|
|
|
- <div class="item-title">土壤钾</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="weather-grid">
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value temperature">{{ weatherRealTime.temperature }}°C</div>
|
|
|
+ <div class="weather-item-title">气温</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value humidity">{{ weatherRealTime.humidity }}%</div>
|
|
|
+ <div class="weather-item-title">湿度</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value rainfall">{{ weatherRealTime.rainfall }}mm</div>
|
|
|
+ <div class="weather-item-title">降雨量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value wind-direction">{{ weatherRealTime.windDirection }}</div>
|
|
|
+ <div class="weather-item-title">风向</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value wind-speed">{{ weatherRealTime.windSpeed }}m/s</div>
|
|
|
+ <div class="weather-item-title">风速</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value pressure">{{ weatherRealTime.airPressure }}hPa</div>
|
|
|
+ <div class="weather-item-title">气压</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value light">{{ weatherRealTime.lightIntensity }}lux</div>
|
|
|
+ <div class="weather-item-title">光照</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value soil-n">{{ weatherRealTime.soilN }}</div>
|
|
|
+ <div class="weather-item-title">土壤氮</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value soil-p">{{ weatherRealTime.soilP }}</div>
|
|
|
+ <div class="weather-item-title">土壤磷</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-item">
|
|
|
+ <div class="weather-item-content">
|
|
|
+ <div class="weather-item-value soil-k">{{ weatherRealTime.soilK }}</div>
|
|
|
+ <div class="weather-item-title">土壤钾</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
<div>
|
|
|
|
|
|
@@ -574,73 +613,54 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <el-card class="box-card">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">平均气温</div>
|
|
|
- <div class="item-value" style="color: #059669;">{{ AverageweatherRealTime.temperature }}°C</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">平均湿度</div>
|
|
|
- <div class="item-value" style="color: #2563eb;">{{ AverageweatherRealTime.humidity }}%</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">累计降雨量</div>
|
|
|
- <div class="item-value">{{ AverageweatherRealTime.rainfallA }}mm</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">平均风速</div>
|
|
|
- <div class="item-value" style="color: #7c3aed;">{{ AverageweatherRealTime.windSpeed }}m/s</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">土壤氮</div>
|
|
|
- <div class="item-value" style="color: #059669;">{{ AverageweatherRealTime.soilN }}</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">土壤磷</div>
|
|
|
- <div class="item-value" style="color: #2563eb;">{{ AverageweatherRealTime.soilP }}</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-card>
|
|
|
- <div class="item-content">
|
|
|
- <div class="item-title">土壤钾</div>
|
|
|
- <div class="item-value">{{ AverageweatherRealTime.soilK }}</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-card class="weather-stats-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>统计数据</span>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-grid">
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">平均气温</div>
|
|
|
+ <div class="weather-stats-value temperature">{{ AverageweatherRealTime.temperature }}°C</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">平均湿度</div>
|
|
|
+ <div class="weather-stats-value humidity">{{ AverageweatherRealTime.humidity }}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">累计降雨量</div>
|
|
|
+ <div class="weather-stats-value rainfall">{{ AverageweatherRealTime.rainfallA }}mm</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">平均风速</div>
|
|
|
+ <div class="weather-stats-value wind-speed">{{ AverageweatherRealTime.windSpeed }}m/s</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">土壤氮</div>
|
|
|
+ <div class="weather-stats-value soil-n">{{ AverageweatherRealTime.soilN }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">土壤磷</div>
|
|
|
+ <div class="weather-stats-value soil-p">{{ AverageweatherRealTime.soilP }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather-stats-item">
|
|
|
+ <div class="weather-stats-content">
|
|
|
+ <div class="weather-stats-title">土壤钾</div>
|
|
|
+ <div class="weather-stats-value soil-k">{{ AverageweatherRealTime.soilK }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
@@ -653,67 +673,93 @@
|
|
|
<el-dialog :title="title" :visible.sync="openControllerView" width="800px" append-to-body>
|
|
|
<el-tabs v-model="activeControllerTab" @tab-click="handleClickController">
|
|
|
<el-tab-pane label="基本信息" name="basicInfoController">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>设备基础信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>设备编号：</strong> {{ formView.deviceId }}</li>
|
|
|
- <li><strong>设备名称：</strong> {{ formView.deviceName }}</li>
|
|
|
-
|
|
|
- <li><strong style="float: left;">设备类型：</strong><dict-tag :options="dict.type.device_type"
|
|
|
- :value="formView.deviceTypeId" /></li>
|
|
|
- <li><strong>设备型号：</strong> {{ formView.model }}</li>
|
|
|
- <li><strong>制造厂商：</strong> {{ formView.manufacturer }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <div class="device-basic-info">
|
|
|
+ <!-- 设备基础信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">设备基础信息</span>
|
|
|
</div>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备编号</div>
|
|
|
+ <div class="info-value">{{ formView.deviceId }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备名称</div>
|
|
|
+ <div class="info-value">{{ formView.deviceName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备类型</div>
|
|
|
+ <div class="info-value">
|
|
|
+ <dict-tag :options="dict.type.device_type" :value="formView.deviceTypeId" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">设备型号</div>
|
|
|
+ <div class="info-value">{{ formView.model }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">制造厂商</div>
|
|
|
+ <div class="info-value">{{ formView.manufacturer }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="device-info">
|
|
|
- <h3>位置信息</h3>
|
|
|
-
|
|
|
- <ul>
|
|
|
- <li><strong>所属农场：</strong> {{ formView.deptName }}</li>
|
|
|
- <li><strong>所属地块：</strong> {{ formView.fieldName }}</li>
|
|
|
- <li><strong>安装日期：</strong> {{ formView.installDate }}</li>
|
|
|
- <li><strong>GPS坐标：</strong> {{ formView.longitude }} - {{ formView.latitude }}</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
+ <!-- 位置信息卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">位置信息</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <h3>运行状态</h3>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>当前状态：
|
|
|
- <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>最后活动：{{ formView.lastActiveTime }}</p>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属农场</div>
|
|
|
+ <div class="info-value">{{ formView.deptName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">所属地块</div>
|
|
|
+ <div class="info-value">{{ formView.fieldName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">安装日期</div>
|
|
|
+ <div class="info-value">{{ formView.installDate }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="info-label">GPS坐标</div>
|
|
|
+ <div class="info-value">{{ formView.longitude }} - {{ formView.latitude }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
+ <!-- 运行状态卡片 -->
|
|
|
+ <el-card class="info-card" shadow="never">
|
|
|
+ <div slot="header" class="card-header">
|
|
|
+ <span class="card-title">运行状态</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-grid">
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">当前状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-tag :type="getTagType(formView.status)">{{ getStatusText(formView.status) }}</el-tag>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div>
|
|
|
- <p>电量状态：
|
|
|
- <el-progress :percentage="deviceStatus.battery" :stroke-width="10"></el-progress>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>信号强度：良好</p>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">最后活动</div>
|
|
|
+ <div class="status-value">{{ formView.lastActiveTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">电量状态</div>
|
|
|
+ <div class="status-value">
|
|
|
+ <el-progress :percentage="deviceStatus.battery" :stroke-width="8" class="battery-progress"></el-progress>
|
|
|
+ <span class="battery-text">{{ deviceStatus.battery }}%</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <div class="status-label">信号强度</div>
|
|
|
+ <div class="status-value status-good">良好</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="实时数据" name="realTimeData">
|
|
|
<div>
|
|
|
@@ -1610,6 +1656,317 @@ ul {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
|
|
|
+/* 气象数据卡片样式 */
|
|
|
+.weather-data-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 16px;
|
|
|
+ padding: 16px 0;
|
|
|
+ grid-auto-rows: minmax(80px, auto);
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px 16px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ border-color: #10b981;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6b7280;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+/* 不同数据类型的颜色 */
|
|
|
+.weather-item-value.temperature { color: #059669; }
|
|
|
+.weather-item-value.humidity { color: #2563eb; }
|
|
|
+.weather-item-value.rainfall { color: #0891b2; }
|
|
|
+.weather-item-value.wind-direction { color: #7c3aed; }
|
|
|
+.weather-item-value.wind-speed { color: #059669; }
|
|
|
+.weather-item-value.pressure { color: #2563eb; }
|
|
|
+.weather-item-value.light { color: #f59e0b; }
|
|
|
+.weather-item-value.soil-n { color: #dc2626; }
|
|
|
+.weather-item-value.soil-p { color: #7c2d12; }
|
|
|
+.weather-item-value.soil-k { color: #365314; }
|
|
|
+
|
|
|
+/* 统计数据卡片样式 */
|
|
|
+.weather-stats-card {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 16px;
|
|
|
+ padding: 16px 0;
|
|
|
+ grid-auto-rows: minmax(80px, auto);
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-item {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px 16px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-item:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ border-color: #10b981;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6b7280;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-stats-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统计数据颜色 */
|
|
|
+.weather-stats-value.temperature { color: #059669; }
|
|
|
+.weather-stats-value.humidity { color: #2563eb; }
|
|
|
+.weather-stats-value.rainfall { color: #0891b2; }
|
|
|
+.weather-stats-value.wind-speed { color: #7c3aed; }
|
|
|
+.weather-stats-value.soil-n { color: #dc2626; }
|
|
|
+.weather-stats-value.soil-p { color: #7c2d12; }
|
|
|
+.weather-stats-value.soil-k { color: #365314; }
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .weather-grid {
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-stats-grid {
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .weather-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-stats-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-item,
|
|
|
+ .weather-stats-item {
|
|
|
+ padding: 16px 12px;
|
|
|
+ height: 90px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-item-value,
|
|
|
+ .weather-stats-value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weather-item-title,
|
|
|
+ .weather-stats-title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .weather-grid,
|
|
|
+ .weather-stats-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 设备基本信息样式 */
|
|
|
+.device-basic-info {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2937;
|
|
|
+}
|
|
|
+
|
|
|
+.info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6b7280;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.info-value {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #1f2937;
|
|
|
+ font-weight: 400;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+/* 运行状态特殊布局 */
|
|
|
+.status-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.status-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6b7280;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.status-value {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #1f2937;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-good {
|
|
|
+ color: #059669;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.battery-progress {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.battery-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6b7280;
|
|
|
+ min-width: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .info-grid,
|
|
|
+ .status-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 16px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item,
|
|
|
+ .status-item {
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label,
|
|
|
+ .status-label {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value,
|
|
|
+ .status-value {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .battery-progress {
|
|
|
+ max-width: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .device-basic-info {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.weather-chart-header {
|
|
|
display: flex;
|
|
|
/* 关键：让子元素横向排列 */
|
