Jelajahi Sumber

feat(env): 更新基础 URL 并添加生产环境配置

- 在 .env.development 中更新 VITE_APP_BASE_URL 为 http://172.16.102.52:8080
- 新增 .env.production 文件,配置生产环境基础 URL
- 在 pages/eventList/index.vue 中添加下拉刷新功能
- 更新 pages.json,启用事件列表页面的下拉刷新
nahida 1 tahun lalu
induk
melakukan
4102139b69
4 mengubah file dengan 427 tambahan dan 419 penghapusan
  1. 2 2
      .env.development
  2. 2 0
      .env.production
  3. 2 1
      pages.json
  4. 421 416
      pages/eventList/index.vue

+ 2 - 2
.env.development

@@ -1,2 +1,2 @@
-//VITE_APP_BASE_URL = 'http://172.16.102.52:8080'
-VITE_APP_BASE_URL = 'http://192.168.110.235:8080'
+VITE_APP_BASE_URL = 'http://172.16.102.52:8080'
+//VITE_APP_BASE_URL = 'http://192.168.110.235:8080'

+ 2 - 0
.env.production

@@ -0,0 +1,2 @@
+VITE_APP_BASE_URL = 'http://172.16.102.52:8080'
+//VITE_APP_BASE_URL = 'http://192.168.110.235:8080'

+ 2 - 1
pages.json

@@ -8,7 +8,8 @@
 		{
 			"path": "pages/eventList/index",
 			"style": {
-				"navigationBarTitleText": "事件列表"
+				"navigationBarTitleText": "事件列表",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

+ 421 - 416
pages/eventList/index.vue

@@ -1,428 +1,433 @@
 <template>
-    <view class="page">
-        <view class="header" style="height: 70rpx;">
-            <!-- 四个按钮 -->
-            <view class="button-group">
-                <button :class="{ 'active': selectedTimeType === -1 }" @click="selectTimeType(-1)">全部</button>
-                <button :class="{ 'active': selectedTimeType === 0 }" @click="selectTimeType(0)">严重</button>
-                <button :class="{ 'active': selectedTimeType === 1 }" @click="selectTimeType(1)">一般</button>
-                <button :class="{ 'active': selectedTimeType === 2 }" @click="selectTimeType(2)">轻微</button>
-            </view>
-        </view>
-
-        <scroll-view scroll-y class="event-list" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing"
-                     refresher-enabled>
-            <view v-if="filteredEventList.length > 0">
-                <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="['message-box', item.status]" v-if="item.status !== 'pending'">{{ item.message }}</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>
-                <view class="pagination-container">
-                    <uni-pagination :show-icon="true" :total="total" v-model="currentPage" :pageSize="pageSize" title="标题文字"
-                                    @change="getEventList" />
-                </view>
-            </view>
-            <view v-else class="no-data">无数据</view>
-        </scroll-view>
-    </view>
+	<view class="page">
+		<view class="header" style="height: 70rpx;">
+			<!-- 四个按钮 -->
+			<view class="button-group">
+				<button :class="{ 'active': selectedTimeType === -1 }" @click="selectTimeType(-1)">全部</button>
+				<button :class="{ 'active': selectedTimeType === 0 }" @click="selectTimeType(0)">严重</button>
+				<button :class="{ 'active': selectedTimeType === 1 }" @click="selectTimeType(1)">一般</button>
+				<button :class="{ 'active': selectedTimeType === 2 }" @click="selectTimeType(2)">轻微</button>
+			</view>
+		</view>
+
+		<scroll-view class="event-list" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
+			<view v-if="filteredEventList.length > 0">
+				<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="['message-box', item.status]" v-if="item.status !== 'pending'">{{ item.message }}</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>
+				<view class="pagination-container">
+					<uni-pagination :show-icon="true" :total="total" v-model="currentPage" :pageSize="pageSize" title="标题文字"
+						@change="getEventList" />
+				</view>
+			</view>
+			<view v-else class="no-data">无数据</view>
+		</scroll-view>
+	</view>
 </template>
 
 <script lang="ts" setup>
 import {computed, ref} from 'vue';
 import {clientPostWithQueryParams} from '../../utils/request';
 import {alarmGradeClassMap, alarmGradeMap, alarmTypeMap} from './eventMap';
-import {onShow} from '@dcloudio/uni-app';
+import {onPullDownRefresh, onShow} from '@dcloudio/uni-app';
 
 interface EventItem {
-    id: number;
-    status: "ignore" | "mistake" | "completed" | "processing" | "pending";
-    statusText: string;
-    time: string;
-    location: string;
-    level: string;
-    levelClass: string;
-    type: string;
-    description: string;
-    person: string;
-    message: string;
-}
-
-const eventList = ref<EventItem[]>([]);
-
-const timeTypes = ['严重', '一般', '轻微'] as const;
-const selectedTimeType = ref(-1);
-
-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(() => {
-    if (selectedTimeType.value === -1) {
-        return eventList.value;
-    }
-    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.setStorageSync("eventDetail", item);
-    uni.navigateTo({
-        url: "/pages/eventDetail/index"
-    })
-};
-
-const isRefreshing = ref(false);
-
-const onRefresh = async () => {
-    isRefreshing.value = true;
-    await getEventList();
-    isRefreshing.value = false;
-    uni.showToast({
-        title: '刷新成功',
-        icon: 'success'
-    });
-};
-
-const selectTimeType = (index: number) => {
-    selectedTimeType.value = index;
-};
-
-const currentPage = ref(1);
-const pageSize = ref(10);
-const total = ref(0);
-
-const getEventList = async () => {
-    const res = await clientPostWithQueryParams("/visualization/fireFighting/queryEventStatisticsPage", {
-        pageNum: currentPage.value,
-        pageSize: pageSize.value,
-        sortType: 'DESC'
-    })
-    if (res.code !== 200) {
-        uni.showToast({
-            title: "请求数据失败",
-            duration: 2000
-        })
-    }
-    const res2 = await clientPostWithQueryParams('/visualization/fireFighting/queryEventStatistics')
-    if (res2.code !== 200) {
-        uni.showToast({
-            title: "请求数据失败",
-            duration: 2000
-        })
-    }
-    total.value = res2.data.value;
-    const processEventList: EventItem[] = res.data.pageData.map(q => {
-        const statusArr: EventItem['status'][] = ["pending", "processing", "completed", "mistake", "ignore"]
-        const statusArrText: string[] = ["未处理", "处理中", "处理完成", "误报", "忽略"]
-        const r: EventItem = {
-            id: q.alarmCode,
-            location: q.alarmPosition,
-            status: statusArr[q.handleStat],
-            statusText: statusArrText[q.handleStat],
-            time: q.alarmDate,
-            level: alarmGradeMap.get(q.alarmGrade),
-            levelClass: alarmGradeClassMap.get(q.alarmGrade),
-            type: q.orgName,
-            description: alarmTypeMap.get(q.alarmType),
-            person: 'string',
-            message: q.handleMessage
-        }
-        return r;
-    })
-    eventList.value = processEventList
-};
-
-onShow(() => {
-    getEventList();
-})
+		id : number;
+		status : "ignore" | "mistake" | "completed" | "processing" | "pending";
+		statusText : string;
+		time : string;
+		location : string;
+		level : string;
+		levelClass : string;
+		type : string;
+		description : string;
+		person : string;
+		message : string;
+	}
+
+	onPullDownRefresh(() => {
+		onRefresh().then(()=>{
+			uni.stopPullDownRefresh();
+		});
+		
+	})
+
+	const eventList = ref<EventItem[]>([]);
+
+	const timeTypes = ['严重', '一般', '轻微'] as const;
+	const selectedTimeType = ref(-1);
+
+	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(() => {
+		if (selectedTimeType.value === -1) {
+			return eventList.value;
+		}
+		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.setStorageSync("eventDetail", item);
+		uni.navigateTo({
+			url: "/pages/eventDetail/index"
+		})
+	};
+
+	const isRefreshing = ref(false);
+
+	const onRefresh = async () => {
+		isRefreshing.value = true;
+		await getEventList();
+		isRefreshing.value = false;
+		uni.showToast({
+			title: '刷新成功',
+			icon: 'success'
+		});
+	};
+
+	const selectTimeType = (index : number) => {
+		selectedTimeType.value = index;
+	};
+
+	const currentPage = ref(1);
+	const pageSize = ref(10);
+	const total = ref(0);
+
+	const getEventList = async () => {
+		const res = await clientPostWithQueryParams("/visualization/fireFighting/queryEventStatisticsPage", {
+			pageNum: currentPage.value,
+			pageSize: pageSize.value,
+			sortType: 'DESC'
+		})
+		if (res.code !== 200) {
+			uni.showToast({
+				title: "请求数据失败",
+				duration: 2000
+			})
+		}
+		const res2 = await clientPostWithQueryParams('/visualization/fireFighting/queryEventStatistics')
+		if (res2.code !== 200) {
+			uni.showToast({
+				title: "请求数据失败",
+				duration: 2000
+			})
+		}
+		total.value = res2.data.value;
+		const processEventList : EventItem[] = res.data.pageData.map(q => {
+			const statusArr : EventItem['status'][] = ["pending", "processing", "completed", "mistake", "ignore"]
+			const statusArrText : string[] = ["未处理", "处理中", "处理完成", "误报", "忽略"]
+			const r : EventItem = {
+				id: q.alarmCode,
+				location: q.alarmPosition,
+				status: statusArr[q.handleStat],
+				statusText: statusArrText[q.handleStat],
+				time: q.alarmDate,
+				level: alarmGradeMap.get(q.alarmGrade),
+				levelClass: alarmGradeClassMap.get(q.alarmGrade),
+				type: q.orgName,
+				description: alarmTypeMap.get(q.alarmType),
+				person: 'string',
+				message: q.handleMessage
+			}
+			return r;
+		})
+		eventList.value = processEventList
+	};
+
+	onShow(() => {
+		getEventList();
+	})
 </script>
 
 <style scoped>
-.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;
-}
-
-.button-group {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-}
-
-.button-group button {
-    padding: 10rpx 20rpx;
-    border: none;
-    border-radius: 10rpx;
-    background-color: #F8F9FB;
-    color: #666;
-    font-size: 28rpx;
-}
-
-.button-group button.active {
-    background-color: #1890ff;
-    color: white;
-}
-
-.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;
-}
-
-.mistake {
-    background-color: #55aa7f;
-    color: #fff;
-}
-
-.ignore {
-    background-color: #55ffff;
-    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;
-}
-
-.pagination-container {
-    width: 80vw;
-    margin: auto;
-}
-
-.no-data {
-    text-align: center;
-    color: #999;
-    font-size: 14px;
-    padding: 20rpx;
-}
-
-.message-box {
-    padding: 16rpx 24rpx;
-    background-color: #f8f9fb;
-    border-radius: 8rpx;
-    font-size: 24rpx;
-    color: #666;
-    line-height: 1.6;
-    margin-top: 20rpx;
-    border: 1px solid #eee;
-}
-
-/* 扩展不同状态的消息样式(可选) */
-.message-box.processing {
-    background-color: #fff3d6;
-    border-color: #ffe5b4;
-}
-
-.message-box.completed {
-    background-color: #e8f9eb;
-    border-color: #c8e6c9;
-}
-
-.message-box.mistake {
-    background-color: #e0f2f1;
-    border-color: #b2dfdb;
-}
-
-.message-box.ignore {
-    background-color: #fff3b0;
-    border-color: #fff9c4;
-}
-</style>
-    
+	.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;
+	}
+
+	.button-group {
+		display: flex;
+		justify-content: space-around;
+		width: 100%;
+	}
+
+	.button-group button {
+		padding: 10rpx 20rpx;
+		border: none;
+		border-radius: 10rpx;
+		background-color: #F8F9FB;
+		color: #666;
+		font-size: 28rpx;
+	}
+
+	.button-group button.active {
+		background-color: #1890ff;
+		color: white;
+	}
+
+	.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;
+	}
+
+	.mistake {
+		background-color: #55aa7f;
+		color: #fff;
+	}
+
+	.ignore {
+		background-color: #55ffff;
+		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;
+	}
+
+	.pagination-container {
+		width: 80vw;
+		margin: auto;
+	}
+
+	.no-data {
+		text-align: center;
+		color: #999;
+		font-size: 14px;
+		padding: 20rpx;
+	}
+
+	.message-box {
+		padding: 16rpx 24rpx;
+		background-color: #f8f9fb;
+		border-radius: 8rpx;
+		font-size: 24rpx;
+		color: #666;
+		line-height: 1.6;
+		margin-top: 20rpx;
+		border: 1px solid #eee;
+	}
+
+	/* 扩展不同状态的消息样式(可选) */
+	.message-box.processing {
+		background-color: #fff3d6;
+		border-color: #ffe5b4;
+	}
+
+	.message-box.completed {
+		background-color: #e8f9eb;
+		border-color: #c8e6c9;
+	}
+
+	.message-box.mistake {
+		background-color: #e0f2f1;
+		border-color: #b2dfdb;
+	}
+
+	.message-box.ignore {
+		background-color: #fff3b0;
+		border-color: #fff9c4;
+	}
+</style>