简柏林 / 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 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 5093 */
5094 5094 async function initNode() {
5095 5095 createDataSourcePanel()
  5096 + createChartBindPanel()
5096 5097 createInteractionPanel()
5097 5098 createDynamicEffectPanel()
5098 5099 createSubmitPanel()
... ... @@ -5136,224 +5137,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5136 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 5141 * @description 创建数据面板
5359 5142 */
... ... @@ -5412,21 +5195,354 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5412 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 5548 * @description 创建数据交互模块
... ... @@ -6162,7 +6278,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6162 6278 $(event.currentTarget).find('dl').css({
6163 6279 position: 'fixed',
6164 6280 'min-width': width + 'px',
6165   - top: offset.top + height + 'px',
  6281 + top: offset.top + height + 'px',
6166 6282 left: offset.left + 'px'
6167 6283 })
6168 6284 })
... ...
... ... @@ -459,3 +459,24 @@
459 459 margin-left: 110px;
460 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 +}
... ...