ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
hongawen
2024-11-06 21:15:49 +08:00
parent 07ccde9f59
commit dc7e9d40e7
2 changed files with 319 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
frontend/src/components/TimeControl/index.vue
View File

@@ -8,10 +8,10 @@
> >
<!-- 采用 v-for 动态渲染 --> <!-- 采用 v-for 动态渲染 -->
<el-option <el-option
v-for="unit in timeUnits" v-for='unit in timeUnits'
:key="unit.value" :key='unit.value'
:label="unit.label" :label='unit.label'
:value="unit.value" :value='unit.value'
></el-option> ></el-option>
</el-select> </el-select>
@@ -22,8 +22,8 @@
v-model='startDate' v-model='startDate'
type='date' type='date'
placeholder='起始时间' placeholder='起始时间'
@change="emitDateChange" @change='emitDateChange'
:disabled-date="disableStartDate" :disabled-date='disableStartDate'
:readonly="timeUnit != '自定义'" :readonly="timeUnit != '自定义'"
></el-date-picker> ></el-date-picker>
<el-text>~</el-text> <el-text>~</el-text>
@@ -32,8 +32,8 @@
v-model='endDate' v-model='endDate'
type='date' type='date'
placeholder='结束时间' placeholder='结束时间'
@change="emitDateChange" @change='emitDateChange'
:disabled-date="disableEndDate" :disabled-date='disableEndDate'
:readonly="timeUnit !== '自定义'" :readonly="timeUnit !== '自定义'"
></el-date-picker> ></el-date-picker>
</div> </div>
@@ -43,12 +43,12 @@
class='triangle-button' class='triangle-button'
type='primary' type='primary'
@click='prevPeriod' @click='prevPeriod'
@change="emitDateChange" @change='emitDateChange'
> >
<div class='left_triangle'></div> <div class='left_triangle'></div>
</el-button> </el-button>
<el-button class='triangle-button' type='primary' @click='goToCurrent' > <el-button class='triangle-button' type='primary' @click='goToCurrent'>
当前 当前
</el-button> </el-button>
<el-button <el-button
style='width: 10px;' style='width: 10px;'
@@ -64,187 +64,194 @@
</template> </template>
<script setup lang='ts'>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
<script setup lang="ts"> // 定义时间单位的类型
import { ref ,onMounted, defineProps, defineEmits } from 'vue';
// 定义时间单位的类型
interface TimeUnit { interface TimeUnit {
label: string; label: string;
value: string; value: string;
} }
// 定义组件的props，包含包括和排除的时间单位 // 定义组件的props，包含包括和排除的时间单位
const props = defineProps({ const props = defineProps({
include: { include: {
type: Array as () => string[], type: Array as () => string[],
default: () => ['日', '周', '月', '季度', '年', '自定义'], default: () => ['日', '周', '月', '季度', '年', '自定义'],
}, },
exclude: { exclude: {
type: Array as () => string[], type: Array as () => string[],
default: () => [], default: () => [],
}, },
default: { default: {
type: String, type: String,
default: '日', default: '日',
}, },
}); })
// 定义事件 // 定义事件
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update-dates', startDate: Date, endDate: Date): void; (e: 'update-dates', startDate: Date, endDate: Date): void;
}>(); }>()
const timeUnit = ref<string>(props.default); // 默认选择 const timeUnit = ref<string>(props.default) // 默认选择
const startDate = ref<Date>(new Date()); // 起始日期 const startDate = ref<Date>(new Date()) // 起始日期
const endDate = ref<Date>(new Date()); // 结束日期 const endDate = ref<Date>(new Date()) // 结束日期
const isNextDisabled = ref<boolean>(false); // 控制下一周期按钮的禁用状态 const isNextDisabled = ref<boolean>(false) // 控制下一周期按钮的禁用状态
const today = ref<Date>(new Date()); // 当前日期 const today = ref<Date>(new Date()) // 当前日期
// 过滤出可用的时间单位 // 过滤出可用的时间单位
const timeUnits = ref<TimeUnit[]>( const timeUnits = ref<TimeUnit[]>(
props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({ props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
label: unit, label: unit,
value: unit, value: unit,
})) })),
); )
// 发出日期变化事件 // 发出日期变化事件
const emitDateChange = () => { const emitDateChange = () => {
emit('update-dates', startDate.value, endDate.value); emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
//console.log('emitDateChange', startDate.value, endDate.value); //console.log('emitDateChange', startDate.value, endDate.value);
}; }
// 在组件挂载时更新日期范围 // 在组件挂载时更新日期范围
onMounted(() => { onMounted(() => {
updateDateRange(); updateDateRange()
}); })
const handleChange = (unit: string)=> { const handleChange = (unit: string) => {
// 根据选择的时间单位处理日期变化 // 根据选择的时间单位处理日期变化
if (unit !== '自定义') { if (unit !== '自定义') {
updateDateRange() updateDateRange()
} else { } else {
// 自定义选项逻辑 // 自定义选项逻辑
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1)) startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
endDate.value = new Date() endDate.value = new Date()
} }
timeUnit.value = unit; timeUnit.value = unit
emitDateChange(); // 变化时也发出更新事件 emitDateChange() // 变化时也发出更新事件
updateNextButtonStatus() updateNextButtonStatus()
} }
const updateDateRange = () => { const updateDateRange = () => {
// 根据选择的时间单位计算起始和结束日期
if (timeUnit.value === '日') {
startDate.value = today.value
endDate.value = today.value
} else if (timeUnit.value === '周') {
startDate.value = getStartOfWeek(today.value)
endDate.value = getEndOfWeek(today.value)
} else if (timeUnit.value === '月') {
startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
} else if (timeUnit.value === '季度') {
const quarter = Math.floor(today.value.getMonth() / 3)
startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1)
endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0)
} else if (timeUnit.value === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1)
endDate.value = new Date(today.value.getFullYear(), 11, 31)
}
updateNextButtonStatus()
}
const getStartOfWeek =(date:Date)=> {
const startOfWeek = new Date(date)
const day = startOfWeek.getDay()
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
startOfWeek.setDate(startOfWeek.getDate() + diff)
return startOfWeek
}
const getEndOfWeek =(date:Date) =>{
const endOfWeek = new Date(date)
const day = endOfWeek.getDay()
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
endOfWeek.setDate(endOfWeek.getDate() + diff)
return endOfWeek
}
const prevPeriod =()=> {
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
if (timeUnit.value === '日') { // 根据选择的时间单位计算起始和结束日期
prevStartDate.setDate(prevStartDate.getDate() - 1) if (timeUnit.value === '日') {
prevEndDate.setDate(prevEndDate.getDate() - 1) startDate.value = today.value
} else if (timeUnit.value === '周') { endDate.value = today.value
prevStartDate.setDate(prevStartDate.getDate() - 7) } else if (timeUnit.value === '周') {
prevEndDate.setDate(prevEndDate.getDate() - 7) startDate.value = getStartOfWeek(today.value)
} else if (timeUnit.value === '月') { endDate.value = getEndOfWeek(today.value)
prevStartDate.setMonth(prevStartDate.getMonth() - 1) } else if (timeUnit.value === '月') {
prevEndDate.setMonth(prevEndDate.getMonth() - 1) startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
} else if (timeUnit.value === '季度') { endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
prevStartDate.setMonth(prevStartDate.getMonth() - 3) } else if (timeUnit.value === '季度') {
prevEndDate.setMonth(prevEndDate.getMonth() - 3) const quarter = Math.floor(today.value.getMonth() / 3)
} else if (timeUnit.value === '年') { startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1)
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1) endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1) } else if (timeUnit.value === '年') {
} startDate.value = new Date(today.value.getFullYear(), 0, 1)
endDate.value = new Date(today.value.getFullYear(), 11, 31)
}
updateNextButtonStatus()
}
const getStartOfWeek = (date: Date) => {
const startOfWeek = new Date(date)
const day = startOfWeek.getDay()
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
startOfWeek.setDate(startOfWeek.getDate() + diff)
return startOfWeek
}
const getEndOfWeek = (date: Date) => {
const endOfWeek = new Date(date)
const day = endOfWeek.getDay()
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
endOfWeek.setDate(endOfWeek.getDate() + diff)
return endOfWeek
}
const prevPeriod = () => {
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
startDate.value = prevStartDate if (timeUnit.value === '日') {
endDate.value = prevEndDate prevStartDate.setDate(prevStartDate.getDate() - 1)
updateNextButtonStatus() prevEndDate.setDate(prevEndDate.getDate() - 1)
} } else if (timeUnit.value === '周') {
const goToCurrent =()=> { prevStartDate.setDate(prevStartDate.getDate() - 7)
if (timeUnit.value !== '自定义') { prevEndDate.setDate(prevEndDate.getDate() - 7)
updateDateRange() // 更新为当前选择时间单位的时间范围 } else if (timeUnit.value === '月') {
} prevStartDate.setMonth(prevStartDate.getMonth() - 1)
} prevEndDate.setMonth(prevEndDate.getMonth() - 1)
const nextPeriod = ()=> { } else if (timeUnit.value === '季度') {
const nextStartDate = new Date(startDate.value) prevStartDate.setMonth(prevStartDate.getMonth() - 3)
const nextEndDate = new Date(endDate.value) prevEndDate.setMonth(prevEndDate.getMonth() - 3)
} else if (timeUnit.value === '年') {
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
}
if (timeUnit.value === '日') { startDate.value = prevStartDate
nextStartDate.setDate(nextStartDate.getDate() + 1) endDate.value = prevEndDate
nextEndDate.setDate(nextEndDate.getDate() + 1) updateNextButtonStatus()
} else if (timeUnit.value === '周') { }
nextStartDate.setDate(nextStartDate.getDate() + 7) const goToCurrent = () => {
nextEndDate.setDate(nextEndDate.getDate() + 7) if (timeUnit.value !== '自定义') {
} else if (timeUnit.value === '月') { updateDateRange() // 更新为当前选择时间单位的时间范围
nextStartDate.setMonth(nextStartDate.getMonth() + 1) }
nextEndDate.setMonth(nextEndDate.getMonth() + 1) }
} else if (timeUnit.value === '季度') { const nextPeriod = () => {
nextStartDate.setMonth(nextStartDate.getMonth() + 3) const nextStartDate = new Date(startDate.value)
nextEndDate.setMonth(nextStartDate.getMonth() + 3) const nextEndDate = new Date(endDate.value)
} else if (timeUnit.value === '年') {
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
}
startDate.value = nextStartDate if (timeUnit.value === '日') {
endDate.value = nextEndDate nextStartDate.setDate(nextStartDate.getDate() + 1)
updateNextButtonStatus() nextEndDate.setDate(nextEndDate.getDate() + 1)
} } else if (timeUnit.value === '周') {
const updateNextButtonStatus =()=> { nextStartDate.setDate(nextStartDate.getDate() + 7)
// 更新下一个按钮的禁用状态 nextEndDate.setDate(nextEndDate.getDate() + 7)
const maxDate = new Date() // 假设最新日期为今天 } else if (timeUnit.value === '月') {
// 将 maxDate 设置为当天的开始时间 nextStartDate.setMonth(nextStartDate.getMonth() + 1)
maxDate.setHours(0, 0, 0, 0); nextEndDate.setMonth(nextEndDate.getMonth() + 1)
// 将 endDate 设置为当天的开始时间并进行比较 } else if (timeUnit.value === '季度') {
const endDateAdjusted = new Date(endDate.value); nextStartDate.setMonth(nextStartDate.getMonth() + 3)
endDateAdjusted.setHours(0, 0, 0, 0); nextEndDate.setMonth(nextStartDate.getMonth() + 3)
// 仅比较日期部分 } else if (timeUnit.value === '年') {
isNextDisabled.value = endDateAdjusted >= maxDate; nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
emitDateChange(); // 变化时也发出更新事件 nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
} }
// 限制开始日期不能选择超过当前日期 startDate.value = nextStartDate
const disableStartDate = (date:Date)=> { endDate.value = nextEndDate
return date > today.value; updateNextButtonStatus()
} }
// 限制结束日期不能超过当前日期且必须大于开始日期 const updateNextButtonStatus = () => {
const disableEndDate = (date:Date)=> { // 更新下一个按钮的禁用状态
if (timeUnit.value !== '自定义') return false; // 如果不是自定义时间单位，则不限制 const maxDate = new Date() // 假设最新日期为今天
const start = new Date(startDate.value); // 将 maxDate 设置为当天的开始时间
return date > today.value || (start && date <= start); maxDate.setHours(0, 0, 0, 0)
} // 将 endDate 设置为当天的开始时间并进行比较
const endDateAdjusted = new Date(endDate.value)
endDateAdjusted.setHours(0, 0, 0, 0)
// 仅比较日期部分
isNextDisabled.value = endDateAdjusted >= maxDate
emitDateChange() // 变化时也发出更新事件
}
// 限制开始日期不能选择超过当前日期
const disableStartDate = (date: Date) => {
return date > today.value
}
// 限制结束日期不能超过当前日期且必须大于开始日期
const disableEndDate = (date: Date) => {
if (timeUnit.value !== '自定义') return false // 如果不是自定义时间单位，则不限制
const start = new Date(startDate.value)
return date > today.value || (start && date <= start)
}
// 格式化日期yyyy-mm-dd
function formatDate(date:Date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
</script> </script>

263
frontend/src/views/machine/device/index.vue
View File

@@ -1,144 +1,149 @@
<template> <template>
<div class='table-box' ref='popupBaseView'> <div class='table-box' ref='popupBaseView'>
<ProTable <ProTable
ref='proTable' ref='proTable'
:columns='columns' :columns='columns'
:init-param="initParam" :request-api='getTableList'
:request-api='getPqDevList' >
> <!-- :requestApi="getRoleList" -->
<!-- :requestApi="getRoleList" --> <!-- 表格 header 按钮 -->
<!-- 表格 header 按钮 --> <template #tableHeader='scope'>
<template #tableHeader='scope'> <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button> <el-button type='primary' :icon='Download' plain @click='downloadFile()'>批量导出</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile()'>批量导出</el-button> <el-button type='primary' :icon='Upload' plain @click='importFile()'>批量导入</el-button>
<el-button type='primary' :icon='Upload' plain @click='importFile()'>批量导入</el-button> <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected' @click='batchDelete(scope.selectedListIds)'> @click='batchDelete(scope.selectedListIds)'>
批量删除 批量删除
</el-button> </el-button>
</template> </template>
<!-- 表格操作 --> <!-- 表格操作 -->
<template #operation='scope'> <template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button> <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button> <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
</template> </template>
</ProTable>
</div>
<DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
</template>
<script setup lang='tsx' name='useRole'>
import TimeControl from '@/components/TimeControl/index.vue'
import { type Device } from '@/api/device/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import deviceDataList from '@/api/device/deviceData'
import { useDictStore } from '@/stores/modules/dict'
import {getPqDevList,deletePqDev,exportPqDev,importPqDev} from '@/api/device/device.ts'
import { reactive, ref } from 'vue'
const dictStore = useDictStore()
// ProTable 实例
const proTable = ref<ProTableInstance>()
const devicePopup = ref()
// 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
const excludedUnits = ['季度','年']; // 要排除的单位
const defaultUnits = '日'; // 默认的单位
// 表格配置项 </ProTable>
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([ </div>
{ type: 'selection', fixed: 'left', width: 70 }, <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup' />
{ type: 'index', fixed: 'left', width: 70, label: '序号' }, </template>
{
prop: 'name', <script setup lang='tsx' name='useRole'>
label: '名称', import TimeControl from '@/components/TimeControl/index.vue'
search: { el: 'input' }, import { type Device } from '@/api/device/interface'
minWidth: 200, import { useHandleData } from '@/hooks/useHandleData'
}, import { useDownload } from '@/hooks/useDownload'
{ import { useAuthButtons } from '@/hooks/useAuthButtons'
prop: 'devType', import ProTable from '@/components/ProTable/index.vue'
label: '类型', import ImportExcel from '@/components/ImportExcel/index.vue'
enum: dictStore.getDictData('High_Cate'), import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
search: { el: 'select', props: { filterable: true } }, import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
fieldNames: { label: 'name', value: 'code' }, import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
minWidth: 200, import deviceDataList from '@/api/device/deviceData'
}, import { useDictStore } from '@/stores/modules/dict'
{ import { getPqDevList, deletePqDev, exportPqDev, importPqDev } from '@/api/device/device.ts'
prop: 'devChns', import { reactive, ref } from 'vue'
label: '设备通道数',
minWidth: 110, const dictStore = useDictStore()
}, // ProTable 实例
{ const proTable = ref<ProTableInstance>()
prop: 'devVolt', const devicePopup = ref()
label: '额定电压（V）', // 定义包含和排除的单位
minWidth: 130,
}, const getTableList = (params: any) => {
{ let newParams = JSON.parse(JSON.stringify(params))
prop: 'devCurr', newParams.createTimeEnd = endDate.value
label: '额定电流（A）', newParams.createTimeStart = startDate.value
minWidth: 130, return getPqDevList(newParams)
}, }
{
prop: 'manufacturer', // 表格配置项
label: '制作厂商', const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
minWidth: 200, { type: 'selection', fixed: 'left', width: 70 },
}, { type: 'index', fixed: 'left', width: 70, label: '序号' },
{ {
prop: 'createDate', prop: 'name',
label: '生产日期', label: '名称',
minWidth: 200, search: { el: 'input' },
search: { minWidth: 200,
},
{
prop: 'devType',
label: '类型',
enum: dictStore.getDictData('High_Cate'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'name', value: 'code' },
minWidth: 200,
},
{
prop: 'devChns',
label: '设备通道数',
minWidth: 110,
},
{
prop: 'devVolt',
label: '额定电压（V）',
minWidth: 130,
},
{
prop: 'devCurr',
label: '额定电流（A）',
minWidth: 130,
},
{
prop: 'manufacturer',
label: '制作厂商',
minWidth: 200,
},
{
prop: 'createDate',
label: '生产日期',
minWidth: 200,
search: {
span: 2, span: 2,
render: () => { render: () => {
return ( return (
<div class='flx-flex-start'> <div class='flx-flex-start'>
<TimeControl <TimeControl
include={includedUnits} include={['日', '周', '月', '自定义']}
exclude={excludedUnits} default={'月'}
default={defaultUnits} onUpdate-dates={handleDateChange}
onUpdate-dates={handleDateChange} />
/> </div>
</div>
) )
}, },
}, },
}, },
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 }, { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
]) ])
// 处理日期变化的回调函数
// 处理日期变化的回调函数 const startDate = ref('')
const handleDateChange = (startDate: Date, endDate: Date) => { const endDate = ref('')
console.log('Start Date:', startDate) const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
console.log('End Date:', endDate) startDate.value = startDateTemp
// 这里可以添加更多的逻辑处理 endDate.value = endDateTemp
console.log(startDateTemp)
console.log(endDateTemp)
} }
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => { const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
devicePopup.value?.open(titleType, row) devicePopup.value?.open(titleType, row)
} }
// 批量删除字典类型 // 批量删除字典类型
const batchDelete = async (id: string[]) => { const batchDelete = async (id: string[]) => {
await useHandleData(deletePqDev, id, '删除所选设备') await useHandleData(deletePqDev, id, '删除所选设备')
proTable.value?.clearSelection() proTable.value?.clearSelection()
proTable.value?.getTableList() proTable.value?.getTableList()
} }
// 删除字典类型 // 删除字典类型
const handleDelete = async (params: Device.ResPqDev) => { const handleDelete = async (params: Device.ResPqDev) => {
await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`) await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`)
proTable.value?.getTableList() proTable.value?.getTableList()
} }
</script> </script>