bigDataApp/pages/deviceDetails/weatherStation1/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 class="operation" @click.stop="isShowOperation = !isShowOperation">操作</view>
      <view class="operation-container" v-if="isShowOperation" @click="closeOperationHandler">
      <view class="operation-background"></view>
      <view class="operation-content">
        <view class="operation-item" @click="goPage('devRepair')">
          <image :src="serviceIcon" class="operation-icon"></image>
          维修
        </view>
        <view class="operation-item" @click="goPage('devControl')">
          <image :src="settingIcon" class="operation-icon"></image>
          设置
        </view>
        <view class="operation-item" @click="goPage('simDetail')">
          <image :src="simIcon" class="operation-icon"></image>
          SIM卡
        </view>
        <!-- <view class="operation-item" @click="modification">
          <image :src="editIcon" class="operation-icon"></image>
          修改
        </view> -->
      </view>
    </view>
      <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.name }}</view>
          <view class="data-value-row">
            <view>
              <text v-if="item.value && item.value.length" class="data-value">{{
                item.value
              }}</text>
              <text class="data-unit">{{ item.unit }}</text>
            </view>
            <image
              class="device-img"
              :src="`/static/images/device/${item.key}-default.svg`"
              mode="aspectFit"
            ></image>
          </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>
          </view>
          <view class="params-board">
            <view class="params-left-container">
              <view class="params-left">
                <view
                  v-for="(item, index) in statusList.slice(0, 4)"
                  :key="index"
                  class="params-item"
                >
                  <view class="params-val">
                    {{ item.value }}
                    <span class="unit">{{ item.unit }}</span>
                  </view>
                  <view class="params-label">{{ item.name }}</view>
                </view>
              </view><view class="params-left">
                <view
                  v-for="(item, index) in statusList.slice(4, 8)"
                  :key="index"
                  class="params-item"
                >
                  <view class="params-val">
                    {{ item.value }}
                    <span class="unit">{{ item.unit }}</span>
                  </view>
                  <view class="params-label">{{ item.name }}</view>
                </view>
              </view>
            </view>
            <view class="params-right">
              <image
                class="device-img"
                style="width: 150rpx; height: 300rpx;"
                :src="qxzImg"
                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.time }}
              </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>
import qxzImg from '@/static/images/device/qxz_low.png';

export default {
  onLoad(options) {
    this.deviceInfo = options;
    this.initDateRange(options.uptime);
    this.getQxzObData();
    // this.getDeviceStatus();
    this.getDeviceData();
  },
  data() {
    return {
      qxzImg,
      deviceInfo: {},
      isShowOperation: false,
      activeTab: 'monitoring',
      monitorList: [],
      statusList: [],
      show: false,
      mode: 'range',
      startDate: '',
      endDate: '',
      page: 1,
      photoIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoIcon.png',
      editIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/editIcon.png',
      serviceIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/serviceIcon.png',
      simIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/simIcon.png',
      settingIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/settingIcon.png',
      isShowPhoto:false,
      pageSize: 9,
      total: 0,
      tableData: [],
      tableColumn: [],
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1;
    },
  },
  methods: {
    closeOperationHandler(){
      this.isShowOperation = false;
    },
    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) {
      uni.setClipboardData({
        data: item,
        success: function () {
        },
      });
    },
    goPage(type, eleItem) {
      let url = '';
      console.log(type,eleItem,'deviceInfodeviceInfo')
      if (eleItem && eleItem.key) {
        url = `/pages/deviceDetails/weatherStation1/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}&eleKey=${eleItem.name}`;
      } else {
        url = `/pages/deviceDetails/weatherStation1/${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=greenhouse.env_first.recent_data',
        data: {
          device_id: this.deviceInfo.devBid,
        },
      });
      const recent = res.recent || [];
      this.statusList = recent;
      // recent.forEach(item => {
      //   this.statusList.push({
      //     label: item.name,
      //     val: item.value,
      //     key: item.name,
      //   })
      // })
      this.monitorList = this.formatChartData(res.recent);
    },
    async getMonitorData(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=greenhouse.env_first.monitor_data',
        data: {
          device_id: this.deviceInfo.devBid,
        },
      });
    },
    formatChartData(data) {
      data.forEach(item => {
        if(item.name == '空气温度'){
          item.key = 'TEMPA';
        }else if(item.name == '空气湿度'){
          item.key = 'HUMIA';
        }else if(item.name == '风速'){
          item.key = 'PRESA';
        }else if(item.name == '风向'){
          item.key = 'WDIRA';
        }else if(item.name == '光照度'){
          item.key = 'ILLUA';
        }else if(item.name == '降雨量累计'){
          item.key = 'PRECA';
        }else{
          item.key = 'TEMPA';
        }
      })
      return data;
    },
    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,
        },
      });
      const newArr = this.transformObjectToArray(res);
      this.statusList = newArr;
    },
    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=greenhouse.env_first.history_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),
          ),
        },
      });
      this.total = data?.total || 0;
      this.tableData = data.table || [];
      const title = data.title;
      this.tableColumn = title
        .map((item) => {
          return {
            label: item.name,
            prop: item.key,
          };
        })
        .filter((item) => item.key !== 'time');
    },
  },
};
</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;
  text-align: center;
}
/* 设备基本信息 */
.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;
  }


.operation-container{
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.operation{
  position: fixed;
  top: 260rpx;
  right: 0;
  z-index: 999;
  width:48rpx;
  height: 100rpx;
  line-height: 50rpx;
  border-radius: 8px 0 0 8px;
  border-top: 4rpx solid #FFF;
  border-bottom: 4rpx solid #FFF;
  border-left: 4rpx solid #FFF;
  background: #dddfe6a3;
  color: #515153;
  text-align: center;
  font-family: "Source Han Sans CN VF";
  font-size: 24rpx;
  font-weight: 500;
  writing-mode: vertical-rl;
}
.operation-background{
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #00000040;
}
.operation-content{
  position: fixed;
  top: 240rpx;
  right: 80rpx;
  height: 126rpx;
  display: flex;
  padding: 16rpx 32rpx;
  align-items: center;
  gap: 64rpx;
  z-index: 999;
  border-radius: 32rpx;
  border: 2rpx solid #FFF;
  background: #FFF;
  backdrop-filter: blur(8rpx);
  .operation-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    text-align: center;
    font-family: "Source Han Sans CN VF";
    font-size: 24rpx;
    font-weight: 400;
  }
  .operation-icon{
    width: 58rpx;
    height: 58rpx;
  }
}
  .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-container{
        display: flex;
        justify-content: space-between;
      }
      .params-left {
        flex:1;
        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;
            .unit {
              font-size: 24rpx;
              font-weight: 400;
              color:#999999;
            }
          }
          .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: 850rpx;
      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>