|
|
@@ -0,0 +1,868 @@
|
|
|
+<template>
|
|
|
+ <view class="device-details-page">
|
|
|
+ <cu-custom :isBack="true">
|
|
|
+ <template slot="content">
|
|
|
+ <view class="nav-title">{{ deviceInfo.devName }}</view>
|
|
|
+ </template>
|
|
|
+ </cu-custom>
|
|
|
+
|
|
|
+ <!-- 设备基本信息 -->
|
|
|
+ <view class="device-info">
|
|
|
+ <view @click="copy(deviceInfo.devBid)" class="info-item">
|
|
|
+ <text class="info-label">设备ID</text>
|
|
|
+ <text class="info-value">{{ deviceInfo.devBid }}</text>
|
|
|
+ <image
|
|
|
+ src="/static/images/device/copy.svg"
|
|
|
+ mode=""
|
|
|
+ class="info-img"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">设备位置</text>
|
|
|
+ <text class="info-value">{{ deviceInfo.address }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">上报时间</text>
|
|
|
+ <text class="info-value">{{ formatTimestamp(deviceInfo.uptime) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dev-status">{{
|
|
|
+ deviceInfo.devStatus == "1" ? "在线" : "离线"
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 标签页切换 -->
|
|
|
+ <view class="tab-container">
|
|
|
+ <view class="tab-top">
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeTab === 'monitoring' }"
|
|
|
+ @click="switchTab('monitoring')"
|
|
|
+ >
|
|
|
+ <text class="tab-text">监测要素</text>
|
|
|
+ <image
|
|
|
+ v-if="activeTab === 'monitoring'"
|
|
|
+ src="/static/images/device/smile.svg"
|
|
|
+ mode=""
|
|
|
+ class="smile"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeTab === 'details' }"
|
|
|
+ @click="switchTab('details')"
|
|
|
+ >
|
|
|
+ <text class="tab-text">设备详情</text>
|
|
|
+ <image
|
|
|
+ v-if="activeTab === 'details'"
|
|
|
+ src="/static/images/device/smile.svg"
|
|
|
+ mode=""
|
|
|
+ class="smile"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 标签页内容 -->
|
|
|
+ <view class="tab-content">
|
|
|
+ <!-- 监测要素页面 -->
|
|
|
+ <view v-if="activeTab === 'monitoring'" class="monitoring-page">
|
|
|
+ <view
|
|
|
+ class="data-card"
|
|
|
+ v-for="(item, index) in monitorList"
|
|
|
+ :key="index"
|
|
|
+ @click="goPage('eleDetail', item)"
|
|
|
+ >
|
|
|
+ <view class="card-title">{{ item.factorName }}</view>
|
|
|
+ <view class="data-value-row">
|
|
|
+ <view>
|
|
|
+ <text v-if="item.yData && item.yData.length" class="data-value">{{ item.yData[0] }}</text>
|
|
|
+ <text class="data-unit">{{ item.factorUnit }}</text>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="device-img"
|
|
|
+ :src="`/static/images/device/${item.key}-default.svg`"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="card-thrid">
|
|
|
+ <text>{{ item.alias }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 设备详情页面 -->
|
|
|
+ <view v-if="activeTab === 'details'" class="details-page">
|
|
|
+ <!-- 设备参数 -->
|
|
|
+ <view class="device-params">
|
|
|
+ <view class="device-control">
|
|
|
+ <!-- <view class="control-left">
|
|
|
+ <view>2025-12-28 08:00:00</view>
|
|
|
+ <u-icon name="reload" class="reload-img"></u-icon>
|
|
|
+ </view> -->
|
|
|
+ <view class="control-right">
|
|
|
+ <image
|
|
|
+ class="control-img"
|
|
|
+ src="/static/images/cb/control.svg"
|
|
|
+ mode="aspectFit"
|
|
|
+ @click="goPage('devControl')"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ class="control-img"
|
|
|
+ src="/static/images/cb/setting.svg"
|
|
|
+ mode="aspectFit"
|
|
|
+ @click="goPage('devRepair')"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ class="control-img"
|
|
|
+ src="/static/images/cb/sim.svg"
|
|
|
+ mode="aspectFit"
|
|
|
+ @click="goPage('simDetail')"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="params-board">
|
|
|
+ <view class="params-left">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in statusList"
|
|
|
+ :key="index"
|
|
|
+ class="params-item"
|
|
|
+ >
|
|
|
+ <view class="params-val">{{ item.val }}</view>
|
|
|
+ <view class="params-label">{{ item.label }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="params-right">
|
|
|
+ <image
|
|
|
+ class="device-img"
|
|
|
+ src="/static/images/device/dev-station.svg"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 设备数据表格 -->
|
|
|
+ <view class="table-container">
|
|
|
+ <view class="table-control">
|
|
|
+ <view class="title">设备数据</view>
|
|
|
+ <view class="date-board" @click="openDatePicker">
|
|
|
+ <text>{{ startDate }}</text>
|
|
|
+ <text class="line">至</text>
|
|
|
+ <text>{{ endDate }}</text>
|
|
|
+ <image class="date-icon" src="/static/images/device/date.svg" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-calendar
|
|
|
+ v-model="show"
|
|
|
+ :mode="mode"
|
|
|
+ @change="onDateChange"
|
|
|
+ ref="calendar"
|
|
|
+ ></u-calendar>
|
|
|
+ <view class="table-wrap" v-if="tableData && tableData.length > 0">
|
|
|
+ <view class="fixed-column">
|
|
|
+ <view class="table-cell header">上报时间</view>
|
|
|
+ <view
|
|
|
+ class="table-cell"
|
|
|
+ v-for="(item, idx) in tableData"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ {{ item.uptime }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table-bg"></view>
|
|
|
+ <scroll-view class="scroll-column" scroll-x="true">
|
|
|
+ <view class="scroll-content">
|
|
|
+ <view class="table-row">
|
|
|
+ <view
|
|
|
+ class="table-cell header"
|
|
|
+ v-for="(item, index) in tableColumn"
|
|
|
+ :key="index"
|
|
|
+ >{{ item.label }}</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="table-row"
|
|
|
+ v-for="(item, idx) in tableData"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="table-cell"
|
|
|
+ v-for="(item1, index1) in tableColumn"
|
|
|
+ :key="index1"
|
|
|
+ >{{ item[item1.prop] }}</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-state" v-else>
|
|
|
+ <u-empty text="暂无数据" mode="list"></u-empty>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="pagination" v-if="tableData && tableData.length > 0">
|
|
|
+ <view
|
|
|
+ class="page-item prev"
|
|
|
+ :class="{ disabled: page <= 1 }"
|
|
|
+ @click="prevPage"
|
|
|
+ >上一页</view>
|
|
|
+ <view class="page-info">
|
|
|
+ <text class="curret-page">{{ page }}</text>
|
|
|
+ <text>/</text>
|
|
|
+ <text>{{ totalPages }}</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="page-item next"
|
|
|
+ :class="{ disabled: page >= totalPages }"
|
|
|
+ @click="nextPage"
|
|
|
+ >下一页</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ onLoad(options) {
|
|
|
+ console.log(options, "optionsss");
|
|
|
+ this.deviceInfo = options;
|
|
|
+ this.initDateRange(options.uptime);
|
|
|
+ this.getQxzObData();
|
|
|
+ this.getDeviceStatus();
|
|
|
+ this.getDeviceData();
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ deviceInfo: {},
|
|
|
+ activeTab: "monitoring",
|
|
|
+ monitorList: [],
|
|
|
+ statusList: [],
|
|
|
+ show: false,
|
|
|
+ mode: "range",
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ page: 1,
|
|
|
+ pageSize: 9,
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ tableColumn: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalPages() {
|
|
|
+ return Math.ceil(this.total / this.pageSize) || 1;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatTimestamp(timestamp) {
|
|
|
+ if (!timestamp) return "";
|
|
|
+ const date = new Date(Number(timestamp) * 1000);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
|
+ const day = String(date.getDate()).padStart(2, "0");
|
|
|
+ const hours = String(date.getHours()).padStart(2, "0");
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
|
+ const seconds = String(date.getSeconds()).padStart(2, "0");
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
|
+ const day = String(date.getDate()).padStart(2, "0");
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ },
|
|
|
+ initDateRange(timestamp) {
|
|
|
+ if (!timestamp) {
|
|
|
+ const today = new Date();
|
|
|
+ this.endDate = this.formatDate(today);
|
|
|
+ const startDate = new Date(today);
|
|
|
+ startDate.setDate(startDate.getDate() - 7);
|
|
|
+ this.startDate = this.formatDate(startDate);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const date = new Date(Number(timestamp) * 1000);
|
|
|
+ this.endDate = this.formatDate(date);
|
|
|
+ const startDate = new Date(date);
|
|
|
+ startDate.setDate(startDate.getDate() - 7);
|
|
|
+ this.startDate = this.formatDate(startDate);
|
|
|
+ },
|
|
|
+ switchTab(tab) {
|
|
|
+ this.activeTab = tab;
|
|
|
+ },
|
|
|
+ copy(item) {
|
|
|
+ console.log(item);
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: item,
|
|
|
+ success: function () {
|
|
|
+ console.log("success");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goPage(type, eleItem) {
|
|
|
+ let url = ''
|
|
|
+ if (eleItem && eleItem.key) {
|
|
|
+ url = `/pages/deviceDetails/weatherStation/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}&eleKey=${eleItem.key}`
|
|
|
+ } else {
|
|
|
+ url = `/pages/deviceDetails/weatherStation/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}`
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDatePicker() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ onDateChange(event) {
|
|
|
+ if (event && event.startDate && event.endDate) {
|
|
|
+ this.startDate = event.startDate;
|
|
|
+ this.endDate = event.endDate;
|
|
|
+ this.show = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.getDeviceData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prevPage() {
|
|
|
+ if (this.page <= 1) return;
|
|
|
+ this.page--;
|
|
|
+ this.getDeviceData();
|
|
|
+ },
|
|
|
+ nextPage() {
|
|
|
+ if (this.page >= this.totalPages) return;
|
|
|
+ this.page++;
|
|
|
+ this.getDeviceData();
|
|
|
+ },
|
|
|
+ // 获取设备最新监测数据
|
|
|
+ async getQxzObData() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=qxz.data.qxz_ob_last_data",
|
|
|
+ data: {
|
|
|
+ device_id: this.deviceInfo.devBid,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log("设备最新监测数据:", res);
|
|
|
+ const title = res.title
|
|
|
+ const data = res.data
|
|
|
+ const alias = res.alias
|
|
|
+ this.monitorList = this.formatChartData(title, data, alias)
|
|
|
+ },
|
|
|
+ formatChartData(obj, data, alias) {
|
|
|
+ const keys = Object.keys(obj);
|
|
|
+ const result = [];
|
|
|
+ console.log(data, 'datadata');
|
|
|
+ for (const prop of keys) {
|
|
|
+ const objArr = obj[prop];
|
|
|
+ if (objArr[4] == 1) {
|
|
|
+ result.push({
|
|
|
+ factorName: objArr[1],
|
|
|
+ key: prop,
|
|
|
+ yData: data[prop],
|
|
|
+ factorUnit: objArr[3],
|
|
|
+ newData: objArr[5],
|
|
|
+ alias: alias[prop]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(result, 'real-time data');
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ convertDynamic(data, getLabelValue) {
|
|
|
+ if (!data || typeof data !== 'object') return [];
|
|
|
+ const result = [];
|
|
|
+ const keys = Object.keys(data);
|
|
|
+ for (const prop of keys) {
|
|
|
+ const arr = data[prop];
|
|
|
+ const value = getLabelValue(prop, arr, data);
|
|
|
+ if (value !== undefined && value !== null) {
|
|
|
+ result.push({
|
|
|
+ label: String(value),
|
|
|
+ prop,
|
|
|
+ align: 'center'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ // 获取设备状态数据
|
|
|
+ async getDeviceStatus() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=qxz.data.qxz_status",
|
|
|
+ data: {
|
|
|
+ device_id: this.deviceInfo.devBid,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log("getDeviceStatus:", res);
|
|
|
+ const newArr = this.transformObjectToArray(res);
|
|
|
+ this.statusList = newArr;
|
|
|
+ console.log(this.statusList, "getDevStatus");
|
|
|
+ },
|
|
|
+ transformObjectToArray(originalData) {
|
|
|
+ if (
|
|
|
+ typeof originalData !== "object" ||
|
|
|
+ originalData === null ||
|
|
|
+ Array.isArray(originalData)
|
|
|
+ ) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+
|
|
|
+ return Object.keys(originalData).map((key) => {
|
|
|
+ const [val = "", label = ""] = originalData[key] || [];
|
|
|
+ return {
|
|
|
+ label,
|
|
|
+ val,
|
|
|
+ key,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设备数据列表
|
|
|
+ async getDeviceData() {
|
|
|
+ const data = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=qxz.data.qxz_device_data",
|
|
|
+ data: {
|
|
|
+ device_id: this.deviceInfo.devBid,
|
|
|
+ page: String(this.page),
|
|
|
+ page_size: String(this.pageSize),
|
|
|
+ start: String(Math.floor(new Date(this.startDate + " 00:00:00").getTime() / 1000)),
|
|
|
+ end: String(Math.floor(new Date(this.endDate + " 23:59:59").getTime() / 1000)),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log(data, "resss");
|
|
|
+
|
|
|
+ if (Array.isArray(data) && data.length > 0) {
|
|
|
+ this.total = data[0]?.count || 0;
|
|
|
+ this.tableData = data[0].data || [];
|
|
|
+ const title = data[0].title;
|
|
|
+ this.tableColumn = title
|
|
|
+ .map((item) => {
|
|
|
+ return {
|
|
|
+ label: item[1],
|
|
|
+ prop: item[0],
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .filter((item) => item.prop !== "uptime");
|
|
|
+ } else {
|
|
|
+ // 没数据时,设置为空
|
|
|
+ this.total = 0;
|
|
|
+ this.tableData = [];
|
|
|
+ this.tableColumn = [];
|
|
|
+ }
|
|
|
+ console.log(this.tableColumn, "tableCol");
|
|
|
+ console.log(this.tableData, "tableData");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.device-details-page {
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, #ffffff00 0%, #f5f6fa 23.64%, #f5f6fa 100%),
|
|
|
+ linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ padding-top: 98rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 设备基本信息 */
|
|
|
+.device-info {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 46rpx 0 24rpx 0;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: linear-gradient(180deg, #eff 0%, #fff 23.56%);
|
|
|
+ position: relative;
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .info-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ width: 116rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: right;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: normal;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: #333333;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: normal;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .info-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ background: #0bbc581a;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .tishi {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ .dev-status {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ border: 2rpx solid #ffffff;
|
|
|
+ background: #0bbc581a;
|
|
|
+ width: 152rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ color: #0bbc58;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border-radius: 0 16rpx 0 64rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签页切换 */
|
|
|
+.tab-container {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .tab-top {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: normal;
|
|
|
+ .tab-text {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ .smile {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item.active {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-board {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .time-filter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 256rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ padding: 6rpx 8rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ background: #f1f4f8;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ .filter-item {
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ border-radius: 32rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 监测要素页面 */
|
|
|
+.monitoring-page {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .data-card {
|
|
|
+ width: calc(50% - 8rpx);
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ height: 186rpx;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .card-title {
|
|
|
+ color: #042118;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+ .data-value-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #042118;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-weight: 400;
|
|
|
+ .data-value {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .data-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .device-img {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-thrid {
|
|
|
+ color: #687a74;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 设备详情页面 */
|
|
|
+.details-page {
|
|
|
+ .device-params {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .device-control {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .control-left {
|
|
|
+ color: #999999;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .reload-img {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #0bbc58;
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .control-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .control-img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .params-board {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .params-left {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .params-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ // width: calc(50% - 20rpx);
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .params-val {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .params-label {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .params-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ .device-img {
|
|
|
+ width: 150rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-container {
|
|
|
+ padding: 16rpx 32rpx 32rpx 32rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ .table-control {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ .title {
|
|
|
+ color: #042118;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: normal;
|
|
|
+ }
|
|
|
+ .date-board {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #020305;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ background: #f1f4f8;
|
|
|
+ padding: 7rpx 24rpx;
|
|
|
+ .line {
|
|
|
+ color: #656565;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+ .date-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-wrap {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 788rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ color: #042118;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: normal;
|
|
|
+ .fixed-column {
|
|
|
+ width: 250rpx;
|
|
|
+ .table-cell {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-bg {
|
|
|
+ width: 16rpx;
|
|
|
+ background: linear-gradient(270deg, #ffffff33 0%, #9598a433 100%);
|
|
|
+ }
|
|
|
+ .scroll-column {
|
|
|
+ flex: 1;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: -10rpx;
|
|
|
+ }
|
|
|
+ .scroll-content {
|
|
|
+ min-width: 100%;
|
|
|
+ width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .table-row {
|
|
|
+ display: flex;
|
|
|
+ .table-cell {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-cell {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 2px solid #e4e7ed;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 4rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .table-cell.header {
|
|
|
+ background: #f6f8fc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .page-item {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ color: #656565;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 2rpx solid #e4e7ed;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ .prev.disabled {
|
|
|
+ color: #c0c4cc;
|
|
|
+ border-color: #e4e7ed;
|
|
|
+ }
|
|
|
+ .next {
|
|
|
+ color: #0bbc58;
|
|
|
+ border: 2px solid #0bbc58;
|
|
|
+ }
|
|
|
+ .next.disabled {
|
|
|
+ color: #c0c4cc;
|
|
|
+ border-color: #e4e7ed;
|
|
|
+ }
|
|
|
+ .page-info {
|
|
|
+ color: #999999;
|
|
|
+ font-family: "Source Han Sans CN VF";
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: normal;
|
|
|
+ .curret-page {
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-state {
|
|
|
+ padding: 80rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+</style>
|