简柏林 / thingskit-scada · Commits

Commit be102f67cf9e8379565a56488234b4bbfe7bef7e

Authored by ww
1 parent a2cad97c

wip: implement basic static method

Inline Side-by-side
Showing 4 changed files with 281 additions and 27 deletions
1 -<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16">  
2 - <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>  
3 -</svg>  
  1 +<svg t="1658817586206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2458" width="200" height="200"><path d="M764 252H260C116.4 252 0 368.4 0 512s116.4 260 260 260h504c143.6 0 260-116.4 260-260S907.6 252 764 252z m0 484c-123.7 0-224-100.3-224-224s100.3-224 224-224 224 100.3 224 224-100.3 224-224 224z" p-id="2459" fill="#cdcdcd"></path></svg>
1 -<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#3399ff" class="bi bi-toggle-on" viewBox="0 0 16 16">  
2 - <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>  
3 -</svg> 1 +<svg t="1658817615716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2845" width="200" height="200"><path d="M764 252H260C116.4 252 0 368.4 0 512s116.4 260 260 260h504c143.6 0 260-116.4 260-260S907.6 252 764 252zM260 736C136.3 736 36 635.7 36 512s100.3-224 224-224 224 100.3 224 224-100.3 224-224 224z" p-id="2846" fill="#1296db"></path></svg>
@@ -313,7 +313,7 @@ @@ -313,7 +313,7 @@
313 /** 313 /**
314 * @descrpiton 开关 状态设置 314 * @descrpiton 开关 状态设置
315 */ 315 */
316 - SWTICH_STATE_SETTING: 'stateSetting' 316 + SWITCH_STATE_SETTING: 'stateSetting'
317 } 317 }
318 318
319 /** 319 /**
@@ -670,7 +670,7 @@ @@ -670,7 +670,7 @@
670 //更多图形，显示出来的的标题跟id，同时包括图片 670 //更多图形，显示出来的的标题跟id，同时包括图片
671 671
672 // TODO thingsKit 设置数据绑定展示面板 672 // TODO thingsKit 设置数据绑定展示面板
673 - const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWTICH_STATE_SETTING } = this.enumPermissionPanel 673 + const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING } = this.enumPermissionPanel
674 const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH } = this.enumComponentType 674 const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH } = this.enumComponentType
675 this.setComponentPermission(LINE, [DYNAMIC_EFFECT]) 675 this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
676 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT]) 676 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
@@ -681,7 +681,7 @@ @@ -681,7 +681,7 @@
681 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND]) 681 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
682 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND]) 682 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
683 this.setComponentPermission(VIDEO, [VIDEO_PANEL]) 683 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
684 - this.setComponentPermission(SWITCH, [DATA_SOURCE, SWTICH_STATE_SETTING]) 684 + this.setComponentPermission(SWITCH, [SWITCH_STATE_SETTING])
685 685
686 var thingskitEntries = [ 686 var thingskitEntries = [
687 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' }, 687 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
@@ -4991,7 +4991,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -4991,7 +4991,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4991 ACT: 'act', 4991 ACT: 'act',
4992 EVENT: 'event', 4992 EVENT: 'event',
4993 DATA_SOURCE: 'dataSources', 4993 DATA_SOURCE: 'dataSources',
4994 - FUNCTION: 'function',  
4995 } 4994 }
4996 4995
4997 const enumInteractionType = { 4996 const enumInteractionType = {
@@ -5006,9 +5005,9 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5006,9 +5005,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5006 FLASH: 'FLASH', 5005 FLASH: 'FLASH',
5007 ROTATE: 'ROTATE', 5006 ROTATE: 'ROTATE',
5008 IMAGE: 'IMAGE', 5007 IMAGE: 'IMAGE',
  5008 + SWITCH: 'SWITCH'
5009 } 5009 }
5010 5010
5011 -  
5012 const interactionList = [ 5011 const interactionList = [
5013 { 5012 {
5014 label: "按下", 5013 label: "按下",
@@ -5050,14 +5049,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5050,14 +5049,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5050 } 5049 }
5051 ]; 5050 ];
5052 5051
5053 - // const functionList = [  
5054 - // {  
5055 - // label: '设置变量值图片',  
5056 - // type: enumFunctionType.VAR_IMAGE,  
5057 - // category: enumCategory.FUNCTION,  
5058 - // },  
5059 - // ]  
5060 -  
5061 const enumDataSourceConst = { 5052 const enumDataSourceConst = {
5062 ORG_ID: 'orgId', 5053 ORG_ID: 'orgId',
5063 DEVICE_ID: 'deviceId', 5054 DEVICE_ID: 'deviceId',
@@ -5128,19 +5119,24 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5128,19 +5119,24 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5128 [permissionKey.INTERACTION]: createInteractionPanel, 5119 [permissionKey.INTERACTION]: createInteractionPanel,
5129 [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel, 5120 [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
5130 [permissionKey.VAR_IMAGE]: createVarImagePanel, 5121 [permissionKey.VAR_IMAGE]: createVarImagePanel,
5131 - [permissionKey.VIDEO]: createVideoBindPanel 5122 + [permissionKey.VIDEO]: createVideoBindPanel,
  5123 + [permissionKey.SWITCH_STATE_SETTING]: createSwitchStateSettingPanel,
5132 } 5124 }
5133 5125
5134 5126
5135 function permissionRender() { 5127 function permissionRender() {
5136 - const cell = vertices[0]  
5137 - const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)  
5138 - const needDisplayPanel = sidebarInstance.getComponentPermission(permission)  
5139 - for (const key of needDisplayPanel) {  
5140 - renderMapping[key]() 5128 + try {
  5129 + const cell = vertices[0]
  5130 + const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
  5131 + const needDisplayPanel = sidebarInstance.getComponentPermission(permission)
  5132 + for (const key of needDisplayPanel) {
  5133 + renderMapping[key]()
  5134 + }
  5135 + if (needDisplayPanel.length) createSubmitPanel()
  5136 + UseLayUi.nextTick(() => form.render())
  5137 + } catch (e) {
  5138 + throw Error('component permission setting has some problem, please check your component permission bind on "Sidebar.prototype.init" method setComponentPermission')
5141 } 5139 }
5142 - if (needDisplayPanel.length) createSubmitPanel()  
5143 - UseLayUi.nextTick(() => form.render())  
5144 } 5140 }
5145 5141
5146 permissionRender() 5142 permissionRender()
@@ -5377,6 +5373,19 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5377,6 +5373,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5377 } 5373 }
5378 5374
5379 /** 5375 /**
  5376 + * @description 创建开关组件的状态设置面板
  5377 + */
  5378 + function createSwitchStateSettingPanel() {
  5379 + dynamicEffectList.length = 0
  5380 + dynamicEffectList.push({
  5381 + label: '状态设置',
  5382 + type: enumDynamicEffectType.SWITCH,
  5383 + category: enumCategory.ACT,
  5384 + })
  5385 + createDynamicEffectPanel()
  5386 + }
  5387 +
  5388 + /**
5380 * @description 是否是折线图 5389 * @description 是否是折线图
5381 * @param {boolean} isLineChart 5390 * @param {boolean} isLineChart
5382 */ 5391 */
@@ -7272,12 +7281,15 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7272,12 +7281,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7272 'lay-submit': '', 7281 'lay-submit': '',
7273 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER, 7282 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
7274 }) 7283 })
  7284 +
  7285 + // render data source tree
7275 const { 7286 const {
7276 component, 7287 component,
7277 echoDataSource, 7288 echoDataSource,
7278 } = generatorDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' }) 7289 } = generatorDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
7279 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component) 7290 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
7280 form.render() 7291 form.render()
  7292 +
7281 const info = getLayerBindInfo('act', type) 7293 const info = getLayerBindInfo('act', type)
7282 const { condition = [], enabled } = info 7294 const { condition = [], enabled } = info
7283 Object.assign(recordData, { enabled }) 7295 Object.assign(recordData, { enabled })
@@ -7308,6 +7320,250 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7308,6 +7320,250 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7308 7320
7309 } 7321 }
7310 7322
  7323 +
  7324 + /**
  7325 + * @description
  7326 + * @param {} event
  7327 + */
  7328 + function handleStateSetting(event) {
  7329 +
  7330 + const enumActionEl = {
  7331 + DATA_SOURCE_COMP_EL: 'stateDataSource',
  7332 + TABLE_BODY_EL: 'stateTableBodyEl',
  7333 + LAYER_SUBMIT_FILTER: 'stateSettingSubmitFilter',
  7334 + ENABLE_FILTER: 'enableFilter',
  7335 + CLOSE_FILTER: 'closeFilter',
  7336 + SET_IMG_EL: 'variableImageTableSetImgEl',
  7337 + PREVIEW_IMG_CONTAINER: 'img__container',
  7338 + DEL_PREVIEW_IMG: 'img__delete',
  7339 + }
  7340 +
  7341 + const enumConst = {
  7342 +
  7343 + TYPE: 'type',
  7344 +
  7345 + /**
  7346 + * @description 开启类型
  7347 + */
  7348 + ENABLE_TYPE: 'enable',
  7349 +
  7350 + /**
  7351 + * @description 关闭类型
  7352 + */
  7353 + CLOSE_TYPE: 'close',
  7354 +
  7355 + /**
  7356 + * @description 图片来源
  7357 + */
  7358 + IMAGE_ORIGIN: 'imageOrigin',
  7359 +
  7360 + /**
  7361 + * @description 图库图形类别
  7362 + */
  7363 + IMAGE_GALLERY_CATEGORY: 'category',
  7364 +
  7365 + /**
  7366 + * @description 图表图形路径
  7367 + */
  7368 + IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
  7369 +
  7370 + /**
  7371 + * @description 状态设置 值
  7372 + */
  7373 + VALUE: 'value'
  7374 + }
  7375 +
  7376 + const {
  7377 + component,
  7378 + echoDataSource,
  7379 + getValue,
  7380 + } = generatorDataSourceComponent()
  7381 +
  7382 + const recordData = {
  7383 + enabled: false
  7384 + }
  7385 +
  7386 + const StateDefaultValue = {
  7387 + enable: {
  7388 + [enumConst.TYPE]: enumConst.ENABLE_TYPE,
  7389 + [enumConst.IMAGE_ORIGIN]: 'gallery',
  7390 + [enumConst.IMAGE_GALLERY_CATEGORY]: 'switch',
  7391 + [enumConst.IMAGE_GALLERY_IMAGE_PATH]: `${Proxy_Prefix}/images/thingskit/switch-on.svg`,
  7392 + },
  7393 + close: {
  7394 + [enumConst.TYPE]: enumConst.CLOSE_TYPE,
  7395 + [enumConst.IMAGE_ORIGIN]: 'gallery',
  7396 + [enumConst.IMAGE_GALLERY_CATEGORY]: 'switch',
  7397 + [enumConst.IMAGE_GALLERY_IMAGE_PATH]: `${Proxy_Prefix}/images/thingskit/switch-off.svg`,
  7398 + }
  7399 + }
  7400 +
  7401 + function generatorEventListenner() {
  7402 + $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
  7403 + if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
  7404 + const rowFilter = $(event.target).parents('tr').attr('lay-filter')
  7405 + // createUploadImgLayer(rowFilter)
  7406 + generatorUploadLayerComponent((imageState) => {
  7407 +
  7408 + $(`#${enumActionEl.TABLE_BODY_EL}`)
  7409 + .find(`tr[lay-filter="${rowFilter}"]`)
  7410 + .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
  7411 +
  7412 + form.val(rowFilter, {
  7413 + [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
  7414 + [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
  7415 + [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
  7416 + })
  7417 + })
  7418 + })
  7419 + }
  7420 +
  7421 + function addRecord(filter, state, defaultValue) {
  7422 + return `
  7423 + <tr class="layui-form" lay-filter="${filter}">
  7424 + <td>
  7425 + ${state}
  7426 + </td>
  7427 + <td>
  7428 + <div class="layui-form-item">
  7429 + <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-filter="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" />
  7430 + </div>
  7431 + </td>
  7432 + <td>
  7433 + <div class="${enumActionEl.SET_IMG_EL}">
  7434 + <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
  7435 + <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
  7436 + <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
  7437 + <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
  7438 + <img src="" alt="">
  7439 + <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
  7440 + <div class="add__button">+</div>
  7441 + </div>
  7442 + </div>
  7443 + </td>
  7444 + </tr>`
  7445 + }
  7446 +
  7447 + /**
  7448 + * @descrition 回显数据
  7449 + */
  7450 + function echoData(info = {}) {
  7451 + const { condition = [] } = info
  7452 + echoDataSource(info)
  7453 +
  7454 + condition.forEach(item => {
  7455 + if (item[enumConst.TYPE] === enumConst.ENABLE_TYPE) {
  7456 + setRowFormValue(enumActionEl.ENABLE_FILTER, item)
  7457 + } else if (item[enumConst.TYPE] === enumConst.CLOSE_TYPE) {
  7458 + setRowFormValue(enumActionEl.CLOSE_FILTER, item)
  7459 + }
  7460 + })
  7461 +
  7462 + form.render()
  7463 + }
  7464 +
  7465 + /**
  7466 + * @description 初始化数据
  7467 + */
  7468 + function initialData() {
  7469 + setRowFormValue(enumActionEl.ENABLE_FILTER, StateDefaultValue.enable)
  7470 + setRowFormValue(enumActionEl.CLOSE_FILTER, StateDefaultValue.close)
  7471 + }
  7472 +
  7473 + function setRowFormValue(formFilter, value = {}) {
  7474 + form.val(formFilter, value)
  7475 + $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${formFilter}"] .${enumActionEl.SET_IMG_EL} img`).attr('src', value[enumConst.IMAGE_GALLERY_IMAGE_PATH])
  7476 + }
  7477 +
  7478 + async function submit(callback) {
  7479 + const enableValue = form.val(enumActionEl.ENABLE_FILTER)
  7480 + const closeValue = form.val(enumActionEl.CLOSE_FILTER)
  7481 + const formVal = getValue()
  7482 + const formModel = {
  7483 + configurationId,
  7484 + contentId: currentPageId.id,
  7485 + ...formVal,
  7486 + id: graphId,
  7487 + condition: [enableValue, closeValue],
  7488 + type: event.data.type,
  7489 + ...recordData
  7490 + }
  7491 + await to(autoSaveGraphInfo())
  7492 + const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
  7493 + if (err) return
  7494 + UseLayUi.successMsg()
  7495 + callback()
  7496 + }
  7497 +
  7498 + function createLayerForm(type) {
  7499 + const content = `
  7500 + <div id="${enumActionEl.DATA_SOURCE_COMP_EL}" style="width: 300px;"></div>
  7501 + <table class="layui-table">
  7502 + <colgroup>
  7503 + <col width="150">
  7504 + <col width="150">
  7505 + <col>
  7506 + </colgroup>
  7507 + <thead>
  7508 + <tr>
  7509 + <th>状态</th>
  7510 + <th>值</th>
  7511 + <th>展示图片</th>
  7512 + </tr>
  7513 + </thead>
  7514 + <tbody id="${enumActionEl.TABLE_BODY_EL}">
  7515 + ${addRecord(enumActionEl.ENABLE_FILTER, '开启')}
  7516 + ${addRecord(enumActionEl.CLOSE_FILTER, '关闭')}
  7517 + </tbody>
  7518 + </table>`
  7519 +
  7520 + layer.open({
  7521 + title: '状态设置',
  7522 + content,
  7523 + skin: 'event-layer__override',
  7524 + btn: ['保存', '取消'],
  7525 + offset: '100px',
  7526 + area: '500px',
  7527 + success(layero) {
  7528 + $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
  7529 + 'lay-submit': '',
  7530 + 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
  7531 + })
  7532 +
  7533 + // render data source
  7534 + $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
  7535 + form.render()
  7536 +
  7537 + const info = getLayerBindInfo('act', type)
  7538 + const { condition = [], enabled } = info
  7539 + Object.assign(recordData, { enabled })
  7540 + if (info && condition.length) {
  7541 + echoData(info)
  7542 + } else {
  7543 + initialData()
  7544 + }
  7545 +
  7546 +
  7547 + generatorEventListenner()
  7548 + initialData()
  7549 + },
  7550 + yes(index) {
  7551 + form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
  7552 + submit(() => {
  7553 + layer.close(index)
  7554 + getNodeBindInfo()
  7555 + })
  7556 + })
  7557 + },
  7558 + btn2() {
  7559 +
  7560 + },
  7561 + })
  7562 + }
  7563 +
  7564 + createLayerForm(event.data.type)
  7565 + }
  7566 +
7311 /** 7567 /**
7312 * @description 生成数据源组件 7568 * @description 生成数据源组件
7313 * @param {object} options 7569 * @param {object} options
@@ -7848,6 +8104,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7848,6 +8104,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7848 $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, proxyFn(handleDataDynamicEffect)); 8104 $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, proxyFn(handleDataDynamicEffect));
7849 $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, proxyFn(handleDataDynamicEffect)); 8105 $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, proxyFn(handleDataDynamicEffect));
7850 $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, proxyFn(handleDataDynamicEffect)); 8106 $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, proxyFn(handleDataDynamicEffect));
  8107 +
  8108 + $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
7851 }); 8109 });
7852 }; 8110 };
7853 8111