bigdata_WX/pages/warning/index.vue

<template>
  <view class="warning-center">
    <!-- 顶部导航栏 -->
    <custom-card>
      <block slot="backText">预警中心</block>
    </custom-card>

    <!-- 主要内容 -->
    <view class="content">
      <!-- 宣传语区域 -->
      <view class="banner">
        <view class="banner-text">
          <text class="banner-title">天灾虫害，预警在先</text>
          <text class="banner-subtitle">全天候监测，风险早知晓</text>
        </view>
        <view class="warning-icon">
          <view class="icon-triangle">
            <image :src="exclamation" class="icon-image" />
          </view>
        </view>
      </view>

      <!-- 日期选择器 -->
      <view class="date-picker">
        <view class="date-inputs" @click="showDatePickerHandle()">
          <text class="date-label">{{ startTime }}</text>
          <text class="date-separator">-</text>
          <text class="date-label">{{ endTime }}</text>
          <u-icon name="calendar" size="28rpx" color="#999" />
        </view>
        <view class="date-icons">
          <image :src="warning" class="icon-image" />
        </view>
      </view>

      <!-- 标签导航 -->
      <view class="tab-nav">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="activeTabHandler(index)"
        >
          {{ tab }}
        </view>
      </view>

      <!-- 预警列表 -->
      <scroll-view
        v-if="activeTab == 0"
        class="warning-list" 
        scroll-y 
        :scroll-top="listScrollTop" 
        scroll-with-animation
        @scrolltolower="loadMore"
        @scrolltoupper="refresh"
      >
        <view
          v-for="(warning, index) in warningList"
          :key="index"
          class="warning-item"
          @click="popupShowHandler(warning)"
        >
          <view class="warning-header">
            <view class="warning-type">
              <view class="type-icon" :class="warning.status == '0' ? 'type-blue' : 'type-gray'">
                <image :src="weather" class="icon-image" />
              </view>
              <text class="type-text">{{ warning.warning_title }}</text>
              <text class="device-type">{{ warning.device_type }}</text>
            </view>
            <view class="warning-level" 
            :class="
              warning.level == '0' ? (warning.status != '0' ? 'level-normal-gray' : 'level-normal') :
              warning.level == '1'? (warning.status != '0' ? 'level-important-gray' : 'level-important'): 
              (warning.status != '0' ? 'level-urgent-gray' : 'level-urgent')
            ">
            </view>
          </view>
          <view class="warning-content">
            {{ warning.warning_content }}
          </view>
          <view class="warning-footer">
            <text class="warning-time">{{ formatTime(warning.upl_time) }}</text>
            <view class="warning-location">
              <u-icon name="location" size="20rpx" color="#999" />
            </view>
          </view>
          <view class="location-text">
            <u-icon name="map" size="28"></u-icon>
            <text style="margin-left: 10rpx">{{ warning.address || '-' }}</text>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="loading-more">
          <text v-if="loading">加载中...</text>
          <text v-else-if="finished">没有更多数据了</text>
          <text v-else>上拉加载更多</text>
        </view>
      </scroll-view>

      <scroll-view
        v-if="activeTab == 1"
        class="warning-list" 
        scroll-y 
        :scroll-top="listScrollTop" 
        scroll-with-animation
        @scrolltolower="loadMore"
        @scrolltoupper="refresh"
      >
        <view
          v-for="(warning, index) in manualWarningList"
          :key="index"
          class="warning-item"
          @click="popupManualShowHandler(warning)"
        >
          <view class="warning-content">
            {{ warning.conf }}
          </view>
          <view class="warning-footer">
            <text class="warning-time">{{ formatTime(warning.create_time) }}</text>
            <view class="warning-location">
              <u-icon name="location" size="20rpx" color="#999" />
            </view>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="loading-more">
          <text v-if="loading">加载中...</text>
          <text v-else-if="finished">没有更多数据了</text>
          <text v-else>上拉加载更多</text>
        </view>
      </scroll-view>
      <!-- 回到顶部 -->
      <view class="back-to-top" @click="scrollToTop">
        <u-icon name="arrow-up" size="28rpx" color="#999" />
      </view>
    </view>
		<u-calendar v-model="showDatePicker" :mode="mode" @change="changeCalendar"></u-calendar>
    <u-popup v-model="popupShow" mode="bottom" height="50%" border-radius="20">
      <view class="popup-container">
        <view class="popup-icon" :class="
          current.level == '0' ? (current.status != '0' ? 'popup-level-normal-gray' : 'popup-level-normal') :
          current.level == '1'? (current.status != '0' ? 'popup-level-important-gray' : 'popup-level-important'): 
          (current.status != '0' ? 'popup-level-urgent-gray' : 'popup-level-urgent')
        ">
        </view>
        <view class="popup-header">{{ current.warning_title }}</view>
        <view class="popup-type">
          <text class="type-text">{{ current.device_type }}</text>
        </view>
        <view class="popup-content">{{ current.warning_content }}</view>
        <view class="popup-time">{{ formatTime(current.upl_time) }}</view>
        <view class="popup-text">
          <u-icon name="map" size="28"></u-icon>
          <text style="margin-left: 10rpx">{{ warning.address || '-' }}</text>
        </view>
      </view>
		</u-popup>
    <u-popup v-model="popupManualShow" mode="bottom" height="50%" border-radius="20">
      <view class="popup-container" style="margin-top:40rpx">
        <view class="popup-content">{{ currentManual.conf }}</view>
        <view class="popup-time">{{ formatTime(currentManual.create_time) }}</view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import exclamation from './assets/exclamation.png';
import warning from './assets/warning.png';
import pest from './assets/pest.png';
import weather from './assets/weather.png';
import offline from './assets/offline.png';

export default {
  data() {
    return {
      current:{},
      currentManual:{},
      popupShow: false,
      popupManualShow: false,
      exclamation,
      warning,
      pest,
      weather,
      offline,
      showDatePicker: false,
			mode: 'range',
      activeTab: 0,
      listScrollTop: 0,
      tabs: ['环境监测','手动预警'],
      warningList: [],
      manualWarningList: [],
      page_size: 10,
      page: 1,
      // 获取7天前的日期
      startTime: this.getSevenDaysAgo() || '开始日期',
      endTime: this.getCurrentDate() || '结束日期',
      deviceId: '',
      device_type_id:'',
      total: 0,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  onLoad() {
    this.getWarningList();
  },
  methods: {
    activeTabHandler(index){
      this.activeTab = index;
      this.page = 1;
      if(index == 0){
        this.getWarningList();
      }else if(index == 1){
        this.getWarningManualList();
      }
    },
    popupManualShowHandler(warning){
      this.currentManual = warning;
      this.popupManualShow = true;
    },
    popupShowHandler(warning){
      this.current = warning;
      const params = {
        record_ids: warning.id,
      };
      this.readHandler(params)
      this.popupShow = true;
    },
    changeCalendar(e){
      this.startTime = e.startDate;
      this.endTime = e.endDate;
      // 重置分页参数
      this.page = 1;
      this.loading = false;
      this.finished = false;
      if(this.activeTab == 0){
        this.getWarningList();
      }else if(this.activeTab == 1){
        this.getWarningManualList();
      }
    },
    // 加载更多
    loadMore() {
      if (this.finished) return;
      if(this.activeTab == 0){
        this.getWarningList();
      }else if(this.activeTab == 1){
        this.getWarningManualList();
      }
    },
    // 下拉刷新
    refresh() {
      if (this.loading) return;
      // 重置分页参数
      this.page = 1;
      this.loading = false;
      this.finished = false;
      this.refreshing = true;
      if(this.activeTab == 0){
        this.getWarningList();
      }else if(this.activeTab == 1){
        this.getWarningManualList();
      }
    },
    // 已读
    async readHandler(params){
      await this.$myRequest({
        url:'/api/api_gateway?method=device.env_sec_alert.update_env_sec_alert_record',
        method:'POST',
        data: params,
      })
      this.page = 1;
      if(this.activeTab == 0){
        this.getWarningList();
      }
    },
    formatTime(time){
      if(!time){
        return '';
      }
      const date = new Date(time * 1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      const second = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 获取7天前的日期
    getSevenDaysAgo() {
      const today = new Date();
      const sevenDaysAgo = new Date(today);
      sevenDaysAgo.setDate(today.getDate() - 7);
      const year = sevenDaysAgo.getFullYear();
      const month = String(sevenDaysAgo.getMonth() + 1).padStart(2, '0');
      const day = String(sevenDaysAgo.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取当前日期
    getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    showDatePickerHandle(){
      this.showDatePicker = true;
    },
  // 把日期转成秒数
    dateToTimestamp(date) {
      return Math.floor(new Date(date).getTime() / 1000);
    },
    async getWarningManualList(){
      if (this.loading) return;
      
      this.loading = true;
      
      const start = this.dateToTimestamp(this.startTime + ' 00:00:00');
      const end = this.dateToTimestamp(this.endTime + ' 23:59:59');
      const params = {
        start,
        end,
        page: this.page,
        page_size: this.page_size,
        device_id: this.deviceId,
        device_type_id: this.device_type_id
      }
      
      try {
        const res = await this.$myRequest({
          url:'/api/api_gateway?method=device.env_sec_alert.get_manual_env_sec_alert_record',
          method:'POST',
          data: params,
        })
        
        const resData = res?.data || [];
        const list = resData || [];
        
        if (this.page === 1) {
          this.manualWarningList = list;
        } else {
          this.manualWarningList = [...this.manualWarningList, ...list];
        }
        
        this.total = res?.total || 0;
        this.loading = false;
        
        // 计算是否还有更多数据
        if (this.manualWarningList.length >= this.total) {
          this.finished = true;
        } else {
          this.page++;
        }
        
        // 结束刷新状态
        if (this.refreshing) {
          this.refreshing = false;
        }
        
      } catch (error) {
        console.error('获取预警列表失败:', error);
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
      }
    },
    async getWarningList(){
      if (this.loading) return;
      
      this.loading = true;
      
      const start = this.dateToTimestamp(this.startTime + ' 00:00:00');
      const end = this.dateToTimestamp(this.endTime + ' 23:59:59');
      const params = {
        start,
        end,
        page: this.page,
        page_size: this.page_size,
        device_id: this.deviceId,
        device_type_id: this.device_type_id
      }
      
      try {
        const res = await this.$myRequest({
          url:'/api/api_gateway?method=device.env_sec_alert.get_env_sec_alert',
          method:'POST',
          data: params,
        })
        
        const resData = res?.data || [];
        const list = resData || [];
        
        if (this.page === 1) {
          this.warningList = list;
        } else {
          this.warningList = [...this.warningList, ...list];
        }
        
        this.total = res?.total_num || 0;
        this.loading = false;
        
        // 计算是否还有更多数据
        if (this.warningList.length >= this.total) {
          this.finished = true;
        } else {
          this.page++;
        }
        
        // 结束刷新状态
        if (this.refreshing) {
          this.refreshing = false;
        }
        
      } catch (error) {
        console.error('获取预警列表失败:', error);
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
      }
    },
    // 回到顶部
    scrollToTop() {
      this.listScrollTop = 0;
    }
  }
};
</script>

<style scoped lang="scss">
.warning-center {
  min-height: 100vh;
  font-family: 'Source Han Sans CN';
  background: linear-gradient(0deg, #F5F6FA 79.64%, #FFEEEC 99.35%);
}
::v-deep .u-calendar__action{
  display:flex;
}
::v-deep .u-calendar__action__icon{
  width: 40rpx;
}
::v-deep .u-calendar__action__text{
  width: calc(100% - 160rpx);
  text-align: center;
}
.content {
  padding: 0 32rpx;
}

/* 宣传语区域 */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32rpx 0;
  margin-bottom: 0rpx;
  padding: 24rpx;

  .banner-text {
    flex: 1;

    .banner-title {
      font-style: italic;
      display: block;
      color: #303133;
      font-family: "Source Han Sans CN VF";
      font-size: 40rpx;
      font-weight: 700;
      margin-bottom: 8rpx;
    }

    .banner-subtitle {
      display: block;
      font-size: 24rpx;
      color: #666666;
    }
  }

  .warning-icon {
    .icon-triangle {
      width: 130rpx;
      height: 130rpx;
      position: relative;
      .icon-image{
        width: 100%;
        height: 100%;
      }
    }
  }
}
.popup-container{
  position:relative;
  .popup-icon {
    position: absolute;
    top:0;
    right:0;
    margin-left: 12rpx;
    width: 112rpx;
    height: 48rpx;
    background: url('./assets/normal-gray.png');
    background-repeat: no-repeat;
    background-size: 100%;
    &.popup-level-normal {
      background: url('./assets/normal.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &.popup-level-normal-gray {
      background: url('./assets/normal-gray.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &.popup-level-important-gray {
      background: url('./assets/important-gray.png');
      background-repeat: no-repeat;
      background-size: 100%;
 }
    &.popup-level-important {
      background: url('./assets/important.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &.popup-level-urgent-gray {
      background: url('./assets/urgent-gray.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &.popup-level-urgent {
      background: url('./assets/urgent.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
.popup-header{
  padding: 20rpx 32rpx;
  width: 100%;
  text-align: left;
  color: #303133;
  font-family: "Source Han Sans CN VF";
  font-size: 32rx;
  font-weight: 700;
}
.popup-type{
  border-radius:32rpx;
  margin-left: 32rpx;
  display:inline-block;
  border: 2rpx solid #E4E7ED;
  padding: 2rpx 12rpx;
  color: #666666;
  font-family: "Source Han Sans CN VF";
  font-size: 24rpx;
  font-weight: 400;
  margin-bottom: 24rpx;
}
.popup-content{
  padding: 0 32rpx;
  line-height: 50rpx;
}
.popup-time{
  padding:0 32rpx;
  margin-top: 36rpx;
  color:#999999;
  font-size: 24rpx;
  text-align: left;
  color: #bdbdbd;
  font-family: "Source Han Sans CN VF";
  font-style: normal;
  font-weight: 400;
}
.popup-location{
  font-size: 24rpx;
  margin-top: 16rpx;
  padding-top: 16rpx;
  font-family: "Source Han Sans CN VF";
  color: #999999;
  display:flex;
  align-items: center;
}

.popup-text {
  padding: 0 32rpx;
  font-size: 24rpx;
  margin-top: 16rpx;
  padding-top: 16rpx;
  font-family: "Source Han Sans CN VF";
  color: #999999;
  display:flex;
  align-items: center;
}
/* 日期选择器 */
.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;

  .date-inputs {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 48rpx;
    padding: 14rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .date-label {
      width:250rpx;
      font-size: 26rpx;
      color: #999999;
      text-align: center;
    }

    .date-separator {
      margin: 0 24rpx;
      font-size: 26rpx;
      color: #999999;
    }
  }

  .date-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx            ;
    height: 60rpx;
    border-radius: 50%;
    background:#ffffff;
    .icon-image{
      width: 32rpx;
      height: 32rpx;
    }
  }
}

/* 标签导航 */
.tab-nav {
  display: flex;
  margin-bottom: 24rpx;
  border-bottom: 1rpx solid #e5e5e5;

  .tab-item {
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666666;
    position: relative;
    margin-right: 30rpx;
    &.active {
      color: #333333;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 4rpx;
        background: #515153;
        border-radius: 2rpx;
      }
    }
  }
}

/* 预警列表 */
.warning-list {
  margin-bottom: 100rpx;
  height: calc(100vh - 600rpx);
  overflow-y: auto;
  .warning-item {
    position: relative;
    padding: 28rpx 24rpx;
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    .warning-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .warning-type {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;

        .type-icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          margin-right: 12rpx;
          flex-shrink: 0;
          display:flex;
          align-items: center;
          justify-content: center;

          &.type-red {
            background: linear-gradient(180deg, #FFA9A5 0%, #FF716A 100%);
          }

          &.type-blue {
            background: linear-gradient(180deg, #83D2FF 0%, #09A5FC 100%);
          }

          &.type-yellow {
            background: linear-gradient(180deg, #FED057 0%, #FFAF40 100%);
          }

          &.type-gray {
            background: #DDDFE6;
          }
          .icon-image{
            width: 28rpx;
            height: 28rpx;
          }
        }

        .type-text {
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
          margin-right: 12rpx;
          flex-shrink: 0;
        }

        .device-type {
          font-size: 22rpx;
          color: #515153;
          font-family: "Source Han Sans CN VF";
          font-style: normal;
          font-weight: 400;
          border: 2rpx solid #E4E7ED;
          padding: 2rpx 12rpx;
          border-radius: 32rpx;
          margin-left: 8rpx;
          flex-shrink: 0;
        }
      }

      .warning-level {
        position: absolute;
        top:0;
        right:0;
        margin-left: 12rpx;
        width: 112rpx;
        height: 48rpx;
        background: url('./assets/normal-gray.png');
        background-repeat: no-repeat;
        background-size: 100%;
        &.level-normal {
          background: url('./assets/normal.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        &.level-normal-gray {
          background: url('./assets/normal-gray.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        &.level-important {
          background: url('./assets/important.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        &.level-important-gray {
          background: url('./assets/important-gray.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        &.level-urgent-gray {
          background: url('./assets/urgent-gray.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        &.level-urgent {
          background: url('./assets/urgent.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
      }
    }

    .warning-content {
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      margin-bottom: 20rpx;
      //最多显示2行
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .warning-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .warning-time {
        font-size: 24rpx;
        color: #999999;
      }

      .warning-location {
        display: flex;
        align-items: center;
      }
    }
    .location-text {
      font-size: 24rpx;
      margin-top: 16rpx;
      padding-top: 16rpx;
      border-top: 1rpx solid #f0f0f0;
      font-family: "Source Han Sans CN VF";
      color: #999999;
      display:flex;
      align-items: center;
    }
  }
}

/* 加载更多提示 */
.loading-more {
  text-align: center;
  padding: 32rpx 0;
  font-size: 24rpx;
  color: #999999;
}

/* 回到顶部 */
.back-to-top {
  position: fixed;
  bottom: 80rpx;
  right: 32rpx;
  width: 64rpx;
  height: 64rpx;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 99;
}

/* 顶部导航栏右侧图标 */
.header-right {
  display: flex;
  align-items: center;

  .notification-icon {
    position: relative;
    margin-right: 32rpx;

    .badge {
      position: absolute;
      top: -4rpx;
      right: -4rpx;
      width: 12rpx;
      height: 12rpx;
      background: #ff6b6b;
      border-radius: 50%;
    }
  }
}
</style>