Refactor date handling in Req15RateDistributionView: replace single date input with start and end date inputs, update data fetching logic accordingly.
This commit is contained in:
@@ -31,7 +31,8 @@ interface DataConnectionItem {
|
|||||||
|
|
||||||
const mapContainer = ref<HTMLDivElement | null>(null)
|
const mapContainer = ref<HTMLDivElement | null>(null)
|
||||||
const operator = ref<string>('CMCC') // 默认选择中国移动
|
const operator = ref<string>('CMCC') // 默认选择中国移动
|
||||||
const date = ref<string>('')
|
const startDate = ref<string>('')
|
||||||
|
const endDate = ref<string>('')
|
||||||
const loading = ref<boolean>(false)
|
const loading = ref<boolean>(false)
|
||||||
const dataLoaded = ref<boolean>(false)
|
const dataLoaded = ref<boolean>(false)
|
||||||
const dataList = ref<DataConnectionItem[]>([])
|
const dataList = ref<DataConnectionItem[]>([])
|
||||||
@@ -151,9 +152,10 @@ const fetchData = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const body: { operator?: string; date?: string } = {}
|
const body: { operator?: string; startDate?: string; endDate?: string } = {}
|
||||||
if (operator.value) body.operator = operator.value
|
if (operator.value) body.operator = operator.value
|
||||||
if (date.value) body.date = date.value
|
if (startDate.value) body.startDate = startDate.value
|
||||||
|
if (endDate.value) body.endDate = endDate.value
|
||||||
|
|
||||||
const response = await fetch('http://localhost:8081/dataConnection', {
|
const response = await fetch('http://localhost:8081/dataConnection', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -229,7 +231,7 @@ const initMapAfterData = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 监听筛选条件变化
|
// 监听筛选条件变化
|
||||||
watch([operator, date], () => {
|
watch([operator, startDate, endDate], () => {
|
||||||
if (map && dataLoaded.value) fetchData()
|
if (map && dataLoaded.value) fetchData()
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -262,14 +264,31 @@ onUnmounted(() => {
|
|||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<label for="operator">运营商:</label>
|
<label for="operator">运营商:</label>
|
||||||
<select id="operator" v-model="operator" class="select-input" :disabled="loading">
|
<select id="operator" v-model="operator" class="select-input" :disabled="loading">
|
||||||
|
<option value="">ALL</option>
|
||||||
<option value="CMCC">中国移动</option>
|
<option value="CMCC">中国移动</option>
|
||||||
<option value="CUCC">中国联通</option>
|
<option value="CUCC">中国联通</option>
|
||||||
<option value="CTCC">中国电信</option>
|
<option value="CTCC">中国电信</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<label for="date">日期:</label>
|
<label for="startDate">起始日期:</label>
|
||||||
<input id="date" type="date" v-model="date" class="date-input" :disabled="loading" />
|
<input
|
||||||
|
id="startDate"
|
||||||
|
type="date"
|
||||||
|
v-model="startDate"
|
||||||
|
class="date-input"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="filter-item">
|
||||||
|
<label for="endDate">结束日期:</label>
|
||||||
|
<input
|
||||||
|
id="endDate"
|
||||||
|
type="date"
|
||||||
|
v-model="endDate"
|
||||||
|
class="date-input"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button @click="fetchData" class="refresh-btn" :disabled="loading">
|
<button @click="fetchData" class="refresh-btn" :disabled="loading">
|
||||||
{{ loading ? '加载中...' : '刷新' }}
|
{{ loading ? '加载中...' : '刷新' }}
|
||||||
|
|||||||
Reference in New Issue
Block a user