feat: 设备-详情-三个设备类型（燃气、水表、电表）增加上报功能

史婷婷 · gesilong
1 parent 1dd4c89f
Showing 4 changed files with 116 additions and 10 deletions
.env.development
src/locales/lang/en/business.ts
src/locales/lang/zh-CN/business.ts
src/views/device/list/cpns/tabs/ModelOfMatter.vue
--- a/.env.development
View file @c8dcf09
+++ b/.env.development
View file @c8dcf09
@@ -6,12 +6,12 @@ VITE_GLOB_PUBLIC_PATH = /
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-
+# https://iot.hzzlyun.com 线上生产地址
 # 本地
-VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
+VITE_PROXY = [["/api","https://iot.hzzlyun.com/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
 # 实时数据的ws地址
-VITE_GLOB_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
+VITE_GLOB_WEB_SOCKET = wss://iot.hzzlyun.com/api/ws/plugins/telemetry?token=
 # Delete console
 VITE_GLOB_DROP_CONSOLE = true
--- a/src/locales/lang/en/business.ts
View file @c8dcf09
+++ b/src/locales/lang/en/business.ts
View file @c8dcf09
@@ -28,5 +28,6 @@ export default {
   historyTrendText: 'History trend',
   commandDeliveryText: 'Command delivery',
   serviceText: 'Service',
+  reportText: 'Report',
   dateRangeText: 'Date range',
 };
--- a/src/locales/lang/zh-CN/business.ts
View file @c8dcf09
+++ b/src/locales/lang/zh-CN/business.ts
View file @c8dcf09
@@ -30,6 +30,7 @@ export default {
   historyTrendText: '历史趋势',
   commandDeliveryText: '命令下发',
   serviceText: '服务',
+  reportText: '上报',
   dateRangeText: '时间范围',
   directorName: '负责人',
 };
--- a/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @c8dcf09
+++ b/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @c8dcf09
 <script lang="ts" setup>
   import { nextTick, onMounted, onUnmounted, reactive, ref, unref, computed } from 'vue';
-  import { List, Card, Tooltip, Space, PaginationProps } from 'ant-design-vue';
+  import { List, Card, Tooltip, Space, PaginationProps, InputNumber } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns } from '../../config/detail.config';
@@ -12,7 +12,7 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import HistoryData from './HistoryData.vue';
   import { BasicModal, useModal } from '/@/components/Modal';
-  import { getDeviceAttrs } from '/@/api/device/deviceManager';
+  import { getDeviceAttrs, getDeviceToken } from '/@/api/device/deviceManager';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { isArray, isNull, isNullOrUnDef, isObject } from '/@/utils/is';
   import { useGlobSetting } from '/@/hooks/setting';
@@ -37,6 +37,8 @@
   } from './ModelOfMatter.config';
   import { useJsonParse } from '/@/hooks/business/useJsonParse';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { defHttp } from '/@/utils/http/axios';
+  
   interface ReceiveMessage {
     data: {
@@ -46,6 +48,41 @@
   const { t } = useI18n();
+  const reportDeviceKeyMap = {
+    GC: '燃气设备',
+    WU: '水表设备',
+    EC: '电表设备',
+  } as const;
+
+  const reportDeviceKeys = Object.keys(reportDeviceKeyMap);
+
+  type ReportDeviceKey = keyof typeof reportDeviceKeyMap;
+
+  const reportFormModel = reactive<Record<ReportDeviceKey, number | undefined>>({
+    GC: undefined,
+    WU: undefined,
+    EC: undefined,
+  });
+
+  const currentReportKey = ref<ReportDeviceKey | ''>('');
+
+  const currentReportLabel = computed(() => {
+    const key = unref(currentReportKey);
+    return key ? reportDeviceKeyMap[key] : '';
+  });
+
+  const currentReportValue = computed<number | undefined>({
+    get() {
+      const key = unref(currentReportKey);
+      return key ? reportFormModel[key] : undefined;
+    },
+    set(value) {
+      const key = unref(currentReportKey);
+      if (!key) return;
+      reportFormModel[key] = value;
+    },
+  });
+
   const props = defineProps<{
     deviceDetail: DeviceRecord;
   }>();
@@ -197,6 +234,8 @@
   }
   const [registerModal, { openModal }] = useModal();
+  const [registerReportModal, { openModal: openReportModal, closeModal: closeReportModal }] =
+    useModal();
   const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
@@ -291,6 +330,40 @@
     openModal(true);
   };
+  const handleReport = (record: SocketInfoDataSourceItemType) => {
+    const { key } = record;
+    if (!reportDeviceKeys.includes(key)) return;
+    currentReportKey.value = key as ReportDeviceKey;
+    openReportModal(true);
+  };
+
+  const handleReportSave = async () => {
+    const key = unref(currentReportKey);
+    if (!key) return;
+    const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
+    console.log('token.credentialsId', token.credentialsId);
+    console.log('handleReportSave', { key, value: reportFormModel[key] });
+    // https://iot.hzzlyun.com/api/v1/HPlEWlrVPNlAbZ6WQpn2/telemetry
+    // 入参
+    const data = { [key]: reportFormModel[key] };
+    const credentialsId = token.credentialsId;
+    // 写一个接口请求，固定链接，不依赖token https://iot.hzzlyun.com/api/v1/${credentialsId}/telemetry
+    await defHttp.post(
+      {
+        url: `https://iot.hzzlyun.com/api/v1/${credentialsId}/telemetry`,
+        data,
+      },
+      {
+        joinPrefix: false,
+        apiUrl: '',
+        withToken: false,
+      }
+    );
+
+    createMessage.success('保存成功');
+    closeReportModal();
+  };
+
   const getIsModbusDevice = computed(
     () =>
       props.deviceDetail.transportType === TransportTypeEnum.TCP &&
@@ -307,21 +380,21 @@
     open();
   });
-  const formatValue = (item: SocketInfoDataSourceItemType) => {
+  const formatValue = (item: SocketInfoDataSourceItemType): string => {
     if (isNullOrUnDef(item) || isNullOrUnDef(item.value)) return '--';
     if (unref(getIsModbusDevice) && item.type === DataTypeEnum.BOOL) {
       const _result = Reflect.get(item.enum || {}, item.value as string);
-      return isNullOrUnDef(_result) ? item.value : _result;
+      return isNullOrUnDef(_result) ? String(item.value) : String(_result);
     }
     switch (item.type) {
       case DataTypeEnum.BOOL:
-        return !!Number(item.value) ? item.boolOpen! : item.boolClose!;
+        return !!Number(item.value) ? (item.boolOpen ?? '--') : (item.boolClose ?? '--');
       case DataTypeEnum.ENUM:
-        return item.enum?.[item.value as string];
+        return item.enum?.[item.value as string] ?? '--';
       default:
-        return item.value || '--';
+        return String(item.value ?? '--');
     }
   };
@@ -429,6 +502,22 @@
                       @click="handleShowDetail(item)"
                     />
                   </Tooltip>
+                  <!-- 上报按钮 显示判断 -->
+                   <!-- 燃气设备 GC-->
+                   <!-- 水表设备 WU-->
+                   <!-- 电表设备 EC-->
+                  <Tooltip :title="t('business.reportText')"
+                  v-if="reportDeviceKeys.includes(item.key)"
+                  >
+                    <SvgIcon
+                      name="shuiwen"
+                      prefix="iconfont"
+                      class="cursor-pointer text-lg text-blue-500"
+                      @click="handleReport(item)"
+                    />
+                  </Tooltip>
+
+                      
                 </Space>
               </template>
               <section class="min-h-16 flex flex-col justify-between">
@@ -513,6 +602,21 @@
     >
       <HistoryData :deviceDetail="props.deviceDetail" :attr="socketInfo.attr" />
     </BasicModal>
+    <BasicModal
+      @register="registerReportModal"
+      :title="`${t('business.reportText')}`"
+      width="40%"
+      :minHeight="0"
+      :bodyStyle="{ padding: '12px 16px' }"
+      destroy-on-close
+      okText="提交"
+      @ok="handleReportSave"
+    >
+      <div class="p-1 flex items-center gap-2">
+        <div class="w-20 text-right whitespace-nowrap">{{ currentReportLabel }}</div>
+        <InputNumber v-model:value="currentReportValue" class="flex-1 w-full" size="small" />
+      </div>
+    </BasicModal>
     <ObjectModelCommandDeliveryModal
       @register="register"
       :deviceId="deviceDetail.tbDeviceId"