feat: 组态增加动画、画板跳转增加权限

packages/extend-components/EC_ConfigurationView/src/RealModel.js

@@ -29,6 +29,7 @@ import WaterFlowControlView from './js/WaterFlowControlView';
 import ConfigurationDetail from './js/ConfigurationDetail';
 import DragModal from './js/DragModal';
 import {
+  authorizationToken,
   getSketchPadList,
   getSketchPadContent,
   getPointAddress,
@@ -246,9 +247,43 @@ const ConfigurationView = (props) => {
           break;
         case 'valCase': // 实时值模型
           const division = node.division || false;
-          // 动画翻转
-          if (node.effect)
-            myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.FlipHorizontal);
+          const animType = node.animType || '';
+          // 动画
+          if (node.effect) {
+            try {
+              const nodes = myDiagram.findNodeForKey(node.key);
+              const textBlocks = nodes.findObject('textBlocks');
+              let animation = null;
+              switch (animType) {
+                case 'flip':
+                  myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.FlipHorizontal);
+                  // 动画还原
+                  myTimeout(() => {
+                    myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.None);
+                  }, 100);
+                  break;
+                case 'scale':
+                  animation = new go.Animation();
+                  animation.add(textBlocks, 'scale', 0.5, 1);
+                  animation.duration = 100;
+                  animation.start();
+                  break;
+                case 'opacity':
+                  animation = new go.Animation();
+                  animation.add(textBlocks, 'opacity', 0.5, 1);
+                  animation.duration = 100;
+                  animation.start();
+                  break;
+                default:
+                  myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.FlipHorizontal);
+                  // 动画还原
+                  myTimeout(() => {
+                    myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.None);
+                  }, 100);
+                  break;
+              }
+            } catch (e) {}
+          }
           if (node.shType === '值显示') {
             myDiagram.model.setDataProperty(
               node,
@@ -262,10 +297,6 @@ const ConfigurationView = (props) => {
               division ? realVal.toLocaleString() : realVal,
             );
           }
-          // 动画还原
-          myTimeout(() => {
-            myDiagram.model.setDataProperty(node, 'flip', go.GraphObject.None);
-          }, 100);
           // 颜色规则
           if (node.stateName) return false;
           shRule = ruleOperation(node, realVal);
@@ -1325,7 +1356,7 @@ const ConfigurationView = (props) => {
   };
 
   /** **************************************权限控制确认****************************************** */
-  const defineAutho = (code, tag, node, guid, value) => {
+  const defineAutho = (code, tag, node, guid, value, type) => {
     const { userName, password } = AuthorFrom.current.getFieldsValue(true);
     if (!userName || !password) {
       message.warning('用户名或密码不能为空！');
@@ -1345,18 +1376,18 @@ const ConfigurationView = (props) => {
         code,
         tag,
         value,
-        flag ? value * 1 : '',
+        type === '输入控制' ? value : flag ? value * 1 : '',
       );
   };
 
   /** **************************************权限控制方法****************************************** */
-  const authoMethod = async (code, tag, node, guid, value) => {
+  const authoMethod = async (code, tag, node, guid, value, type) => {
     const { people = '' } = node;
     const userName =
       people === '当前用户' || globalControl ? globalConfig?.userInfo?.loginName || '' : '';
     setCurrentUser(userName);
     setIsAuModalVisible(true);
-    auModalConfirmFn = () => defineAutho(code, tag, node, guid, value);
+    auModalConfirmFn = () => defineAutho(code, tag, node, guid, value, type);
   };
 
   // 查看密码
@@ -1364,6 +1395,40 @@ const ConfigurationView = (props) => {
     setViewType(!viewType);
   };
 
+  /** **************************************跳转权限方法****************************************** */
+  const jumpAuthoMethod = async (people) => {
+    const userName =
+      people === '当前用户' || globalControl ? globalConfig?.userInfo?.loginName || '' : '';
+    setCurrentUser(userName);
+    setIsAuModalVisible(true);
+    auModalConfirmFn = () => jumpAuthoConfirm();
+  };
+
+  // 跳转权限确认
+  const jumpAuthoConfirm = () => {
+    const { userName, password } = AuthorFrom.current.getFieldsValue(true);
+    if (!userName || !password) {
+      message.warning('用户名或密码不能为空！');
+      return false;
+    }
+    authorizationToken({
+      loginName: userName,
+      password: encipher(password).toUpperCase(),
+      type: 'password',
+    })
+      .then((res) => {
+        if (res.code === 0) {
+          setIsAuModalVisible(false);
+          setIsJumpModalVisible(true);
+        } else {
+          message.warning(res?.msg || '权限认证失败，请重试！');
+        }
+      })
+      .catch((err) => {
+        message.warning('权限认证失败，请重试！');
+      });
+  };
+
   /** **************************************开关控制确定****************************************** */
   const defineSwitch = (code, tag, node) => {
     const guid = createGuid();
@@ -1422,7 +1487,7 @@ const ConfigurationView = (props) => {
     const guid = createGuid();
     setIsModalVisible(false);
     if (node.isControl === '是') {
-      authoMethod(code, tag, node, guid, value);
+      authoMethod(code, tag, node, guid, isNumber(value * 1) ? value * 1 : value, '输入控制');
       return false;
     }
     guidAggre[guid] = { tag, code };
@@ -1621,6 +1686,8 @@ const ConfigurationView = (props) => {
     const width = opRule && opRule.width ? opRule.width : '';
     const height = opRule && opRule.height ? opRule.height : '';
     const color = opRule && opRule.color ? opRule.color : '#282d3b';
+    const auth = opRule && opRule.auth ? opRule.auth : false;
+    const people = opRule && opRule.people ? opRule.people : '';
     if (!name) return false;
     const deviceArr = [];
     device.forEach((item) => {
@@ -1637,6 +1704,7 @@ const ConfigurationView = (props) => {
       device: deviceArr,
       color,
     };
+    if (auth) return jumpAuthoMethod(people);
     setIsJumpModalVisible(true);
   };
 
@@ -2553,6 +2621,7 @@ const ConfigurationView = (props) => {
               go.TextBlock,
               textStyle(),
               {
+                name: 'textBlocks',
                 maxSize: new go.Size(NaN, NaN),
                 minSize: new go.Size(NaN, 1),
                 wrap: go.TextBlock.WrapFit,

packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx

+/*
+ * @Author: ljiwen
+ * @Date: 2024-09-19 15:42:23
+ * @Description: 
+ * @FilePath: \wisdom-components\packages\extend-components\EC_ConfigurationView\src\demos\Basic.tsx
+ */
 import React, { useState } from 'react';
 import { Button } from 'antd';
 import PandaConfiguration from '../index';
@@ -52,8 +58,6 @@ const Demo = () => {
 export default Demo;
 
 const globalConfig = {
-  mqtt_account: 'panda',
-  mqtt_password: '6FC08E462A0C87953CD3DB4706462E4B',
   token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
   mqtt_iotIP: 'emqttd10.panda-water.cn:443',
   mqtt_path: '/mqtt',