bigdata_WX/pages/deviceDetails/weatherStation/index.vue

<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">{{ formatTimestamp(deviceInfo.uptime) }}</text>
      </view> 
      <view class="info-item">
        <text class="info-label">设备位置</text>
        <text class="info-value">{{ deviceInfo.address }}</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>{{formatTimestamp(deviceInfo.uptime)}}</view>
              <u-icon name="reload" color="#0BBC58" style="margin-left: 12rpx" @click="refreshData"></u-icon>
            </view>
          <!-- {{formatDate(deviceInfo.uptime)}} -->
            <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"
            range-color="#999" btn-type="success" active-bg-color="#0BBC58" range-bg-color="rgba(11,188,88,0.13)"
            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: {
    async refreshData(){
      //api/api_gateway?method=qxz.device.control
      await this.$myRequest({
        url: '/api/api_gateway?method=qxz.device.control',
        data: {
          device_id: this.deviceInfo.devBid,
          cmd: 'READ',
        },
      });
      //弹框提示
      uni.showToast({
        title: '刷新成功',
        icon: 'success',
      });
      this.getDeviceData();
    },
    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))}`;
      }

      if (type === 'devRepair') {
        url = `/pages/afterSale/addafter?d_id=${this.deviceInfo.d_id}&device_id=${this.deviceInfo.devBid}&device_type=${this.deviceInfo.deviceType}`;
      }

      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;
}
.nav-title{
  //超出隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 设备基本信息 */
.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: space-between;
      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;
        top:0;
        .device-img {
          width: 150rpx;
          height: 300rpx;
        }
      }
    }
  }

  .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: 16rpx 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>