yuanling-app/pages/eventList/index.vue

<template>
  <view class="page">
    <view class="header" style="height: 70rpx;">
      <picker mode="selector" :range="timeTypes" :value="selectedTimeType" @change="onTimeTypeChange">
        <view class="time-type-picker" :class="processTimeTypes(timeTypes[selectedTimeType])">
          <text>{{ timeTypes[selectedTimeType] }}</text>
          <uni-icons type="arrowdown" size="20" color="#333" />
        </view>
      </picker>
    </view>

    <scroll-view 
      scroll-y 
      class="event-list" 
      @refresherrefresh="onRefresh" 
      :refresher-triggered="isRefreshing"
      refresher-enabled
    >
      <view v-for="(item, index) in filteredEventList" :key="index" class="event-card">
        <view class="event-header">
          <view :class="['status-tag', item.status]">{{ item.statusText }}</view>
          <text class="time">{{ item.time }}</text>
        </view>

        <view class="event-info">
          <view class="location">
            <uni-icons type="location" size="16" color="#666"/>
            <text class="location-text">{{ item.location }}</text>
          </view>
          <view class="type-level">
            <text :class="['level-tag', item.levelClass]">{{ item.level }}</text>
            <text class="type">{{ item.type }}</text>
          </view>
          <view class="description">{{ item.description }}</view>
          <view class="person-info">
            <text class="label">涉事人员：</text>
            <text>{{ item.person }}</text>
          </view>
        </view>

        <view class="action-buttons">
          <uni-button size="mini" type="warn" @click="handleEmergency(item)">
            <view class="button-content">
              <uni-icons type="phone-filled" size="16" color="#fff"/>
              <text>一键报警</text>
            </view>
          </uni-button>
          <uni-button size="mini" type="default" @click="viewDetail(item)">
            <view class="button-content">
              <uni-icons type="more-filled" size="16" color="#666"/>
              <text>查看详情</text>
            </view>
          </uni-button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

interface EventItem {
  id: number;
  status: string;
  statusText: string;
  time: string;
  location: string;
  level: string;
  levelClass: string;
  type: string;
  description: string;
  person: string;
}

const eventList = ref<EventItem[]>([
  {
    id: 1,
    status: 'pending',
    statusText: '未处理',
    time: '2024-01-20 14:30',
    location: '东区停车场B2层',
    level: '紧急',
    levelClass: 'urgent',
    type: '安全隐患',
    description: '发现可疑人员在车辆周围徘徊，疑似有盗窃嫌疑',
    person: '刘昊林'
  },
  {
    id: 2,
    status: 'processing',
    statusText: '处理中',
    time: '2024-01-20 13:15',
    location: '西区3号楼电梯',
    level: '重要',
    levelClass: 'important',
    type: '设备故障',
    description: '电梯突发故障，内有人员被困',
    person: '郭连法'
  },
  {
    id: 3,
    status: 'completed',
    statusText: '已完成',
    time: '2024-01-20 10:20',
    location: '北区游泳池',
    level: '普通',
    levelClass: 'normal',
    type: '设施维护',
    description: '泳池水质异常，需要及时处理',
    person: '刘昊林'
  },
  {
    id: 4,
    status: 'processing',
    statusText: '处理中',
    time: '2024-01-20 13:15',
    location: '西区3号楼电梯',
    level: '重要',
    levelClass: 'important',
    type: '设备故障',
    description: '电梯突发故障，内有人员被困',
    person: '郭连法'
  },
  {
    id: 5,
    status: 'processing',
    statusText: '处理中',
    time: '2024-01-20 13:15',
    location: '西区3号楼电梯',
    level: '重要',
    levelClass: 'important',
    type: '设备故障',
    description: '电梯突发故障，内有人员被困',
    person: '郭连法'
  },
]);

const timeTypes = ['紧急', '重要', '普通'] as const;
const selectedTimeType = ref(0);

const processTimeTypes = (type:typeof timeTypes[number]) => {
	if(type === '紧急'){
		return "urgent"
	}else if(type === '普通'){
		return "normal"
	}else if(type === '重要'){
		return "important"
	}else {
		return "";
	}
}

const filteredEventList = computed(() => {
  const selectedType = timeTypes[selectedTimeType.value];
  return eventList.value.filter(item => item.level === selectedType);
});

const handleEmergency = (item: EventItem) => {
  uni.showActionSheet({
    itemList: ['拨打110', '拨打119', '拨打120'],
    success: function (res) {
      const phoneNumbers = ['110', '119', '120'];
      uni.makePhoneCall({
        phoneNumber: phoneNumbers[res.tapIndex]
      });
    }
  });
};

const notifySecurity = (item: EventItem) => {
  uni.showToast({
    title: '已通知保安',
    icon: 'success'
  });
};

const notifyVisitor = (item: EventItem) => {
  uni.showToast({
    title: '已发送通知',
    icon: 'success'
  });
};

const viewDetail = (item: EventItem) => {
  uni.navigateTo({
  	url:"/pages/eventDetail/index"
  })
};

const isRefreshing = ref(false);

const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    });
  }, 1000);
};

const onTimeTypeChange = (e: any) => {
  selectedTimeType.value = e.detail.value;
};
</script>

<style>
page {
  height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.time-type-picker {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background-color: #F8F9FB;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.event-list {
  flex: 1;
  overflow: auto;
  padding: 20rpx;
}

.event-card {
  width: 650rpx;
  background-color: #fff;
  border-radius: 12px;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 4px;
  font-size: 12px;
}

.pending {
  background-color: #ff4d4f;
  color: #fff;
}

.processing {
  background-color: #faad14;
  color: #fff;
}

.completed {
  background-color: #52c41a;
  color: #fff;
}

.time {
  font-size: 14px;
  color: #999;
}

.event-info {
  margin-bottom: 30rpx;
}

.location {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.location-text {
  margin-left: 8rpx;
  font-size: 14px;
  color: #666;
}

.type-level {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.level-tag {
  padding: 4rpx 16rpx;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 16rpx;
}

.urgent {
  background-color: #ff4d4f;
  color: #fff;
}

.important {
  background-color: #faad14;
  color: #fff;
}

.normal {
  background-color: #1890ff;
  color: #fff;
}

.type {
  font-size: 14px;
  color: #666;
}

.description {
  font-size: 14px;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.person-info {
  font-size: 14px;
  color: #666;
}

.label {
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.button-content text {
  margin-left: 8rpx;
  font-size: 12px;
}

.uni-button {
  margin: 0;
  flex: 1;
  margin-right: 16rpx;
}

.uni-button:last-child {
  margin-right: 0;
}
</style>