@@ -24,8 +24,12 @@ export namespace AttendancePassenger { | |||||
/** 客流查询表单 */ | /** 客流查询表单 */ | ||||
export interface PassengerInfo { | 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 { moduleRequest } from "@/api/request"; | ||||
import { ReqId, AttendancePassenger } from "@/api/interface"; | import { ReqId, AttendancePassenger } from "@/api/interface"; | ||||
const http = moduleRequest("/business/dfieldApi/"); | |||||
const http = moduleRequest("/business/passengerFlowApi/"); | |||||
/** | /** | ||||
* @Description: 单页管理 | * @Description: 单页管理 | ||||
@@ -24,19 +24,11 @@ const http = moduleRequest("/business/dfieldApi/"); | |||||
const attendancePassenger = { | const attendancePassenger = { | ||||
/** 查询列表 */ | /** 查询列表 */ | ||||
page(params: AttendancePassenger.PassengerInfo) { | 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) { | 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: "手机号" | label: "手机号" | ||||
}, | }, | ||||
{ | { | ||||
prop: "personSets", | |||||
prop: "personSetName", | |||||
label: "所属班级", | label: "所属班级", | ||||
render: scope => { | |||||
return scope.row.personSets.length > 0 ? scope.row.personSets[0].personSetName : '' | |||||
} | |||||
}, | }, | ||||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | { prop: "operation", label: "操作", width: 250, fixed: "right" } | ||||
]; | ]; | ||||
@@ -15,9 +15,10 @@ | |||||
</template> | </template> | ||||
<script setup lang="tsx" name="attendanceBehaviorTrace"> | <script setup lang="tsx" name="attendanceBehaviorTrace"> | ||||
import { AttendanceBehaviorTrace, attendanceBehaviorTrace } from "@/api"; | |||||
import { AttendanceBehaviorTrace } from "@/api"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
import { formatDate } from "@/utils"; | |||||
const visible = ref(false); //是否显示 | const visible = ref(false); //是否显示 | ||||
// 弹框参数 | // 弹框参数 | ||||
@@ -26,41 +27,30 @@ const propsInfo = reactive<FormProps.Base<AttendanceBehaviorTrace.behaviorTraceI | |||||
record: {}, //弹框数据 | record: {}, //弹框数据 | ||||
disabled: false | disabled: false | ||||
}); | }); | ||||
const tableData = ref([]); | |||||
/** | /** | ||||
* 打开弹框 | * 打开弹框 | ||||
* @param props 弹框参数 | * @param props 弹框参数 | ||||
*/ | */ | ||||
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { | function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { | ||||
Object.assign(propsInfo, props); //合并参数 | Object.assign(propsInfo, props); //合并参数 | ||||
let extJson = propsInfo.record.extJson | |||||
tableData.value = JSON.parse(extJson) | |||||
visible.value = true; //显示弹框 | 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 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | // 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | ||||
const proTable = ref<ProTableInstance>(); | const proTable = ref<ProTableInstance>(); | ||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps[] = [ | const columns: ColumnProps[] = [ | ||||
{ | { | ||||
prop: "time", | prop: "time", | ||||
label: "时间" | |||||
label: "时间", | |||||
render:(scope)=>{ | |||||
return formatDate(scope.row.time) | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
prop: "name", | |||||
prop: "nums", | |||||
label: "人数", | label: "人数", | ||||
}, | }, | ||||
]; | ]; | ||||
@@ -8,9 +8,9 @@ | |||||
<div> | <div> | ||||
<el-row :gutter="16"> | <el-row :gutter="16"> | ||||
<el-col :span="24"> | <el-col :span="24"> | ||||
<s-form-item label="查询时间段" prop="shijianduan"> | |||||
<s-form-item label="查询时间段" prop="timeSlot"> | |||||
<el-date-picker | <el-date-picker | ||||
v-model="formInfo.shijianduan" | |||||
v-model="formInfo.timeSlot" | |||||
type="datetimerange" | type="datetimerange" | ||||
range-separator="至" | range-separator="至" | ||||
start-placeholder="开始日期" | start-placeholder="开始日期" | ||||
@@ -22,17 +22,17 @@ | |||||
</el-row> | </el-row> | ||||
<el-row :gutter="16"> | <el-row :gutter="16"> | ||||
<el-col :span="24"> | <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> | </el-select> | ||||
</s-form-item> | </s-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row :gutter="16"> | <el-row :gutter="16"> | ||||
<el-col :span="24"> | <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> | </s-form-item> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -55,21 +55,21 @@ const formInfo = computed({ | |||||
}); | }); | ||||
console.log(props.modelValue); | console.log(props.modelValue); | ||||
// 分片类型 | // 分片类型 | ||||
const fenpianleixingOptions = ref([ | |||||
const splitOptions = ref([ | |||||
{ | { | ||||
label: "天", | label: "天", | ||||
value: "0" | |||||
value: false | |||||
}, | }, | ||||
{ | { | ||||
label: "小时", | 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) { | if (res.code == 200) { | ||||
shexiangtouOptions.value = res.data.list.map(e => { | |||||
cameraldsOptions.value = res.data.list.map(e => { | |||||
return { | return { | ||||
value: e.sensorId, | value: e.sensorId, | ||||
label: e.sensorName | 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(() => { | 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> | </script> | ||||
@@ -16,7 +16,7 @@ | |||||
label-suffix=" :" | label-suffix=" :" | ||||
> | > | ||||
<el-tabs v-model="activeName"> | <el-tabs v-model="activeName"> | ||||
<Basic v-model="propsInfo.record"></Basic> | |||||
<Basic ref="addFromRef" v-model="propsInfo.record"></Basic> | |||||
</el-tabs> | </el-tabs> | ||||
</el-form> | </el-form> | ||||
<template #footer> | <template #footer> | ||||
@@ -46,7 +46,7 @@ const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||||
// 表单验证规则 | // 表单验证规则 | ||||
const rules = reactive({ | const rules = reactive({ | ||||
shijianduan: [ | |||||
timeSlot: [ | |||||
required("请选择查询时间段"), | required("请选择查询时间段"), | ||||
{ | { | ||||
validator: (rule, value, callback) => { | validator: (rule, value, callback) => { | ||||
@@ -60,7 +60,7 @@ const rules = reactive({ | |||||
trigger: "change" | trigger: "change" | ||||
} | } | ||||
], | ], | ||||
shexiangtou: [required("请选择摄像头")] | |||||
cameraIds: [required("请选择摄像头")] | |||||
}); | }); | ||||
/** | /** | ||||
@@ -71,8 +71,8 @@ function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||||
Object.assign(propsInfo, props); //合并参数 | Object.assign(propsInfo, props); //合并参数 | ||||
if (props.opt == FormOptEnum.ADD) { | if (props.opt == FormOptEnum.ADD) { | ||||
//如果是新增,设置默认值 | //如果是新增,设置默认值 | ||||
propsInfo.record.shijianduan = []; | |||||
propsInfo.record.shexiangtou = []; | |||||
propsInfo.record.timeSlot = []; | |||||
propsInfo.record.cameraIds = []; | |||||
} | } | ||||
visible.value = true; //显示表单 | visible.value = true; //显示表单 | ||||
if (props.record.id) { | if (props.record.id) { | ||||
@@ -87,14 +87,24 @@ function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||||
const formRef = ref<FormInstance>(); | const formRef = ref<FormInstance>(); | ||||
/** 提交表单 */ | /** 提交表单 */ | ||||
async function handleSubmit() { | 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> | <template> | ||||
<div class="table-box"> | <div class="table-box"> | ||||
<ProTable ref="proTable" title="查询管理" :columns="columns" :data="data"> | |||||
<ProTable ref="proTable" title="查询管理" :columns="columns" :request-api="attendancePassenger.page"> | |||||
<!-- 表格 header 按钮 --> | <!-- 表格 header 按钮 --> | ||||
<template #tableHeader> | <template #tableHeader> | ||||
<s-button v-auth="attendancePassengerBtnCode.add" type="primary" suffix="查询" @click="onOpen(FormOptEnum.ADD)" /> | <s-button v-auth="attendancePassengerBtnCode.add" type="primary" suffix="查询" @click="onOpen(FormOptEnum.ADD)" /> | ||||
@@ -13,7 +13,14 @@ | |||||
<!-- 表格操作栏 --> | <!-- 表格操作栏 --> | ||||
<template #operation="scope"> | <template #operation="scope"> | ||||
<el-space> | <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> | </el-space> | ||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
@@ -29,52 +36,33 @@ import DetailTable from "./components/detailTable/index.vue"; | |||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | // 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | ||||
const proTable = ref<ProTableInstance>(); | 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>[] = [ | const columns: ColumnProps<any>[] = [ | ||||
{ | { | ||||
prop: "chaxunshijian", | |||||
prop: "queryTime", | |||||
label: "查询时间" | label: "查询时间" | ||||
}, | }, | ||||
{ | { | ||||
prop: "kaishishijian", | |||||
prop: "startTime", | |||||
label: "开始时间" | label: "开始时间" | ||||
}, | }, | ||||
{ | { | ||||
prop: "jieshushijian", | |||||
prop: "endTime", | |||||
label: "结束时间" | label: "结束时间" | ||||
}, | }, | ||||
{ | { | ||||
prop: "shexiangtou", | |||||
prop: "cameraNames", | |||||
label: "摄像头" | label: "摄像头" | ||||
}, | }, | ||||
{ | { | ||||
prop: "fenpianleiixng", | |||||
label: "分片类型" | |||||
prop: "split", | |||||
label: "分片类型", | |||||
render: scope => { | |||||
return scope.row.split ? "小时" : "天"; | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
prop: "tongjirenshu", | |||||
prop: "total", | |||||
label: "总人数" | label: "总人数" | ||||
}, | }, | ||||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | { prop: "operation", label: "操作", width: 250, fixed: "right" } | ||||
@@ -100,6 +88,10 @@ function onOpen(opt: FormOptEnum, record: {} | AttendancePassenger.PassengerInfo | |||||
const RefreshTable = () => { | const RefreshTable = () => { | ||||
proTable.value?.refresh(); | proTable.value?.refresh(); | ||||
}; | }; | ||||
const haseExtJson = row => { | |||||
let extJson = JSON.parse(row.extJson); | |||||
return extJson.length == 0; | |||||
}; | |||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.table-box { | .table-box { | ||||