简柏林 / thingskit-scada · Commits

Commit 319a27f09e732d80b62fac509b8f919c3cca7a97

Authored by ww
1 parent b351e0d3

feat: implement display panel static style

Inline Side-by-side
Showing 3 changed files with 391 additions and 234 deletions
@@ -184,6 +184,26 @@ @@ -184,6 +184,26 @@
184 CHARTS: 'charts' 184 CHARTS: 'charts'
185 } 185 }
186 186
  187 + Sidebar.prototype.componentDisplayPanelPermissionMap = new Map()
  188 +
  189 + Sidebar.prototype.setComponentPermision = function (conmponentType, permission) {
  190 + this.componentDisplayPanelPermissionMap.set(componentType, permission)
  191 + }
  192 +
  193 + Sidebar.prototype.getComponentPermission = function (componentType) {
  194 + return this.componentDisplayPanelPermissionMap.get(componentType) || []
  195 + }
  196 +
  197 + /**
  198 + * @description 数据面板权限
  199 + */
  200 + Sidebar.prototype.enumPermissionPanel = {
  201 + DATA_SOURCE: 'dataSource',
  202 + DISPLAY_TYPE: 'displayType',
  203 + INTERACTION: 'interaction',
  204 + DYNAMIC_EFFECT: 'dynamicEffect',
  205 + VAR_IMAGE: 'variableImage'
  206 + }
187 207
188 /** 208 /**
189 * 各图形库里面要加载的图形 209 * 各图形库里面要加载的图形
@@ -5093,6 +5093,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5093,6 +5093,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5093 */ 5093 */
5094 async function initNode() { 5094 async function initNode() {
5095 createDataSourcePanel() 5095 createDataSourcePanel()
  5096 + createChartBindPanel()
5096 createInteractionPanel() 5097 createInteractionPanel()
5097 createDynamicEffectPanel() 5098 createDynamicEffectPanel()
5098 createSubmitPanel() 5099 createSubmitPanel()
@@ -5136,224 +5137,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5136,224 +5137,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5136 return eventList 5137 return eventList
5137 } 5138 }
5138 5139
5139 -  
5140 - /**  
5141 - * @description 创建数据源模块  
5142 - */  
5143 - // function createDataSourcePanel() {  
5144 - // const enumActionEl = {  
5145 - // ORG_EL: 'dataSourceOrg',  
5146 - // DEVICE_EL: 'dataSourceDevice',  
5147 - // SLAVE_DEVICE_EL: 'dataSourceSlaveDevice',  
5148 - // ATTR_EL: 'dataSourceAttr',  
5149 - // }  
5150 - //  
5151 - // const fragment = document.createDocumentFragment()  
5152 - // const defaultPanel = createPanel()  
5153 - // const title = createTitle('数据源')  
5154 - // let orgPanel, devicePanel, slaveDevicePanel, attrsPanel;  
5155 - // $(title).addClass('override__title--default')  
5156 - // $(defaultPanel).addClass('override__panel--default')  
5157 - //  
5158 - // /**  
5159 - // * @description 设备列表  
5160 - // */  
5161 - // let deviceList = []  
5162 - //  
5163 - //  
5164 - // /**  
5165 - // * @description 生成组织选择  
5166 - // */  
5167 - // async function generatorOrgTres() {  
5168 - // orgPanel = defaultPanel.cloneNode(false)  
5169 - // const orgContainer = `<div id="${ enumActionEl.ORG_EL }"></div>`  
5170 - // $(orgPanel).append(orgContainer)  
5171 - //  
5172 - // const [ err, res ] = await to(ConfigurationNodeApi.getOrgTree())  
5173 - // if (err) return  
5174 - // treeList = res  
5175 - //  
5176 - // UseLayUi.createTreeSelect({  
5177 - // elem: `#${ enumActionEl.ORG_EL }`,  
5178 - // layFilter: enumDataSourceConst.ORG_ID,  
5179 - // className: 'data-source__org--override',  
5180 - // label: '组织',  
5181 - // singleUsage: false,  
5182 - // treeProps: {  
5183 - // data: treeList,  
5184 - // onlyIconControl: true,  
5185 - // click(node) {  
5186 - // currentCheckedOrgNode = node.data.id  
5187 - // getDevicesByOrgId(node.data.id)  
5188 - // },  
5189 - // },  
5190 - // })  
5191 - // }  
5192 - //  
5193 - //  
5194 - // /**  
5195 - // * @description 生成设备选择器  
5196 - // */  
5197 - // function generatorDeviceSelect() {  
5198 - // devicePanel = defaultPanel.cloneNode(false)  
5199 - // const deviceSelect = UseLayUi.createSelect({  
5200 - // label: '设备',  
5201 - // layFilter: enumDataSourceConst.DEVICE_ID,  
5202 - // className: 'data-panel__select',  
5203 - // })  
5204 - // $(devicePanel).attr('id', enumActionEl.DEVICE_EL).append(deviceSelect)  
5205 - // }  
5206 - //  
5207 - // /**  
5208 - // * @description 生成从设备选择器  
5209 - // */  
5210 - // function generatorSlaveDevice() {  
5211 - // slaveDevicePanel = defaultPanel.cloneNode(false)  
5212 - // const slaveDeviceSelect = UseLayUi.createSelect({  
5213 - // label: '子设备',  
5214 - // layFilter: enumDataSourceConst.SLAVE_DEVICE_ID,  
5215 - // className: 'data-panel__select',  
5216 - // onClick(data) {  
5217 - // const { value } = data  
5218 - // getAttrByDeviceId(value)  
5219 - // },  
5220 - // })  
5221 - // $(slaveDevicePanel).css({ display: 'none' }).attr('id', enumActionEl.SLAVE_DEVICE_EL).append(slaveDeviceSelect)  
5222 - // }  
5223 - //  
5224 - // /**  
5225 - // * @description 生成属性选择器  
5226 - // */  
5227 - // function generatorAttrSelect() {  
5228 - // attrsPanel = defaultPanel.cloneNode(false)  
5229 - // const attrsSelect = UseLayUi.createSelect({  
5230 - // label: '属性',  
5231 - // layFilter: enumDataSourceConst.ATTR,  
5232 - // className: 'data-panel__select',  
5233 - // })  
5234 - // $(attrsPanel).attr('id', enumActionEl.ATTR_EL).append(attrsSelect)  
5235 - //  
5236 - // }  
5237 - //  
5238 - //  
5239 - // /**  
5240 - // * @description 根据组织ID获取设备  
5241 - // */  
5242 - // async function getDevicesByOrgId(organizationId) {  
5243 - // if (organizationId) {  
5244 - // const items = deviceList = await ConfigurationNodeApi.getMasterDevice(organizationId);  
5245 - // $(`#${ enumActionEl.DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))  
5246 - // form.render('select', CONTAINER_FILTER)  
5247 - // }  
5248 - // }  
5249 - //  
5250 - // /**  
5251 - // * @description 通过主设备ID获取从设备  
5252 - // */  
5253 - // async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {  
5254 - // if (deviceId && currentCheckedOrgNode) {  
5255 - // const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);  
5256 - // $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: items }))  
5257 - // form.render('select', CONTAINER_FILTER)  
5258 - // }  
5259 - // }  
5260 - //  
5261 - // /**  
5262 - // * @description 根据设备ID获取属性  
5263 - // */  
5264 - // async function getAttrByDeviceId(tbDeviceId) {  
5265 - // if (tbDeviceId) {  
5266 - // const [ err, res ] = await to(ConfigurationNodeApi.getDeviceAttr(tbDeviceId))  
5267 - // $(`#${ enumActionEl.ATTR_EL }`).find('select').html(UseLayUi.generateOptionTemplate({ dataSource: res }))  
5268 - // form.render('select', CONTAINER_FILTER)  
5269 - // }  
5270 - // }  
5271 - //  
5272 - //  
5273 - // /**  
5274 - // * @description 数据回显  
5275 - // */  
5276 - // async function echoData() {  
5277 - //  
5278 - // echoRefreshFn = () => {  
5279 - // echoDataSource()  
5280 - // echoActionType()  
5281 - // form.render(null, CONTAINER_FILTER)  
5282 - // }  
5283 - //  
5284 - // await getNodeBindInfo()  
5285 - //  
5286 - //  
5287 - // function echoDataSource() {  
5288 - // const { dataSources = [] } = currentNodeData || {}  
5289 - // const [ dataSource = {} ] = dataSources  
5290 - // const { orgId, deviceId, slaveDeviceId, attr } = dataSource  
5291 - // const queue = []  
5292 - // if (orgId) {  
5293 - // currentCheckedOrgNode = orgId  
5294 - // queue.push(getDevicesByOrgId(orgId))  
5295 - // }  
5296 - // if (slaveDeviceId) {  
5297 - // queue.push(getSlaveDeviceByMasterDeviceId(orgId, deviceId))  
5298 - // $(`#${ enumActionEl.SLAVE_DEVICE_EL }`).css({ display: 'block' })  
5299 - // queue.push(getAttrByDeviceId(slaveDeviceId))  
5300 - // } else {  
5301 - // queue.push(getAttrByDeviceId(deviceId))  
5302 - // }  
5303 - // Promise.all(queue)  
5304 - // .finally(() => {  
5305 - // const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)  
5306 - // $(`#${ enumActionEl.ORG_EL } input[name="${ enumDataSourceConst.ORG_ID }"]`).parent().find('span').html(orgNode?.name)  
5307 - // form.val(CONTAINER_FILTER, {  
5308 - // orgId,  
5309 - // deviceId,  
5310 - // slaveDeviceId,  
5311 - // attr,  
5312 - // })  
5313 - // })  
5314 - // }  
5315 - //  
5316 - // async function echoActionType() {  
5317 - // const act = currentNodeData.act ?? []  
5318 - // const event = currentNodeData.event ?? []  
5319 - // const actionType = {}  
5320 - // for (const item of act) {  
5321 - // if (!item.condition || !item.condition?.length) {  
5322 - // $(`.interaction__container input[name="${ item.type }"]`).attr('disabled', true)  
5323 - // } else {  
5324 - // $(`.interaction__container input[name="${ item.type }"]`).attr('disabled', false)  
5325 - // }  
5326 - // actionType[item.type] = item.enabled  
5327 - // }  
5328 - // for (const item of event) {  
5329 - // if (!item.content) {  
5330 - // $(`.interaction__container input[name="${ item.type }"]`).attr('disabled', true)  
5331 - // } else {  
5332 - // $(`.interaction__container input[name="${ item.type }"]`).attr('disabled', false)  
5333 - // }  
5334 - // actionType[item.type] = item.enabled  
5335 - // }  
5336 - // form.val(CONTAINER_FILTER, actionType)  
5337 - // }  
5338 - // }  
5339 - //  
5340 - // function mount() {  
5341 - // generatorOrgTres()  
5342 - // generatorDeviceSelect()  
5343 - // generatorSlaveDevice()  
5344 - // generatorAttrSelect()  
5345 - // echoData()  
5346 - //  
5347 - // $(fragment).append(title).append(orgPanel).append(devicePanel).append(slaveDevicePanel).append(attrsPanel)  
5348 - //  
5349 - // $(container).append(fragment)  
5350 - //  
5351 - // }  
5352 - //  
5353 - // mount()  
5354 - //  
5355 - // }  
5356 -  
5357 /** 5140 /**
5358 * @description 创建数据面板 5141 * @description 创建数据面板
5359 */ 5142 */
@@ -5412,21 +5195,354 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5412,21 +5195,354 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5412 mount() 5195 mount()
5413 } 5196 }
5414 5197
5415 - // /**  
5416 - // * @description 创建功能模块  
5417 - // */  
5418 - // function createFunctionPanel() {  
5419 - // const fragment = document.createDocumentFragment()  
5420 - // const title = createTitle('功能')  
5421 - // $(title).addClass('override__title--default')  
5422 - // fragment.append(title)  
5423 - // generateActionEventNode(functionList).forEach(item => {  
5424 - // const panel = createPanel()  
5425 - // $(panel).addClass('override__panel--default').append(item)  
5426 - // $(fragment).append(panel)  
5427 - // })  
5428 - // $(container).append(fragment)  
5429 - // } 5198 + function createChartBindPanel() {
  5199 + const fragment = document.createDocumentFragment()
  5200 + const chartBindContainer = document.createElement('div')
  5201 + chartBindContainer.setAttribute('class', 'chart-panel__style')
  5202 + chartBindContainer.style.padding = '10px'
  5203 + const title = createTitle('展示类型')
  5204 + $(title).addClass('override__title--default')
  5205 +
  5206 + const enumActionEL = {
  5207 + SCOPE_FILTER: 'bindChartScopeFilter',
  5208 +
  5209 + INTERVAL_EL: 'bindChartIntervalSelect'
  5210 + }
  5211 +
  5212 + const enumConst = {
  5213 + DATA_TYPE: 'dataType',
  5214 +
  5215 + REAL: 'REAL',
  5216 +
  5217 + HISTORY: 'HISTORY',
  5218 +
  5219 + /**
  5220 + * @description 范围
  5221 + */
  5222 + SCOPE: 'scope',
  5223 +
  5224 + /**
  5225 + * @description 聚合
  5226 + */
  5227 + AGGREGATION: 'aggregation',
  5228 +
  5229 + /**
  5230 + * @description 间隔
  5231 + */
  5232 + INTERVAL: 'interval'
  5233 + }
  5234 +
  5235 + const enumTimeUnit = {
  5236 + SECOND: 'second',
  5237 + MINUTE: 'MINUTE',
  5238 + HOUR: 'HOUR',
  5239 + DAY: 'DAY',
  5240 + }
  5241 +
  5242 + const defaultIntervalOptions = [
  5243 + {
  5244 + id: 1,
  5245 + unit: enumTimeUnit.SECOND,
  5246 + linkage: [
  5247 + { id: 1, unit: enumTimeUnit.SECOND }
  5248 + ]
  5249 + },
  5250 + {
  5251 + id: 5,
  5252 + unit: enumTimeUnit.SECOND,
  5253 + linkage: [
  5254 + { id: 1, unit: enumTimeUnit.SECOND }
  5255 + ]
  5256 + },
  5257 + {
  5258 + id: 10,
  5259 + unit: enumTimeUnit.SECOND,
  5260 + linkage: [
  5261 + { id: 1, unit: enumTimeUnit.SECOND }
  5262 + ]
  5263 + },
  5264 + {
  5265 + id: 15,
  5266 + unit: enumTimeUnit.SECOND,
  5267 + linkage: [
  5268 + { id: 1, unit: enumTimeUnit.SECOND }
  5269 + ]
  5270 + },
  5271 + {
  5272 + id: 30,
  5273 + unit: enumTimeUnit.SECOND,
  5274 + linkage: [
  5275 + { id: 1, unit: enumTimeUnit.SECOND }
  5276 + ]
  5277 + },
  5278 + {
  5279 + id: 1,
  5280 + unit: enumTimeUnit.MINUTE,
  5281 + linkage: [
  5282 + { id: 1, unit: enumTimeUnit.SECOND },
  5283 + { id: 5, unit: enumTimeUnit.SECOND },
  5284 + ]
  5285 + },
  5286 + {
  5287 + id: 2,
  5288 + unit: enumTimeUnit.MINUTE,
  5289 + linkage: [
  5290 + { id: 1, unit: enumTimeUnit.SECOND },
  5291 + { id: 5, unit: enumTimeUnit.SECOND },
  5292 + { id: 10, unit: enumTimeUnit.SECOND },
  5293 + { id: 15, unit: enumTimeUnit.SECOND },
  5294 + ]
  5295 + },
  5296 + {
  5297 + id: 5,
  5298 + unit: enumTimeUnit.MINUTE,
  5299 + linkage: [
  5300 + { id: 1, unit: enumTimeUnit.SECOND },
  5301 + { id: 5, unit: enumTimeUnit.SECOND },
  5302 + { id: 10, unit: enumTimeUnit.SECOND },
  5303 + { id: 15, unit: enumTimeUnit.SECOND },
  5304 + { id: 30, unit: enumTimeUnit.SECOND },
  5305 + ]
  5306 + },
  5307 + {
  5308 + id: 10,
  5309 + unit: enumTimeUnit.MINUTE,
  5310 + linkage: [
  5311 + { id: 5, unit: enumTimeUnit.SECOND },
  5312 + { id: 10, unit: enumTimeUnit.SECOND },
  5313 + { id: 15, unit: enumTimeUnit.SECOND },
  5314 + { id: 30, unit: enumTimeUnit.SECOND },
  5315 + { id: 1, unit: enumTimeUnit.MINUTE },
  5316 + ]
  5317 + },
  5318 + {
  5319 + id: 15,
  5320 + unit: enumTimeUnit.MINUTE,
  5321 + linkage: [
  5322 + { id: 5, unit: enumTimeUnit.SECOND },
  5323 + { id: 10, unit: enumTimeUnit.SECOND },
  5324 + { id: 15, unit: enumTimeUnit.SECOND },
  5325 + { id: 30, unit: enumTimeUnit.SECOND },
  5326 + { id: 1, unit: enumTimeUnit.MINUTE },
  5327 + { id: 2, unit: enumTimeUnit.MINUTE },
  5328 + ]
  5329 + },
  5330 + {
  5331 + id: 30,
  5332 + unit: enumTimeUnit.MINUTE,
  5333 + linkage: [
  5334 + { id: 5, unit: enumTimeUnit.SECOND },
  5335 + { id: 10, unit: enumTimeUnit.SECOND },
  5336 + { id: 15, unit: enumTimeUnit.SECOND },
  5337 + { id: 30, unit: enumTimeUnit.SECOND },
  5338 + { id: 1, unit: enumTimeUnit.MINUTE },
  5339 + { id: 2, unit: enumTimeUnit.MINUTE },
  5340 + ]
  5341 + },
  5342 + {
  5343 + id: 1,
  5344 + unit: enumTimeUnit.HOUR,
  5345 + linkage: [
  5346 + { id: 10, unit: enumTimeUnit.SECOND },
  5347 + { id: 15, unit: enumTimeUnit.SECOND },
  5348 + { id: 30, unit: enumTimeUnit.SECOND },
  5349 + { id: 1, unit: enumTimeUnit.MINUTE },
  5350 + { id: 2, unit: enumTimeUnit.MINUTE },
  5351 + { id: 5, unit: enumTimeUnit.MINUTE },
  5352 + ]
  5353 + },
  5354 + {
  5355 + id: 2,
  5356 + unit: enumTimeUnit.HOUR,
  5357 + linkage: [
  5358 + { id: 15, unit: enumTimeUnit.SECOND },
  5359 + { id: 30, unit: enumTimeUnit.SECOND },
  5360 + { id: 1, unit: enumTimeUnit.MINUTE },
  5361 + { id: 2, unit: enumTimeUnit.MINUTE },
  5362 + { id: 5, unit: enumTimeUnit.MINUTE },
  5363 + { id: 10, unit: enumTimeUnit.MINUTE },
  5364 + { id: 15, unit: enumTimeUnit.MINUTE },
  5365 + ]
  5366 + },
  5367 + {
  5368 + id: 5,
  5369 + unit: enumTimeUnit.HOUR,
  5370 + linkage: [
  5371 + { id: 1, unit: enumTimeUnit.MINUTE },
  5372 + { id: 2, unit: enumTimeUnit.MINUTE },
  5373 + { id: 5, unit: enumTimeUnit.MINUTE },
  5374 + { id: 10, unit: enumTimeUnit.MINUTE },
  5375 + { id: 15, unit: enumTimeUnit.MINUTE },
  5376 + { id: 30, unit: enumTimeUnit.MINUTE },
  5377 + ]
  5378 + },
  5379 + {
  5380 + id: 10,
  5381 + unit: enumTimeUnit.HOUR,
  5382 + linkage: [
  5383 + { id: 2, unit: enumTimeUnit.MINUTE },
  5384 + { id: 5, unit: enumTimeUnit.MINUTE },
  5385 + { id: 10, unit: enumTimeUnit.MINUTE },
  5386 + { id: 15, unit: enumTimeUnit.MINUTE },
  5387 + { id: 30, unit: enumTimeUnit.MINUTE },
  5388 + { id: 1, unit: enumTimeUnit.HOUR },
  5389 + ]
  5390 + },
  5391 + {
  5392 + id: 12,
  5393 + unit: enumTimeUnit.HOUR,
  5394 + linkage: [
  5395 + { id: 2, unit: enumTimeUnit.MINUTE },
  5396 + { id: 5, unit: enumTimeUnit.MINUTE },
  5397 + { id: 10, unit: enumTimeUnit.MINUTE },
  5398 + { id: 15, unit: enumTimeUnit.MINUTE },
  5399 + { id: 30, unit: enumTimeUnit.MINUTE },
  5400 + { id: 1, unit: enumTimeUnit.HOUR },
  5401 + ]
  5402 + },
  5403 + {
  5404 + id: 1,
  5405 + unit: enumTimeUnit.DAY,
  5406 + linkage: [
  5407 + { id: 5, unit: enumTimeUnit.MINUTE },
  5408 + { id: 10, unit: enumTimeUnit.MINUTE },
  5409 + { id: 15, unit: enumTimeUnit.MINUTE },
  5410 + { id: 30, unit: enumTimeUnit.MINUTE },
  5411 + { id: 1, unit: enumTimeUnit.HOUR },
  5412 + { id: 2, unit: enumTimeUnit.HOUR },
  5413 + ]
  5414 + },
  5415 + {
  5416 + id: 7,
  5417 + unit: enumTimeUnit.DAY,
  5418 + linkage: [
  5419 + { id: 30, unit: enumTimeUnit.MINUTE },
  5420 + { id: 1, unit: enumTimeUnit.HOUR },
  5421 + { id: 2, unit: enumTimeUnit.HOUR },
  5422 + { id: 5, unit: enumTimeUnit.HOUR },
  5423 + { id: 10, unit: enumTimeUnit.HOUR },
  5424 + { id: 12, unit: enumTimeUnit.HOUR },
  5425 + { id: 1, unit: enumTimeUnit.DAY },
  5426 + ]
  5427 + },
  5428 + {
  5429 + id: 30,
  5430 + unit: enumTimeUnit.DAY,
  5431 + linkage: [
  5432 + { id: 2, unit: enumTimeUnit.HOUR },
  5433 + { id: 5, unit: enumTimeUnit.HOUR },
  5434 + { id: 10, unit: enumTimeUnit.HOUR },
  5435 + { id: 12, unit: enumTimeUnit.HOUR },
  5436 + { id: 1, unit: enumTimeUnit.DAY },
  5437 + ]
  5438 + },
  5439 + ]
  5440 +
  5441 +
  5442 +
  5443 + const aggergationOptions = [
  5444 + { id: '1', name: '最小值' },
  5445 + { id: '2', name: '最大值' },
  5446 + { id: '3', name: '平均值' },
  5447 + { id: '4', name: '求和' },
  5448 + { id: '5', name: '计数' },
  5449 + { id: '6', name: '空' },
  5450 + ]
  5451 +
  5452 + const unitMapping = {
  5453 + [enumTimeUnit.SECOND]: '秒',
  5454 + [enumTimeUnit.MINUTE]: '分',
  5455 + [enumTimeUnit.HOUR]: '小时',
  5456 + [enumTimeUnit.DAY]: '天',
  5457 + }
  5458 +
  5459 + const unitConversion = {
  5460 + [enumTimeUnit.SECOND]: 1,
  5461 + [enumTimeUnit.MINUTE]: 1 * 60,
  5462 + [enumTimeUnit.HOUR]: 1 * 60 * 60,
  5463 + [enumTimeUnit.DAY]: 1 * 60 * 60 * 24,
  5464 + }
  5465 +
  5466 + function createSwitchBindTypeRadio() {
  5467 + return `
  5468 + <div class="layui-form-item">
  5469 + <label class="layui-form-label">数据类型</label>
  5470 + <div class="layui-input-block">
  5471 + <input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">
  5472 + <input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" checked>
  5473 + </div>
  5474 + </div>
  5475 + `
  5476 + }
  5477 +
  5478 + function createQueryScopeSelect() {
  5479 + const options = defaultIntervalOptions.map((item, index) => ({ id: index, name: item.id + unitMapping[item.unit] }))
  5480 + const template = UseLayUi.generateOptionTemplate({
  5481 + dataSource: options,
  5482 + addPlaceholderOption: false
  5483 + })
  5484 + return `
  5485 + <div class="layui-form-item">
  5486 + <label class="layui-form-label">时间周期</label>
  5487 + <div class="layui-input-block">
  5488 + <select name="${enumConst.SCOPE}" lay-filter="${enumActionEL.SCOPE_FILTER}">
  5489 + ${template}
  5490 + </select>
  5491 + </div>
  5492 + </div>`
  5493 + }
  5494 +
  5495 + function createAggregationSelect() {
  5496 + const template = UseLayUi.generateOptionTemplate({
  5497 + dataSource: aggergationOptions,
  5498 + addPlaceholderOption: false
  5499 + })
  5500 + return `
  5501 + <div class="layui-form-item">
  5502 + <label class="layui-form-label">聚合方式</label>
  5503 + <div class="layui-input-block">
  5504 + <select name="${enumConst.AGGREGATION}">
  5505 + ${template}
  5506 + </select>
  5507 + </div>
  5508 + </div>`
  5509 + }
  5510 +
  5511 + function createIntervalSelect() {
  5512 + return `
  5513 + <div class="layui-form-item">
  5514 + <label class="layui-form-label">间隔时间</label>
  5515 + <div class="layui-input-block">
  5516 + <select id="${enumActionEL.INTERVAL_EL}" name="${enumConst.INTERVAL}" lay-filter="${enumConst.INTERVAL}">
  5517 + <option value="1">1秒</option>
  5518 + </select>
  5519 + </div>
  5520 + </div>`
  5521 + }
  5522 +
  5523 + function generatorEventlisten() {
  5524 + form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => {
  5525 + console.log(event)
  5526 + const value = event.value || 0
  5527 + const options = defaultIntervalOptions[value].linkage.map(item => ({ id: item.id * unitConversion[item.unit], name: item.id + unitMapping[item.unit] }))
  5528 + const template = UseLayUi.generateOptionTemplate({
  5529 + dataSource: options,
  5530 + addPlaceholderOption: false
  5531 + })
  5532 + $(`#${enumActionEL.INTERVAL_EL}`).html(template)
  5533 + form.render('select')
  5534 + })
  5535 + }
  5536 +
  5537 + fragment.append(title)
  5538 + $(chartBindContainer).append(createSwitchBindTypeRadio())
  5539 + $(chartBindContainer).append(createQueryScopeSelect())
  5540 + $(chartBindContainer).append(createAggregationSelect())
  5541 + $(chartBindContainer).append(createIntervalSelect())
  5542 + fragment.append(chartBindContainer)
  5543 + $(container).append(fragment)
  5544 + generatorEventlisten()
  5545 + }
5430 5546
5431 /** 5547 /**
5432 * @description 创建数据交互模块 5548 * @description 创建数据交互模块
@@ -6162,7 +6278,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6162,7 +6278,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6162 $(event.currentTarget).find('dl').css({ 6278 $(event.currentTarget).find('dl').css({
6163 position: 'fixed', 6279 position: 'fixed',
6164 'min-width': width + 'px', 6280 'min-width': width + 'px',
6165 - top: offset.top + height + 'px', 6281 + top: offset.top + height + 'px',
6166 left: offset.left + 'px' 6282 left: offset.left + 'px'
6167 }) 6283 })
6168 }) 6284 })
@@ -459,3 +459,24 @@ @@ -459,3 +459,24 @@
459 margin-left: 110px; 459 margin-left: 110px;
460 min-height: 36px; 460 min-height: 36px;
461 } 461 }
  462 +
  463 +// 展示类型
  464 +
  465 +.chart-panel__style {
  466 + padding: 10px;
  467 +}
  468 +
  469 +.chart-panel__style .layui-form-item {
  470 + display: flex
  471 +}
  472 +
  473 +.chart-panel__style .layui-form-label{
  474 + width: 60px;
  475 + box-sizing: border-box;
  476 + padding: 9px 10px 9px 0;
  477 +}
  478 +
  479 +
  480 +.chart-panel__style .layui-input-block{
  481 + margin-left: 0px !important;
  482 +}