@@ -24,8 +24,12 @@ export namespace AttendancePassenger { | |||
/** 客流查询表单 */ | |||
export interface PassengerInfo { | |||
fenpianleixing:String, | |||
shijianduan:any, | |||
shexiangtou:any, | |||
split:boolean, | |||
timeSlot:any, | |||
cameralds:any, | |||
cameraNames:any, | |||
startTime:string, | |||
endTime:string, | |||
queryTime:string | |||
} | |||
} |
@@ -14,7 +14,7 @@ | |||
*/ | |||
import { moduleRequest } from "@/api/request"; | |||
import { ReqId, AttendancePassenger } from "@/api/interface"; | |||
const http = moduleRequest("/business/dfieldApi/"); | |||
const http = moduleRequest("/business/passengerFlowApi/"); | |||
/** | |||
* @Description: 单页管理 | |||
@@ -24,19 +24,11 @@ const http = moduleRequest("/business/dfieldApi/"); | |||
const attendancePassenger = { | |||
/** 查询列表 */ | |||
page(params: AttendancePassenger.PassengerInfo) { | |||
return http.get("test", params); | |||
}, | |||
/** 删除 */ | |||
delete(params: ReqId) { | |||
return http.delete("test", params); | |||
return http.get("getPageList", params); | |||
}, | |||
/** 创建 */ | |||
add(params: AttendancePassenger.PassengerInfo) { | |||
return http.post("test", params); | |||
}, | |||
/** 详情 */ | |||
detail(params: ReqId) { | |||
return http.post("test", params); | |||
return http.post("add", params); | |||
}, | |||
}; | |||
@@ -79,11 +79,8 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
label: "手机号" | |||
}, | |||
{ | |||
prop: "personSets", | |||
prop: "personSetName", | |||
label: "所属班级", | |||
render: scope => { | |||
return scope.row.personSets.length > 0 ? scope.row.personSets[0].personSetName : '' | |||
} | |||
}, | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
@@ -15,9 +15,10 @@ | |||
</template> | |||
<script setup lang="tsx" name="attendanceBehaviorTrace"> | |||
import { AttendanceBehaviorTrace, attendanceBehaviorTrace } from "@/api"; | |||
import { AttendanceBehaviorTrace } from "@/api"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import { FormOptEnum } from "@/enums"; | |||
import { formatDate } from "@/utils"; | |||
const visible = ref(false); //是否显示 | |||
// 弹框参数 | |||
@@ -26,41 +27,30 @@ const propsInfo = reactive<FormProps.Base<AttendanceBehaviorTrace.behaviorTraceI | |||
record: {}, //弹框数据 | |||
disabled: false | |||
}); | |||
const tableData = ref([]); | |||
/** | |||
* 打开弹框 | |||
* @param props 弹框参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { | |||
Object.assign(propsInfo, props); //合并参数 | |||
let extJson = propsInfo.record.extJson | |||
tableData.value = JSON.parse(extJson) | |||
visible.value = true; //显示弹框 | |||
if (props.record.id) { | |||
//如果传了id,就去请求api获取record | |||
attendanceBehaviorTrace.detail({ id: props.record.id }).then(res => { | |||
propsInfo.record = res.data; | |||
}); | |||
} | |||
} | |||
const tableData = ref([ | |||
{ | |||
time:'2024-07-16 00:00:00', | |||
name:'60', | |||
}, | |||
{ | |||
time:'2024-07-17 00:00:00', | |||
name:'40', | |||
}, | |||
]); | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const proTable = ref<ProTableInstance>(); | |||
// 表格配置项 | |||
const columns: ColumnProps[] = [ | |||
{ | |||
prop: "time", | |||
label: "时间" | |||
label: "时间", | |||
render:(scope)=>{ | |||
return formatDate(scope.row.time) | |||
} | |||
}, | |||
{ | |||
prop: "name", | |||
prop: "nums", | |||
label: "人数", | |||
}, | |||
]; | |||
@@ -8,9 +8,9 @@ | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="24"> | |||
<s-form-item label="查询时间段" prop="shijianduan"> | |||
<s-form-item label="查询时间段" prop="timeSlot"> | |||
<el-date-picker | |||
v-model="formInfo.shijianduan" | |||
v-model="formInfo.timeSlot" | |||
type="datetimerange" | |||
range-separator="至" | |||
start-placeholder="开始日期" | |||
@@ -22,17 +22,17 @@ | |||
</el-row> | |||
<el-row :gutter="16"> | |||
<el-col :span="24"> | |||
<s-form-item label="摄像头" prop="shexiangtou"> | |||
<el-select v-model="formInfo.shexiangtou" multiple placeholder="摄像头"> | |||
<el-option v-for="item in shexiangtouOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> | |||
<s-form-item label="摄像头" prop="cameraIds"> | |||
<el-select v-model="formInfo.cameraIds" @change="cameraldsChange" filterable multiple placeholder="摄像头"> | |||
<el-option v-for="item in cameraldsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> | |||
</el-select> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="16"> | |||
<el-col :span="24"> | |||
<s-form-item label="分片类型(天/小时)" prop="fenpianleixing"> | |||
<s-radio-group v-model="formInfo.fenpianleixing" :options="fenpianleixingOptions" button /> | |||
<s-form-item label="分片类型(天/小时)" prop="split"> | |||
<s-radio-group v-model="formInfo.split" :options="splitOptions" button /> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
@@ -55,21 +55,21 @@ const formInfo = computed({ | |||
}); | |||
console.log(props.modelValue); | |||
// 分片类型 | |||
const fenpianleixingOptions = ref([ | |||
const splitOptions = ref([ | |||
{ | |||
label: "天", | |||
value: "0" | |||
value: false | |||
}, | |||
{ | |||
label: "小时", | |||
value: "1" | |||
value: true | |||
} | |||
]); | |||
// 摄像头 | |||
let shexiangtouOptions = ref([]); | |||
monitorLIVEApi.page({ pageSize: 100, pageNum: 1 }).then(res => { | |||
let cameraldsOptions = ref([]); | |||
monitorLIVEApi.list({ pageSize: 1000, pageNum: 1 }).then(res => { | |||
if (res.code == 200) { | |||
shexiangtouOptions.value = res.data.list.map(e => { | |||
cameraldsOptions.value = res.data.list.map(e => { | |||
return { | |||
value: e.sensorId, | |||
label: e.sensorName | |||
@@ -77,10 +77,17 @@ monitorLIVEApi.page({ pageSize: 100, pageNum: 1 }).then(res => { | |||
}); | |||
} | |||
}); | |||
const cameraldsChange = value => { | |||
let value_ = value.map(e => { | |||
let obj = cameraldsOptions.value.find(e1 => e1.value == e); | |||
return obj.label; | |||
}); | |||
formInfo.value.cameraNames = value_; | |||
}; | |||
onMounted(() => { | |||
// 初始化 | |||
formInfo.value.fenpianleixing = formInfo.value.fenpianleixing ? formInfo.value.fenpianleixing : fenpianleixingOptions.value[0].value; | |||
formInfo.value.split = formInfo.value.split ? formInfo.value.split : splitOptions.value[0].value; | |||
}); | |||
</script> | |||
@@ -16,7 +16,7 @@ | |||
label-suffix=" :" | |||
> | |||
<el-tabs v-model="activeName"> | |||
<Basic v-model="propsInfo.record"></Basic> | |||
<Basic ref="addFromRef" v-model="propsInfo.record"></Basic> | |||
</el-tabs> | |||
</el-form> | |||
<template #footer> | |||
@@ -46,7 +46,7 @@ const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
shijianduan: [ | |||
timeSlot: [ | |||
required("请选择查询时间段"), | |||
{ | |||
validator: (rule, value, callback) => { | |||
@@ -60,7 +60,7 @@ const rules = reactive({ | |||
trigger: "change" | |||
} | |||
], | |||
shexiangtou: [required("请选择摄像头")] | |||
cameraIds: [required("请选择摄像头")] | |||
}); | |||
/** | |||
@@ -71,8 +71,8 @@ function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||
Object.assign(propsInfo, props); //合并参数 | |||
if (props.opt == FormOptEnum.ADD) { | |||
//如果是新增,设置默认值 | |||
propsInfo.record.shijianduan = []; | |||
propsInfo.record.shexiangtou = []; | |||
propsInfo.record.timeSlot = []; | |||
propsInfo.record.cameraIds = []; | |||
} | |||
visible.value = true; //显示表单 | |||
if (props.record.id) { | |||
@@ -87,14 +87,24 @@ function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||
const formRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
await attendancePassenger | |||
.update(propsInfo.record) | |||
.then(() => { | |||
propsInfo.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
formRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
let record = { | |||
startTime: formatDate(propsInfo.record.timeSlot[0]), | |||
endTime: formatDate(propsInfo.record.timeSlot[1]), | |||
cameraIds: propsInfo.record.cameraIds, | |||
split: propsInfo.record.split, | |||
cameraNames: propsInfo.record.cameraNames | |||
}; | |||
await attendancePassenger | |||
.add(record) | |||
.then(() => { | |||
propsInfo.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
@@ -5,7 +5,7 @@ | |||
--> | |||
<template> | |||
<div class="table-box"> | |||
<ProTable ref="proTable" title="查询管理" :columns="columns" :data="data"> | |||
<ProTable ref="proTable" title="查询管理" :columns="columns" :request-api="attendancePassenger.page"> | |||
<!-- 表格 header 按钮 --> | |||
<template #tableHeader> | |||
<s-button v-auth="attendancePassengerBtnCode.add" type="primary" suffix="查询" @click="onOpen(FormOptEnum.ADD)" /> | |||
@@ -13,7 +13,14 @@ | |||
<!-- 表格操作栏 --> | |||
<template #operation="scope"> | |||
<el-space> | |||
<s-button link :opt="FormOptEnum.VIEW" prefix="分片" suffix="详情" @click="onOpen(FormOptEnum.VIEW, scope.row)" /> | |||
<s-button | |||
link | |||
:disabled="haseExtJson(scope.row)" | |||
:opt="FormOptEnum.VIEW" | |||
prefix="分片" | |||
suffix="详情" | |||
@click="onOpen(FormOptEnum.VIEW, scope.row)" | |||
/> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -29,52 +36,33 @@ import DetailTable from "./components/detailTable/index.vue"; | |||
import { FormOptEnum } from "@/enums"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const proTable = ref<ProTableInstance>(); | |||
const data = ref([ | |||
{ | |||
chaxunshijian: "2024-07-18 14:20:12", | |||
kaishishijian: "2024-07-16 18:20:12", | |||
jieshushijian: "2024-07-17 16:20:12", | |||
shexiangtou: "大厅(魔豆)", | |||
fenpianleiixng: "天", | |||
tongjirenshu: "100", | |||
fenpianshijian: "2024-07-17 16:20:12", | |||
fenpianshuliang: "100" | |||
}, | |||
{ | |||
chaxunshijian: "2024-06-19 14:20:12", | |||
kaishishijian: "2024-05-16 18:20:12", | |||
jieshushijian: "2024-05-17 16:20:12", | |||
shexiangtou: "教室(海康)", | |||
fenpianleiixng: "天", | |||
tongjirenshu: "66", | |||
fenpianshijian: "2024-07-17 16:20:12", | |||
fenpianshuliang: "60" | |||
} | |||
]); | |||
// 表格配置项 | |||
const columns: ColumnProps<any>[] = [ | |||
{ | |||
prop: "chaxunshijian", | |||
prop: "queryTime", | |||
label: "查询时间" | |||
}, | |||
{ | |||
prop: "kaishishijian", | |||
prop: "startTime", | |||
label: "开始时间" | |||
}, | |||
{ | |||
prop: "jieshushijian", | |||
prop: "endTime", | |||
label: "结束时间" | |||
}, | |||
{ | |||
prop: "shexiangtou", | |||
prop: "cameraNames", | |||
label: "摄像头" | |||
}, | |||
{ | |||
prop: "fenpianleiixng", | |||
label: "分片类型" | |||
prop: "split", | |||
label: "分片类型", | |||
render: scope => { | |||
return scope.row.split ? "小时" : "天"; | |||
} | |||
}, | |||
{ | |||
prop: "tongjirenshu", | |||
prop: "total", | |||
label: "总人数" | |||
}, | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
@@ -100,6 +88,10 @@ function onOpen(opt: FormOptEnum, record: {} | AttendancePassenger.PassengerInfo | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
}; | |||
const haseExtJson = row => { | |||
let extJson = JSON.parse(row.extJson); | |||
return extJson.length == 0; | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.table-box { | |||