Day4 DeviceManager page

This commit is contained in:
2026-05-17 01:34:41 +08:00
parent ead127acab
commit 4d720c03f1
23 changed files with 1468 additions and 0 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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",

View File

@@ -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 })
}

View File

@@ -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>

View File

@@ -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>

View 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>

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,153 @@
// *Authorjxx
// *Contact283591387@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

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,59 @@
// *Authorjxx
// *Contact283591387@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
};
}

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,55 @@
// *Authorjxx
// *Contact283591387@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
};
}

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,48 @@
// *Authorjxx
// *Contact283591387@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
};
}

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,67 @@
// *Authorjxx
// *Contact283591387@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
};
}

View File

@@ -0,0 +1,82 @@
<!--
*Authorjxx
*Date{Date}
*Contact283591387@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>

View File

@@ -0,0 +1,52 @@
// *Authorjxx
// *Contact283591387@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
};
}