Merge branch 'perf/main_dev' into local_dev_ft

@@ -4,6 +4,8 @@ export interface ProductAndDevice {
   name: string
   profileName?: string
   profileId: string
+  transportType?: string
+  deviceType?: string
   deviceList: {
     deviceId: string
     name: string

@@ -55,8 +55,10 @@ export interface ChartOptionType {
   unit?: string
 }
 
-export interface FlowMeterOptionType {
-
+export interface FlowMeterColorItemType {
+  key: string
+  value: string
+  label: string
 }
 
 export interface VideoOptionType {
@@ -97,10 +99,9 @@ export interface NodeDataDataSourceJsonType {
     deviceProfileId?: string
     label?: string
   }
-  circularFlowMeterOption?: FlowMeterOptionType// 圆形水球图数据暂定any
-  additional?: any// 圆形水球图颜色配置数据暂定any
-  rectFlowMeterOption?: FlowMeterOptionType// 方形水球图颜色配置数据暂定any
-  thermometerOption?: any// 温度计数据暂定any
+  circularFlowMeterOption?: FlowMeterColorItemType[] // 圆形水球图数据暂定any
+  rectFlowMeterOption?: FlowMeterColorItemType[] // 方形水球图颜色配置数据暂定any
+
 }
 
 export interface DeviceCommandListItemType {

@@ -12,6 +12,15 @@ import { ThingsModelForm } from '@/core/Library/components/ThingsModelForm'
 import { useMessage } from '@/hooks/web/useMessage'
 import type { StructJSON } from '@/api/device/model'
 
+interface ServiceInfo {
+  title?: string
+  serviceCommand?: Object
+  inputData?: []
+  transportType?: string
+  callType?: string
+  code?: string
+}
+
 const visible = ref<boolean>(false)
 
 const { createMessage } = useMessage()
@@ -33,12 +42,13 @@ const deviceTitle = ref<string | undefined>()// 设备名称
 
 const isPasswordInfo = ref<{ checked?: boolean; value?: string | number; label?: string }>({})// 是否需要操作密码才进行命令下发
 
-const serviceInfo = reactive<any>({
+const serviceInfo = reactive<ServiceInfo>({
   title: '',
   serviceCommand: {},
   inputData: [],
   transportType: '',
   callType: '',
+  code: '',
 })
 
 const [register, { getFieldsValue, validate, setFieldsValue, updateSchema, setProps }] = useForm({ // 自定义下发值
@@ -64,13 +74,12 @@ const [registerPassword, { getFieldsValue: getPasswordValue, validate: validateP
   labelWidth: 110,
 })
 
-const getServiceInfo = async (deviceProfileId: string, transportType: string, service?: string, serviceCommand?: Recordable) => {
+const getServiceInfo = async (deviceProfileId: string, service?: string, serviceCommand?: Recordable) => {
   isInputData.value = true
   const functionJson: any = await getThingsModelServices(deviceProfileId)
   serviceInfo.inputData = functionJson.filter((item: any) => item.identifier === service)?.[0].functionJson.inputData
   serviceInfo.title = functionJson[0].functionName
   serviceInfo.serviceCommand = serviceCommand
-  serviceInfo.transportType = transportType
 }
 
 // 获取设备信息
@@ -102,11 +111,14 @@ const open = async (_data: SingleClickEventDataType) => {
   isShowActionType.value = !!actionType // 判断modBUS类型时 物模型是否填写扩展描述
   serviceInfo.callType = callType // 服务命令调用方式 是同步还是异步
 
+  serviceInfo.transportType = transportType
+  serviceInfo.code = code
+
   visible.value = true
 
   if (transportType === TransportTypeEnum.TCP) {
     if (commandWay === CommandDeliveryWayEnum.SERVICE) { // 命令下发方式是服务或则自定义调用
-      getServiceInfo(deviceProfileId, transportType, service, serviceCommand)
+      getServiceInfo(deviceProfileId, service, serviceCommand)
     }
     else if (commandWay === CommandDeliveryWayEnum.CUSTOM) { // 自定义
       await nextTick()
@@ -138,7 +150,7 @@ const open = async (_data: SingleClickEventDataType) => {
     isShowModBUS.value = false
 
     // 命令下发方式是服务或则自定义调用
-    if (commandWay === CommandDeliveryWayEnum.SERVICE) { getServiceInfo(deviceProfileId, transportType, service, serviceCommand) }
+    if (commandWay === CommandDeliveryWayEnum.SERVICE) { getServiceInfo(deviceProfileId, service, serviceCommand) }
 
     else if (commandWay === CommandDeliveryWayEnum.CUSTOM) {
       await nextTick()
@@ -173,7 +185,6 @@ const handleSubmit = async () => {
       return
     }
   }
-
   if (serviceInfo.callType === 'SYNC') { // 服务命令调用方式 是同步 需要调用设备是否在线才能下发
     const res = await getDeviceActiveTime(dataSourceJson.value.deviceId)
     const { value } = res
@@ -191,6 +202,11 @@ const handleSubmit = async () => {
         createMessage.warning('当前物模型扩展描述没有填写')
         return
       }
+
+      if (!serviceInfo.code) {
+        createMessage.error('当前缺少设备地址码')
+        return
+      }
       const oldValue = getFieldsValue()[unref(formField)]
       modBUSForm.value.registerNumber = 1
       modBUSForm.value.registerValues = [oldValue]
@@ -237,7 +253,7 @@ const handleSubmit = async () => {
         sendValue.value = values
       }
       else {
-        const values = typeof JSON.parse(getFieldsValue().sendValue) ? JSON.parse(getFieldsValue().sendValue) : getFieldsValue().sendValue || {}
+        const values = serviceInfo.transportType === TransportTypeEnum.TCP ? getFieldsValue().sendValue : JSON.parse(getFieldsValue().sendValue) || {}
         sendValue.value = values
       }
     }

@@ -37,8 +37,6 @@ export const getFormSchemas = (event: EventTypeEnum): FormSchema[] => {
   const { deviceProfileId, deviceInfo } = dataSourceJson || {}
   // transportType:判断是什么类型的设备 code:设备地址码  deviceType:设备类型
   const { transportType, deviceType } = deviceInfo || {}
-  // if (!deviceProfileId)
-  //   createMessage.warn('请先绑定数据源')
 
   return [
     {

 <script setup lang="ts">
 import { ref } from 'vue'
+import type { RenderComponentExposeType } from '@/core/Library/types'
+import { useOnMessage } from '@/core/Library/hook/useOnMessage'
+import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
+import type { CommandSource } from '@/core/websocket/processor'
+import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
+import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 
 const imageSrc = ref('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 2H5a3.009 3.009 0 0 0-3 3v8.86l3.88-3.88a3.075 3.075 0 0 1 4.24 0l2.871 2.887l.888-.888a3.008 3.008 0 0 1 4.242 0L22 15.86V5a3.009 3.009 0 0 0-3-3z" opacity=".5"%2F%3E%3Cpath fill="currentColor" d="M10.12 9.98a3.075 3.075 0 0 0-4.24 0L2 13.86V19a3.009 3.009 0 0 0 3 3h14a3 3 0 0 0 2.16-.92L10.12 9.98z"%2F%3E%3Cpath fill="currentColor" d="m22 15.858l-3.879-3.879a3.008 3.008 0 0 0-4.242 0l-.888.888l8.165 8.209c.542-.555.845-1.3.844-2.076v-3.142z" opacity=".25"%2F%3E%3C%2Fsvg%3E')
-defineExpose()
+
+const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
+  const { data } = commandSource
+  const { attr } = data as NodeDataDataSourceJsonType
+  const { latestValue } = useLatestMessageValue(message.data, attr)
+  imageSrc.value = latestValue
+}
+
+const { onMessage } = useOnMessage({
+  onReceiveDataSourceMessage,
+})
+defineExpose<RenderComponentExposeType>({ onMessage })
 </script>
 
 <template>
   <div class="w-full h-full flex justify-center items-center">
-    <img class="w-50 h-50" :src="imageSrc">
+    <img class="w-full" :src="imageSrc">
   </div>
 </template>

 <script setup lang="ts">
 import { Button, Divider, Space } from 'ant-design-vue'
 import { onMounted, ref, unref } from 'vue'
+import { defaultFlowmetmerColorConfig } from './form.config'
 import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
 import { useNodeData } from '@/core/Library/hook/useNodeData'
 import type { ConfigComponentProps } from '@/core/Library/types'
 import { useMessage } from '@/hooks/web/useMessage'
-import type { NodeDataDataSourceJsonType } from '@/api/node/model'
+import type { FlowMeterColorItemType, NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
-
 const props = defineProps<ConfigComponentProps>()
 
 const { createMessage } = useMessage()
 
 const loading = ref(false)
 
-const colorConfig = ref([
-  {
-    label: '背景色',
-    value: '#8BADCB',
-  },
-  {
-    label: '颜色一',
-    value: '#4579e2',
-  },
-  {
-    label: '颜色二',
-    value: '#3461c1',
-  },
-  {
-    label: '颜色三',
-    value: '#2d55aa',
-  },
-])
+const colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)
 
-const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
+const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })
 
 const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType
 
@@ -57,11 +40,11 @@ const handleSubmit = async () => {
 
 onMounted(async () => {
   await getNodeAllData()
-  if (unref(getNodeData)?.dataSourceJson) {
-    const { circularFlowMeterOption, additional } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
-    colorConfig.value = additional || unref(colorConfig)
-    if (!circularFlowMeterOption) return
-    dataSourceFormRef.value?.setFieldsValue(circularFlowMeterOption)
+  const { dataSourceJson } = unref(getNodeData) || {}
+  if (dataSourceJson) {
+    const { circularFlowMeterOption } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
+    colorConfig.value = circularFlowMeterOption || unref(colorConfig)
+    unref(dataSourceFormRef)?.setFieldsValue(unref(getNodeData)?.dataSourceJson)
   }
 })
 </script>
@@ -69,18 +52,20 @@ onMounted(async () => {
 <template>
   <main class="w-full h-full flex flex-col px-2 py-4 box-border">
     <main class="form-container">
-      <Divider orientation="left">
+      <Divider orientation="left" class="!text-sm">
         数据源
       </Divider>
       <DataSourceForm ref="dataSourceFormRef" />
     </main>
     <main class="form-container mt-2">
-      <Divider orientation="left">
+      <Divider orientation="left" class="!text-sm">
         流量计配置
       </Divider>
       <Space direction="vertical">
-        <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5">
-          <span>{{ item.label }}</span>
+        <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5 flex">
+          <div class="w-20">
+            {{ item.label }}
+          </div>
           <input v-model="item.value" class="ml-3" type="color">
         </div>
       </Space>
@@ -91,3 +76,4 @@ onMounted(async () => {
     </Button>
   </main>
 </template>
+

+import type { FlowMeterColorItemType } from '@/api/node/model'
+
+export enum FormFieldsEnum {
+  BACKGROUND = 'background',
+  COLOR_FIRST = 'colorFirst',
+  COLOR_SECOND = 'colorSecond',
+  COLOR_THIRD = 'colorThird',
+}
+
+export const colorItemName = {
+  [FormFieldsEnum.BACKGROUND]: '背景颜色',
+  [FormFieldsEnum.COLOR_FIRST]: '颜色一',
+  [FormFieldsEnum.COLOR_SECOND]: '颜色二',
+  [FormFieldsEnum.COLOR_THIRD]: '颜色三',
+}
+
+export const defaultFlowmetmerColorConfig: FlowMeterColorItemType[] = [
+  {
+    key: FormFieldsEnum.BACKGROUND,
+    label: colorItemName[FormFieldsEnum.BACKGROUND],
+    value: '#0d396b',
+  },
+  {
+    key: FormFieldsEnum.COLOR_FIRST,
+    label: colorItemName[FormFieldsEnum.COLOR_FIRST],
+    value: '#25498b',
+  },
+  {
+    key: FormFieldsEnum.COLOR_SECOND,
+    label: colorItemName[FormFieldsEnum.COLOR_SECOND],
+    value: '#0d5cb8',
+  },
+  {
+    key: FormFieldsEnum.COLOR_THIRD,
+    label: colorItemName[FormFieldsEnum.COLOR_THIRD],
+    value: '#008adf',
+  },
+]

-const value = 40 // 水球图数据源
-export const defaultOption = {
-  series: [
-    {
-      type: 'liquidFill',
-      radius: '90%',
-      data: [
-        value / 100,
-        {
-          value: (value - 10) / 100,
-          direction: 'left',
+import { FormFieldsEnum, defaultFlowmetmerColorConfig } from './form.config'
+import { isLightboxMode } from '@/utils/env'
+import type { FlowMeterColorItemType } from '@/api/node/model'
+
+export function getSetValue(value: number) {
+  return [
+    value / 100,
+    (value - 10) / 100,
+    (value - 20) / 100,
+  ]
+}
+export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeterColorItemType[] = defaultFlowmetmerColorConfig) => {
+  const colorMap = (isLightboxMode() ? circularFlowMeterOption : defaultFlowmetmerColorConfig).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {} as Record<FormFieldsEnum, string>)
+  return {
+    series: [
+      {
+        type: 'liquidFill',
+        radius: '90%',
+        data: getSetValue(value),
+        color: [colorMap[FormFieldsEnum.COLOR_FIRST], colorMap[FormFieldsEnum.COLOR_SECOND], colorMap[FormFieldsEnum.COLOR_THIRD]],
+        itemStyle: {
+          opacity: 0.6,
         },
-      ],
-      backgroundStyle: {
-        borderWidth: 1,
-        color: 'transparent', // 这里设置背景色
-      },
-      label: {
-        color: '#27e5f1',
-        insideColor: '#f7e8c1',
-        left: '50%',
-        top: '40%',
-        textAlign: 'center',
-        fontSize: 20,
-        fontWeight: 600,
-        textBorderColor: 'rgba(0, 0, 0, 0)',
-        textShadowColor: '#000',
-        textShadowBlur: 0,
-        textShadowOffsetX: 0,
-        textShadowOffsetY: 1,
-      },
-      color: [
-        {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: '#324791', // 这里设置水球波动 0% 处的颜色
-            }, {
-              offset: 1,
-              color: '#449090', // 这里设置水球波动 100% 处的颜色
-            }],
-          global: false,
+        backgroundStyle: {
+          borderWidth: 1,
+          color: colorMap[FormFieldsEnum.BACKGROUND], // 这里设置背景色
         },
-      ],
-      outline: {
-        show: true,
-        borderDistance: 1,
-        itemStyle: {
-          borderWidth: 0,
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 1,
-            y2: 0,
-            colorStops: [
-              {
-                offset: 0, color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
-              },
-              {
-                offset: 1, color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
-              },
-            ],
-            global: false,
+        emphasis: {
+          itemStyle: {
+            opacity: 0.9,
+          },
+        },
+        label: {
+          color: '#fff',
+          insideColor: '#f7e8c1',
+          left: '50%',
+          top: '40%',
+          textAlign: 'center',
+          fontSize: 20,
+          fontWeight: 600,
+          textBorderColor: 'rgba(0, 0, 0, 0)',
+          textShadowColor: '#000',
+          textShadowBlur: 0,
+          textShadowOffsetX: 0,
+          textShadowOffsetY: 1,
+        },
+
+        outline: {
+          show: true,
+          borderDistance: 1,
+          itemStyle: {
+            borderWidth: 0,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 0,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
+                },
+              ],
+              global: false,
+            },
           },
         },
       },
-    },
-  ],
+    ],
+  }
 }

@@ -2,17 +2,22 @@
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import type { ECharts, EChartsOption } from 'echarts'
 import { init } from 'echarts'
-import { defaultOption } from './index.config'
+import { getSetValue, setOption } from './index.config'
 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
 import 'echarts-liquidfill' // 水球图插件
 import { useOnMessage } from '@/core/Library/hook/useOnMessage'
 import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
+import { useContentDataStore } from '@/store/modules/contentData'
 
 const props = defineProps<{
   config: CreateComponentType
 }>()
 
+const contentDataStore = useContentDataStore()
+
+const getCurrentNodeData = computed(() => contentDataStore.contentData.find(item => item.id === props.config.cellInfo?.id))
+
 const getCellBounds = computed(() => props.config.cellBounds || { width: 300, height: 300, x: 0, y: 0 })
 
 const chartElRef = ref<Nullable<HTMLDivElement>>()
@@ -20,8 +25,10 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
 const chartInstance = ref<Nullable<ECharts>>()
 
 function initChartInstance() {
+  const { dataSourceJson } = unref(getCurrentNodeData) || {}
+  const { circularFlowMeterOption } = dataSourceJson || {}
   chartInstance.value = init(unref(chartElRef))
-  chartInstance.value.setOption(defaultOption)
+  chartInstance.value.setOption(setOption(40, circularFlowMeterOption))
 }
 
 const { onMessage } = useOnMessage({
@@ -31,13 +38,7 @@ const { onMessage } = useOnMessage({
     const { latestValue } = useLatestMessageValue(message.data, attr)
     unref(chartInstance)?.setOption({
       series: [{
-        data: [
-          Number(latestValue) / 100,
-          {
-            value: (Number(latestValue) - 10) / 100,
-            direction: 'left',
-          },
-        ],
+        data: getSetValue(Number(latestValue)),
       }],
     } as EChartsOption)
   },

 <script setup lang="ts">
 import { Button, Divider, Space } from 'ant-design-vue'
 import { onMounted, ref, unref } from 'vue'
+import { defaultFlowmetmerColorConfig } from '../CircularFlowMeter/form.config'
 import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
 import { useNodeData } from '@/core/Library/hook/useNodeData'
 import type { ConfigComponentProps } from '@/core/Library/types'
 import { useMessage } from '@/hooks/web/useMessage'
-import type { NodeDataDataSourceJsonType } from '@/api/node/model'
+import type { FlowMeterColorItemType } from '@/api/node/model'
 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
 
 const props = defineProps<ConfigComponentProps>()
@@ -14,24 +15,7 @@ const { createMessage } = useMessage()
 
 const loading = ref(false)
 
-const colorConfig = ref([
-  {
-    label: '背景色',
-    value: '#8BADCB',
-  },
-  {
-    label: '颜色一',
-    value: '#4579e2',
-  },
-  {
-    label: '颜色二',
-    value: '#3461c1',
-  },
-  {
-    label: '颜色三',
-    value: '#2d55aa',
-  },
-])
+const colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)
 
 const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
 
@@ -57,11 +41,11 @@ const handleSubmit = async () => {
 
 onMounted(async () => {
   await getNodeAllData()
-  if (unref(getNodeData)?.dataSourceJson) {
-    const { rectFlowMeterOption, additional } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
-    colorConfig.value = additional || unref(colorConfig)
-    if (!rectFlowMeterOption) return
-    dataSourceFormRef.value?.setFieldsValue(rectFlowMeterOption)
+  const { dataSourceJson } = unref(getNodeData) || {}
+  if (dataSourceJson) {
+    const { rectFlowMeterOption } = dataSourceJson || {}
+    colorConfig.value = rectFlowMeterOption || unref(colorConfig)
+    dataSourceFormRef.value?.setFieldsValue(dataSourceJson)
   }
 })
 </script>
@@ -69,18 +53,20 @@ onMounted(async () => {
 <template>
   <main class="w-full h-full flex flex-col px-2 py-4 box-border">
     <main class="form-container">
-      <Divider orientation="left">
+      <Divider orientation="left" class="!text-sm">
         数据源
       </Divider>
       <DataSourceForm ref="dataSourceFormRef" />
     </main>
     <main class="form-container mt-2">
-      <Divider orientation="left">
+      <Divider orientation="left" class="!text-sm">
         流量计配置
       </Divider>
       <Space direction="vertical">
-        <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5">
-          <span>{{ item.label }}</span>
+        <div v-for="(item, index) in colorConfig" :key="index" class="flex mt-3 ml-5">
+          <div class="w-20">
+            {{ item.label }}
+          </div>
           <input v-model="item.value" class="ml-3" type="color">
         </div>
       </Space>

-const value = 40 // 水球图数据源
-export const defaultOption = {
-  series: [
-    {
-      type: 'liquidFill',
-      shape: 'rect', // 设置水球图形状
-      radius: '90%',
-      data: [
-        value / 100,
-        {
-          value: (value - 10) / 100,
-          direction: 'left',
-        },
-      ],
-      backgroundStyle: {
-        borderWidth: 1,
-        color: 'transparent', // 这里设置背景色
-      },
-      label: {
-        color: '#27e5f1',
-        insideColor: '#f7e8c1',
-        left: '50%',
-        top: '40%',
-        textAlign: 'center',
-        fontSize: 20,
-        fontWeight: '600',
-        textBorderColor: 'rgba(0, 0, 0, 0)',
-        textShadowColor: '#000',
-        textShadowBlur: '0',
-        textShadowOffsetX: 0,
-        textShadowOffsetY: 1,
-      },
-      color: [{
-        type: 'linear',
-        x: 0,
-        y: 0,
-        x2: 1,
-        y2: 1,
-        colorStops: [{
-          offset: 0,
-          color: ['#324791'], // 这里设置水球波动 0% 处的颜色
-        }, {
-          offset: 1,
-          color: ['#449090'], // 这里设置水球波动 100% 处的颜色
-        }],
-        global: false,
-      }],
-      outline: {
-        show: true,
-        borderDistance: 1,
+import { FormFieldsEnum, defaultFlowmetmerColorConfig } from '../CircularFlowMeter/form.config'
+import { isLightboxMode } from '@/utils/env'
+import type { FlowMeterColorItemType } from '@/api/node/model'
+
+export function getSetValue(value: number) {
+  return [
+    value / 100,
+    (value - 10) / 100,
+    (value - 20) / 100,
+  ]
+}
+export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeterColorItemType[] = defaultFlowmetmerColorConfig) => {
+  const colorMap = (isLightboxMode() ? circularFlowMeterOption : defaultFlowmetmerColorConfig).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {} as Record<FormFieldsEnum, string>)
+  return {
+    series: [
+      {
+        type: 'liquidFill',
+        radius: '90%',
+        shape: 'rect', // 设置水球图形状
+        data: getSetValue(value),
+        color: [colorMap[FormFieldsEnum.COLOR_FIRST], colorMap[FormFieldsEnum.COLOR_SECOND], colorMap[FormFieldsEnum.COLOR_THIRD]],
         itemStyle: {
-          borderWidth: 0,
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 1,
-            y2: 0,
-            colorStops: [{
-              offset: 0, color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
-            }, {
-              offset: 1, color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
-            }],
-            global: false,
+          opacity: 0.6,
+        },
+        backgroundStyle: {
+          borderWidth: 1,
+          color: colorMap[FormFieldsEnum.BACKGROUND], // 这里设置背景色
+        },
+        emphasis: {
+          itemStyle: {
+            opacity: 0.9,
+          },
+        },
+        label: {
+          color: '#fff',
+          insideColor: '#f7e8c1',
+          left: '50%',
+          top: '40%',
+          textAlign: 'center',
+          fontSize: 20,
+          fontWeight: 600,
+          textBorderColor: 'rgba(0, 0, 0, 0)',
+          textShadowColor: '#000',
+          textShadowBlur: 0,
+          textShadowOffsetX: 0,
+          textShadowOffsetY: 1,
+        },
+
+        outline: {
+          show: true,
+          borderDistance: 1,
+          itemStyle: {
+            borderWidth: 0,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 0,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
+                },
+              ],
+              global: false,
+            },
           },
         },
       },
-    },
-  ],
+    ],
+  }
 }

@@ -2,17 +2,22 @@
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import type { ECharts, EChartsOption } from 'echarts'
 import { init } from 'echarts'
-import { defaultOption } from './index.config'
+import { getSetValue, setOption } from './index.config'
 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
 import 'echarts-liquidfill' // 水球图插件
-import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useOnMessage } from '@/core/Library/hook/useOnMessage'
+import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
+import { useContentDataStore } from '@/store/modules/contentData'
 
 const props = defineProps<{
   config: CreateComponentType
 }>()
 
+const contentDataStore = useContentDataStore()
+
+const getCurrentNodeData = computed(() => contentDataStore.contentData.find(item => item.id === props.config.cellInfo?.id))
+
 const getCellBounds = computed(() => props.config.cellBounds || { width: 300, height: 300, x: 0, y: 0 })
 
 const chartElRef = ref<Nullable<HTMLDivElement>>()
@@ -20,8 +25,10 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
 const chartInstance = ref<Nullable<ECharts>>()
 
 function initChartInstance() {
+  const { dataSourceJson } = unref(getCurrentNodeData) || {}
+  const { rectFlowMeterOption } = dataSourceJson || {}
   chartInstance.value = init(unref(chartElRef))
-  chartInstance.value.setOption(defaultOption)
+  chartInstance.value.setOption(setOption(40, rectFlowMeterOption))
 }
 
 const { onMessage } = useOnMessage({
@@ -31,13 +38,7 @@ const { onMessage } = useOnMessage({
     const { latestValue } = useLatestMessageValue(message.data, attr)
     unref(chartInstance)?.setOption({
       series: [{
-        data: [
-          Number(latestValue) / 100,
-          {
-            value: (Number(latestValue) - 10) / 100,
-            direction: 'left',
-          },
-        ],
+        data: getSetValue(Number(latestValue)),
       }],
     } as EChartsOption)
   },

@@ -5,7 +5,6 @@ import { DataSourceForm } from '@/core/Library/components/PublicForm/components/
 import { useNodeData } from '@/core/Library/hook/useNodeData'
 import { useMessage } from '@/hooks/web/useMessage'
 import type { ConfigComponentProps } from '@/core/Library/types'
-import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
 
 const props = defineProps<ConfigComponentProps>()
@@ -16,7 +15,7 @@ const loading = ref(false)
 
 const dataSourceFormRef = ref<Nullable<InstanceType<typeof DataSourceForm>>>(null)
 
-const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
+const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })
 
 const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType
 
@@ -38,11 +37,9 @@ const handleSubmit = async () => {
 
 onMounted(async () => {
   await getNodeAllData()
-  if (unref(getNodeData)?.dataSourceJson) {
-    const { thermometerOption } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
-    if (!thermometerOption) return
-    dataSourceFormRef.value?.setFieldsValue(thermometerOption)
-  }
+  const { dataSourceJson } = unref(getNodeData) || {}
+  if (dataSourceJson)
+    dataSourceFormRef.value?.setFieldsValue(dataSourceJson)
 })
 </script>
 

@@ -40,7 +40,7 @@ export class MessageHandler {
       if (!cell) return
       const instanceId = getAppInstanceId(cell)
       const instance = window?.VueInstanceMap?.[instanceId] as App
-      if (instance)
+      if (instance && (instance._instance?.exposed as RenderComponentExposeType)?.onMessage)
         (instance._instance?.exposed as RenderComponentExposeType)?.onMessage?.(commandSource, message)
       else
         this.defaultHandler(commandSource, message)