feat: 数据页面

apps/web-ele/src/views/driver/index.vue

@@ -194,8 +194,8 @@ const stop_device = async (row: any) => {
         </ElButton>
       </template>
     </TemplateTable>
-    <addModal @submit="() => tableApi.reload()" />
-    <editModal @submit="() => tableApi.reload()" />
-    <deviceModal @close="() => tableApi.reload()" />
+    <addModal />
+    <editModal />
+    <deviceModal />
   </div>
 </template>

apps/web-ele/src/views/realtime/detail.vue

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

apps/web-ele/src/views/realtime/history.vue

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

apps/web-ele/src/views/realtime/index.vue

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

apps/web-ele/src/views/realtime/setHistory.vue

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

apps/web-ele/src/views/realtime/write.vue

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