Merge branch 'ww' into 'main'

feat: add picture component See merge request huang/thingskit-drawio!44

Merge branch 'ww' into 'main'
feat: add picture component See merge request huang/thingskit-drawio!44
xp.Huang
2 parents 4914dbde 10b07ecb
Showing 9 changed files with 67 additions and 25 deletions
src/main/webapp/index.html
src/main/webapp/js/config/config.js
src/main/webapp/js/const/const.js
src/main/webapp/js/diagramly/App.js
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/js/plugin/axios/DefHttp.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/index.html
View file @6d45273
+++ b/src/main/webapp/index.html
View file @6d45273
@@ -22,26 +22,26 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#d89000">
-	<link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1660097025459">
+	<link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1663582316568">
 	<!-- load configure file -->
-	<script src="./js/config/config.js?v=1660097025459"></script>
+	<script src="./js/config/config.js?v=1663582316568"></script>
 	<!-- crypto-js	-->
-	<script src="./js/plugin/crypto-js/crypto-js.js?v=1660097025459"></script>
+	<script src="./js/plugin/crypto-js/crypto-js.js?v=1663582316568"></script>
 	<!-- storage persistent	-->
-	<script src="./js/const/persistentStorage.js?v=1660097025459"></script>
+	<script src="./js/const/persistentStorage.js?v=1663582316568"></script>
 	<!-- Global const -->
-	<script src="./js/const/const.js?v=1660097025459"></script>
+	<script src="./js/const/const.js?v=1663582316568"></script>
 	<!-- Axios	-->
-	<script src="./js/plugin/axios/axios.min.js?v=1660097025459"></script>
-	<script src="./js/plugin/axios/DefHttp.js?v=1660097025459"></script>
-	<script src="./js/api/index.js?v=1660097025459"></script>
+	<script src="./js/plugin/axios/axios.min.js?v=1663582316568"></script>
+	<script src="./js/plugin/axios/DefHttp.js?v=1663582316568"></script>
+	<script src="./js/api/index.js?v=1663582316568"></script>
 	<!-- load script -->
-	<script src="./js/config/loadScript.js?v=1660097025459"></script>
+	<script src="./js/config/loadScript.js?v=1663582316568"></script>
 	<!-- act editor -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
@@ -54,7 +54,7 @@
 	<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> -->
-	<script src="./js/plugin/layui/layui.js?v=1660097025459"></script>
+	<script src="./js/plugin/layui/layui.js?v=1663582316568"></script>
 	<!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
 		integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
 		crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -63,7 +63,7 @@
 		crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
 	<!-- 引入修改样式	-->
-	<link rel="stylesheet" href="./styles/formatChange.css?v=1660097025459">
+	<link rel="stylesheet" href="./styles/formatChange.css?v=1663582316568">
 	<script type="text/javascript">
 		/**
@@ -306,7 +306,7 @@
 				var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
 					(hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
-				const releaseVersion = '1660097025459'
+				const releaseVersion = '1663582316568'
 				const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}`
 				function loadAppJS() {
 					mxscript(appMinSrc, function () {
--- a/src/main/webapp/js/config/config.js
View file @6d45273
+++ b/src/main/webapp/js/config/config.js
View file @6d45273
 /**
  * @description  load script from oss server prefix
  */
-const OSS_Prefix = 'https://oss.yuntengcloud.com/iotdocs/thingskit-scada/'
+const OSS_Prefix = 'https://oss.yuntengcloud.com/iotdocs/thingskit-scada-development/'
 /**
  * @description enable load script form oss server
@@ -12,3 +12,5 @@ const Enable_OSS = true
  * @description 代理配置项
  */
 const Proxy_Prefix = window.location.pathname.startsWith('/') ? window.location.pathname.replace(/\/$/, '') : window.location.pathname
+
+
--- a/src/main/webapp/js/const/const.js
View file @6d45273
+++ b/src/main/webapp/js/const/const.js
View file @6d45273
@@ -21,7 +21,7 @@ const GLOBAL_TOKEN = (() => {
 /**
  * @description 写权限 key
  */
-const CAN_WRITE = 'api:yt:admin:designConfiguration'
+const CAN_WRITE = 'api:yt:configuration:center:get_configuration_info:get'
 const USER_PERMISSION = {
 	permission: []
--- a/src/main/webapp/js/diagramly/App.js
View file @6d45273
+++ b/src/main/webapp/js/diagramly/App.js
View file @6d45273
@@ -4221,8 +4221,8 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	function getUserPermission() {
 		defHttp.get('/yt/role/me/permissions')
 			.then(res => {
-				USER_PERMISSION.permission = res
-				console.log({ USER_PERMISSION })
+				console.log('enter')
+				USER_PERMISSION.permission = res 
 				updateButtonContainer()
 				// var flag = hasSavePermission()
 				// if (!flag) {
@@ -4234,9 +4234,10 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	// 调用API,获取保存的内容
 	function getSaveContent() {
-		defHttp.get('/yt/configuration/center/getConfigurationInfo/' + Editor.configurationId)
-			.then(function (response) {
-				console.log({ response })
+		defHttp.get('/yt/configuration/center/get_configuration_info/' + Editor.configurationId)
+			.then(function (response) { 
+				getUserPermission()
+
 				const { platform } = response || {}
 				const pageSizeControl = PageSetupDialog.getFormats
 				PageSetupDialog.getFormats = function () {
@@ -4281,10 +4282,8 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 					fn();
 				}
-				getUserPermission()
 			})
-			.catch(function (error) {
-				console.log(error);
+			.catch(function (error) { 
 			});
 	}
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @6d45273
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @6d45273
@@ -268,6 +268,11 @@
 		 * @description 开关组件状态 {true | false | null}
 		 */
 		SWITCH_STATE: 'switchState',
+
+		/**
+		 * @description 图片组件
+		 */
+		IMAGE: 'image'
 	}
@@ -717,7 +722,7 @@
 		// TODO thingsKit 设置数据绑定展示面板
 		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DASHBOARD_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT, RUNNING_AND_STOP } = this.enumPermissionPanel
-		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON, DASHBOARD_CHART } = this.enumComponentType
+		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON, DASHBOARD_CHART, IMAGE } = this.enumComponentType
 		this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -730,6 +735,7 @@
 		this.setComponentPermission(VIDEO, [VIDEO_PANEL])
 		this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
 		this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT])
+		this.setComponentPermission(IMAGE, [DATA_SOURCE])
 		var thingskitEntries = [
 			{ title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @6d45273
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @6d45273
@@ -59,6 +59,12 @@
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
 				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
 			})),
+			this.addEntry(this.getTagsForStencil('mxgraph.basic', '图片', 'basic').join(' '), mxUtils.bind(this, function () {
+				const cell = new mxCell(`<img class="basic-component__image" src="${Proxy_Prefix}/images/thingskit/img-placeholder.png" />`, new mxGeometry(0, 0, 190, 190), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+				cell.setVertex(true)
+				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.IMAGE })
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '图片');
+			})),
 		];
 		this.addPaletteFunctions('component', '基础元件', true, fns);
--- a/src/main/webapp/js/grapheditor/Format.js
View file @6d45273
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @6d45273
@@ -5930,7 +5930,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [componentType.DEFAULT]: getSubmitValue,
             [componentType.VIDEO]: getVideoSubmitValue,
             [componentType.SWITCH]: getSwitchSubmitValue,
-            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue
+            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue,
+            [componentType.IMAGE]: getSubmitValue
         }
         const cell = vertices[0]
@@ -13453,6 +13454,11 @@ class HandleDataSource {
                 return
             }
+            if (type === this.componentType.IMAGE) {
+                this.handleImageComponent(message)
+                return
+            }
+
             if (!data) return
             const [[timespan, value]] = data[attr]
             node.setValue(value)
@@ -13508,6 +13514,7 @@ class HandleDataSource {
     handleParamSettingButton(message) {
         const { subscriptionId, data = {} } = message
+        if (!data) return
         const node = this.getNodeByCmdId(subscriptionId)
         const { attr } = this.getBindData(subscriptionId)
         const [[timespan, receiveValue] = []] = data[attr] || []
@@ -13516,6 +13523,16 @@ class HandleDataSource {
         }, node)
     }
+    handleImageComponent(message) {
+        const { subscriptionId, data = {} } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        const { attr } = this.getBindData(subscriptionId)
+        const [[timespan, receiveValue] = []] = data[attr] || []
+        this.updatePage(() => {
+            node.setAttribute('label', `<img class="basic-component__image" alt="图片" src="${receiveValue}" />`)
+        }, node)
+    }
+
     /**
      * @description 更新实时数据
      * @param {} message 
@@ -13821,7 +13838,7 @@ class HandleDataSource {
                     },
                     data: [
                         {
-                            value: 20
+                            value
                         }
                     ]
                 },
--- a/src/main/webapp/js/plugin/axios/DefHttp.js
View file @6d45273
+++ b/src/main/webapp/js/plugin/axios/DefHttp.js
View file @6d45273
@@ -49,6 +49,11 @@ function createAxios(options) {
         doRefreshToken()
       }
+
+      const message = error.response && error.response.data && error.response.data.message
+      const { layer } = layui
+      message && layer.msg(message, { icon: 5 })
+
       return Promise.reject(error);
     }
   );
--- a/src/main/webapp/styles/formatChange.css
View file @6d45273
+++ b/src/main/webapp/styles/formatChange.css
View file @6d45273
@@ -595,3 +595,10 @@
   top: -130px; 
   z-index: 99;
 }
+
+
+/* basic-component */
+.basic-component__image {
+  width: 100%;
+  height: 100%;
+}