<template>
|
<div class="demerit-record-table">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
|
<el-form-item label="区域" prop="belongUnit">
|
<el-select v-model="queryParams.deptId" @change="handleQuery" clearable placeholder="运维考核单位">
|
<el-option v-for="(item, index) in deptList" :key="index" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="搜索类型:">
|
<el-radio-group v-model="queryParams.searchType" size="small">
|
<el-radio label="day">按日</el-radio>
|
<el-radio label="month">按月</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="选择日期:" v-show="queryParams.searchType === 'day'">
|
<el-date-picker v-model="queryParams.dayDate" type="daterange" range-separator="至" start-placeholder="选择日期"
|
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small"></el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="选择月份:" v-show="queryParams.searchType === 'month'">
|
<el-date-picker v-model="queryParams.monthDate" type="monthrange" range-separator="至" start-placeholder="开始月份"
|
end-placeholder="结束月份" format="yyyy-MM" value-format="yyyy-MM" size="small"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="分建类型">
|
<el-select v-model="queryParams.constructionType" @change="handleQuery" clearable placeholder="分建类型">
|
<el-option v-for="(item, index) in constructionTypeList" :key="index" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
<el-button size="small" @click="updateData">更新</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"
|
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }">
|
<el-table-column prop="deptName" label="区域名" align="center" min-width="150"></el-table-column>
|
|
<el-table-column prop="constructionType" label="分建设类型" align="center" min-width="180">
|
<template slot-scope="scope">
|
{{ formatConstructionType(scope.row.constructionType) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="demerit" label="扣分" align="center" min-width="120">
|
<template slot-scope="scope">
|
{{ formatDemerit(scope.row.demerit) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="videoOnlineRate" label="在线率" align="center" min-width="200">
|
<template slot-scope="scope">
|
{{ formatDemeritRate(scope.row.videoOnlineRate) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="recordTime" label="日期" align="center" min-width="200">
|
<template slot-scope="scope">
|
<!-- recordTime格式为 "yyyy-MM-dd HH:mm:ss"，通过split截取日期部分 -->
|
{{ scope.row.recordTime ? scope.row.recordTime.split(' ')[0] : '-' }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="action" label="操作" align="=center">
|
<template slot-scope="scope">
|
<el-button type="primary" size="mini" @click="exportInfo(scope.row)">导出详情</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
@pagination="getPage" />
|
</div>
|
</template>
|
<script>
|
import {
|
getPage, exportInfo,executeDecemberStats
|
} from "@/api/platform/demeritRecord"
|
export default {
|
name: 'DemeritRecordTable',
|
data() {
|
return {
|
loading:false,
|
deptList: [
|
{ value: 201, label: '自流井区' }, // ZLJQ最后一个属性201，第一个属性"自流井区"
|
{ value: 202, label: '贡井区' }, // GJQ最后一个属性202，第一个属性"贡井区"
|
{ value: 102, label: '大安区' }, // DAQ最后一个属性102，第一个属性"大安区"
|
{ value: 211, label: '沿滩区' }, // YTQ最后一个属性211，第一个属性"沿滩区"
|
{ value: 203, label: '荣县' }, // RX最后一个属性203，第一个属性"荣县"
|
{ value: 101, label: '富顺县' }, // FSX最后一个属性101，第一个属性"富顺县"
|
{ value: 210, label: '高新区' } // GXQ最后一个属性210，第一个属性"高新区"
|
],
|
queryParams: {
|
searchType: 'day',
|
dayDate: null,
|
monthDate: null,
|
dayStart: null,
|
dayEnd: null,
|
monthStart: null,
|
monthEnd: null,
|
deptId: '',
|
constructionType: '',
|
pageNum: 1,
|
pageSize: 20
|
},
|
constructionTypeList: [
|
{ label: '一二期', value: 'PHASE_ONE_TWO' },
|
{ label: '三期', value: 'PHASE_THREE' },
|
{ label: '四区人脸', value: 'PHASE_FOURTH' },
|
{ label: '东部新城', value: 'EASTERN_NEW_CITY' },
|
{ label: '沿滩二期人脸', value: 'YAN_TAN_PHASE_TWO_FACE' },
|
{ label: '入川即检', value: 'CHECK_ENTER_SICHUAN' }
|
],
|
// 表格数据，实际项目中从接口获取
|
total: 0,
|
tableData: [
|
],
|
// 建设类型映射，用于将英文标识转换为中文显示
|
constructionTypeMap: {
|
'PHASE_ONE_TWO': '一二期',
|
'PHASE_THREE': '三期',
|
'PHASE_FOURTH': '四区人脸',
|
'EASTERN_NEW_CITY': '东部新城',
|
'YAN_TAN_PHASE_TWO_FACE': '沿滩二期人脸',
|
'CHECK_ENTER_SICHUAN': '入川即检',
|
}
|
};
|
},
|
mounted() {
|
// 关键修复：移除原生radio的aria-hidden属性
|
this.$nextTick(() => {
|
const radioInputs = document.querySelectorAll('.el-radio__original');
|
radioInputs.forEach(input => {
|
input.removeAttribute('aria-hidden'); // 让辅助技术能识别焦点
|
});
|
});
|
this.init();
|
|
},
|
methods: {
|
updateData(){
|
if (this.loading){
|
return
|
}
|
this.loading = true
|
executeDecemberStats().then(res =>{
|
if (res.code === 200){
|
this.$message("执行成功")
|
}
|
this.loading = false
|
})
|
},
|
exportInfo(row) {
|
console.log(row)
|
let name = row.deptName + '设备详情.xlsx'
|
this.download('demeritRecord/exportInfo',
|
{
|
id:row.id,
|
date:row.recordTime,
|
deptId:row.deptId,
|
type:row.constructionType
|
},
|
`${name}`)
|
},
|
init() {
|
// 初始化查询参数
|
this.getPage();
|
|
},
|
getPage() {
|
console.log(this.queryParams.dayDate)
|
this.queryParams.dayStart = null;
|
this.queryParams.dayEnd = null;
|
this.queryParams.monthStart = null;
|
this.queryParams.monthEnd = null;
|
let from = null;
|
if (this.queryParams.searchType === "day") {
|
this.queryParams.monthDate = null;
|
|
if (this.queryParams.dayDate && this.queryParams.dayDate.length === 2) {
|
this.queryParams.dayStart = this.queryParams.dayDate[0] +" 00:00:00";
|
this.queryParams.dayEnd = this.queryParams.dayDate[1]+" 23:59:59";
|
}
|
from = {
|
searchType: this.queryParams.searchType,
|
dayStart: this.queryParams.dayStart,
|
dayEnd: this.queryParams.dayEnd,
|
deptId: this.queryParams.deptId,
|
constructionType: this.queryParams.constructionType,
|
pageNum: this.queryParams.pageNum,
|
pageSize: this.queryParams.pageSize
|
}
|
} else {
|
this.queryParams.dayDate = null;
|
if (this.queryParams.monthDate && this.queryParams.monthDate.length === 2) {
|
const monthStart = this.queryParams.monthDate[0];
|
const monthEnd = this.queryParams.monthDate[1];
|
|
|
const [startYear, startMonth] = monthStart.split('-').map(Number);
|
// 月份补零，比如 2025-1 → 2025-01
|
const formattedStartMonth = String(startMonth).padStart(2, '0');
|
// 拼接成完整的日期时间格式，兼容Timestamp解析
|
this.queryParams.monthStart = `${startYear}-${formattedStartMonth}-01 00:00:00`;
|
|
|
// 修复2：标准化结束月份格式，添加时间戳并补零
|
|
const [year, month] = monthEnd.split('-').map(Number);
|
const lastDay = new Date(year, month, 0).getDate();
|
// 月份和日期都补零，比如 2025-11-3 → 2025-11-03
|
const formattedMonth = String(month).padStart(2, '0');
|
const formattedDay = String(lastDay).padStart(2, '0');
|
// 拼接成当月最后一天的23:59:59，确保覆盖整个月份
|
this.queryParams.monthEnd = `${year}-${formattedMonth}-${formattedDay} 23:59:59`;
|
|
from = {
|
searchType: this.queryParams.searchType,
|
monthStart: this.queryParams.monthStart,
|
monthEnd: this.queryParams.monthEnd,
|
deptId: this.queryParams.deptId,
|
constructionType: this.queryParams.constructionType,
|
pageNum: this.queryParams.pageNum,
|
pageSize: this.queryParams.pageSize
|
}
|
}
|
}
|
getPage(from).then(res => {
|
if (res.code === 200) {
|
this.tableData = res.data;
|
this.total = res.total
|
}
|
})
|
},
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getPage()
|
},
|
resetQuery() {
|
this.queryParams = {
|
searchType: 'day',
|
dayDate: null,
|
monthDate: null,
|
dayStart: null,
|
dayEnd: null,
|
monthStart: null,
|
monthEnd: null,
|
deptId: '',
|
constructionType: '',
|
pageNum: 1,
|
pageSize: 20
|
};
|
this.getPage()
|
},
|
// 格式化建设类型显示
|
formatConstructionType(type) {
|
return this.constructionTypeMap[type] || type;
|
},
|
// 格式化扣分显示，保留一位小数
|
formatDemerit(value) {
|
return value.toFixed(1);
|
},
|
formatDemeritRate(value) {
|
if (value !== null && value !== 0) {
|
return value.toFixed(1) + "%";
|
} else {
|
return "暂无"
|
}
|
|
}
|
}
|
};
|
</script>
|
<style>
|
.demerit-record-table {
|
padding: 20px;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
}
|
</style>
|
