feat: 新增图片演示功能

src/pages/system/previews/index.less

+.tab-preview {
+  width: 100%;
+  position: relative;
+
+  .oper-wrap {
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    z-index: 2;
+
+    .oper-btn {
+      cursor: pointer;
+      color: #FFF;
+      position: absolute;
+      top: 10px;
+      right: -100%;
+      transition: right ease-in-out 0.8s;
+    }
+
+    &:hover {
+      .oper-btn {
+        right: 20px;
+      }
+    }
+  }
+}
+
+.tab-preview.normal-img {
+  overflow: hidden;
+  height: 100%;
+}
+
+.tab-preview.long-img {
+  overflow: auto;
+}

src/pages/system/previews/preview.js

+import React, { useEffect, useState } from 'react';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { notification } from 'antd';
+import Empty from '@wisdom-components/empty';
+import classnames from 'classnames';
+import { cloudService } from '@/api';
+import useFullScreen from '../iframe/useFullScreen';
+import styles from './index.less';
+
+const PrevieView = props => {
+  const params = Object.assign({}, props.params, {
+    fullscreen: props.params !== undefined && props.params.fullscreen === 'true',
+    canScroll: props.params !== undefined && props.params.longImg === 'true',
+  });
+  const { imgName, accountName, fullscreen, canScroll } = params;
+  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(fullscreen);
+  const [imgUrl, setImgUrl] = useState('');
+
+  const getImgUrl = () => {
+    cloudService
+      .getAccountPageList({
+        pageIndex: 1,
+        pageSize: 5,
+        sortFields: '录入时间',
+        direction: 'desc',
+        info: imgName,
+        accountName,
+      })
+      .then(res => {
+        const configData = JSON.parse(res.data.jsonData || '[]');
+        if (configData.length > 0 && configData[0]['演示图片']) {
+          const url = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${
+            configData[0]['演示图片']
+          }&_site=${window.globalConfig?.userInfo?.site}`;
+          setImgUrl(url);
+        }
+      })
+      .catch(err => {
+        notification.error({ message: '提示', duration: 3, description: '获取图片信息错误' });
+      });
+  };
+
+  useEffect(() => {
+    getImgUrl();
+  }, [getImgUrl]);
+
+  return (
+    <div className={classnames(styles['tab-preview'], canScroll ? styles['long-img'] : styles['normal-img'])} ref={ref}>
+      <div className={styles['oper-wrap']}>
+        <div className={styles['oper-btn']}>
+          {isFullscreen ? (
+            <FullscreenExitOutlined className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} />
+          ) : (
+            <FullscreenOutlined className={styles['btn-fullscreen']} onClick={handleFullScreen} />
+          )}
+        </div>
+      </div>
+
+      {imgUrl ? (
+        <img src={imgUrl} display="block" position="relative" alt="演示图片" />
+      ) : (
+        <Empty description="配置图片台账才能显示哦！" />
+      )}
+    </div>
+  );
+};
+
+export default PrevieView;

src/routes/config.js

+import React from 'react';
 import { UserLayout } from '@wisdom-utils/components/lib/AppLayout';
 import LoadingComponent from '@wisdom-utils/components/lib/AppLayout/components/PageLoading';
 import { dynamic } from '@wisdom-utils/runtime';
@@ -12,6 +13,7 @@ import Login from '../pages/user/login';
 import NoSecret from '../pages/user/login/noSecret';
 import Notifications from '../pages/system/notifications';
 import TabIframe from '../pages/system/iframe/TabWidget';
+import PrevieView from '../pages/system/previews/preview';
 
 export const dyRoutes = (routes, layout, theme) => {
   // eslint-disable-next-line no-shadow
@@ -31,9 +33,9 @@ export const dyRoutes = (routes, layout, theme) => {
             component: Login,
             props: {
               onEnter(props) {
-                console.log("login props", props)
-              }
-            }
+                console.log('login props', props);
+              },
+            },
           },
           {
             name: 'noscret',
@@ -93,10 +95,13 @@ export const dyRoutes = (routes, layout, theme) => {
             render: ({ routeConfig }) => {
               const { path } = routeConfig || {};
               if (/system\/iframe\/tabWidget/.test(path)) {
-                return <TabIframe { ...routeConfig }/>
-              }
+                return <TabIframe {...routeConfig} />;
               }
+              if (/system\/previews\/preview/.test(path)) {
+                return <PrevieView {...routeConfig} />;
               }
+            },
+          },
         ],
       },