简柏林 / thingskit-scada · Commits

Commit d2512d27672d64aa2e5684d6072276a41d01b372

Authored by ww
1 parent 65e24b17

perf: 水流组件新增流动速度设置

Inline Side-by-side
Showing 5 changed files with 72 additions and 50 deletions
@@ -158,6 +158,7 @@ export interface RangeItemType { @@ -158,6 +158,7 @@ export interface RangeItemType {
158 title?: string 158 title?: string
159 label?: string 159 label?: string
160 imageInfo?: ImageSelectorDataType 160 imageInfo?: ImageSelectorDataType
  161 + flowSpeed?: number
161 } 162 }
162 163
163 export interface BasicActDataType { 164 export interface BasicActDataType {
@@ -2,7 +2,7 @@ import type { FormSchema } from '@/components/Form' @@ -2,7 +2,7 @@ import type { FormSchema } from '@/components/Form'
2 import { ComponentEnum } from '@/components/Form/src/enum' 2 import { ComponentEnum } from '@/components/Form/src/enum'
3 import type { BasicColumn } from '@/components/Table' 3 import type { BasicColumn } from '@/components/Table'
4 import type { CommandWayEnum } from '@/enums/commandEnum' 4 import type { CommandWayEnum } from '@/enums/commandEnum'
5 -import type { CodeTypeEnum, ContentDataFieldsEnum, DeviceTypeEnum } from '@/enums/datasource' 5 +import { ActTypeEnum, type CodeTypeEnum, type ContentDataFieldsEnum, type DeviceTypeEnum } from '@/enums/datasource'
6 export enum TableColumnFieldEnum { 6 export enum TableColumnFieldEnum {
7 DEVICE_ID = 'deviceId', 7 DEVICE_ID = 'deviceId',
8 WAY = 'way', 8 WAY = 'way',
@@ -39,48 +39,39 @@ export const getFormSchemas = (): FormSchema[] => { @@ -39,48 +39,39 @@ export const getFormSchemas = (): FormSchema[] => {
39 export const tableColumns = (event: string | number): BasicColumn[] => { 39 export const tableColumns = (event: string | number): BasicColumn[] => {
40 const columns = [ 40 const columns = [
41 { 41 {
  42 + title: '类型',
  43 + key: 'type',
  44 + dataIndex: 'type',
  45 + ifShow: event === ActTypeEnum.DISPLAY || event === ActTypeEnum.DYNAMIC,
  46 + },
  47 + {
42 title: '最小值(>=)', 48 title: '最小值(>=)',
43 - // width: 200,  
44 key: 'min', 49 key: 'min',
45 dataIndex: 'min', 50 dataIndex: 'min',
46 }, 51 },
47 { 52 {
48 title: '最大值(<=)', 53 title: '最大值(<=)',
49 - // width: 200,  
50 key: 'max', 54 key: 'max',
51 dataIndex: 'max', 55 dataIndex: 'max',
52 }, 56 },
53 { 57 {
  58 + title: '流速',
  59 + key: 'flowSpeed',
  60 + dataIndex: 'flowSpeed',
  61 + ifShow: event === ActTypeEnum.DYNAMIC,
  62 + },
  63 + {
  64 + title: '标签',
  65 + key: 'title',
  66 + dataIndex: 'title',
  67 + ifShow: event === ActTypeEnum.DISPLAY,
  68 + },
  69 + {
54 title: '操作', 70 title: '操作',
55 fixed: 'right', 71 fixed: 'right',
56 key: 'action', 72 key: 'action',
57 }, 73 },
58 ] as BasicColumn[] 74 ] as BasicColumn[]
59 - // if (event !== 'DISPLAY' && event !== 'DYNAMIC') {  
60 - // const values = columns.filter(item => (item.key !== 'type' && item.key !== 'label'))  
61 - // return values  
62 - // }  
63 - if (event === 'DISPLAY') {  
64 - const values = [{  
65 - title: '类型',  
66 - key: 'type',  
67 - dataIndex: 'type',  
68 - }, ...columns, {  
69 - title: '标签',  
70 - key: 'title',  
71 - dataIndex: 'title',  
72 - }]  
73 - return values  
74 - }  
75 -  
76 - if (event === 'DYNAMIC') {  
77 - const values = [{  
78 - title: '类型',  
79 - key: 'type',  
80 - dataIndex: 'type',  
81 - }, ...columns]  
82 - return values  
83 - }  
84 75
85 return columns 76 return columns
86 } 77 }
@@ -174,6 +174,9 @@ defineExpose<ComponentExposeType>({ @@ -174,6 +174,9 @@ defineExpose<ComponentExposeType>({
174 <template v-if="column.key === 'title' && getDesign.event === ActTypeEnum.DISPLAY"> 174 <template v-if="column.key === 'title' && getDesign.event === ActTypeEnum.DISPLAY">
175 <Input v-model:value="record.title" placeholder="请输入标签" class="!w-full" /> 175 <Input v-model:value="record.title" placeholder="请输入标签" class="!w-full" />
176 </template> 176 </template>
  177 + <template v-if="column.key === 'flowSpeed' && getDesign.event === ActTypeEnum.DYNAMIC">
  178 + <InputNumber v-model:value="record.flowSpeed" placeholder="请输入流速" class="!w-full" />
  179 + </template>
177 <template v-if="column.key === 'action'"> 180 <template v-if="column.key === 'action'">
178 <TableAction 181 <TableAction
179 :actions="[ 182 :actions="[
@@ -8,6 +8,33 @@ import type { RenderComponentExposeType } from '@/core/Library/types' @@ -8,6 +8,33 @@ import type { RenderComponentExposeType } from '@/core/Library/types'
8 import type { DisplayActDataType, DynamicActDataType, FlashActDataType, RotateActDataType } from '@/api/node/model' 8 import type { DisplayActDataType, DynamicActDataType, FlashActDataType, RotateActDataType } from '@/api/node/model'
9 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue' 9 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
10 10
  11 +enum ActAnimationName {
  12 + /**
  13 + * @description 闪烁
  14 + */
  15 + FLASH = 'act-flash',
  16 +
  17 + /**
  18 + * @description 旋转
  19 + */
  20 + ROTATE = 'act-spin',
  21 +
  22 + /**
  23 + * @description 显示
  24 + */
  25 + VISIBLE = 'act-visible',
  26 +
  27 + /**
  28 + * @description 隐藏
  29 + */
  30 + HIDDEN = 'act-hidden',
  31 +
  32 + /**
  33 + * @description 流动
  34 + */
  35 + FLOW = 'water-flow-animation',
  36 +}
  37 +
11 export class DataDynamicEffectHandler { 38 export class DataDynamicEffectHandler {
12 constructor(public service: LightboxModeWebsocketService) { 39 constructor(public service: LightboxModeWebsocketService) {
13 } 40 }
@@ -31,12 +58,12 @@ export class DataDynamicEffectHandler { @@ -31,12 +58,12 @@ export class DataDynamicEffectHandler {
31 const cell = this.nodeUtils.getCellById(node) 58 const cell = this.nodeUtils.getCellById(node)
32 if (!cell) return 59 if (!cell) return
33 const { attr } = data as FlashActDataType 60 const { attr } = data as FlashActDataType
34 - const { latestValue } = useLatestMessageValue(message.data, attr) 61 + const { latestValue } = useLatestMessageValue(message.data, attr!)
35 const { flag } = getMeetTheConditionsRange((data as FlashActDataType).rangeList, latestValue) 62 const { flag } = getMeetTheConditionsRange((data as FlashActDataType).rangeList, latestValue)
36 63
37 const nodeEl = this.nodeUtils.getNodesForCells<SVGAElement>([cell]) 64 const nodeEl = this.nodeUtils.getNodesForCells<SVGAElement>([cell])
38 65
39 - const FLASH_ANIMATION = 'act-flash infinite 1.5s' 66 + const FLASH_ANIMATION = `${ActAnimationName.FLASH} infinite 1.5s`
40 nodeEl.forEach((item: SVGAElement) => { 67 nodeEl.forEach((item: SVGAElement) => {
41 if (flag) 68 if (flag)
42 this.setNodeAnimation(item, FLASH_ANIMATION) 69 this.setNodeAnimation(item, FLASH_ANIMATION)
@@ -50,21 +77,21 @@ export class DataDynamicEffectHandler { @@ -50,21 +77,21 @@ export class DataDynamicEffectHandler {
50 const cell = this.nodeUtils.getCellById(node) 77 const cell = this.nodeUtils.getCellById(node)
51 if (!cell) return 78 if (!cell) return
52 const { attr } = data as DisplayActDataType 79 const { attr } = data as DisplayActDataType
53 - const { latestValue } = useLatestMessageValue(message.data, attr) 80 + const { latestValue } = useLatestMessageValue(message.data, attr!)
54 const { flag, record } = getMeetTheConditionsRange((data as DisplayActDataType).rangeList, latestValue) 81 const { flag, record } = getMeetTheConditionsRange((data as DisplayActDataType).rangeList, latestValue)
55 if (flag) { 82 if (flag) {
56 const nodeEl = this.nodeUtils.getNodesForCells([cell]) 83 const nodeEl = this.nodeUtils.getNodesForCells([cell])
57 const { type } = record! 84 const { type } = record!
58 if (type === ActRangListItemTypeEnum.SHOW) { 85 if (type === ActRangListItemTypeEnum.SHOW) {
59 nodeEl.forEach((node) => { 86 nodeEl.forEach((node) => {
60 - node.classList.add('act-visible')  
61 - node.classList.remove('act-hidden') 87 + node.classList.add(ActAnimationName.VISIBLE)
  88 + node.classList.remove(ActAnimationName.HIDDEN)
62 }) 89 })
63 } 90 }
64 else if (type === ActRangListItemTypeEnum.HIDDEN) { 91 else if (type === ActRangListItemTypeEnum.HIDDEN) {
65 nodeEl.forEach((node) => { 92 nodeEl.forEach((node) => {
66 - node.classList.remove('act-visible')  
67 - node.classList.add('act-hidden') 93 + node.classList.remove(ActAnimationName.VISIBLE)
  94 + node.classList.add(ActAnimationName.HIDDEN)
68 }) 95 })
69 } 96 }
70 } 97 }
@@ -75,11 +102,11 @@ export class DataDynamicEffectHandler { @@ -75,11 +102,11 @@ export class DataDynamicEffectHandler {
75 const cell = this.nodeUtils.getCellById(node) 102 const cell = this.nodeUtils.getCellById(node)
76 if (!cell) return 103 if (!cell) return
77 const { attr } = data as RotateActDataType 104 const { attr } = data as RotateActDataType
78 - const { latestValue } = useLatestMessageValue(message.data, attr) 105 + const { latestValue } = useLatestMessageValue(message.data, attr!)
79 const { flag } = getMeetTheConditionsRange((data as RotateActDataType).rangeList, latestValue) 106 const { flag } = getMeetTheConditionsRange((data as RotateActDataType).rangeList, latestValue)
80 const nodeEl = this.nodeUtils.getNodesForCells<SVGAElement>([cell]) 107 const nodeEl = this.nodeUtils.getNodesForCells<SVGAElement>([cell])
81 108
82 - const ROTATE_ANIMATION = 'act-spin infinite 2s' 109 + const ROTATE_ANIMATION = `${ActAnimationName.ROTATE} infinite 2s`
83 const cellState = this.nodeUtils.getCellState(cell) 110 const cellState = this.nodeUtils.getCellState(cell)
84 const { x, y, width, height } = cellState.cellBounds 111 const { x, y, width, height } = cellState.cellBounds
85 nodeEl.forEach((item: SVGAElement) => { 112 nodeEl.forEach((item: SVGAElement) => {
@@ -98,17 +125,17 @@ export class DataDynamicEffectHandler { @@ -98,17 +125,17 @@ export class DataDynamicEffectHandler {
98 const cell = this.nodeUtils.getCellById(node) 125 const cell = this.nodeUtils.getCellById(node)
99 if (!cell) return 126 if (!cell) return
100 const { attr } = data as DynamicActDataType 127 const { attr } = data as DynamicActDataType
101 - const { latestValue } = useLatestMessageValue(message.data, attr) 128 + const { latestValue } = useLatestMessageValue(message.data, attr!)
102 const { flag, record } = getMeetTheConditionsRange((data as DynamicActDataType).rangeList, latestValue) 129 const { flag, record } = getMeetTheConditionsRange((data as DynamicActDataType).rangeList, latestValue)
103 -  
104 const nodeEl = this.nodeUtils.getNodeForCell<SVGAElement>(cell) 130 const nodeEl = this.nodeUtils.getNodeForCell<SVGAElement>(cell)
105 if (flag) { 131 if (flag) {
106 const { type } = record! 132 const { type } = record!
107 - if (type === ActRangListItemTypeEnum.RUN)  
108 - (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement).classList.add('water-flow-animation')  
109 -  
110 - else  
111 - (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement).classList.remove('water-flow-animation') 133 + if (type === ActRangListItemTypeEnum.RUN) {
  134 + const element = (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement)
  135 + element.classList.add(ActAnimationName.FLOW)
  136 + element.style.animationDuration = `${record?.flowSpeed || 1}s`
  137 + }
  138 + else { (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement).classList.remove(ActAnimationName.FLOW) }
112 } 139 }
113 } 140 }
114 141
@@ -17,8 +17,8 @@ export const prodMode = 'production' @@ -17,8 +17,8 @@ export const prodMode = 'production'
17 * @example: 17 * @example:
18 */ 18 */
19 export function getEnv(): string { 19 export function getEnv(): string {
20 - // return import.meta.env?.MODE  
21 - return window.PROJECT_ENV.mode 20 + return import.meta.env?.MODE
  21 + // return window.PROJECT_ENV.mode
22 } 22 }
23 23
24 /** 24 /**
@@ -27,8 +27,8 @@ export function getEnv(): string { @@ -27,8 +27,8 @@ export function getEnv(): string {
27 * @example: 27 * @example:
28 */ 28 */
29 export function isDevMode(): boolean { 29 export function isDevMode(): boolean {
30 - // return import.meta.env?.DEV  
31 - return getEnv() === 'development' 30 + return import.meta.env?.DEV
  31 + // return getEnv() === 'development'
32 } 32 }
33 33
34 /** 34 /**
@@ -37,8 +37,8 @@ export function isDevMode(): boolean { @@ -37,8 +37,8 @@ export function isDevMode(): boolean {
37 * @example: 37 * @example:
38 */ 38 */
39 export function isProdMode(): boolean { 39 export function isProdMode(): boolean {
40 - // return import.meta.env.PROD  
41 - return getEnv() === 'production' 40 + return import.meta.env.PROD
  41 + // return getEnv() === 'production'
42 } 42 }
43 43
44 export function isLightboxMode(): boolean { 44 export function isLightboxMode(): boolean {