Browse Source
- 新增 DeviceManager 类,实现设备相关数据查询方法 - 添加 QueryExecutorReq、QueryInvLedgerReq、QueryInvLpnReq、QueryLocationReq 等请求模型类 - 实现 locations 和 vehicles 页面的查询功能,包括表单输入和表格展示 - 优化页面样式,添加查询按钮和数据加载状态显示master
2 changed files with 276 additions and 14 deletions
@ -1,12 +1,144 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { onMounted, reactive } from "vue"; |
||||
|
import { ElButton } from "element-plus"; |
||||
|
import { Search } from "@element-plus/icons-vue"; |
||||
|
import DataForm from "@/components/data-form/DataForm.vue"; |
||||
|
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
||||
|
import { AgGridVue } from "ag-grid-vue3"; |
||||
|
import { type GridOptions } from "ag-grid-enterprise"; |
||||
|
import type { GridApi, GridReadyEvent } from "ag-grid-community"; |
||||
|
import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale"; |
||||
|
import { Request } from "@ease-forge/shared"; |
||||
|
import lodash from "lodash"; |
||||
|
|
||||
|
// 定义 Props 类型 |
||||
|
interface ComponentProps { |
||||
|
} |
||||
|
|
||||
|
// 读取组件 props 属性 |
||||
|
const props = withDefaults(defineProps<ComponentProps>(), {}); |
||||
|
|
||||
|
// 定义 State 类型 |
||||
|
interface ComponentState { |
||||
|
loading: boolean; |
||||
|
queryData: any; |
||||
|
grid1Data: Array<any>; |
||||
|
} |
||||
|
|
||||
|
// state 属性 |
||||
|
const state = reactive<ComponentState>({ |
||||
|
loading: false, |
||||
|
queryData: {}, |
||||
|
grid1Data: [], |
||||
|
}); |
||||
|
|
||||
|
// 定义 Data 类型 |
||||
|
interface ComponentData { |
||||
|
formFields?: Array<FormField>; |
||||
|
gridSetting: Partial<GridOptions>; |
||||
|
api?: GridApi; |
||||
|
} |
||||
|
|
||||
|
// 内部数据 |
||||
|
const data: ComponentData = { |
||||
|
formFields: [ |
||||
|
{ |
||||
|
dataPath: 'locCode', label: '货位编码', input: 'Input', |
||||
|
inputProps: { |
||||
|
placeholder: '货位编码', |
||||
|
clearable: true, |
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
gridSetting: { |
||||
|
localeText: localeTextCn, |
||||
|
// suppressNoRowsOverlay: true, |
||||
|
// suppressLoadingOverlay: true, |
||||
|
// 选择行配置 |
||||
|
rowSelection: "single", |
||||
|
columnDefs: [ |
||||
|
{ headerName: "环境ID", field: "envId" }, |
||||
|
{ headerName: "货位编码", field: "locCode" }, |
||||
|
{ headerName: "位置类型", field: "locType" }, |
||||
|
{ headerName: "路径点编码", field: "wayPoint" }, |
||||
|
{ headerName: "货位相对于路径方向", field: "locDirection" }, |
||||
|
{ headerName: "楼层数据", field: "catalogCode" }, |
||||
|
{ headerName: "位置编码", field: "rack" }, |
||||
|
{ headerName: "货架列", field: "bay" }, |
||||
|
{ headerName: "货架层", field: "level" }, |
||||
|
{ headerName: "货架格", field: "cell" }, |
||||
|
{ |
||||
|
headerName: "是否锁定", field: "isLock", |
||||
|
valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是", |
||||
|
}, |
||||
|
{ |
||||
|
headerName: "是否冻结", field: "isFrozen", |
||||
|
valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是", |
||||
|
}, |
||||
|
{ headerName: "创建时间", field: "createAt" }, |
||||
|
{ headerName: "创建人", field: "createBy" }, |
||||
|
{ headerName: "更新时间", field: "updateAt" }, |
||||
|
{ headerName: "更新人", field: "updateBy" }, |
||||
|
], |
||||
|
onGridReady(event: GridReadyEvent) { |
||||
|
data.api = event.api; |
||||
|
// data.api.setServerSideDatasource({ getRows: serverSideDatasource }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
onMounted(reload); |
||||
|
|
||||
|
function reload() { |
||||
|
state.loading = true; |
||||
|
Request.request.get<Array<any>>( |
||||
|
"/api/workbench/DeviceManager@queryLocation", |
||||
|
{ |
||||
|
params: { |
||||
|
...state.queryData, |
||||
|
}, |
||||
|
}, |
||||
|
).then(data => { |
||||
|
state.grid1Data = data; |
||||
|
}).finally(() => state.loading = false); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div class="modeling-simulation"> |
<div class="dashboard flex-column-container"> |
||||
locations |
<div class="tools flex-item-fixed"> |
||||
</div> |
<ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton> |
||||
|
</div> |
||||
|
<DataForm |
||||
|
class="query-form flex-item-fixed" |
||||
|
style="width: 500px;" |
||||
|
:data="state.queryData" |
||||
|
:formFields="data.formFields" |
||||
|
:columnCount="2" |
||||
|
layout="bothFixed" |
||||
|
labelWidth="85px" |
||||
|
inputWidth="200px" |
||||
|
/> |
||||
|
<AgGridVue |
||||
|
ref="gridRef" |
||||
|
:class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']" |
||||
|
v-bind="{...data.gridSetting}" |
||||
|
:modelValue="state.grid1Data" |
||||
|
> |
||||
|
</AgGridVue> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script setup> |
|
||||
</script> |
|
||||
<style lang="less"> |
|
||||
.dashboard{ |
|
||||
|
|
||||
|
<style scoped> |
||||
|
.dashboard { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tools { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.query-form { |
||||
|
height: unset; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
|
|||||
@ -1,12 +1,142 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { onMounted, reactive } from "vue"; |
||||
|
import { ElButton } from "element-plus"; |
||||
|
import { Search } from "@element-plus/icons-vue"; |
||||
|
import DataForm from "@/components/data-form/DataForm.vue"; |
||||
|
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
||||
|
import { AgGridVue } from "ag-grid-vue3"; |
||||
|
import { type GridOptions } from "ag-grid-enterprise"; |
||||
|
import type { GridApi, GridReadyEvent } from "ag-grid-community"; |
||||
|
import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale"; |
||||
|
import { Request } from "@ease-forge/shared"; |
||||
|
import lodash from "lodash"; |
||||
|
|
||||
|
// 定义 Props 类型 |
||||
|
interface ComponentProps { |
||||
|
} |
||||
|
|
||||
|
// 读取组件 props 属性 |
||||
|
const props = withDefaults(defineProps<ComponentProps>(), {}); |
||||
|
|
||||
|
// 定义 State 类型 |
||||
|
interface ComponentState { |
||||
|
loading: boolean; |
||||
|
queryData: any; |
||||
|
grid1Data: Array<any>; |
||||
|
} |
||||
|
|
||||
|
// state 属性 |
||||
|
const state = reactive<ComponentState>({ |
||||
|
loading: false, |
||||
|
queryData: {}, |
||||
|
grid1Data: [], |
||||
|
}); |
||||
|
|
||||
|
// 定义 Data 类型 |
||||
|
interface ComponentData { |
||||
|
formFields?: Array<FormField>; |
||||
|
gridSetting: Partial<GridOptions>; |
||||
|
api?: GridApi; |
||||
|
} |
||||
|
|
||||
|
// 内部数据 |
||||
|
const data: ComponentData = { |
||||
|
formFields: [ |
||||
|
{ |
||||
|
dataPath: 'virtualFloorCode', label: '仿真车所在楼层', input: 'Input', |
||||
|
inputProps: { |
||||
|
placeholder: '仿真车所在楼层', |
||||
|
clearable: true, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
dataPath: 'isActive', label: '是否激活', input: 'Checkbox', |
||||
|
inputProps: { |
||||
|
placeholder: '是否激活', |
||||
|
clearable: true, |
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
gridSetting: { |
||||
|
localeText: localeTextCn, |
||||
|
// suppressNoRowsOverlay: true, |
||||
|
// suppressLoadingOverlay: true, |
||||
|
// 选择行配置 |
||||
|
rowSelection: "single", |
||||
|
columnDefs: [ |
||||
|
{ headerName: "环境ID", field: "envId" }, |
||||
|
{ headerName: "执行器ID", field: "executorId" }, |
||||
|
{ headerName: "仿真车所在楼层", field: "virtualFloorCode" }, |
||||
|
{ headerName: "仿真车所在XYZ", field: "virtualLocationAt" }, |
||||
|
{ headerName: "仿真车配置详情", field: "virtualExecutorPayload" }, |
||||
|
{ |
||||
|
headerName: "是否激活", field: "isActive", |
||||
|
valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是", |
||||
|
}, |
||||
|
{ headerName: "创建时间", field: "createAt" }, |
||||
|
{ headerName: "创建人", field: "createBy" }, |
||||
|
{ headerName: "更新时间", field: "updateAt" }, |
||||
|
{ headerName: "更新人", field: "updateBy" }, |
||||
|
], |
||||
|
onGridReady(event: GridReadyEvent) { |
||||
|
data.api = event.api; |
||||
|
// data.api.setServerSideDatasource({ getRows: serverSideDatasource }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
onMounted(reload); |
||||
|
|
||||
|
function reload() { |
||||
|
state.loading = true; |
||||
|
Request.request.get<Array<any>>( |
||||
|
"/api/workbench/DeviceManager@queryExecutor", |
||||
|
{ |
||||
|
params: { |
||||
|
...state.queryData, |
||||
|
}, |
||||
|
}, |
||||
|
).then(data => { |
||||
|
state.grid1Data = data; |
||||
|
}).finally(() => state.loading = false); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div class="modeling-simulation"> |
<div class="dashboard flex-column-container"> |
||||
vehicles |
<div class="tools flex-item-fixed"> |
||||
</div> |
<ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton> |
||||
|
</div> |
||||
|
<DataForm |
||||
|
class="query-form flex-item-fixed" |
||||
|
style="width: 500px;" |
||||
|
:data="state.queryData" |
||||
|
:formFields="data.formFields" |
||||
|
:columnCount="2" |
||||
|
layout="bothFixed" |
||||
|
labelWidth="120px" |
||||
|
inputWidth="200px" |
||||
|
/> |
||||
|
<AgGridVue |
||||
|
ref="gridRef" |
||||
|
:class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']" |
||||
|
v-bind="{...data.gridSetting}" |
||||
|
:modelValue="state.grid1Data" |
||||
|
> |
||||
|
</AgGridVue> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script setup> |
|
||||
</script> |
|
||||
<style lang="less"> |
|
||||
.dashboard{ |
|
||||
|
|
||||
|
<style scoped> |
||||
|
.dashboard { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tools { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.query-form { |
||||
|
height: unset; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
|
|||||
Loading…
Reference in new issue