|
|
@@ -6,57 +6,123 @@ |
|
|
|
<template> |
|
|
|
<div class="main-box"> |
|
|
|
<div class="table-box"> |
|
|
|
<ProTable ref="proTable" title="预警分析" :columns="columns" rowKey="id" :request-api="userManagePersonnelApi.page"> |
|
|
|
<ProTable ref="proTable" title="预警分析" :columns="columns" rowKey="id" :pagination="false" :request-api="abilityApi.warnGroup"> |
|
|
|
<!-- 表格 header 按钮 --> |
|
|
|
<template #tableHeader="scope"> |
|
|
|
<s-button :opt="FormOptEnums.EXPORT" plain @click="onView" :disabled="!scope.isSelected" /> |
|
|
|
<template #operation="scope"> |
|
|
|
<s-button icon="Download" link :opt="FormOptEnums.EXPORT" @click="exportFn(scope.row)" /> |
|
|
|
</template> |
|
|
|
</ProTable> |
|
|
|
</div> |
|
|
|
<el-dialog v-model="timeForm.visible" title="选择导出时间范围" :before-close="closeTime" width="600px"> |
|
|
|
<el-form :model="timeForm" :rules="timeRules" ref="timeFormRef" label-width="100px"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="21"> |
|
|
|
<el-form-item label="时间:" prop="dateArr"> |
|
|
|
<el-date-picker |
|
|
|
v-model="timeForm.dateArr" |
|
|
|
type="daterange" |
|
|
|
format="YYYY-MM-DD" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
range-separator="-" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="onTimeSubmit">提交</el-button> |
|
|
|
<el-button @click="closeTime">取消</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup lang="tsx" name="SysUserPersonnel"> |
|
|
|
import { userManagePersonnelApi} from "@/api"; |
|
|
|
import { abilityApi} from "@/api"; |
|
|
|
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; |
|
|
|
import { useRouter } from "vue-router"; |
|
|
|
const router = useRouter(); |
|
|
|
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) |
|
|
|
const proTable = ref<ProTableInstance>(); |
|
|
|
const timeForm:any= reactive({ |
|
|
|
dateArr:[], |
|
|
|
rowItem:{}, |
|
|
|
visible:false |
|
|
|
}); |
|
|
|
const timeFormRef = ref(); |
|
|
|
const timeRules = ref({ |
|
|
|
dateArr: [ |
|
|
|
{ required: true, message: "请选择导出时间范围", trigger: "change" } |
|
|
|
] |
|
|
|
}); |
|
|
|
/** 表单操作类型枚举 */ |
|
|
|
enum FormOptEnums { |
|
|
|
/** 导出 */ |
|
|
|
EXPORT = "导出", |
|
|
|
} |
|
|
|
// 表格配置项 |
|
|
|
const columns: ColumnProps[] = [ |
|
|
|
{ type: "selection", fixed: "left", width: 50 }, |
|
|
|
{ type: "index", label: "序号", width: 60, fixed: "left" }, |
|
|
|
const columns: ColumnProps[] = [{ type: "index", label: "序号", width: 60, fixed: "left" }, |
|
|
|
{ |
|
|
|
prop: "name", |
|
|
|
label: "姓名" |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "personId", |
|
|
|
label: "人员ID" |
|
|
|
prop: "cameraName", |
|
|
|
label: "摄像头", |
|
|
|
render: (scope: any) => { |
|
|
|
return scope.row.cameraName.join(", "); |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "phone", |
|
|
|
label: "手机号" |
|
|
|
prop: "name", |
|
|
|
label: "场景" |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "personSetName", |
|
|
|
label: "所属班级", |
|
|
|
prop: "state", |
|
|
|
label: "状态", |
|
|
|
render: (scope: any) => { |
|
|
|
return scope.row.state ? <el-tag type="success">启用</el-tag> : <el-tag type="danger">禁用</el-tag>; |
|
|
|
} |
|
|
|
}, |
|
|
|
{ prop: "operation", label: "操作", width: 250, fixed: "right" } |
|
|
|
]; |
|
|
|
|
|
|
|
const onView = (row: any) => { |
|
|
|
router.push( { |
|
|
|
path:'/violation/portrait/detail', |
|
|
|
query: { |
|
|
|
personId: row.personId |
|
|
|
/* 导出 */ |
|
|
|
const onTimeSubmit = ()=>{ |
|
|
|
timeFormRef.value.validate((valid: any) => { |
|
|
|
if (valid) { |
|
|
|
abilityApi.reportExport({ |
|
|
|
groupCode:timeForm.rowItem.code, |
|
|
|
startTime: timeForm.dateArr[0], |
|
|
|
endTime: timeForm.dateArr[1], |
|
|
|
}).then((res:any) => { |
|
|
|
console.log(res,"...."); |
|
|
|
const filename:any = ref() |
|
|
|
filename.value = window.decodeURI(res.headers["content-disposition"].split("=")[1]); |
|
|
|
let blobUrl = window.URL.createObjectURL(res); |
|
|
|
const a = document.createElement('a'); |
|
|
|
a.style.display = 'none'; |
|
|
|
a.setAttribute("target", "_blank"); |
|
|
|
a.download = filename.value |
|
|
|
a.href = blobUrl; |
|
|
|
a.click(); |
|
|
|
a.remove(); |
|
|
|
ElMessage({ |
|
|
|
message: res.msg, |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
closeTime(); |
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const closeTime = () =>{ |
|
|
|
timeForm.visible = false |
|
|
|
} |
|
|
|
const exportFn = (row: any) => { |
|
|
|
timeForm.rowItem = JSON.parse(JSON.stringify(row)); |
|
|
|
timeForm.visible = true |
|
|
|
}; |
|
|
|
|
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|