You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
626 lines
18 KiB
626 lines
18 KiB
<template>
|
|
<div class="main-container">
|
|
<el-card class="box-card !border-none" shadow="never">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-lg">{{ pageName }}</span>
|
|
<el-button type="primary" @click="addEvent">
|
|
{{ t('addStatHour') }}
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-card
|
|
class="box-card !border-none my-[10px] table-search-wrap"
|
|
shadow="never"
|
|
>
|
|
<el-form
|
|
:inline="true"
|
|
:model="statHourTable.searchParam"
|
|
ref="searchFormRef"
|
|
>
|
|
<el-form-item :label="t('addon')" prop="addon">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.addon"
|
|
:placeholder="t('addonPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('field')" prop="field">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.field"
|
|
:placeholder="t('fieldPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('fieldTotal')" prop="field_total">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.field_total"
|
|
:placeholder="t('fieldTotalPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('year')" prop="year">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.year"
|
|
:placeholder="t('yearPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('month')" prop="month">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.month"
|
|
:placeholder="t('monthPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('day')" prop="day">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.day"
|
|
:placeholder="t('dayPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('startTime')" prop="start_time">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.start_time"
|
|
:placeholder="t('startTimePlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('lastTime')" prop="last_time">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.last_time"
|
|
:placeholder="t('lastTimePlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour0')" prop="hour_0">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_0"
|
|
:placeholder="t('hour0Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour1')" prop="hour_1">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_1"
|
|
:placeholder="t('hour1Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour2')" prop="hour_2">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_2"
|
|
:placeholder="t('hour2Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour3')" prop="hour_3">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_3"
|
|
:placeholder="t('hour3Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour4')" prop="hour_4">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_4"
|
|
:placeholder="t('hour4Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour5')" prop="hour_5">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_5"
|
|
:placeholder="t('hour5Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour6')" prop="hour_6">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_6"
|
|
:placeholder="t('hour6Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour7')" prop="hour_7">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_7"
|
|
:placeholder="t('hour7Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour8')" prop="hour_8">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_8"
|
|
:placeholder="t('hour8Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour9')" prop="hour_9">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_9"
|
|
:placeholder="t('hour9Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour10')" prop="hour_10">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_10"
|
|
:placeholder="t('hour10Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour11')" prop="hour_11">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_11"
|
|
:placeholder="t('hour11Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour12')" prop="hour_12">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_12"
|
|
:placeholder="t('hour12Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour13')" prop="hour_13">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_13"
|
|
:placeholder="t('hour13Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour14')" prop="hour_14">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_14"
|
|
:placeholder="t('hour14Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour15')" prop="hour_15">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_15"
|
|
:placeholder="t('hour15Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour16')" prop="hour_16">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_16"
|
|
:placeholder="t('hour16Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour17')" prop="hour_17">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_17"
|
|
:placeholder="t('hour17Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour18')" prop="hour_18">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_18"
|
|
:placeholder="t('hour18Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour19')" prop="hour_19">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_19"
|
|
:placeholder="t('hour19Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour20')" prop="hour_20">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_20"
|
|
:placeholder="t('hour20Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour21')" prop="hour_21">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_21"
|
|
:placeholder="t('hour21Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour22')" prop="hour_22">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_22"
|
|
:placeholder="t('hour22Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('hour23')" prop="hour_23">
|
|
<el-input
|
|
v-model="statHourTable.searchParam.hour_23"
|
|
:placeholder="t('hour23Placeholder')"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="loadStatHourList()">{{
|
|
t('search')
|
|
}}</el-button>
|
|
<el-button @click="resetForm(searchFormRef)">{{
|
|
t('reset')
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<div class="mt-[10px]">
|
|
<el-table
|
|
:data="statHourTable.data"
|
|
size="large"
|
|
v-loading="statHourTable.loading"
|
|
>
|
|
<template #empty>
|
|
<span>{{ !statHourTable.loading ? t('emptyData') : '' }}</span>
|
|
</template>
|
|
<el-table-column
|
|
prop="addon"
|
|
:label="t('addon')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="field"
|
|
:label="t('field')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="field_total"
|
|
:label="t('fieldTotal')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="year"
|
|
:label="t('year')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="month"
|
|
:label="t('month')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="day"
|
|
:label="t('day')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="start_time"
|
|
:label="t('startTime')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="last_time"
|
|
:label="t('lastTime')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_0"
|
|
:label="t('hour0')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_1"
|
|
:label="t('hour1')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_2"
|
|
:label="t('hour2')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_3"
|
|
:label="t('hour3')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_4"
|
|
:label="t('hour4')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_5"
|
|
:label="t('hour5')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_6"
|
|
:label="t('hour6')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_7"
|
|
:label="t('hour7')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_8"
|
|
:label="t('hour8')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_9"
|
|
:label="t('hour9')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_10"
|
|
:label="t('hour10')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_11"
|
|
:label="t('hour11')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_12"
|
|
:label="t('hour12')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_13"
|
|
:label="t('hour13')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_14"
|
|
:label="t('hour14')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_15"
|
|
:label="t('hour15')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_16"
|
|
:label="t('hour16')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_17"
|
|
:label="t('hour17')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_18"
|
|
:label="t('hour18')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_19"
|
|
:label="t('hour19')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_20"
|
|
:label="t('hour20')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_21"
|
|
:label="t('hour21')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_22"
|
|
:label="t('hour22')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="hour_23"
|
|
:label="t('hour23')"
|
|
min-width="120"
|
|
:show-overflow-tooltip="true"
|
|
/>
|
|
|
|
<el-table-column
|
|
:label="t('operation')"
|
|
fixed="right"
|
|
min-width="120"
|
|
>
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link @click="editEvent(row)">{{
|
|
t('edit')
|
|
}}</el-button>
|
|
<el-button type="primary" link @click="deleteEvent(row.id)">{{
|
|
t('delete')
|
|
}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="mt-[16px] flex justify-end">
|
|
<el-pagination
|
|
v-model:current-page="statHourTable.page"
|
|
v-model:page-size="statHourTable.limit"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="statHourTable.total"
|
|
@size-change="loadStatHourList()"
|
|
@current-change="loadStatHourList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<edit ref="editStatHourDialog" @complete="loadStatHourList" />
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, watch } from 'vue'
|
|
import { t } from '@/lang'
|
|
import { useDictionary } from '@/app/api/dict'
|
|
import { getStatHourList, deleteStatHour } from '@/app/api/stat_hour'
|
|
import { img } from '@/utils/common'
|
|
import { ElMessageBox, FormInstance } from 'element-plus'
|
|
import Edit from '@/app/views/stat_hour/components/stat-hour-edit.vue'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
const pageName = route.meta.title
|
|
|
|
let statHourTable = reactive({
|
|
page: 1,
|
|
limit: 10,
|
|
total: 0,
|
|
loading: true,
|
|
data: [],
|
|
searchParam: {
|
|
addon: '',
|
|
field: '',
|
|
field_total: '',
|
|
year: '',
|
|
month: '',
|
|
day: '',
|
|
start_time: '',
|
|
last_time: '',
|
|
hour_0: '',
|
|
hour_1: '',
|
|
hour_2: '',
|
|
hour_3: '',
|
|
hour_4: '',
|
|
hour_5: '',
|
|
hour_6: '',
|
|
hour_7: '',
|
|
hour_8: '',
|
|
hour_9: '',
|
|
hour_10: '',
|
|
hour_11: '',
|
|
hour_12: '',
|
|
hour_13: '',
|
|
hour_14: '',
|
|
hour_15: '',
|
|
hour_16: '',
|
|
hour_17: '',
|
|
hour_18: '',
|
|
hour_19: '',
|
|
hour_20: '',
|
|
hour_21: '',
|
|
hour_22: '',
|
|
hour_23: '',
|
|
},
|
|
})
|
|
|
|
const searchFormRef = ref<FormInstance>()
|
|
|
|
// 选中数据
|
|
const selectData = ref<any[]>([])
|
|
|
|
// 字典数据
|
|
|
|
/**
|
|
* 获取小时统计列表
|
|
*/
|
|
const loadStatHourList = (page: number = 1) => {
|
|
statHourTable.loading = true
|
|
statHourTable.page = page
|
|
|
|
getStatHourList({
|
|
page: statHourTable.page,
|
|
limit: statHourTable.limit,
|
|
...statHourTable.searchParam,
|
|
})
|
|
.then((res) => {
|
|
statHourTable.loading = false
|
|
statHourTable.data = res.data.data
|
|
statHourTable.total = res.data.total
|
|
})
|
|
.catch(() => {
|
|
statHourTable.loading = false
|
|
})
|
|
}
|
|
loadStatHourList()
|
|
|
|
const editStatHourDialog: Record<string, any> | null = ref(null)
|
|
|
|
/**
|
|
* 添加小时统计
|
|
*/
|
|
const addEvent = () => {
|
|
editStatHourDialog.value.setFormData()
|
|
editStatHourDialog.value.showDialog = true
|
|
}
|
|
|
|
/**
|
|
* 编辑小时统计
|
|
* @param data
|
|
*/
|
|
const editEvent = (data: any) => {
|
|
editStatHourDialog.value.setFormData(data)
|
|
editStatHourDialog.value.showDialog = true
|
|
}
|
|
|
|
/**
|
|
* 删除小时统计
|
|
*/
|
|
const deleteEvent = (id: number) => {
|
|
ElMessageBox.confirm(t('statHourDeleteTips'), t('warning'), {
|
|
confirmButtonText: t('confirm'),
|
|
cancelButtonText: t('cancel'),
|
|
type: 'warning',
|
|
}).then(() => {
|
|
deleteStatHour(id)
|
|
.then(() => {
|
|
loadStatHourList()
|
|
})
|
|
.catch(() => {})
|
|
})
|
|
}
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
loadStatHourList()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 多行超出隐藏 */
|
|
.multi-hidden {
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style>
|
|
|