Day4 DeviceManager page
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************************
|
||||
** Author:jxx 2023
|
||||
** QQ:283591387
|
||||
** 框架文档: http://doc.volcore.xyz/
|
||||
*****************************************************************************************/
|
||||
//此js文件是用来自定义扩展业务代码,在当前[表.vue]文件中也可以实现业务处理
|
||||
|
||||
let extension = {
|
||||
components: {
|
||||
//查询界面扩展组件
|
||||
gridHeader: '',
|
||||
gridBody: '',
|
||||
gridFooter: '',
|
||||
//新建、编辑弹出框扩展组件
|
||||
modelHeader: '',
|
||||
modelBody: '',
|
||||
modelRight: '',
|
||||
modelFooter: ''
|
||||
},
|
||||
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
||||
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
||||
methods: {
|
||||
//下面这些方法可以保留也可以删除
|
||||
onInit() { //框架初始化配置前,
|
||||
//示例:在按钮的最前面添加一个按钮
|
||||
// this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组
|
||||
// name: '按钮', //按钮名称
|
||||
// icon: 'el-icon-document', //按钮图标:https://element.eleme.cn/#/zh-CN/component/icon
|
||||
// type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
|
||||
// //color:"#eee",//自定义按钮颜色
|
||||
// onClick: function () {
|
||||
// this.$Message.success('点击了按钮');
|
||||
// }
|
||||
// });
|
||||
|
||||
//示例:设置修改新建、编辑弹出框字段标签的长度
|
||||
// this.boxOptions.labelWidth = 150;
|
||||
},
|
||||
onInited() {
|
||||
//框架初始化配置后
|
||||
//如果要配置明细表,在此方法操作
|
||||
//this.detailOptions.columns.forEach(column=>{ });
|
||||
},
|
||||
searchBefore(param) {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
},
|
||||
searchAfter(result) {
|
||||
//查询后,result返回的查询数据,可以在显示到表格前处理表格的值
|
||||
return true;
|
||||
},
|
||||
addBefore(formData) {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
},
|
||||
updateBefore(formData) {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
},
|
||||
rowClick({ row, column, event }) {
|
||||
//查询界面点击行事件
|
||||
// this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
||||
},
|
||||
modelOpenAfter(row) {
|
||||
//点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
|
||||
//(1)判断是编辑还是新建操作: this.currentAction=='Add';
|
||||
//(2)给弹出框设置默认值
|
||||
//(3)this.editFormFields.字段='xxx';
|
||||
//如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
|
||||
//看不懂就把输出看:console.log(this.editFormOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default extension;
|
||||
@@ -47,6 +47,7 @@ const routes = [
|
||||
name: "coderV3",
|
||||
component: () => import("@/views/builder/coderV3.vue"),
|
||||
},
|
||||
{ path: "/device-manager", name: "deviceManager", component: () => import("@/views/warehouse/DeviceManager/index.vue") },
|
||||
{
|
||||
path: "/generic/:table",
|
||||
name: "generic",
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import request from '@/uitils/request'
|
||||
|
||||
export function getRegionTree(params) {
|
||||
return request({ url: '/api/DeviceManager/GetRegionTree', method: 'get', params })
|
||||
}
|
||||
export function getDevicesByPoint(params) {
|
||||
return request({ url: '/api/DeviceManager/GetDevicesByPoint', method: 'get', params })
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="device-table">
|
||||
<div class="toolbar" v-if="selectedPoint">
|
||||
<span>点位: <strong>{{ selectedPoint.name }}</strong></span>
|
||||
<el-button size="small" type="primary" @click="loadDevices">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="devices" row-key="deviceId" v-loading="loading" stripe max-height="calc(100vh-240px)">
|
||||
<el-table-column prop="deviceName" label="名称" min-width="150"/>
|
||||
<el-table-column prop="deviceCategory" label="种类" width="120"/>
|
||||
<el-table-column prop="deviceGroup" label="分组" width="100"/>
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="{row}"><el-tag :type="row.isOnline==='在线'?'success':'danger'" size="small">{{row.isOnline}}</el-tag></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="adapterCode" label="来源" width="120"/>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{row}"><el-button size="small" text @click="$emit('edit',row)">编辑</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { getDevicesByPoint } from '../api/deviceManager'
|
||||
const props = defineProps({ selectedPoint: Object })
|
||||
defineEmits(['edit'])
|
||||
const devices = ref([]), loading = ref(false)
|
||||
const loadDevices = async () => {
|
||||
if (!props.selectedPoint?.id) return
|
||||
loading.value = true
|
||||
try { const r = await getDevicesByPoint({ pointId: props.selectedPoint.id, page:1, size:100 }); devices.value = r.items||[] }
|
||||
finally { loading.value = false }
|
||||
}
|
||||
watch(()=>props.selectedPoint, loadDevices, {immediate:true})
|
||||
defineExpose({ loadDevices })
|
||||
</script>
|
||||
<style scoped>.device-table{padding:8px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="region-tree">
|
||||
<el-input v-model="filterText" placeholder="搜索" size="small" clearable />
|
||||
<el-tree :data="treeData" :props="{ children: 'children', label: 'label' }"
|
||||
:filter-node-method="(v,d)=>!v||d.label.includes(v)" node-key="id"
|
||||
highlight-current :expand-on-click-node="true" @node-click="onClick"
|
||||
style="margin-top:8px;max-height:calc(100vh-200px);overflow-y:auto">
|
||||
<template #default="{ data }">
|
||||
<span class="tree-node">
|
||||
<el-icon><Folder v-if="data.type==='region'"/><Location v-else/></el-icon>
|
||||
<span>{{ data.label }}</span>
|
||||
<el-tag size="small" type="info" style="margin-left:6px">{{ data.deviceCount||0 }}</el-tag>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { getRegionTree } from '../api/deviceManager'
|
||||
const emit = defineEmits(['select-point'])
|
||||
const treeRef = ref(null), treeData = ref([]), filterText = ref('')
|
||||
getRegionTree().then(r => treeData.value = r || [])
|
||||
watch(filterText, v => treeRef.value?.filter(v))
|
||||
const onClick = (data) => {
|
||||
if (data.type === 'point') emit('select-point', { id: parseInt(data.id.replace('p_','')), name: data.label })
|
||||
}
|
||||
</script>
|
||||
<style scoped>.region-tree{padding:8px}.tree-node{display:flex;align-items:center;gap:4px}</style>
|
||||
18
web.vite/src/views/warehouse/DeviceManager/index.vue
Normal file
18
web.vite/src/views/warehouse/DeviceManager/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="device-manager-page">
|
||||
<div class="left-panel"><RegionTree @select-point="onSelect"/></div>
|
||||
<div class="right-panel"><DeviceTable ref="tableRef" :selectedPoint="selectedPoint" @edit="d=>console.log('edit',d)"/></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import RegionTree from './components/RegionTree.vue'
|
||||
import DeviceTable from './components/DeviceTable.vue'
|
||||
const selectedPoint = ref(null), tableRef = ref(null)
|
||||
const onSelect = (p) => selectedPoint.value = p
|
||||
</script>
|
||||
<style scoped>
|
||||
.device-manager-page{display:flex;height:calc(100vh-80px)}
|
||||
.left-panel{width:280px;border-right:1px solid #e4e7ed;overflow-y:auto}
|
||||
.right-panel{flex:1;overflow-y:auto}
|
||||
</style>
|
||||
82
web.vite/src/views/warehouse/device_manager/base_device.vue
Normal file
82
web.vite/src/views/warehouse/device_manager/base_device.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/base_device.jsx或base_device.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/base_device.jsx";
|
||||
import viewOptions from './base_device/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'DeviceId',
|
||||
footer: "Foots",
|
||||
cnName: '设备管理',
|
||||
name: 'base_device',
|
||||
newTabEdit: false,
|
||||
url: "/base_device/",
|
||||
sortName: "DeviceName",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {"DeviceName":"","DeviceCategory":"","DeviceGroup":"","IsParent":"","PointId":"","Location":"","MapModelId":"","Enable":"","Remark":""};
|
||||
const editFormOptions = [[{"title":"设备名称","required":true,"field":"DeviceName","colSize":50.0},
|
||||
{"dataKey":"设备种类","data":[],"title":"设备种类(数据字典)","required":true,"field":"DeviceCategory","colSize":50.0,"type":"select"}],
|
||||
[{"dataKey":"设备分组","data":[],"title":"设备分组(数据字典)","required":true,"field":"DeviceGroup","colSize":50.0,"type":"select"},
|
||||
{"dataKey":"是否父设备","data":[],"title":"是否父设备(数据字典)","required":true,"field":"IsParent","colSize":50.0,"type":"select"}],
|
||||
[{"title":"所属点位ID","field":"PointId","colSize":50.0,"type":"number"},
|
||||
{"title":"安装位置","field":"Location","colSize":50.0}],
|
||||
[{"title":"三维地图模型ID","field":"MapModelId","colSize":50.0},
|
||||
{"dataKey":"启用状态","data":[],"title":"启用状态(数据字典)","field":"Enable","colSize":50.0,"type":"select"}],
|
||||
[{"title":"备注","field":"Remark","colSize":100.0,"type":"textarea"}]];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'DeviceId',title:'设备ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceName',title:'设备名称',type:'string',link:true,width:120,require:true,align:'left'},
|
||||
{field:'AdapterCode',title:'来源适配器(类型:实例)',type:'string',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'SourceId',title:'源系统设备ID',type:'string',width:120,require:true,align:'left'},
|
||||
{field:'DeviceCategory',title:'设备种类(数据字典)',type:'string',bind:{ key:'设备种类',data:[]},width:110,require:true,align:'left'},
|
||||
{field:'DeviceGroup',title:'设备分组(数据字典)',type:'string',bind:{ key:'设备分组',data:[]},width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'PointId',title:'所属点位ID',type:'int',width:110,hidden:true,align:'left'},
|
||||
{field:'GatewayNodeId',title:'所属网关节点ID',type:'int',width:110,hidden:true,align:'left'},
|
||||
{field:'IsParent',title:'是否父设备(数据字典)',type:'string',bind:{ key:'是否父设备',data:[]},width:110,require:true,align:'left'},
|
||||
{field:'ParentDeviceId',title:'父设备ID(自引用,子设备挂父设备下)',type:'int',width:110,hidden:true,align:'left'},
|
||||
{field:'IsOnline',title:'在线状态(数据字典)',type:'string',bind:{ key:'在线状态',data:[]},width:110,require:true,align:'left'},
|
||||
{field:'IpAddress',title:'IP地址',type:'string',width:110,align:'left'},
|
||||
{field:'Port',title:'端口',type:'int',width:110,align:'left'},
|
||||
{field:'Location',title:'安装位置',type:'string',width:180,align:'left'},
|
||||
{field:'Lat',title:'纬度',type:'decimal',width:110,align:'left'},
|
||||
{field:'Lng',title:'经度',type:'decimal',width:110,align:'left'},
|
||||
{field:'MapModelId',title:'三维地图模型ID',type:'string',width:120,align:'left'},
|
||||
{field:'MapModelScale',title:'模型缩放比例',type:'decimal',width:110,align:'left'},
|
||||
{field:'MapModelRotation',title:'模型旋转角度(JSON)',type:'string',width:120,align:'left'},
|
||||
{field:'ExtraData',title:'适配器扩展数据JSON(Owl/MC4/门禁字段均存于此)',type:'string',width:110,align:'left'},
|
||||
{field:'LastSyncTime',title:'上次同步时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'Enable',title:'启用状态(数据字典)',type:'string',bind:{ key:'启用状态',data:[]},width:110,align:'left'},
|
||||
{field:'Remark',title:'备注',type:'string',width:150,align:'left'},
|
||||
{field:'CreateID',title:'创建人ID',type:'int',width:80,hidden:true,align:'left'},
|
||||
{field:'Creator',title:'创建人',type:'string',width:100,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ModifyID',title:'修改人ID',type:'int',width:80,hidden:true,align:'left'},
|
||||
{field:'Modifier',title:'修改人',type:'string',width:100,align:'left'},
|
||||
{field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}];
|
||||
const detail ={columns:[]};
|
||||
const details = [ {
|
||||
cnName: '视频通道',
|
||||
table: 'video_channel',
|
||||
columns: [{field:'ChannelId',title:'通道记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'OwlChannelId',title:'Owl系统通道ID',type:'string',width:120,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联Base_Device设备ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'OwlStreamApp',title:'Owl流应用名',type:'string',width:110,align:'left'},
|
||||
{field:'OwlStreamName',title:'Owl流名称',type:'string',width:120,align:'left'},
|
||||
{field:'HasPtz',title:'是否支持云台',type:'byte',width:110,align:'left'},
|
||||
{field:'HasRecording',title:'是否支持录像',type:'byte',width:110,align:'left'},
|
||||
{field:'RecordMode',title:'录像模式',type:'int',width:110,align:'left'},
|
||||
{field:'SnapshotUrl',title:'快照地址',type:'string',width:150,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}],
|
||||
sortName: 'ChannelId',
|
||||
key: 'ChannelId',
|
||||
buttons:[],
|
||||
delKeys:[],
|
||||
detail:{
|
||||
cnName: '设备管理_录像记录',
|
||||
table: 'video_record',
|
||||
firstTable: 'base_device',
|
||||
secondTable: 'video_channel',
|
||||
secondKey: 'ChannelId',
|
||||
sortName: 'ChannelId',
|
||||
key: 'RecordId',
|
||||
buttons:[],
|
||||
delKeys:[],
|
||||
columns: [{field:'RecordId',title:'录像记录ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'ChannelId',title:'关联通道ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'OwlRecordId',title:'Owl录像记录ID',type:'int',width:110,readonly:true,require:true,align:'left'},
|
||||
{field:'App',title:'应用名',type:'string',width:110,readonly:true,align:'left'},
|
||||
{field:'Stream',title:'流ID',type:'string',width:120,readonly:true,align:'left'},
|
||||
{field:'StartedAt',title:'录像开始时间',type:'datetime',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'EndedAt',title:'录像结束时间',type:'datetime',width:110,readonly:true,align:'left'},
|
||||
{field:'Duration',title:'录像时长(秒)',type:'decimal',width:110,readonly:true,align:'left'},
|
||||
{field:'FilePath',title:'文件路径',type:'string',width:150,readonly:true,align:'left'},
|
||||
{field:'FileSize',title:'文件大小(字节)',type:'bigint',width:110,readonly:true,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,readonly:true,align:'left'},]
|
||||
}
|
||||
},
|
||||
{
|
||||
cnName: '数据归档',
|
||||
table: 'iot_devicedata',
|
||||
columns: [{field:'DataId',title:'数据记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联设备ID(子设备/点位)',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'PointValue',title:'点位数值',type:'decimal',width:110,align:'left'},
|
||||
{field:'UpdateTime',title:'数据更新时间',type:'datetime',width:110,require:true,align:'left'},
|
||||
{field:'Interval',title:'采集间隔(毫秒)',type:'int',width:110,align:'left'},
|
||||
{field:'ArchiveType',title:'归档类型(1小时/2日)',type:'int',width:110,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,hidden:true,align:'left'}],
|
||||
sortName: 'UpdateTime',
|
||||
key: 'DataId',
|
||||
buttons:[],
|
||||
delKeys:[],
|
||||
detail:null
|
||||
},
|
||||
{
|
||||
cnName: '告警记录',
|
||||
table: 'iot_alarm',
|
||||
columns: [{field:'AlarmId',title:'告警ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'SourceAlarmId',title:'源系统告警ID',type:'string',width:120,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联设备ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'AlarmType',title:'告警类型',type:'int',width:110,align:'left'},
|
||||
{field:'AlarmLevel',title:'告警等级(数据字典:提示/普通/重要/紧急)',type:'string',bind:{ key:'告警等级',data:[]},width:110,hidden:true,align:'left'},
|
||||
{field:'AlarmDesc',title:'告警描述',type:'string',width:150,align:'left'},
|
||||
{field:'AlarmValue',title:'触发值',type:'decimal',width:110,align:'left'},
|
||||
{field:'StartTime',title:'告警开始时间',type:'datetime',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'EndTime',title:'告警结束时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ConfirmTime',title:'确认时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ConfirmUser',title:'确认人',type:'string',width:110,align:'left'},
|
||||
{field:'State',title:'状态(数据字典:未确认/已确认/已结束)',type:'string',bind:{ key:'告警状态',data:[]},width:110,align:'left'},
|
||||
{field:'AdapterCode',title:'来源适配器',type:'string',width:110,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}],
|
||||
sortName: 'StartTime',
|
||||
key: 'AlarmId',
|
||||
buttons:[],
|
||||
delKeys:[],
|
||||
detail:null
|
||||
}];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/gateway_nodes.jsx或gateway_nodes.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/gateway_nodes.jsx";
|
||||
import viewOptions from './gateway_nodes/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'NodeId',
|
||||
footer: "Foots",
|
||||
cnName: '设备管理_网关节点',
|
||||
name: 'gateway_nodes',
|
||||
newTabEdit: false,
|
||||
url: "/gateway_nodes/",
|
||||
sortName: "NodeId",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {"NodeCode":"","NodeName":"","NodeToken":"","Remark":""};
|
||||
const editFormOptions = [[{"title":"网关名称","required":true,"field":"NodeName","colSize":50.0},
|
||||
{"title":"网关唯一编码","required":true,"field":"NodeCode","colSize":50.0}],
|
||||
[{"title":"认证令牌","required":true,"field":"NodeToken","colSize":100.0}],
|
||||
[{"title":"备注","field":"Remark","colSize":100.0,"type":"textarea"}]];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'NodeId',title:'网关节点ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'NodeCode',title:'网关唯一编码',type:'string',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'NodeName',title:'网关名称',type:'string',width:120,require:true,align:'left'},
|
||||
{field:'NodeToken',title:'认证令牌',type:'string',width:120,require:true,align:'left'},
|
||||
{field:'AdapterTypes',title:'支持的适配器类型(网关上报)',type:'string',width:180,align:'left'},
|
||||
{field:'BaseUrl',title:'网关自身地址(网关上报)',type:'string',width:180,align:'left'},
|
||||
{field:'LastHeartbeat',title:'上次心跳时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'IsOnline',title:'在线状态(数据字典:在线/离线)',type:'string',width:110,hidden:true,align:'left'},
|
||||
{field:'Enable',title:'启用状态(数据字典:启用/禁用)',type:'string',width:110,align:'left'},
|
||||
{field:'Remark',title:'备注',type:'string',width:150,align:'left'},
|
||||
{field:'CreateID',title:'创建人ID',type:'int',width:80,hidden:true,align:'left'},
|
||||
{field:'Creator',title:'创建人',type:'string',width:100,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ModifyID',title:'修改人ID',type:'int',width:80,hidden:true,align:'left'},
|
||||
{field:'Modifier',title:'修改人',type:'string',width:100,align:'left'},
|
||||
{field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}];
|
||||
const detail ={columns:[]};
|
||||
const details = [];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
};
|
||||
}
|
||||
82
web.vite/src/views/warehouse/device_manager/iot_alarm.vue
Normal file
82
web.vite/src/views/warehouse/device_manager/iot_alarm.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/iot_alarm.jsx或iot_alarm.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/iot_alarm.jsx";
|
||||
import viewOptions from './iot_alarm/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'AlarmId',
|
||||
editTable:true ,
|
||||
footer: "Foots",
|
||||
cnName: '设备管理_告警记录',
|
||||
name: 'iot_alarm',
|
||||
newTabEdit: false,
|
||||
url: "/iot_alarm/",
|
||||
sortName: "StartTime",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {};
|
||||
const editFormOptions = [];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'AlarmId',title:'告警ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'SourceAlarmId',title:'源系统告警ID',type:'string',width:120,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联设备ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'AlarmType',title:'告警类型',type:'int',width:110,align:'left'},
|
||||
{field:'AlarmLevel',title:'告警等级(数据字典:提示/普通/重要/紧急)',type:'string',bind:{ key:'告警等级',data:[]},width:110,hidden:true,align:'left'},
|
||||
{field:'AlarmDesc',title:'告警描述',type:'string',width:150,align:'left'},
|
||||
{field:'AlarmValue',title:'触发值',type:'decimal',width:110,align:'left'},
|
||||
{field:'StartTime',title:'告警开始时间',type:'datetime',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'EndTime',title:'告警结束时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ConfirmTime',title:'确认时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'ConfirmUser',title:'确认人',type:'string',width:110,align:'left'},
|
||||
{field:'State',title:'状态(数据字典:未确认/已确认/已结束)',type:'string',bind:{ key:'告警状态',data:[]},width:110,align:'left'},
|
||||
{field:'AdapterCode',title:'来源适配器',type:'string',width:110,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}];
|
||||
const detail ={columns:[]};
|
||||
const details = [];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/iot_devicedata.jsx或iot_devicedata.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/iot_devicedata.jsx";
|
||||
import viewOptions from './iot_devicedata/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'DataId',
|
||||
editTable:true ,
|
||||
footer: "Foots",
|
||||
cnName: '设备管理_数据归档',
|
||||
name: 'iot_devicedata',
|
||||
newTabEdit: false,
|
||||
url: "/iot_devicedata/",
|
||||
sortName: "UpdateTime",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {};
|
||||
const editFormOptions = [];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'DataId',title:'数据记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联设备ID(子设备/点位)',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'PointValue',title:'点位数值',type:'decimal',width:110,align:'left'},
|
||||
{field:'UpdateTime',title:'数据更新时间',type:'datetime',width:110,require:true,align:'left'},
|
||||
{field:'Interval',title:'采集间隔(毫秒)',type:'int',width:110,align:'left'},
|
||||
{field:'ArchiveType',title:'归档类型(1小时/2日)',type:'int',width:110,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,hidden:true,align:'left'}];
|
||||
const detail ={columns:[]};
|
||||
const details = [];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/video_channel.jsx或video_channel.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/video_channel.jsx";
|
||||
import viewOptions from './video_channel/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'ChannelId',
|
||||
editTable:true ,
|
||||
footer: "Foots",
|
||||
cnName: '设备管理_视频通道',
|
||||
name: 'video_channel',
|
||||
newTabEdit: false,
|
||||
url: "/video_channel/",
|
||||
sortName: "ChannelId",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {};
|
||||
const editFormOptions = [];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'ChannelId',title:'通道记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'OwlChannelId',title:'Owl系统通道ID',type:'string',width:120,hidden:true,require:true,align:'left'},
|
||||
{field:'DeviceId',title:'关联Base_Device设备ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'OwlStreamApp',title:'Owl流应用名',type:'string',width:110,align:'left'},
|
||||
{field:'OwlStreamName',title:'Owl流名称',type:'string',width:120,align:'left'},
|
||||
{field:'HasPtz',title:'是否支持云台',type:'byte',width:110,align:'left'},
|
||||
{field:'HasRecording',title:'是否支持录像',type:'byte',width:110,align:'left'},
|
||||
{field:'RecordMode',title:'录像模式',type:'int',width:110,align:'left'},
|
||||
{field:'SnapshotUrl',title:'快照地址',type:'string',width:150,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}];
|
||||
const detail = {
|
||||
cnName: '录像记录',
|
||||
table: 'video_record',
|
||||
columns: [{field:'RecordId',title:'录像记录ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'ChannelId',title:'关联通道ID',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'OwlRecordId',title:'Owl录像记录ID',type:'int',width:110,readonly:true,require:true,align:'left'},
|
||||
{field:'App',title:'应用名',type:'string',width:110,readonly:true,align:'left'},
|
||||
{field:'Stream',title:'流ID',type:'string',width:120,readonly:true,align:'left'},
|
||||
{field:'StartedAt',title:'录像开始时间',type:'datetime',width:110,hidden:true,readonly:true,require:true,align:'left'},
|
||||
{field:'EndedAt',title:'录像结束时间',type:'datetime',width:110,readonly:true,align:'left'},
|
||||
{field:'Duration',title:'录像时长(秒)',type:'decimal',width:110,readonly:true,align:'left'},
|
||||
{field:'FilePath',title:'文件路径',type:'string',width:150,readonly:true,align:'left'},
|
||||
{field:'FileSize',title:'文件大小(字节)',type:'bigint',width:110,readonly:true,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,readonly:true,align:'left'}],
|
||||
sortName: 'RecordId',
|
||||
key: 'RecordId'
|
||||
};
|
||||
const details = [];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
};
|
||||
}
|
||||
82
web.vite/src/views/warehouse/device_manager/video_record.vue
Normal file
82
web.vite/src/views/warehouse/device_manager/video_record.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
*Author:jxx
|
||||
*Date:{Date}
|
||||
*Contact:283591387@qq.com
|
||||
*业务请在@/extension/warehouse/device_manager/video_record.jsx或video_record.vue文件编写
|
||||
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
|
||||
-->
|
||||
<template>
|
||||
<view-grid ref="grid"
|
||||
:columns="columns"
|
||||
:detail="detail"
|
||||
:details="details"
|
||||
:editFormFields="editFormFields"
|
||||
:editFormOptions="editFormOptions"
|
||||
:searchFormFields="searchFormFields"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:table="table"
|
||||
:extend="extend"
|
||||
:onInit="onInit"
|
||||
:onInited="onInited"
|
||||
:searchBefore="searchBefore"
|
||||
:searchAfter="searchAfter"
|
||||
:addBefore="addBefore"
|
||||
:updateBefore="updateBefore"
|
||||
:rowClick="rowClick"
|
||||
:modelOpenBefore="modelOpenBefore"
|
||||
:modelOpenAfter="modelOpenAfter">
|
||||
<!-- 自定义组件数据槽扩展,更多数据槽slot见文档 -->
|
||||
<template #gridHeader>
|
||||
</template>
|
||||
</view-grid>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import extend from "@/extension/warehouse/device_manager/video_record.jsx";
|
||||
import viewOptions from './video_record/options.js'
|
||||
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
||||
const grid = ref(null);
|
||||
const { proxy } = getCurrentInstance()
|
||||
//http请求,proxy.http.post/get
|
||||
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
||||
|
||||
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
||||
//生成对象属性初始化
|
||||
const onInit = async ($vm) => {
|
||||
gridRef = $vm;
|
||||
//与jsx中的this.xx使用一样,只需将this.xx改为gridRef.xx
|
||||
//更多属性见:https://doc.volcore.xyz/docs/view-grid
|
||||
}
|
||||
//生成对象属性初始化后,操作明细表配置用到
|
||||
const onInited = async () => {
|
||||
}
|
||||
const searchBefore = async (param) => {
|
||||
//界面查询前,可以给param.wheres添加查询参数
|
||||
//返回false,则不会执行查询
|
||||
return true;
|
||||
}
|
||||
const searchAfter = async (rows, result) => {
|
||||
return true;
|
||||
}
|
||||
const addBefore = async (formData) => {
|
||||
//新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值
|
||||
return true;
|
||||
}
|
||||
const updateBefore = async (formData) => {
|
||||
//编辑保存前formData为对象,包括明细表、删除行的Id
|
||||
return true;
|
||||
}
|
||||
const rowClick = ({ row, column, event }) => {
|
||||
//查询界面点击行事件
|
||||
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
||||
}
|
||||
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
||||
return true;//返回false,不会打开弹出框
|
||||
}
|
||||
const modelOpenAfter = (row) => {
|
||||
//弹出框打开后方法,设置表单默认值,按钮操作等
|
||||
}
|
||||
//监听表单输入,做实时计算
|
||||
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
||||
//对外暴露数据
|
||||
defineExpose({})
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
// *Author:jxx
|
||||
// *Contact:283591387@qq.com
|
||||
// *代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
export default function(){
|
||||
const table = {
|
||||
key: 'RecordId',
|
||||
editTable:true ,
|
||||
footer: "Foots",
|
||||
cnName: '设备管理_录像记录',
|
||||
name: 'video_record',
|
||||
newTabEdit: false,
|
||||
url: "/video_record/",
|
||||
sortName: "RecordId",
|
||||
fixedSearch:false
|
||||
};
|
||||
const tableName = table.name;
|
||||
const tableCNName = table.cnName;
|
||||
const newTabEdit = false;
|
||||
const key = table.key;
|
||||
const editFormFields = {};
|
||||
const editFormOptions = [];
|
||||
const searchFormFields = {};
|
||||
const searchFormOptions = [];
|
||||
const columns = [{field:'RecordId',title:'录像记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'ChannelId',title:'关联通道ID',type:'int',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'OwlRecordId',title:'Owl录像记录ID',type:'int',width:110,require:true,align:'left'},
|
||||
{field:'App',title:'应用名',type:'string',width:110,align:'left'},
|
||||
{field:'Stream',title:'流ID',type:'string',width:120,align:'left'},
|
||||
{field:'StartedAt',title:'录像开始时间',type:'datetime',width:110,hidden:true,require:true,align:'left'},
|
||||
{field:'EndedAt',title:'录像结束时间',type:'datetime',width:110,align:'left'},
|
||||
{field:'Duration',title:'录像时长(秒)',type:'decimal',width:110,align:'left'},
|
||||
{field:'FilePath',title:'文件路径',type:'string',width:150,align:'left'},
|
||||
{field:'FileSize',title:'文件大小(字节)',type:'bigint',width:110,align:'left'},
|
||||
{field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}];
|
||||
const detail ={columns:[]};
|
||||
const details = [];
|
||||
|
||||
return {
|
||||
table,
|
||||
key,
|
||||
tableName,
|
||||
tableCNName,
|
||||
newTabEdit,
|
||||
editFormFields,
|
||||
editFormOptions,
|
||||
searchFormFields,
|
||||
searchFormOptions,
|
||||
columns,
|
||||
detail,
|
||||
details
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user