<template>
|
<div class="Datalogging">
|
<div class="content">
|
<div class="checkbox" :style="{ width: roleINFO == 1 ? '20rem' : '15rem' }">
|
<div :class="['item', isactive == 1 ? 'isactive' : '']" @click="changeactive(1)">
|
检修记录
|
</div>
|
<div :class="['item', isactive == 2 ? 'isactive' : '']" @click="changeactive(2)">
|
授权记录
|
</div>
|
<div
|
v-if="roleINFO == 1"
|
:class="['item', isactive == 3 ? 'isactive' : '']"
|
@click="changeactive(3)"
|
>
|
登录记录
|
</div>
|
</div>
|
<div class="serch">
|
<div class="time_box">
|
<div class="time">{{ isactive == 1 ? '分配时间' : '操作时间' }}</div>
|
<el-date-picker
|
v-model="queryForm.selectTime"
|
prefix-icon="none"
|
clear-icon="none"
|
style="
|
font-size: 0.75rem !important;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0 0.25rem 0.25rem 0;
|
box-shadow: none;
|
width: 19rem;
|
height: 1.5rem;
|
border-left: 0;
|
"
|
format="YYYY-MM-DD HH:mm:ss"
|
type="datetimerange"
|
range-separator="~"
|
start-placeholder="起始日期"
|
end-placeholder="截止日期"
|
size="small"
|
/>
|
</div>
|
<div class="serch_box">
|
<div class="serchb">全局搜索</div>
|
<input
|
v-model="queryForm.selectInput"
|
placeholder="请输入关键词搜索"
|
style="border-left: 0.06rem solid #e2e2e2; font-size: 0.75rem"
|
/>
|
</div>
|
<el-button
|
@click="handleQuery"
|
type="primary"
|
size="small"
|
style="margin-left: 0.98rem; height: 1.5rem"
|
>查询</el-button
|
>
|
<el-button size="small" style="height: 1.5rem" @click="resetQuery">重置</el-button>
|
</div>
|
<div class="btns">
|
<!-- <div style="display: flex; align-items: center">
|
<el-button
|
size="small"
|
style="width: 5.5rem; height: 1.5rem; font-size: 0.88rem"
|
@click="printExcel"
|
>批量导出</el-button
|
>
|
</div> -->
|
</div>
|
<div style="margin-top: 1rem; height: 100%">
|
<!-- 检修设置记录 -->
|
<el-table
|
empty-text="暂无数据"
|
v-if="isactive == 1"
|
:data="tableData"
|
height="450"
|
style="width: 100%"
|
:header-cell-style="{
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: 'none'
|
}"
|
:row-style="{
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem'
|
}"
|
>
|
<!-- <el-table-column type="selection" align="center" />
|
<el-table-column prop="operatorName" label="姓名111" align="center" />
|
<el-table-column prop="teamName" label="班组" align="center" />
|
<el-table-column prop="headImageUrl" label="人脸" align="center">
|
<template #default="scope">
|
<el-image
|
style="width: 5rem; height: 5rem"
|
:src="'http://192.168.1.103:9090' + scope.row.headImageUrl"
|
show-progress
|
:initial-index="4"
|
fit="cover"
|
/>
|
</template> -->
|
<!-- 检修操作记录记录 -->
|
<!-- ：姓名，单位，班组，角色，上线检修道，上线时间，下线检修道，下线时间； -->
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="operatorName" label="姓名" align="center" />
|
<el-table-column prop="unit" label="单位" align="center" />
|
<el-table-column prop="teamName" label="班组" align="center" />
|
<el-table-column prop="roleName" label="角色" align="center" />
|
<el-table-column prop="" label="组员类型" align="center">
|
<template #default="scope">
|
<span v-if="scope.row.isLeader == 0">二级</span>
|
<span v-else-if="scope.row.isLeader == 1">一级</span>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column prop="headImageUrl" label="人脸" align="center">
|
<template #default="scope">
|
<el-image
|
style="width: 5rem; height: 5rem"
|
:src="'http://192.168.1.103:9093' + scope.row.headImageUrl"
|
show-progress
|
:initial-index="4"
|
fit="cover"
|
/>
|
</template>
|
</el-table-column> -->
|
<el-table-column
|
prop="maintenanceStatus"
|
label="检修状态"
|
align="center"
|
>
|
<template #default="scope">
|
<span v-if="scope.row.maintenanceStatus == 0"> 检修完成 </span>
|
<span v-else-if="scope.row.maintenanceStatus == 1"> 检修中 </span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="statusTime"
|
label="状态时间"
|
align="center"
|
>
|
<template #default="scope">
|
<span v-if="scope.row.maintenanceStatus == 1">
|
{{ formatTime(scope.row.distributionTime) }}
|
</span>
|
<span v-else-if="scope.row.maintenanceStatus == 0">
|
{{ formatTime(scope.row.endTime) }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="ipAddress"
|
label="设备IP"
|
align="center">
|
</el-table-column>
|
</el-table>
|
<!-- 检修操作记录记录 -->
|
|
<!-- 姓名 userName，单位 uerUnit，班组 userTeam，操作人 modifier，启用时间 enableTime，停用时间 disableTime-->
|
<!-- 授权记录 -->
|
<el-table
|
empty-text="暂无数据"
|
v-if="isactive == 2"
|
:data="tableData"
|
:height="isMin ? '950' : '450'"
|
style="width: 100%"
|
:header-cell-style="
|
isMin
|
? {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '2rem',
|
height: '3rem',
|
border: 'none',
|
}
|
: {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '1.25rem',
|
height: '3rem',
|
border: 'none',
|
}
|
"
|
:row-style="
|
isMin
|
? {
|
color: '#101010',
|
fontSize: '2rem',
|
height: '3rem',
|
}
|
: {
|
color: '#101010',
|
fontSize: '1.25rem',
|
height: '3rem',
|
}
|
"
|
@selection-change="DeleteAuth"
|
>
|
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="userName" label="姓名" align="center" />
|
<el-table-column prop="uerUnit" label="单位" align="center" />
|
<el-table-column prop="userTeam" label="班组" align="center" />
|
<el-table-column
|
prop="statusTime"
|
label="状态时间"
|
align="center"
|
>
|
<template #default="scope">
|
<span v-if="scope.row.disableTime && !scope.row.enableTime">
|
{{ formatTime(scope.row.disableTime) }} (启用)
|
</span>
|
<span v-else-if="!scope.row.disableTime && scope.row.enableTime">
|
{{ formatTime(scope.row.enableTime) }} (禁用)
|
</span>
|
<span v-else-if="scope.row.disableTime && scope.row.enableTime">
|
{{ formatTime(scope.row.disableTime) }} (启用) →
|
{{ formatTime(scope.row.enableTime) }} (禁用)
|
</span>
|
<span v-else>
|
-
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="modifier" label="操作人" align="center">
|
</el-table-column>
|
</el-table>
|
|
|
<!-- 登录记录 -->
|
<el-table
|
empty-text="暂无数据"
|
v-if="isactive == 3"
|
:data="tableData"
|
height="450"
|
style="width: 100%"
|
:header-cell-style="{
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: 'none'
|
}"
|
:row-style="{
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem'
|
}"
|
>
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="userTrueName" label="姓名" align="center" />
|
<!-- <el-table-column prop="opCenten" label="单位" align="center" />
|
<el-table-column prop="userteam" label="班组" align="center" /> -->
|
<el-table-column prop="userFaceImageName" label="人脸" align="center">
|
<template #default="scope">
|
<!-- :src="'http://192.168.1.103:9093' + scope.row.userFaceImageName" -->
|
<el-image
|
style="width: 5rem; height: 5rem"
|
:src="formatImageUrl(scope.row.userFaceImageName)"
|
show-progress
|
:initial-index="4"
|
fit="cover"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="loginTiem" label="登录时间" align="center" />
|
<!-- <el-table-column prop="outTiem" label="退出时间" align="center" />
|
<el-table-column label="操作内容" align="center" /> -->
|
</el-table>
|
</div>
|
<div
|
style="
|
display: flex;
|
justify-content: right;
|
align-self: flex-end;
|
margin-bottom: 1.19rem;
|
margin-right: 1.25rem;
|
"
|
>
|
<el-pagination
|
v-if="isactive == 1"
|
size="small"
|
background
|
layout="prev, pager, next"
|
:current-page="pageQuery.page"
|
:page-size="pageQuery.rows"
|
:total="pageTotal"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<el-pagination
|
v-if="isactive == 2"
|
size="small"
|
background
|
layout="prev, pager, next"
|
:current-page="pageQuery1.page"
|
:page-size="pageQuery1.rows"
|
:total="pageTotal1"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<el-pagination
|
v-if="isactive == 3"
|
size="small"
|
background
|
layout="prev, pager, next"
|
:current-page="pageQuery2.page"
|
:page-size="pageQuery2.rows"
|
:total="pageTotal2"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref, reactive, onMounted, toRef } from 'vue'
|
import { GetLogin, ExportApi, ExportApi2, ExportApi3 } from '@/api/newapi/Datalogging'
|
import { MaintenanceSettingRecord, MaintenanceOperationRecord,AuthGetPageData } from '@/api/newapi/MaintenanceTeam'
|
import { formatTime } from '@/utils/index'
|
const obj = {
|
selectTime: [], // 时间范围
|
selectType: '',
|
selectInput: ''
|
}
|
const queryForm = toRef({ ...obj })
|
|
const tableData = ref([])
|
const props = { multiple: true }
|
|
const isactive = ref(1)
|
const pageTotal = ref(0)
|
const pageTotal1 = ref(0)
|
const pageTotal2 = ref(0)
|
|
// 图片
|
// 图片基础配置
|
const IMAGE_BASE = 'http://192.168.1.103:9093'
|
// const IMAGE_FOLDER = 'Record'
|
|
// 格式化图片URL（核心修正逻辑）
|
const formatImageUrl = (filename) => {
|
if (!filename) return ''
|
|
// 移除可能存在的反斜杠和多余斜杠
|
const cleanFilename = filename
|
.replace(/\\/g, '/') // 反斜杠转正斜杠
|
.replace(/^\/+/, '') // 移除开头斜杠
|
.replace(/\/+/g, '/') // 合并连续斜杠
|
|
// 确保格式为 /Record/face_xxx.jpg
|
return `${IMAGE_BASE}/${cleanFilename}`
|
}
|
|
// 调试打印（示例）
|
const debugImageUrls = () => {
|
tableData.value.forEach(item => {
|
console.log('格式化后的URL:', formatImageUrl(item.userFaceImageName))
|
})
|
}
|
|
//图片
|
//分页请求参数
|
const pageQuery = ref({
|
page: 1, //当前页面
|
rows: 10, //每页显示条数
|
order: 'desc', //排序方式
|
sort: '', //排序字段
|
wheres: '' //条件查询
|
})
|
const pageQuery1 = ref({
|
page: 1, //当前页面
|
rows: 10, //每页显示条数
|
order: 'desc', //排序方式
|
sort: '', //排序字段
|
wheres: '' //条件查询
|
})
|
const pageQuery2 = ref({
|
page: 1, //当前页面
|
rows: 10, //每页显示条数
|
order: 'desc', //排序方式
|
sort: '', //排序字段
|
wheres: '' //条件查询
|
})
|
|
|
const userName = ref('')
|
userName.value = JSON.parse(localStorage.getItem('user')).userInfo.userName
|
|
//任务记录
|
const tasklogging = [
|
{
|
value: 'takeName',
|
label: '任务名称'
|
},
|
{
|
value: 'trainNum',
|
label: '车组'
|
},
|
{
|
value: 'coachNum',
|
label: '车厢号'
|
}
|
]
|
//作业单记录
|
const worklogging = [
|
{
|
value: 'takeName',
|
label: '任务名称'
|
},
|
{
|
value: 'jiShuYuan',
|
label: '技术员'
|
},
|
{
|
value: 'gongZhang',
|
label: '检修工长'
|
}
|
]
|
//登录记录
|
const loginlogging = [
|
{
|
value: 'userName',
|
label: '用户名'
|
},
|
{
|
value: 'trurName',
|
label: '真实姓名'
|
}
|
]
|
const selectoptions = ref([])
|
const account = localStorage.getItem('user')
|
? JSON.parse(localStorage.getItem('user')).userName
|
: '' //获取账号
|
|
selectoptions.value = tasklogging
|
const changeactive = (index) => {
|
queryForm.value = Object.assign({}, obj)
|
isactive.value = index
|
if (index == 1) {
|
selectoptions.value = tasklogging
|
initData()
|
} else if (index == 2) {
|
selectoptions.value = worklogging
|
WorkinitData()
|
} else {
|
selectoptions.value = loginlogging
|
LogininitData()
|
}
|
}
|
|
//分页页面大小改变
|
const handleSizeChange = (val) => {
|
if (isactive.value == 1) {
|
pageQuery.value.rows = val
|
initData()
|
} else if (isactive.value == 2) {
|
pageQuery1.value.rows = val
|
WorkinitData()
|
} else {
|
pageQuery2.value.rows = val
|
LogininitData()
|
}
|
}
|
|
//分页页面改变
|
const handleCurrentChange = (val) => {
|
if (isactive.value == 1) {
|
pageQuery.value.page = val
|
initData()
|
} else if (isactive.value == 2) {
|
pageQuery1.value.page = val
|
WorkinitData()
|
} else {
|
pageQuery2.value.page = val
|
LogininitData()
|
}
|
}
|
//检修设置记录
|
const initData = () => {
|
// 查询条件
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: 'taskstatus',
|
value: queryForm.value.value,
|
displayType: 'String'
|
},
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: 'like'
|
},
|
{ name: 'createTime', value: startTime, displayType: 'ThanOrEqual' },
|
{ name: 'createTime', value: endTime, displayType: 'LessOrEqual' }
|
]
|
MaintenanceSettingRecord({
|
pageIndex: pageQuery.value.page,
|
pageSize: pageQuery.value.rows,
|
searchKeyword: queryForm.value.selectInput,
|
startDate: queryForm.value.selectTime.length != 0 ? queryForm.value.selectTime[0] : '',
|
endDate: queryForm.value.selectTime.length != 0 ? queryForm.value.selectTime[1] : '',
|
// sortField: 'distributionTime',
|
// sortOrder: 'desc',
|
account: account
|
}).then((res) => {
|
tableData.value = res.data.items
|
pageTotal.value = res.data.totalCount
|
})
|
}
|
//检修操作记录
|
const WorkinitData = () => {
|
// 查询条件
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: 'String'
|
},
|
{ name: 'createTime', value: startTime, displayType: 'ThanOrEqual' },
|
{ name: 'createTime', value: endTime, displayType: 'LessOrEqual' },
|
]
|
//授权
|
AuthGetPageData({
|
...pageQuery.value,
|
filter,
|
}).then((res) => {
|
tableData.value = res.rows;
|
pageTotal1.value = res.total;
|
});
|
}
|
//登录记录
|
const LogininitData = () => {
|
// 查询条件
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: 'String'
|
},
|
{ name: 'createTime', value: startTime, displayType: 'ThanOrEqual' },
|
{ name: 'createTime', value: endTime, displayType: 'LessOrEqual' }
|
]
|
GetLogin({
|
pageIndex: pageQuery2.value.page,
|
pageSize: pageQuery2.value.rows,
|
searchKeyword: queryForm.value.selectInput,
|
startDate: queryForm.value.selectTime.length != 0 ? queryForm.value.selectTime[0] : '',
|
endDate: queryForm.value.selectTime.length != 0 ? queryForm.value.selectTime[1] : '',
|
sortField: 'loginTime',
|
sortOrder: 'desc'
|
}).then((res) => {
|
tableData.value = res.data.items
|
pageTotal2.value = res.data.totalCount
|
debugImageUrls();
|
})
|
}
|
|
//数据检索事件
|
const handleQuery = () => {
|
if (isactive.value == 1) {
|
pageQuery.value.page = 1
|
initData()
|
} else if (isactive.value == 2) {
|
pageQuery1.value.page = 1
|
WorkinitData()
|
} else {
|
pageQuery2.value.page = 1
|
LogininitData()
|
}
|
}
|
//重置方法
|
const resetQuery = () => {
|
queryForm.value = Object.assign({}, obj)
|
if (isactive.value == 1) {
|
pageQuery.value.page = 1
|
initData()
|
} else if (isactive.value == 2) {
|
pageQuery1.value.page = 1
|
WorkinitData()
|
} else {
|
pageQuery2.value.page = 1
|
LogininitData()
|
}
|
}
|
//打印方法
|
const printExcel = () => {
|
// 查询条件
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: 'String'
|
},
|
{
|
name: 'pustatus',
|
value: queryForm.value.selectName,
|
displayType: 'String'
|
},
|
{ name: 'createTime', value: startTime, displayType: 'ThanOrEqual' },
|
{ name: 'createTime', value: endTime, displayType: 'LessOrEqual' }
|
]
|
if (isactive.value == 1) {
|
ExportApi({
|
...pageQuery.value,
|
filter
|
})
|
}
|
if (isactive.value == 2) {
|
ExportApi2({
|
...pageQuery.value,
|
filter
|
})
|
}
|
if (isactive.value == 3) {
|
ExportApi3({
|
...pageQuery.value,
|
filter
|
})
|
}
|
}
|
const roleINFO = ref()
|
onMounted(() => {
|
initData()
|
roleINFO.value = JSON.parse(localStorage.getItem('user')).userInfo.roleId
|
})
|
</script>
|
|
|
<style lang="scss" scoped>
|
.Datalogging {
|
display: flex;
|
background-color: #fff;
|
|
.content {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.checkbox {
|
width: 16rem;
|
display: flex;
|
justify-content: space-between;
|
margin-top: 0.75rem;
|
margin-left: 1.31rem;
|
|
.item {
|
width: 7rem;
|
height: 1.4rem;
|
border-radius: 0.25rem;
|
background-color: rgba(190, 199, 209, 1);
|
color: rgba(255, 255, 255, 1);
|
font-size: 0.88rem;
|
text-align: center;
|
line-height: 1.4rem;
|
cursor: pointer;
|
}
|
|
.isactive {
|
background-color: rgba(16, 16, 16, 1);
|
color: rgba(255, 255, 255, 1);
|
}
|
}
|
|
.serch {
|
display: flex;
|
margin-top: 0.75rem;
|
align-items: center;
|
|
.time_box {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
margin-left: 0.98rem;
|
|
.time {
|
box-sizing: border-box;
|
width: 6.88rem;
|
height: 1.5rem;
|
text-align: center;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0.25rem 0 0 0.25rem;
|
font-size: 0.75rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.serch_box {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
margin-left: 0.98rem;
|
border-radius: 0.38rem;
|
|
.serchb {
|
box-sizing: border-box;
|
width: 6.88rem;
|
height: 1.5rem;
|
text-align: center;
|
font-size: 0.75rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
}
|
|
input {
|
box-sizing: border-box;
|
outline: none;
|
width: 19rem;
|
height: 1.5rem;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0 0.25rem 0.25rem 0;
|
padding-left: 0.3125rem;
|
font-size: 1rem;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 1.31rem;
|
margin-left: 1.13rem;
|
padding-right: 2rem;
|
box-sizing: border-box;
|
}
|
}
|
|
.my-header {
|
height: 3.84rem;
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
|
}
|
}
|
</style>
|
<style>
|
.confirmButtonClass {
|
margin-right: 10px;
|
}
|
|
.el-message-box .el-message-box__btns {
|
flex-direction: row-reverse !important;
|
justify-content: normal !important;
|
}
|
</style>
|
