From 1c391db321fae77ddcd297e14fbe1429960ead49 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期二, 05 三月 2024 14:42:20 +0800
Subject: [PATCH] 景区运行数据基础功能
---
src/views/pcr/pcrData/index.vue | 184 +++++++++++++++++++++++----------------------
1 files changed, 94 insertions(+), 90 deletions(-)
diff --git a/src/views/pcr/pcrData/index.vue b/src/views/pcr/pcrData/index.vue
index 6df7cf1..4ee1f52 100644
--- a/src/views/pcr/pcrData/index.vue
+++ b/src/views/pcr/pcrData/index.vue
@@ -3,41 +3,14 @@
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="search" v-show="showSearch">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
- <el-form-item label="妯″潡鍚嶇О" prop="modeName">
- <el-input v-model="queryParams.modeName" placeholder="璇疯緭鍏ユā鍧楀悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" />
+ <el-form-item label="缁熻鍛ㄦ湡" prop="periodDate">
+ <el-input v-model="queryParams.periodDate" placeholder="璇疯緭鍏ョ粺璁″懆鏈�" clearable style="width: 240px" @keyup.enter="handleQuery" />
</el-form-item>
- <el-form-item label="鍛ㄦ湡" prop="periodName">
- <el-input v-model="queryParams.periodName" placeholder="璇疯緭鍏ュ懆鏈�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鍛ㄦ湡骞�" prop="periodYear">
- <el-input v-model="queryParams.periodYear" placeholder="璇疯緭鍏ュ懆鏈熷勾" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鍛ㄦ湡鏈�" prop="periodMonth">
- <el-input v-model="queryParams.periodMonth" placeholder="璇疯緭鍏ュ懆鏈熸湀" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣1鍚嶇О" prop="indexOneName">
- <el-input v-model="queryParams.indexOneName" placeholder="璇疯緭鍏ユ寚鏍�1鍚嶇О" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣1鍊�" prop="indexOneValue">
- <el-input v-model="queryParams.indexOneValue" placeholder="璇疯緭鍏ユ寚鏍�1鍊�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣2鍚嶇О" prop="indexTwoName">
- <el-input v-model="queryParams.indexTwoName" placeholder="璇疯緭鍏ユ寚鏍�2鍚嶇О" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣2鍊�" prop="indexTwoValue">
- <el-input v-model="queryParams.indexTwoValue" placeholder="璇疯緭鍏ユ寚鏍�2鍊�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣3鍚嶇О" prop="indexThreeName">
- <el-input v-model="queryParams.indexThreeName" placeholder="璇疯緭鍏ユ寚鏍�3鍚嶇О" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣3鍊�" prop="indexThreeValue">
- <el-input v-model="queryParams.indexThreeValue" placeholder="璇疯緭鍏ユ寚鏍�3鍊�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣4鍚嶇О" prop="indexFourName">
- <el-input v-model="queryParams.indexFourName" placeholder="璇疯緭鍏ユ寚鏍�4鍚嶇О" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鎸囨爣4鍊�" prop="indexFourValue">
- <el-input v-model="queryParams.indexFourValue" placeholder="璇疯緭鍏ユ寚鏍�4鍊�" clearable style="width: 240px" @keyup.enter="handleQuery" />
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨" clearable style="width: 240px" @keyup.enter="handleQuery" >
+ <el-option key="1" label="宸插惎鐢�" value="1" />
+ <el-option key="2" label="宸茬鐢�" value="2" />
+ </el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
@@ -68,20 +41,24 @@
<el-table v-loading="loading" :data="pcrDataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
- <el-table-column label="" align="center" prop="id" v-if="true" />
+ <el-table-column label="搴忓彿" type="index" width="50"/>
<el-table-column label="妯″潡鍚嶇О" align="center" prop="modeName" />
- <el-table-column label="鍛ㄦ湡" align="center" prop="periodName" />
- <el-table-column label="鍛ㄦ湡骞�" align="center" prop="periodYear" />
- <el-table-column label="鍛ㄦ湡鏈�" align="center" prop="periodMonth" />
- <el-table-column label="鎸囨爣1鍚嶇О" align="center" prop="indexOneName" />
- <el-table-column label="鎸囨爣1鍊�" align="center" prop="indexOneValue" />
- <el-table-column label="鎸囨爣2鍚嶇О" align="center" prop="indexTwoName" />
- <el-table-column label="鎸囨爣2鍊�" align="center" prop="indexTwoValue" />
- <el-table-column label="鎸囨爣3鍚嶇О" align="center" prop="indexThreeName" />
- <el-table-column label="鎸囨爣3鍊�" align="center" prop="indexThreeValue" />
- <el-table-column label="鎸囨爣4鍚嶇О" align="center" prop="indexFourName" />
- <el-table-column label="鎸囨爣4鍊�" align="center" prop="indexFourValue" />
- <el-table-column label="鐘舵�� 1鍚敤 0鏈惎鐢�" align="center" prop="status" />
+ <el-table-column label="缁熻鍛ㄦ湡" align="center" prop="periodDate" />
+ <el-table-column label="鎸囨爣鍚嶇О" align="center" prop="indexOneName" />
+ <el-table-column label="鎸囨爣鏁板��" align="center" prop="indexOneValue" />
+ <el-table-column label="鎸囨爣鍚嶇О" align="center" prop="indexTwoName" />
+ <el-table-column label="鎸囨爣鏁板��" align="center" prop="indexTwoValue" />
+ <el-table-column label="鎸囨爣鍚嶇О" align="center" prop="indexThreeName" />
+ <el-table-column label="鎸囨爣鏁板��" align="center" prop="indexThreeValue" />
+ <el-table-column label="鎸囨爣鍚嶇О" align="center" prop="indexFourName" />
+ <el-table-column label="鎸囨爣鏁板��" align="center" prop="indexFourValue" />
+ <el-table-column label="鐘舵��" align="center" prop="status">
+ <template #default="scope">
+ <span v-show="scope.row['status'] == 1">宸插惎鐢�</span>
+ <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">宸茬鐢�</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" />
<el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="淇敼" placement="top">
@@ -105,41 +82,38 @@
<!-- 娣诲姞鎴栦慨鏀逛汉杞﹁矾鍩虹淇℃伅瀵硅瘽妗� -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="pcrDataFormRef" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="妯″潡鍚嶇О" prop="modeName">
- <el-input v-model="form.modeName" placeholder="璇疯緭鍏ユā鍧楀悕绉�" />
+ <el-form-item label="鎸囨爣绫诲瀷" prop="modeName">
+ <el-select v-model="form.modeName" placeholder="璇烽�夋嫨" @change="handleModeNameChange">
+ <el-option key="1" label="閬撹矾閲岀▼鏁伴噺" value="閬撹矾閲岀▼鏁伴噺" />
+ <el-option key="2" label="鏈哄姩杞︿繚鏈夐噺" value="鏈哄姩杞︿繚鏈夐噺" />
+ <el-option key="3" label="椹鹃┒浜轰繚鏈夐噺" value="椹鹃┒浜轰繚鏈夐噺" />
+ </el-select>
</el-form-item>
- <el-form-item label="鍛ㄦ湡" prop="periodName">
- <el-input v-model="form.periodName" placeholder="璇疯緭鍏ュ懆鏈�" />
+ <el-form-item label="鍛ㄦ湡" prop="period">
+ <el-select v-model="form.period" placeholder="璇烽�夋嫨" style="width: 100px;" @change="clearPeriod">
+ <el-option key="1" label="骞村害" :value="1" />
+ <el-option key="2" label="鏈堝害" :value="2" />
+ </el-select>
+  
+ <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="璇烽�夋嫨缁熻鍛ㄦ湡" />
</el-form-item>
- <el-form-item label="鍛ㄦ湡骞�" prop="periodYear">
- <el-input v-model="form.periodYear" placeholder="璇疯緭鍏ュ懆鏈熷勾" />
- </el-form-item>
- <el-form-item label="鍛ㄦ湡鏈�" prop="periodMonth">
- <el-input v-model="form.periodMonth" placeholder="璇疯緭鍏ュ懆鏈熸湀" />
- </el-form-item>
- <el-form-item label="鎸囨爣1鍚嶇О" prop="indexOneName">
- <el-input v-model="form.indexOneName" placeholder="璇疯緭鍏ユ寚鏍�1鍚嶇О" />
- </el-form-item>
- <el-form-item label="鎸囨爣1鍊�" prop="indexOneValue">
+ <el-form-item :label="form.indexOneName" prop="indexOneValue">
<el-input v-model="form.indexOneValue" placeholder="璇疯緭鍏ユ寚鏍�1鍊�" />
</el-form-item>
- <el-form-item label="鎸囨爣2鍚嶇О" prop="indexTwoName">
- <el-input v-model="form.indexTwoName" placeholder="璇疯緭鍏ユ寚鏍�2鍚嶇О" />
- </el-form-item>
- <el-form-item label="鎸囨爣2鍊�" prop="indexTwoValue">
+ <el-form-item :label="form.indexTwoName" prop="indexTwoValue">
<el-input v-model="form.indexTwoValue" placeholder="璇疯緭鍏ユ寚鏍�2鍊�" />
</el-form-item>
- <el-form-item label="鎸囨爣3鍚嶇О" prop="indexThreeName">
- <el-input v-model="form.indexThreeName" placeholder="璇疯緭鍏ユ寚鏍�3鍚嶇О" />
- </el-form-item>
- <el-form-item label="鎸囨爣3鍊�" prop="indexThreeValue">
+ <el-form-item :label="form.indexThreeName" prop="indexThreeValue">
<el-input v-model="form.indexThreeValue" placeholder="璇疯緭鍏ユ寚鏍�3鍊�" />
</el-form-item>
- <el-form-item label="鎸囨爣4鍚嶇О" prop="indexFourName">
- <el-input v-model="form.indexFourName" placeholder="璇疯緭鍏ユ寚鏍�4鍚嶇О" />
- </el-form-item>
- <el-form-item label="鎸囨爣4鍊�" prop="indexFourValue">
+ <el-form-item :label="form.indexFourName" prop="indexFourValue">
<el-input v-model="form.indexFourValue" placeholder="璇疯緭鍏ユ寚鏍�4鍊�" />
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="form.status" placeholder="璇烽�夋嫨">
+ <el-option key="1" label="宸插惎鐢�" :value="1" />
+ <el-option key="2" label="宸茬鐢�" :value="2" />
+ </el-select>
</el-form-item>
</el-form>
<template #footer>
@@ -177,19 +151,18 @@
const initFormData: PcrDataForm = {
id: undefined,
- modeName: undefined,
- periodName: undefined,
- periodYear: undefined,
- periodMonth: undefined,
- indexOneName: undefined,
+ modeName: "閬撹矾閲岀▼鏁伴噺",
+ period: 2,
+ periodDate: undefined,
+ indexOneName: "楂橀�熻矾",
indexOneValue: undefined,
- indexTwoName: undefined,
+ indexTwoName: "鍥界渷閬�",
indexTwoValue: undefined,
- indexThreeName: undefined,
+ indexThreeName: "鍘夸埂閬�",
indexThreeValue: undefined,
- indexFourName: undefined,
+ indexFourName: "鍐滄潙閬撹矾",
indexFourValue: undefined,
- status: undefined,
+ status: 1,
}
const data = reactive<PageData<PcrDataForm, PcrDataQuery>>({
form: {...initFormData},
@@ -197,9 +170,8 @@
pageNum: 1,
pageSize: 10,
modeName: undefined,
- periodName: undefined,
- periodYear: undefined,
- periodMonth: undefined,
+ period: undefined,
+ periodDate: undefined,
indexOneName: undefined,
indexOneValue: undefined,
indexTwoName: undefined,
@@ -219,14 +191,11 @@
modeName: [
{ required: true, message: "妯″潡鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
],
- periodName: [
+ period: [
{ required: true, message: "鍛ㄦ湡涓嶈兘涓虹┖", trigger: "blur" }
],
- periodYear: [
+ periodDate: [
{ required: true, message: "鍛ㄦ湡骞翠笉鑳戒负绌�", trigger: "blur" }
- ],
- periodMonth: [
- { required: true, message: "鍛ㄦ湡鏈堜笉鑳戒负绌�", trigger: "blur" }
],
indexOneName: [
{ required: true, message: "鎸囨爣1鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
@@ -353,4 +322,39 @@
onMounted(() => {
getList();
});
+
+/** 鍛ㄦ湡骞存垨鏈� */
+const pickerType = computed(() => {
+ return form.value.period === 1 ? 'year' : 'month';
+});
+
+const pickerFormat = computed(() => {
+ return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
+});
+
+/** 鍒囨崲涓嶅悓鎸囨爣 */
+const handleModeNameChange = () => {
+ if (form.value.modeName === "閬撹矾閲岀▼鏁伴噺") {
+ form.value.indexOneName = '楂橀�熻矾';
+ form.value.indexTwoName = '鍥界渷閬�';
+ form.value.indexThreeName = '鍘夸埂閬�';
+ form.value.indexFourName = '鍐滄潙閬撹矾';
+ } else if (form.value.modeName === "鏈哄姩杞︿繚鏈夐噺") {
+ form.value.indexOneName = '璐ц繍杞﹁締';
+ form.value.indexTwoName = '鍏氦瀹㈣繍';
+ form.value.indexThreeName = '灏忓瀷姹借溅';
+ form.value.indexFourName = '鎽╂墭杞�';
+ } else if (form.value.modeName === "椹鹃┒浜轰繚鏈夐噺") {
+ form.value.indexOneName = '璐ц繍杞﹁締椹鹃┒浜�';
+ form.value.indexTwoName = '鍏氦瀹㈣繍椹鹃┒浜�';
+ form.value.indexThreeName = '灏忓瀷姹借溅椹鹃┒浜�';
+ form.value.indexFourName = '鎽╂墭杞﹂┚椹朵汉';
+ }
+};
+
+/** 娓呯┖鍛ㄦ湡 */
+const clearPeriod = () => {
+ form.value.periodDate = undefined;
+};
+
</script>
--
Gitblit v1.8.0