feat: 数据页面
parent
8839c07b28
commit
52fee4fbea
|
|
@ -194,8 +194,8 @@ const stop_device = async (row: any) => {
|
||||||
</ElButton>
|
</ElButton>
|
||||||
</template>
|
</template>
|
||||||
</TemplateTable>
|
</TemplateTable>
|
||||||
<addModal @submit="() => tableApi.reload()" />
|
<addModal />
|
||||||
<editModal @submit="() => tableApi.reload()" />
|
<editModal />
|
||||||
<deviceModal @close="() => tableApi.reload()" />
|
<deviceModal />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { ElButton, ElDivider } from 'element-plus';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
|
||||||
|
import SetHistory from './setHistory.vue';
|
||||||
|
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
|
onCancel() {
|
||||||
|
drawerApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const data = drawerApi.getData<any>();
|
||||||
|
if (data) {
|
||||||
|
console.warn(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [setModal] = useVbenModal({
|
||||||
|
connectedComponent: SetHistory,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [TemplateForm] = useVbenForm({
|
||||||
|
// 所有表单项共用，可单独在表单内覆盖
|
||||||
|
commonConfig: {
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 提交函数
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
showDefaultActions: false,
|
||||||
|
// 垂直布局，label和input在不同行，值为vertical
|
||||||
|
// 水平布局，label和input在同一行
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '总计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'total_count',
|
||||||
|
label: '总计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '成功计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'success_count',
|
||||||
|
label: '成功计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次成功时间',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_success_time',
|
||||||
|
label: '最后一次成功时间',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '失败计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'failure_count',
|
||||||
|
label: '失败计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次失败时间',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_failure_ctime',
|
||||||
|
label: '最后一次失败时间',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次失败原因',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_failure_cause',
|
||||||
|
label: '最后一次失败原因',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
wrapperClass: 'grid-cols-1',
|
||||||
|
});
|
||||||
|
const [TemplateForm1] = useVbenForm({
|
||||||
|
// 所有表单项共用，可单独在表单内覆盖
|
||||||
|
commonConfig: {
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 提交函数
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
showDefaultActions: false,
|
||||||
|
// 垂直布局，label和input在不同行，值为vertical
|
||||||
|
// 水平布局，label和input在同一行
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '总计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'total_count',
|
||||||
|
label: '总计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '成功计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'success_count',
|
||||||
|
label: '成功计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次成功时间',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_success_time',
|
||||||
|
label: '最后一次成功时间',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '失败计数',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'failure_count',
|
||||||
|
label: '失败计数',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次失败时间',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_failure_ctime',
|
||||||
|
label: '最后一次失败时间',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '最后一次失败原因',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'last_failure_cause',
|
||||||
|
label: '最后一次失败原因',
|
||||||
|
disabled: true,
|
||||||
|
labelWidth: 160,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
wrapperClass: 'grid-cols-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const resetHealth = () => {};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Drawer title="详情" :footer="false" class="w-[800px]">
|
||||||
|
<div class="vp-raw w-full" style="height: 600px">
|
||||||
|
<fieldset class="box2 titleBox">
|
||||||
|
<legend class="box-ht">点位名称</legend>
|
||||||
|
<span></span>
|
||||||
|
<ElButton type="primary" size="large" @click="resetHealth">
|
||||||
|
重置
|
||||||
|
</ElButton>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset class="box2">
|
||||||
|
<!-- <legend class="box-ht">读计数</legend> -->
|
||||||
|
<ElDivider content-position="left">读计数</ElDivider>
|
||||||
|
<TemplateForm />
|
||||||
|
</fieldset>
|
||||||
|
<fieldset class="box2">
|
||||||
|
<ElDivider content-position="left">写计数</ElDivider>
|
||||||
|
<TemplateForm1 />
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<setModal />
|
||||||
|
</Drawer>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.titleBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { ElButton } from 'element-plus';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import SetHistory from './setHistory.vue';
|
||||||
|
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
|
onCancel() {
|
||||||
|
drawerApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const data = drawerApi.getData<any>();
|
||||||
|
if (data) {
|
||||||
|
console.warn(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const gridOptions: VxeGridProps<any> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: 'name', // 修改为实际的字段名，原代码中是 productName 可能不正确
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ title: '序号', type: 'seq', width: 100 },
|
||||||
|
{ field: 'Name', title: '时间戳' },
|
||||||
|
{ field: 'ProtocolExt.salve_id', title: '点位值' },
|
||||||
|
{
|
||||||
|
field: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
slots: { default: 'action' },
|
||||||
|
title: '管理',
|
||||||
|
width: 240,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: () => {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
Name: '123',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
exportConfig: {},
|
||||||
|
toolbarConfig: {
|
||||||
|
custom: true,
|
||||||
|
export: true,
|
||||||
|
refresh: true,
|
||||||
|
zoom: true,
|
||||||
|
},
|
||||||
|
pagerConfig: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
round: true,
|
||||||
|
showOverflow: true,
|
||||||
|
};
|
||||||
|
const [PointTable, tableApi] = useVbenVxeGrid({
|
||||||
|
gridOptions,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [setModal, setApi] = useVbenModal({
|
||||||
|
connectedComponent: SetHistory,
|
||||||
|
onclose: () => {
|
||||||
|
tableApi.reload();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const btn_set = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
setApi.setData({ data: drawerApi.getData<any>() }).open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const btn_start = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const btn_stop = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const btn_export = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const btn_clean = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Drawer title="历史记录" :footer="false" class="w-[1500px]">
|
||||||
|
<div class="vp-raw w-full" style="height: 600px">
|
||||||
|
<PointTable>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<ElButton size="small" type="warning" round @click="btn_set(row)">
|
||||||
|
设定
|
||||||
|
</ElButton>
|
||||||
|
<ElButton
|
||||||
|
size="small"
|
||||||
|
type="warning"
|
||||||
|
round
|
||||||
|
@click="btn_start(row)"
|
||||||
|
v-if="true"
|
||||||
|
>
|
||||||
|
启用
|
||||||
|
</ElButton>
|
||||||
|
<ElButton
|
||||||
|
size="small"
|
||||||
|
type="warning"
|
||||||
|
round
|
||||||
|
@click="btn_stop(row)"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
停用
|
||||||
|
</ElButton>
|
||||||
|
<ElButton size="small" type="error" round @click="btn_export(row)">
|
||||||
|
导出
|
||||||
|
</ElButton>
|
||||||
|
<ElButton size="small" type="error" round @click="btn_clean(row)">
|
||||||
|
清空
|
||||||
|
</ElButton>
|
||||||
|
</template>
|
||||||
|
</PointTable>
|
||||||
|
</div>
|
||||||
|
<setModal />
|
||||||
|
</Drawer>
|
||||||
|
</template>
|
||||||
|
|
@ -1,3 +1,294 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenDrawer } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { ElButton, ElTag, ElTree } from 'element-plus';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { cdcmDriverAPI } from '#/cdcm/api/api.js';
|
||||||
|
import req from '#/cdcm/api/req_code';
|
||||||
|
|
||||||
|
import Detail from './detail.vue';
|
||||||
|
import History from './history.vue';
|
||||||
|
import Write from './write.vue';
|
||||||
|
|
||||||
|
const driverData = ref([]);
|
||||||
|
const indexi = ref('');
|
||||||
|
const curDriver = ref({});
|
||||||
|
const deviceData = ref([]);
|
||||||
|
const defaultProps = ref({
|
||||||
|
children: 'children',
|
||||||
|
label: 'Name',
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDriverData();
|
||||||
|
});
|
||||||
|
const gridOptions: VxeGridProps<any> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: 'name',
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ title: '序号', type: 'seq', width: 100 },
|
||||||
|
{ field: 'name', title: '名称', width: 300 },
|
||||||
|
{ field: 'description', title: '描述' },
|
||||||
|
{ field: 'type', title: '质量', width: 120 },
|
||||||
|
{ field: 'enabled', title: '点位值', width: 120 },
|
||||||
|
{
|
||||||
|
field: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
slots: { default: 'action' },
|
||||||
|
title: '管理',
|
||||||
|
width: 240,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
exportConfig: {},
|
||||||
|
keepSource: true,
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: () => {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'test',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pagerConfig: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
toolbarConfig: {
|
||||||
|
custom: false,
|
||||||
|
export: false,
|
||||||
|
// import: true,
|
||||||
|
refresh: false,
|
||||||
|
zoom: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const [TemplateTable] = useVbenVxeGrid({
|
||||||
|
gridOptions,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [historyModal, historyApi] = useVbenDrawer({
|
||||||
|
connectedComponent: History,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [detailModal, detailApi] = useVbenDrawer({
|
||||||
|
connectedComponent: Detail,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [writeModal, writeApi] = useVbenDrawer({
|
||||||
|
connectedComponent: Write,
|
||||||
|
});
|
||||||
|
|
||||||
|
const changeQd = (i: any, item: any) => {
|
||||||
|
console.warn(i, item);
|
||||||
|
indexi.value = i;
|
||||||
|
curDriver.value = item;
|
||||||
|
getDeviceData(item.ID);
|
||||||
|
};
|
||||||
|
|
||||||
|
function getDriverData() {
|
||||||
|
driverData.value = [
|
||||||
|
{
|
||||||
|
ID: 2,
|
||||||
|
Name: 'devicename',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
console.warn(driverData.value);
|
||||||
|
|
||||||
|
if (driverData.value) {
|
||||||
|
changeQd(0, driverData.value[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDeviceData(id: Number) {
|
||||||
|
const res = await cdcmDriverAPI({ id }, req.DriverQuery);
|
||||||
|
console.warn(1, res.data.data.Devices);
|
||||||
|
deviceData.value = res.data.data.Devices;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn(7777, deviceData);
|
||||||
|
|
||||||
|
const handleNodeClick = () => {};
|
||||||
|
|
||||||
|
const openHistory = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
historyApi.setData({ data: row }).open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDetail = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
detailApi.setData({ data: row }).open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const openWrite = (row: any) => {
|
||||||
|
console.warn(row);
|
||||||
|
|
||||||
|
writeApi.setData({ data: row }).open();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<page> 实时数据 </page>
|
<div class="vp-raw w-full" style="height: 800px">
|
||||||
|
<div class="all-content">
|
||||||
|
<fieldset class="left box2">
|
||||||
|
<legend class="box-ht">驱动列表</legend>
|
||||||
|
<div
|
||||||
|
v-for="(item, i) in driverData"
|
||||||
|
:class="i === indexi ? 'active' : ''"
|
||||||
|
class="qd-one"
|
||||||
|
:key="i"
|
||||||
|
@click="changeQd(i, item)"
|
||||||
|
>
|
||||||
|
{{ item.Name }}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="right">
|
||||||
|
<fieldset class="right-set box2">
|
||||||
|
<legend class="box-ht">设备列表</legend>
|
||||||
|
<ElTree
|
||||||
|
:data="deviceData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:highlight-current="true"
|
||||||
|
accordion
|
||||||
|
node-key="Name"
|
||||||
|
:current-node-key="Name"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
/>
|
||||||
|
<div>{{ deviceData }}</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="right-table">
|
||||||
|
<div class="des1">
|
||||||
|
<span class="box-title">设备信息</span>
|
||||||
|
<div class="box-info1">
|
||||||
|
<div>
|
||||||
|
<ElTag size="medium" type="">设备名称:</ElTag>
|
||||||
|
<ElTag size="medium" type="">设备描述: </ElTag>
|
||||||
|
</div>
|
||||||
|
<ElButton class="mr-2" type="success"> 启用 </ElButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<TemplateTable>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<ElButton
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
round
|
||||||
|
@click="openHistory(row)"
|
||||||
|
>
|
||||||
|
历史
|
||||||
|
</ElButton>
|
||||||
|
<ElButton
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
round
|
||||||
|
@click="openDetail(row)"
|
||||||
|
>
|
||||||
|
详情
|
||||||
|
</ElButton>
|
||||||
|
<ElButton size="small" type="info" round @click="openWrite(row)">
|
||||||
|
写值
|
||||||
|
</ElButton>
|
||||||
</template>
|
</template>
|
||||||
|
</TemplateTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<historyModal />
|
||||||
|
<detailModal />
|
||||||
|
<writeModal />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.all-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 15%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #666;
|
||||||
|
|
||||||
|
.qd-one {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 84%;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #666;
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120px;
|
||||||
|
padding: 10px 5px;
|
||||||
|
margin: 0 5px;
|
||||||
|
color: #fff;
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-set {
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-table {
|
||||||
|
width: 78%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.des,
|
||||||
|
.des1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #666;
|
||||||
|
// height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des1 {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-info1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
justify-content: left;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #00aaa3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { cdcmDriverAPI } from '#/cdcm/api/api.js';
|
||||||
|
import req from '#/cdcm/api/req_code';
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const data = modalApi.getData<any>();
|
||||||
|
console.warn(13, data.data.data.type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [TemplateForm] = useVbenForm({
|
||||||
|
// 所有表单项共用，可单独在表单内覆盖
|
||||||
|
commonConfig: {
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 提交函数
|
||||||
|
handleSubmit: onSubmit,
|
||||||
|
// 垂直布局，label和input在不同行，值为vertical
|
||||||
|
// 水平布局，label和input在同一行
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '历史记录最大数量',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'history_max_points',
|
||||||
|
label: '历史记录最大数量',
|
||||||
|
labelWidth: 200,
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
wrapperClass: 'grid-cols-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(values: Record<string, any>) {
|
||||||
|
const data = modalApi.getData<any>();
|
||||||
|
const param = {
|
||||||
|
driver_id: data.data.data.id,
|
||||||
|
template_id: values.template_id,
|
||||||
|
driver_type: data.data.data.type,
|
||||||
|
name: values.name,
|
||||||
|
description: values.description,
|
||||||
|
protocol_ext: {
|
||||||
|
salve_id: values.salve_id,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const ret = await cdcmDriverAPI(param, req.DeviceCreate);
|
||||||
|
if (ret.data.code === 0) {
|
||||||
|
ElMessage.success(ret.data.data);
|
||||||
|
modalApi.close();
|
||||||
|
} else {
|
||||||
|
ElMessage.error(ret.data.data || ret.data.msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Modal title="设定" :footer="false">
|
||||||
|
<TemplateForm />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useVbenDrawer } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
|
onCancel() {
|
||||||
|
drawerApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const data = drawerApi.getData<any>();
|
||||||
|
if (data) {
|
||||||
|
console.warn(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [TemplateForm] = useVbenForm({
|
||||||
|
// 所有表单项共用，可单独在表单内覆盖
|
||||||
|
commonConfig: {
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 提交函数
|
||||||
|
handleSubmit: onSubmit,
|
||||||
|
// 垂直布局，label和input在不同行，值为vertical
|
||||||
|
// 水平布局，label和input在同一行
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入点位值',
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldName: 'writeV',
|
||||||
|
label: '请输入点位值',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
wrapperClass: 'grid-cols-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit() {}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Drawer title="写值" :footer="false" class="w-[500px]">
|
||||||
|
<div class="vp-raw w-full" style="height: 600px">
|
||||||
|
<TemplateForm />
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue