From 0d749d68671c1b953de67dba64b42951e6dd9ca7 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 13 Mar 2023 14:00:49 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E9=87=87=E9=9B=86=E5=99=A8=20?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=8D=A1=E7=89=87=E6=96=B0=E5=A2=9Ewebsocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 .../Collector/Point/Scan/Table.vue            |  12 +-
 .../DataCollect/Collector/Point/Scan/Tree.vue |  14 +-
 .../Collector/Point/Scan/index.vue            |   1 -
 .../DataCollect/Collector/Point/index.vue     | 154 +++++++++++++-----
 src/views/DataCollect/Collector/data.ts       |   1 -
 6 files changed, 127 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index e01c7da6..8e4954cc 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "event-source-polyfill": "^1.0.31",
     "global": "^4.4.0",
     "jetlinks-store": "^0.0.3",
-    "jetlinks-ui-components": "^1.0.4",
+    "jetlinks-ui-components": "^1.0.5",
     "js-cookie": "^3.0.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
diff --git a/src/views/DataCollect/Collector/Point/Scan/Table.vue b/src/views/DataCollect/Collector/Point/Scan/Table.vue
index 9e2de6dc..ee1d144b 100644
--- a/src/views/DataCollect/Collector/Point/Scan/Table.vue
+++ b/src/views/DataCollect/Collector/Point/Scan/Table.vue
@@ -3,7 +3,7 @@
         <j-table
             :dataSource="modelRef.dataSource"
             :columns="FormTableColumns"
-            :scroll="{ x: 1100, y: 500 }"
+            :scroll="{ x: 1100, y: 550 }"
         >
             <template #bodyCell="{ column: { dataIndex }, record, index }">
                 <template v-if="dataIndex === 'name'">
@@ -151,14 +151,14 @@
                 </template>
 
                 <template v-if="dataIndex === 'action'">
-                    <a-tooltip title="删除">
-                        <a-popconfirm
+                    <j-tooltip title="删除">
+                        <j-popconfirm
                             title="确认删除"
                             @confirm="clickDelete(record.id)"
                         >
-                            <AIcon type="DeleteOutlined" />
-                        </a-popconfirm>
-                    </a-tooltip>
+                            <a><AIcon type="DeleteOutlined" /></a>
+                        </j-popconfirm>
+                    </j-tooltip>
                 </template>
             </template>
         </j-table>
diff --git a/src/views/DataCollect/Collector/Point/Scan/Tree.vue b/src/views/DataCollect/Collector/Point/Scan/Tree.vue
index b6228e67..b925af7f 100644
--- a/src/views/DataCollect/Collector/Point/Scan/Tree.vue
+++ b/src/views/DataCollect/Collector/Point/Scan/Tree.vue
@@ -5,21 +5,15 @@
             <j-checkbox v-model:checked="isSelected">隐藏已有节点</j-checkbox>
         </div>
         <j-spin :spinning="spinning">
+    
             <a-tree
-                v-model:checkedKeys="checkedKeys"
-                :tree-data="treeData"
-                default-expand-all
-                checkable
-                @check="onCheck"
-                :height="600"
-            >
-                <!-- <a-tree
                 :load-data="onLoadData"
                 :tree-data="treeData"
                 v-model:checkedKeys="checkedKeys"
                 checkable
                 @check="onCheck"
-            > -->
+                :height="650"
+            >
                 <template #title="{ name, key }">
                     <span
                         :class="[
@@ -57,7 +51,7 @@ const props = defineProps({
 const emits = defineEmits(['change']);
 
 // const channelId = '1610517801347788800'; //测试
-const channelId = props.data?.channelId; 
+const channelId = props.data?.channelId;
 
 const checkedKeys = ref<string[]>([]);
 const selectKeys = ref<string[]>([]);
diff --git a/src/views/DataCollect/Collector/Point/Scan/index.vue b/src/views/DataCollect/Collector/Point/Scan/index.vue
index 93a81a92..4922d4c7 100644
--- a/src/views/DataCollect/Collector/Point/Scan/index.vue
+++ b/src/views/DataCollect/Collector/Point/Scan/index.vue
@@ -71,7 +71,6 @@ const handleOk = async () => {
             accessModes: item.accessModes?.value || [],
         };
     });
-    console.log(1112, props.data, data, list);
     const resp = await savePointBatch([...list]);
     if (resp.status === 200) {
         emit('change', true);
diff --git a/src/views/DataCollect/Collector/Point/index.vue b/src/views/DataCollect/Collector/Point/index.vue
index 0b00f255..6320d2df 100644
--- a/src/views/DataCollect/Collector/Point/index.vue
+++ b/src/views/DataCollect/Collector/Point/index.vue
@@ -98,18 +98,14 @@
                     </template>
                     <template #action>
                         <div class="card-box-action">
-                            <a>
-                                <j-popconfirm
-                                    title="确定删除？"
-                                    @confirm="handlDelete(slotProps.id)"
-                                >
-                                    <AIcon type="DeleteOutlined" />
-                                </j-popconfirm>
-                            </a>
-                            <a
-                                ><AIcon
-                                    @click="handlEdit(slotProps)"
-                                    type="FormOutlined"
+                            <j-popconfirm
+                                title="确定删除？"
+                                @confirm="handlDelete(slotProps.id)"
+                            >
+                                <a><AIcon type="DeleteOutlined" /></a>
+                            </j-popconfirm>
+                            <a @click="handlEdit(slotProps)"
+                                ><AIcon type="FormOutlined"
                             /></a>
                         </div>
                     </template>
@@ -125,28 +121,63 @@
                     <template #content>
                         <div class="card-box-content">
                             <div class="card-box-content-left">
-                                <span>--</span>
-                                <a
-                                    v-if="
-                                        getAccessModes(slotProps).includes(
-                                            'write',
-                                        )
-                                    "
-                                    ><AIcon
+                                <div class="card-box-content-left-1">
+                                    <div
+                                        class="ard-box-content-left-1-title"
+                                        v-if="propertyValue.has(slotProps.id)"
+                                    >
+                                        <j-ellipsis style="max-width: 150px">
+                                            {{
+                                                propertyValue.get(slotProps.id)
+                                                    ?.parseData[0] || 0
+                                            }}({{
+                                                propertyValue.get(slotProps.id)
+                                                    ?.dataType
+                                            }})
+                                        </j-ellipsis>
+                                    </div>
+
+                                    <span v-else>--</span>
+                                    <a
+                                        v-if="
+                                            getAccessModes(slotProps).includes(
+                                                'write',
+                                            )
+                                        "
                                         @click.stop="clickEdit(slotProps)"
-                                        type="EditOutlined"
-                                /></a>
-                                <a
-                                    v-if="
-                                        getAccessModes(slotProps).includes(
-                                            'read',
-                                        )
-                                    "
-                                    ><AIcon
+                                        ><AIcon type="EditOutlined"
+                                    /></a>
+                                    <a
+                                        v-if="
+                                            getAccessModes(slotProps).includes(
+                                                'read',
+                                            )
+                                        "
                                         @click.stop="clickRedo(slotProps)"
-                                        type="RedoOutlined"
-                                /></a>
+                                        ><AIcon type="RedoOutlined"
+                                    /></a>
+                                </div>
+                                <div
+                                    v-if="propertyValue.has(slotProps.id)"
+                                    class="card-box-content-right-2"
+                                >
+                                    <p>
+                                        {{
+                                            propertyValue.get(slotProps.id)
+                                                ?.hex || ''
+                                        }}
+                                    </p>
+                                    <p>
+                                        {{
+                                            moment(
+                                                propertyValue.get(slotProps.id)
+                                                    ?.timestamp,
+                                            ).format('YYYY-MM-DD HH:mm:ss')
+                                        }}
+                                    </p>
+                                </div>
                             </div>
+
                             <div class="card-box-content-right">
                                 <div
                                     v-if="getRight1(slotProps)"
@@ -207,6 +238,9 @@ import SaveOPCUA from './Save/SaveOPCUA.vue';
 import Scan from './Scan/index.vue';
 import { colorMap, getState } from '../data.ts';
 import { cloneDeep } from 'lodash-es';
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+import moment from 'moment';
 
 const props = defineProps({
     data: {
@@ -215,7 +249,6 @@ const props = defineProps({
     },
 });
 
-const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const opcImage = getImage('/DataCollect/device-opcua.png');
@@ -242,7 +275,6 @@ const defaultParams = ref({
                 {
                     column: 'collectorId',
                     value: collectorId.value,
-                    // value: '1610517928766550016', //测试
                 },
             ],
         },
@@ -332,6 +364,9 @@ const columns = [
     },
 ];
 
+const subRef = ref();
+const propertyValue = ref(new Map());
+
 const handlAdd = () => {
     visible.saveModBus = true;
     current.value = {
@@ -431,6 +466,7 @@ const cancelSelect = () => {
 };
 
 const handleClick = (dt: any) => {
+    if (props.data?.provider !== 'OPC_UA') return;
     if (_selectedRowKeys.value.includes(dt.id)) {
         const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
         _selectedRowKeys.value.splice(_index, 1);
@@ -439,6 +475,32 @@ const handleClick = (dt: any) => {
     }
 };
 
+const subscribeProperty = (value: any) => {
+    const list = value.map((item: any) => item.id);
+    const id = `collector-${props.data?.channelId || 'channel'}-${
+        props.data?.id || 'point'
+    }-data-${list.join('-')}`;
+    const topic = `/collector/${props.data?.channelId || '*'}/${
+        props.data?.id || '*'
+    }/data`;
+    subRef.value = getWebSocket(id, topic, {
+        pointId: list.join(','),
+    })
+        ?.pipe(map((res) => res.payload))
+        .subscribe((payload: any) => {
+            propertyValue.value.set(payload.pointId, payload);
+        });
+};
+
+watch(
+    () => tableRef?.value?._dataSource,
+    (value) => {
+        if (value.length !== 0) {
+            subscribeProperty(value);
+        }
+    },
+);
+
 watch(
     () => props.data,
     (value) => {
@@ -451,13 +513,19 @@ watch(
                           value: 'subscribe',
                       });
             defaultParams.value.terms[0].terms[0].value = value.id;
-            // defaultParams.value.terms[0].terms[0].value = '1610517928766550016'; //测试
             tableRef?.value?.reload && tableRef?.value?.reload();
+            cancelSelect();
         }
     },
     { immediate: true, deep: true },
 );
 
+onUnmounted(() => {
+    if (subRef.value) {
+        subRef.value?.unsubscribe();
+    }
+});
+
 /**
  * 搜索
  * @param params
@@ -492,12 +560,22 @@ const handleSearch = (e: any) => {
         margin-top: 10px;
         display: flex;
         .card-box-content-left {
-            flex: 0.2;
+            // flex: 0.2;
+            max-width: 220px;
             border-right: 1px solid #e0e4e8;
             height: 68px;
-            padding-right: 20px;
-            display: flex;
-            justify-content: flex-start;
+            padding-right: 10px;
+            .card-box-content-left-1 {
+                display: flex;
+                justify-content: flex-start;
+                .card-box-content-left-1-title {
+                    color: #000;
+                    font-size: 20px;
+                    opacity: 0.85;
+                }
+            }
+
+            // justify-content: space-between;
             a {
                 margin-left: 10px;
             }
diff --git a/src/views/DataCollect/Collector/data.ts b/src/views/DataCollect/Collector/data.ts
index 75c218a2..b349f2a1 100644
--- a/src/views/DataCollect/Collector/data.ts
+++ b/src/views/DataCollect/Collector/data.ts
@@ -174,7 +174,6 @@ export const FormTableColumns = [
         title: '操作',
         key: 'action',
         dataIndex: 'action',
-
         fixed: 'right',
         width: 80,
     },