Merge branch 'perf/main_dev' into 'main_dev'

perf: 优化告警列表组件,少于十条数据时不滚动

See merge request yunteng/thingskit-scada!162

@@ -110,7 +110,7 @@
             fill: none;
             fill: none;
             stroke: white;
             stroke: white;
             stroke-dasharray: 6% 29%;
             stroke-dasharray: 6% 29%;
-            stroke-width: 5px;
+            stroke-width: 3px;
             stroke-dashoffset: 0%;
             stroke-dashoffset: 0%;
             animation: stroke-offset 5.5s infinite linear;
             animation: stroke-offset 5.5s infinite linear;
         }
         }

 import type { DeviceAttributeItemType, DeviceItemType, DeviceProfileItemType, OrganizationItemType, RpcCommandType, SendValue, ThingsModel, ThingsModelItemType } from './model'
 import type { DeviceAttributeItemType, DeviceItemType, DeviceProfileItemType, OrganizationItemType, RpcCommandType, SendValue, ThingsModel, ThingsModelItemType } from './model'
-import type { CommandWayEnum } from '@/enums/commandEnum'
+import { CommandWayEnum } from '@/enums/commandEnum'
 import type { DeviceTypeEnum } from '@/enums/datasource'
 import type { DeviceTypeEnum } from '@/enums/datasource'
 import { isShareMode } from '@/utils/env'
 import { isShareMode } from '@/utils/env'
 import { defHttp } from '@/utils/http'
 import { defHttp } from '@/utils/http'
@@ -15,6 +15,7 @@ enum Api {
   RPC_COMMAND = '/rpc/',
   RPC_COMMAND = '/rpc/',
   GET_DEVICE_ACTIVE = 'plugins/telemetry/DEVICE/',
   GET_DEVICE_ACTIVE = 'plugins/telemetry/DEVICE/',
   RPC_ONEWAY = '/rpc/oneway',
   RPC_ONEWAY = '/rpc/oneway',
+  RPC_TWOWAY = '/rpc/twoway',
 
 
   GEN_MODBUS_COMMAND = '/js/modbus',
   GEN_MODBUS_COMMAND = '/js/modbus',
   GET_DEVICE_DETAIL = '/device/', // 获取设备详情
   GET_DEVICE_DETAIL = '/device/', // 获取设备详情
@@ -88,9 +89,9 @@ export const getDeviceActive = (deviceId: string) => {
 }
 }
 
 
 // 命令下发
 // 命令下发
-export const sendRpcOneway = (param: SendValue | any, deviceId?: string) => {
+export const sendRpcOneway = (param: SendValue | any, deviceId?: string, way?: string) => {
   return defHttp.post({
   return defHttp.post({
-    url: `${Api.RPC_ONEWAY}/${deviceId}`,
+    url: `${way !== CommandWayEnum.TWO_WAY ? Api.RPC_ONEWAY : Api.RPC_TWOWAY}/${deviceId}`,
     data: param,
     data: param,
   },
   },
   {
   {

@@ -161,11 +161,13 @@ export interface RangeItemType {
 }
 }
 
 
 export interface BasicActDataType {
 export interface BasicActDataType {
-  deviceId: string
-  attr: string
+  deviceId?: string
+  attr?: string
   enable?: boolean
   enable?: boolean
   deviceProfileId?: string | number
   deviceProfileId?: string | number
+  deviceProfileTemplateId?: string | number
   attrInfo?: ThingsModelItemType
   attrInfo?: ThingsModelItemType
+  deviceInfo?: DeviceTypeEnum
 }
 }
 
 
 export interface FlashActDataType extends BasicActDataType {
 export interface FlashActDataType extends BasicActDataType {

@@ -53,9 +53,9 @@ const getTitle = computed(() => {
         </p>
         </p>
       </div>
       </div>
     </template>
     </template>
-    <span :class="prefixCls">
+    <span :class="prefixCls" class="flex items-center">
       <component :is="slot as RendererElement" v-if="slots?.default" />
       <component :is="slot as RendererElement" v-if="slots?.default" />
-      <Icon v-if="!slots?.default" icon="ph:question" class="svg:text-base" />
+      <Icon v-if="!slots?.default" icon="ph:question" class="cursor-pointer text-base" />
     </span>
     </span>
   </Tooltip>
   </Tooltip>
 </template>
 </template>

@@ -253,7 +253,7 @@ export default defineComponent({
         return renderLabel
         return renderLabel
 
 
       return (
       return (
-        <span>
+        <span class='flex items-center'>
           {renderLabel}
           {renderLabel}
           <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
           <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
         </span>
         </span>

@@ -79,7 +79,6 @@ const handleDeleteRow = (data: FlashActDataType) => {
 
 
 const getFieldsValue = () => {
 const getFieldsValue = () => {
   const values = getFieldsForm()
   const values = getFieldsForm()
-  const { deviceId, attr, deviceProfileId, attrInfo } = values
   const rangeList = unref(dataSource).map((item) => {
   const rangeList = unref(dataSource).map((item) => {
     return {
     return {
       ...item,
       ...item,
@@ -87,17 +86,14 @@ const getFieldsValue = () => {
     }
     }
   })
   })
   return {
   return {
-    deviceId,
-    attr,
-    deviceProfileId,
-    attrInfo,
+    ...values,
     rangeList,
     rangeList,
   } as BasicFlashActDataType
   } as BasicFlashActDataType
 }
 }
 
 
 const setFieldsValue = (list: FlashActDataType) => {
 const setFieldsValue = (list: FlashActDataType) => {
-  const { attr, deviceId, rangeList } = list || {}
-  setFieldsForm({ attr, deviceId })
+  const { rangeList } = list || {}
+  setFieldsForm(list || {})
   clearValidate()
   clearValidate()
   dataSource.value = rangeList ? rangeList?.map(item => ({ ...item, uuid: buildUUID() })) : [getInitTableRecord()]
   dataSource.value = rangeList ? rangeList?.map(item => ({ ...item, uuid: buildUUID() })) : [getInitTableRecord()]
 }
 }

@@ -128,3 +128,14 @@ defineExpose<ComponentExposeType>({
     </template>
     </template>
   </BasicTable>
   </BasicTable>
 </template>
 </template>
+
+<style lang="less" scoped>
+  .variable-image-form {
+    >:deep(.ant-row) {
+      >.ant-col {
+        @apply px-4;
+      }
+    }
+  }
+</style>
+

@@ -11,6 +11,7 @@ import { genModbusCommand, getDeviceActiveTime, getDeviceInfo, getThingsModelSer
 import { ThingsModelForm } from '@/core/Library/components/ThingsModelForm'
 import { ThingsModelForm } from '@/core/Library/components/ThingsModelForm'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useMessage } from '@/hooks/web/useMessage'
 import type { StructJSON } from '@/api/device/model'
 import type { StructJSON } from '@/api/device/model'
+import { CommandWayEnum } from '@/enums/commandEnum'
 
 
 interface ServiceInfo {
 interface ServiceInfo {
   title?: string
   title?: string
@@ -19,6 +20,7 @@ interface ServiceInfo {
   transportType?: string
   transportType?: string
   callType?: string
   callType?: string
   code?: string
   code?: string
+  way?: string
 }
 }
 
 
 const visible = ref<boolean>(false)
 const visible = ref<boolean>(false)
@@ -49,6 +51,7 @@ const serviceInfo = reactive<ServiceInfo>({
   transportType: '',
   transportType: '',
   callType: '',
   callType: '',
   code: '',
   code: '',
+  way: '', // 单向还是双向
 })
 })
 
 
 const [register, { getFieldsValue, validate, setFieldsValue, updateSchema, setProps }] = useForm({ // 自定义下发值
 const [register, { getFieldsValue, validate, setFieldsValue, updateSchema, setProps }] = useForm({ // 自定义下发值
@@ -88,11 +91,12 @@ const getDeviceDetail = async (deviceId: string) => {
 }
 }
 
 
 const open = async (_data: SingleClickEventDataType) => {
 const open = async (_data: SingleClickEventDataType) => {
+  console.warn(_data, 'data')
   const { operationPassword } = _data || {}
   const { operationPassword } = _data || {}
   dataSourceJson.value = _data.deviceInfo
   dataSourceJson.value = _data.deviceInfo
   isPasswordInfo.value = operationPassword || {}
   isPasswordInfo.value = operationPassword || {}
   // commandWay-->命令下发方式
   // commandWay-->命令下发方式
-  const { commandWay, customCommand, serviceCommand, service, callType } = _data || {}
+  const { commandWay, customCommand, serviceCommand, service, callType, way } = _data || {}
   isCommandWay.value = commandWay
   isCommandWay.value = commandWay
   const { attrInfo, deviceId } = unref(dataSourceJson)
   const { attrInfo, deviceId } = unref(dataSourceJson)
   const { identifier, extensionDesc, detail, name } = attrInfo || {}// 属性信息
   const { identifier, extensionDesc, detail, name } = attrInfo || {}// 属性信息
@@ -110,6 +114,7 @@ const open = async (_data: SingleClickEventDataType) => {
   formField.value = identifier
   formField.value = identifier
   isShowActionType.value = !!actionType // 判断modBUS类型时 物模型是否填写扩展描述
   isShowActionType.value = !!actionType // 判断modBUS类型时 物模型是否填写扩展描述
   serviceInfo.callType = callType // 服务命令调用方式 是同步还是异步
   serviceInfo.callType = callType // 服务命令调用方式 是同步还是异步
+  serviceInfo.way = way || 'oneway' // 命令下发是双向还是单向
 
 
   serviceInfo.transportType = transportType
   serviceInfo.transportType = transportType
   serviceInfo.code = code
   serviceInfo.code = code
@@ -268,7 +273,7 @@ const handleSubmit = async () => {
       persistent: true,
       persistent: true,
       method: 'methodThingskit',
       method: 'methodThingskit',
       params: serviceInfo.transportType !== TransportTypeEnum.TCP && unref(isCommandWay) === CommandDeliveryWayEnum.SERVICE ? { service: unref(sendValue) } : unref(sendValue),
       params: serviceInfo.transportType !== TransportTypeEnum.TCP && unref(isCommandWay) === CommandDeliveryWayEnum.SERVICE ? { service: unref(sendValue) } : unref(sendValue),
-    }, dataSourceJson.value.deviceId)
+    }, dataSourceJson.value.deviceId, serviceInfo.way)
     createMessage.success('命令下发成功')
     createMessage.success('命令下发成功')
     visible.value = false
     visible.value = false
     isInputData.value = false
     isInputData.value = false

@@ -28,7 +28,6 @@ const [registerForm, formActionType] = useForm({
   schemas: formSchemas,
   schemas: formSchemas,
   showActionButtonGroup: false,
   showActionButtonGroup: false,
   layout: FormLayoutEnum.VERTICAL,
   layout: FormLayoutEnum.VERTICAL,
-  labelWidth: 70,
   getPopupContainer: () => document.body,
   getPopupContainer: () => document.body,
   fieldMapToTime: [[AlarmListFieldsEnum.ALARM_LIST_QUERY_DATE, [AlarmListFieldsEnum.START_TIME, AlarmListFieldsEnum.END_TIME], DateFormatEnum.X]],
   fieldMapToTime: [[AlarmListFieldsEnum.ALARM_LIST_QUERY_DATE, [AlarmListFieldsEnum.START_TIME, AlarmListFieldsEnum.END_TIME], DateFormatEnum.X]],
 })
 })
@@ -82,7 +81,7 @@ onMounted(async () => {
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="m-1 w-full">
+  <div class="m-1 w-full alarm-list-config-from">
     <Divider orientation="left" class="!text-sm">
     <Divider orientation="left" class="!text-sm">
       数据绑定
       数据绑定
     </Divider>
     </Divider>
@@ -95,6 +94,14 @@ onMounted(async () => {
   </div>
   </div>
 </template>
 </template>
 
 
-<style>
-
+<style lang="less" scoped>
+// .alarm-list-config-form {
+// :deep(.ant-picker-input.ant-picker-input-active) {
+//   >input {
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     white-space: nowrap;
+//   }
+// }
+// }
 </style>
 </style>

@@ -133,6 +133,14 @@ export const formSchemas: FormSchema[] = [
     label: AlarmListFieldsNameEnum.ALARM_LIST_INTERVAL,
     label: AlarmListFieldsNameEnum.ALARM_LIST_INTERVAL,
     component: ComponentEnum.INPUT_NUMBER,
     component: ComponentEnum.INPUT_NUMBER,
     required: false,
     required: false,
+    componentProps: {
+      min: 0,
+    },
+    renderComponentContent: () => {
+      return {
+        addonAfter: () => '秒',
+      }
+    },
   },
   },
   {
   {
     field: AlarmListFieldsEnum.ALARM_LIST_POLLING,
     field: AlarmListFieldsEnum.ALARM_LIST_POLLING,
@@ -140,5 +148,13 @@ export const formSchemas: FormSchema[] = [
     component: ComponentEnum.INPUT_NUMBER,
     component: ComponentEnum.INPUT_NUMBER,
     defaultValue: 30,
     defaultValue: 30,
     required: false,
     required: false,
+    componentProps: {
+      min: 1,
+    },
+    renderComponentContent: () => {
+      return {
+        addonAfter: () => '秒',
+      }
+    },
   },
   },
 ]
 ]

 <script setup lang="ts">
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
-import { Divider, Tag } from 'ant-design-vue'
+import { Tag } from 'ant-design-vue'
+import { useIntervalFn } from '@vueuse/core'
 import { ScrollList } from './ScrollList'
 import { ScrollList } from './ScrollList'
 import { fetchAlarmList } from '@/api/alarm'
 import { fetchAlarmList } from '@/api/alarm'
 import type { AlarmListItemType } from '@/api/alarm/model'
 import type { AlarmListItemType } from '@/api/alarm/model'
@@ -14,10 +15,6 @@ const props = defineProps<{
   config: CreateComponentType
   config: CreateComponentType
 }>()
 }>()
 
 
-const getCellBounds = computed(
-  () => props.config.cellBounds || { width: 290, height: 230, x: 0, y: 0 },
-)
-
 const contentDataStore = useContentDataStore()
 const contentDataStore = useContentDataStore()
 
 
 const initOptions = reactive<{
 const initOptions = reactive<{
@@ -67,7 +64,7 @@ onMounted(async () => {
     // 预览模式
     // 预览模式
     await initFetchAlarmList()
     await initFetchAlarmList()
     if (initOptions.polling)
     if (initOptions.polling)
-      setInterval(initFetchAlarmList, initOptions.polling * 1000)
+      useIntervalFn(initFetchAlarmList, (initOptions.polling || 30) * 1000)
   }
   }
   else {
   else {
     const statusList = Object.values(AlarmStatusEnum)
     const statusList = Object.values(AlarmStatusEnum)
@@ -90,16 +87,13 @@ onMounted(async () => {
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
     <ScrollList
     <ScrollList
       v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
       v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
-      :limit-scroll-num="10" :is-rem-unit="true" :delay="10" :wheel="true" hover :style="{
-        width: `${getCellBounds.width}px`,
-        height: `${getCellBounds.height}px`,
-      }"
+      :is-rem-unit="true" :delay="10" :wheel="true" hover
     >
     >
-      <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start h-15 px-2">
-        <p class="text-xs">
+      <div v-for="(item, index) in initOptions.alarmList" :key="index" class="flex flex-col items-start p-2 border-gray-600 border-b border-solid border-t-transparent border-l-transparent border-r-transparent">
+        <div class="text-xs mb-2">
           <span>设备:</span>
           <span>设备:</span>
           <span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
           <span class="ml-1">{{ item.deviceAlias || item.deviceName }}</span>
-        </p>
+        </div>
         <div class="flex items-center justify-between -mt-2 text-xs">
         <div class="flex items-center justify-between -mt-2 text-xs">
           <span>时间:</span>
           <span>时间:</span>
           <span class="ml-1">{{ item.startTs }}</span>
           <span class="ml-1">{{ item.startTs }}</span>
@@ -107,19 +101,17 @@ onMounted(async () => {
             {{ AlarmStatusNameEnum[item.status] }}
             {{ AlarmStatusNameEnum[item.status] }}
           </Tag>
           </Tag>
         </div>
         </div>
-        <Divider class="mt-2 divider" />
       </div>
       </div>
     </ScrollList>
     </ScrollList>
   </div>
   </div>
 </template>
 </template>
 
 
 <style scoped lang="less">
 <style scoped lang="less">
-.seamless-scroll::-webkit-scrollbar {
-  display: none;
+.seamless-scroll {
+
+  ::-webkit-scrollbar {
+    display: none;
 
 
-  .divider {
-    height: 0.3px;
-    background-color: black;
   }
   }
 }
 }
 </style>
 </style>