简柏林 / thingskit-scada · Commits

Commit 69fe9a7e3c3aafc1a05c61a9b9fc365487614aea

Authored by ww
1 parent c551e652

feat: 完成告警列表开发

Inline Side-by-side
Showing 6 changed files with 239 additions and 100 deletions
@@ -22,26 +22,26 @@ @@ -22,26 +22,26 @@
22 <meta name="mobile-web-app-capable" content="yes"> 22 <meta name="mobile-web-app-capable" content="yes">
23 <meta name="theme-color" content="#d89000"> 23 <meta name="theme-color" content="#d89000">
24 24
25 - <link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1681890411146"> 25 + <link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1686710985762">
26 26
27 <!-- load configure file --> 27 <!-- load configure file -->
28 - <script src="./js/config/config.js?v=1681890411146"></script> 28 + <script src="./js/config/config.js?v=1686710985762"></script>
29 29
30 <!-- crypto-js --> 30 <!-- crypto-js -->
31 - <script src="./js/plugin/crypto-js/crypto-js.js?v=1681890411146"></script> 31 + <script src="./js/plugin/crypto-js/crypto-js.js?v=1686710985762"></script>
32 32
33 <!-- storage persistent --> 33 <!-- storage persistent -->
34 - <script src="./js/const/persistentStorage.js?v=1681890411146"></script> 34 + <script src="./js/const/persistentStorage.js?v=1686710985762"></script>
35 <!-- Global const --> 35 <!-- Global const -->
36 - <script src="./js/const/const.js?v=1681890411146"></script> 36 + <script src="./js/const/const.js?v=1686710985762"></script>
37 37
38 <!-- Axios --> 38 <!-- Axios -->
39 - <script src="./js/plugin/axios/axios.min.js?v=1681890411146"></script>  
40 - <script src="./js/plugin/axios/DefHttp.js?v=1681890411146"></script>  
41 - <script src="./js/api/index.js?v=1681890411146"></script> 39 + <script src="./js/plugin/axios/axios.min.js?v=1686710985762"></script>
  40 + <script src="./js/plugin/axios/DefHttp.js?v=1686710985762"></script>
  41 + <script src="./js/api/index.js?v=1686710985762"></script>
42 42
43 <!-- load script --> 43 <!-- load script -->
44 - <script src="./js/config/loadScript.js?v=1681890411146"></script> 44 + <script src="./js/config/loadScript.js?v=1686710985762"></script>
45 45
46 <!-- act editor --> 46 <!-- act editor -->
47 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> --> 47 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 <!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> --> 54 <!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
55 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> --> 55 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> -->
56 56
57 - <script src="./js/plugin/layui/layui.js?v=1681890411146"></script> 57 + <script src="./js/plugin/layui/layui.js?v=1686710985762"></script>
58 <!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css" 58 <!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
59 integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ==" 59 integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
60 crossorigin="anonymous" referrerpolicy="no-referrer" /> 60 crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 crossorigin="anonymous" referrerpolicy="no-referrer"></script> --> 63 crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
64 64
65 <!-- 引入修改样式 --> 65 <!-- 引入修改样式 -->
66 - <link rel="stylesheet" href="./styles/formatChange.css?v=1681890411146"> 66 + <link rel="stylesheet" href="./styles/formatChange.css?v=1686710985762">
67 67
68 <script type="text/javascript"> 68 <script type="text/javascript">
69 /** 69 /**
@@ -306,7 +306,7 @@ @@ -306,7 +306,7 @@
306 var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') || 306 var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
307 (hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net'); 307 (hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
308 308
309 - const releaseVersion = '1681890411146' 309 + const releaseVersion = '1686710985762'
310 const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}` 310 const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}`
311 function loadAppJS() { 311 function loadAppJS() {
312 mxscript(appMinSrc, function () { 312 mxscript(appMinSrc, function () {
@@ -648,7 +648,7 @@ @@ -648,7 +648,7 @@
648 left: 'center', 648 left: 'center',
649 top: 'center', 649 top: 'center',
650 style: { 650 style: {
651 - text: platfromInfo.name || 'ThingsKit Scada', 651 + text: platfromInfo.name || 'Scada',
652 fontSize: isMobile() ? 20 : 70, 652 fontSize: isMobile() ? 20 : 70,
653 fontWeight: 'bold', 653 fontWeight: 'bold',
654 lineDash: [0, 200], 654 lineDash: [0, 200],
@@ -207,7 +207,7 @@ class ConfigurationNodeApi { @@ -207,7 +207,7 @@ class ConfigurationNodeApi {
207 * @returns 207 * @returns
208 */ 208 */
209 static getDictionaryValue(dictCode) { 209 static getDictionaryValue(dictCode) {
210 - return defHttp.post('/yt/dict_item/find', {dictCode}) 210 + return defHttp.post('/yt/dict_item/find', { dictCode })
211 } 211 }
212 212
213 /** 213 /**
@@ -227,4 +227,24 @@ class ConfigurationNodeApi { @@ -227,4 +227,24 @@ class ConfigurationNodeApi {
227 static getThingsModelServiceByDeviceProfileId(id) { 227 static getThingsModelServiceByDeviceProfileId(id) {
228 return defHttp.get('/yt/things_model/get_services/' + id) 228 return defHttp.get('/yt/things_model/get_services/' + id)
229 } 229 }
  230 +
  231 + /**
  232 + *
  233 + * @typedef {object} AlarmListRequestParamsType
  234 + * @property { number } page
  235 + * @property { number } pageSize
  236 + * @property { string } status
  237 + * @property { string } alarmType
  238 + * @property { string } severity
  239 + * @property { string[] } deviceIds
  240 + * @property { string } organizationId
  241 + * @property { string } deviceName
  242 + * @property { string } startTime
  243 + * @property { string } endTime
  244 + * @param {AlarmListRequestParamsType} params
  245 + * @returns
  246 + */
  247 + static getAlarmList(params) {
  248 + return defHttp.post('/yt/alarm/configuration/page', params)
  249 + }
230 } 250 }
@@ -66,15 +66,16 @@ @@ -66,15 +66,16 @@
66 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '图片'); 66 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '图片');
67 })), 67 })),
68 68
69 - // this.addEntry(this.getTagsForStencil(gn, '告警列表', 'basic').join(' '), mxUtils.bind(this, function () {  
70 - // const id = AlarmListComponent.genId()  
71 - // const template = AlarmListComponent.createAlarmList(null, 280, 200, id)  
72 - // const cell = new mxCell(template, new mxGeometry(0, 0, 280, 200), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');  
73 - // cell.setVertex(true)  
74 - // const { ID } = AlarmListComponent.getAttributeKeys()  
75 - // this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.ALARM_LIST, [ID]: id })  
76 - // return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '告警列表');  
77 - // })), 69 + this.addEntry(this.getTagsForStencil(gn, '告警列表', 'basic').join(' '), mxUtils.bind(this, function () {
  70 + const id = AlarmListComponent.genId()
  71 + const template = AlarmListComponent.createAlarmList(null, 280, 200, id)
  72 + const cell = new mxCell(template, new mxGeometry(0, 0, 280, 200), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
  73 + cell.setVertex(true)
  74 + const { UUID } = AlarmListComponent.getAttributeKeys()
  75 + this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.ALARM_LIST, [UUID]: id })
  76 + console.log(cell)
  77 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '告警列表');
  78 + })),
78 ]; 79 ];
79 80
80 this.addPaletteFunctions(dt, '基础元件', true, fns); 81 this.addPaletteFunctions(dt, '基础元件', true, fns);
@@ -196,9 +197,6 @@ AlarmListComponent.createAlarmList = function (list, width = 280, height = 200, @@ -196,9 +197,6 @@ AlarmListComponent.createAlarmList = function (list, width = 280, height = 200,
196 ${AlarmListComponent.createAlarmItem(list)} 197 ${AlarmListComponent.createAlarmItem(list)}
197 </div> 198 </div>
198 </div> 199 </div>
199 - <script defer type="text/javascript">  
200 -  
201 - </script>  
202 ` 200 `
203 return template.replace(/\n/g, '') 201 return template.replace(/\n/g, '')
204 } 202 }
@@ -275,7 +273,7 @@ AlarmListComponent.isAlarmList = function (cell) { @@ -275,7 +273,7 @@ AlarmListComponent.isAlarmList = function (cell) {
275 273
276 AlarmListComponent.getAttributeKeys = function () { 274 AlarmListComponent.getAttributeKeys = function () {
277 return { 275 return {
278 - ID: 'id', 276 + UUID: 'uuid',
279 } 277 }
280 } 278 }
281 279
@@ -94,18 +94,18 @@ @@ -94,18 +94,18 @@
94 const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.DASHBOARD_CHART, `${Proxy_Prefix}/images/thingskit/dashboard-chart.png`) 94 const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.DASHBOARD_CHART, `${Proxy_Prefix}/images/thingskit/dashboard-chart.png`)
95 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '仪表盘'); 95 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '仪表盘');
96 })), 96 })),
97 - // this.addEntry('flowmeter-circle', mxUtils.bind(this, function () {  
98 - // const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.CIRCLE)  
99 - // return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');  
100 - // })),  
101 - // this.addEntry('flowmeter-rect', mxUtils.bind(this, function () {  
102 - // const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.RECT)  
103 - // return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');  
104 - // })),  
105 - // this.addEntry('flowmeter-thermometer', mxUtils.bind(this, function () {  
106 - // const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.THERMOMETER)  
107 - // return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');  
108 - // })), 97 + this.addEntry('flowmeter-circle', mxUtils.bind(this, function () {
  98 + const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.CIRCLE)
  99 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
  100 + })),
  101 + this.addEntry('flowmeter-rect', mxUtils.bind(this, function () {
  102 + const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.RECT)
  103 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
  104 + })),
  105 + this.addEntry('flowmeter-thermometer', mxUtils.bind(this, function () {
  106 + const cell = self.generateFlowmeterCell(100, 100, Sidebar.prototype.enumFlowmeterType.THERMOMETER)
  107 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '流量计');
  108 + })),
109 ]; 109 ];
110 110
111 this.addPaletteFunctions('charts', '图表', false, fns); 111 this.addPaletteFunctions('charts', '图表', false, fns);
@@ -5063,7 +5063,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5063,7 +5063,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5063 GATEWAY: 'GATEWAY', 5063 GATEWAY: 'GATEWAY',
5064 ADDITIONAL: 'additional', 5064 ADDITIONAL: 'additional',
5065 DEVICE_PROFILE_ID: 'deviceProfileId', 5065 DEVICE_PROFILE_ID: 'deviceProfileId',
5066 - DEVICE_TYPE: 'deviceType' 5066 + DEVICE_TYPE: 'deviceType',
  5067 + SOURCE_OPTION: 'sourceOption'
5067 } 5068 }
5068 5069
5069 /** 5070 /**
@@ -5509,7 +5510,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5509,7 +5510,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5509 } 5510 }
5510 5511
5511 const enumFields = { 5512 const enumFields = {
5512 - DEVICE_IDS: 'deviceIdS', 5513 + DEVICE_INFO: 'devicesInfo',
5513 AUTO_PLAY: 'autoPlay', 5514 AUTO_PLAY: 'autoPlay',
5514 INTERVAL: 'interval', 5515 INTERVAL: 'interval',
5515 START_TIME: 'startTime', 5516 START_TIME: 'startTime',
@@ -5523,12 +5524,12 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5523,12 +5524,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5523 5524
5524 const deviceGroupPanel = createPanel() 5525 const deviceGroupPanel = createPanel()
5525 $(deviceGroupPanel).addClass('override__panel--default') 5526 $(deviceGroupPanel).addClass('override__panel--default')
5526 - $(deviceGroupPanel).append(`<div style="display: flex; justify-content: space-between;"><input style="display: none;" id="${enumActionEl.DEVICES_INPUT}" name="${enumFields.DEVICE_IDS}" /><div>设备绑定</div><i id="${enumActionEl.BIND_DEVICE_ICON}" class="layui-icon-edit layui-icon" style="cursor: pointer;"><i/></div>`) 5527 + $(deviceGroupPanel).append(`<div style="display: flex; justify-content: space-between;"><input style="display: none;" id="${enumActionEl.DEVICES_INPUT}" name="${enumFields.DEVICE_INFO}" /><div>设备绑定</div><i id="${enumActionEl.BIND_DEVICE_ICON}" class="layui-icon-edit layui-icon" style="cursor: pointer;"><i/></div>`)
5527 5528
5528 const queryTimeRangePanel = createPanel() 5529 const queryTimeRangePanel = createPanel()
5529 $(queryTimeRangePanel).addClass('override__panel--default') 5530 $(queryTimeRangePanel).addClass('override__panel--default')
5530 $(queryTimeRangePanel).append(`<input style="display: none;" type="number" id="${enumActionEl.START_TIME}" name="${enumFields.START_TIME}"><input style="display: none;" type="number" id="${enumActionEl.END_TIME}" name="${enumFields.END_TIME}">`) 5531 $(queryTimeRangePanel).append(`<input style="display: none;" type="number" id="${enumActionEl.START_TIME}" name="${enumFields.START_TIME}"><input style="display: none;" type="number" id="${enumActionEl.END_TIME}" name="${enumFields.END_TIME}">`)
5531 - $(queryTimeRangePanel).append(`<div class="layui-form-item" style="margin-bottom: 0;"><label class="layui-form-label" style="width: 80px; padding: 9px 0; text-align: left;">查询时间</label><div class="layui-input-block" style="margin-left: 80px;"><input style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" class="layui-input" id="${enumActionEl.DATE_RANGE}" placeholder="请选择查询日期"></div></div>`) 5532 + $(queryTimeRangePanel).append(`<div class="layui-form-item" style="margin-bottom: 0;"><label class="layui-form-label" style="width: 80px; padding: 9px 0; text-align: left;">查询时间</label><div class="layui-input-block" style="margin-left: 80px;"><input style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" class="layui-input" id="${enumActionEl.DATE_RANGE}" autocomplete="off" placeholder="请选择查询日期"></div></div>`)
5532 5533
5533 const autoPlayPanel = createPanel() 5534 const autoPlayPanel = createPanel()
5534 $(autoPlayPanel).addClass('override__panel--default') 5535 $(autoPlayPanel).addClass('override__panel--default')
@@ -5572,7 +5573,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5572,7 +5573,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5572 return `${enumLayFilter.ROW_FILTER_NAME}-${rowCount}` 5573 return `${enumLayFilter.ROW_FILTER_NAME}-${rowCount}`
5573 } 5574 }
5574 5575
5575 - async function getOrganization() { 5576 + async function getOrganization(organizationId, rowFilter) {
5576 if (!organizationList.length) { 5577 if (!organizationList.length) {
5577 const [err, res] = await to(ConfigurationNodeApi.getOrgTree()) 5578 const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
5578 if (!err) organizationList = res 5579 if (!err) organizationList = res
@@ -5604,9 +5605,16 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5604,9 +5605,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5604 }) 5605 })
5605 5606
5606 form.render() 5607 form.render()
  5608 +
  5609 + if (organizationId) {
  5610 + UseLayUi.nextTick(() => {
  5611 + const node = UseLayUi.findTreeObjectByField(organizationList, organizationId)
  5612 + $(`#${enumTableActionEl.TABLE_ID} tr[lay-filter="${rowFilter}"] input[name="${enumDeviceKeys.ORGANIZATION_ID}"]`).val(organizationId).parent().find('span').html(node?.name)
  5613 + })
  5614 + }
5607 } 5615 }
5608 5616
5609 - async function getDeviceType() { 5617 + async function getDeviceType(value, rowFilter) {
5610 if (!deviceType.length) { 5618 if (!deviceType.length) {
5611 const [err, res] = await to(ConfigurationNodeApi.getDictionaryValue('device_type')) 5619 const [err, res] = await to(ConfigurationNodeApi.getDictionaryValue('device_type'))
5612 if (!err) deviceType = res 5620 if (!err) deviceType = res
@@ -5619,26 +5627,65 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5619,26 +5627,65 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5619 $(target).html(template) 5627 $(target).html(template)
5620 }) 5628 })
5621 form.render() 5629 form.render()
  5630 +
  5631 + if (value) {
  5632 + UseLayUi.nextTick(() => {
  5633 + form.val(rowFilter, { [enumDeviceKeys.DEVICE_TYPE]: value })
  5634 + })
  5635 + }
5622 } 5636 }
5623 5637
5624 - async function getDeviceProfile(currentRowFilter) {  
5625 - const { deviceType } = form.val(currentRowFilter) || {} 5638 + async function getDeviceProfile(currentRowFilter, record, value) {
  5639 + const { deviceType } = record || form.val(currentRowFilter) || {}
5626 if (!deviceType) return 5640 if (!deviceType) return
5627 const [err, res] = await to(ConfigurationNodeApi.getProduct(deviceType)) 5641 const [err, res] = await to(ConfigurationNodeApi.getProduct(deviceType))
5628 const deviceProfile = res 5642 const deviceProfile = res
5629 const template = UseLayUi.generateOptionTemplate({ dataSource: deviceProfile, labelField: 'name', valueField: 'id' }) 5643 const template = UseLayUi.generateOptionTemplate({ dataSource: deviceProfile, labelField: 'name', valueField: 'id' })
5630 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_PROFILE_ID}"]`).html(template) 5644 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_PROFILE_ID}"]`).html(template)
5631 form.render() 5645 form.render()
  5646 +
  5647 + if (value) {
  5648 + UseLayUi.nextTick(() => {
  5649 + form.val(currentRowFilter, { [enumDeviceKeys.DEVICE_PROFILE_ID]: value })
  5650 + })
  5651 + }
5632 } 5652 }
5633 5653
5634 - async function getDevice(currentRowFilter) {  
5635 - const { deviceProfileId, organizationId, deviceType } = form.val(currentRowFilter) || {} 5654 + async function getDevice(currentRowFilter, record, value) {
  5655 + const { deviceProfileId, organizationId, deviceType } = record || form.val(currentRowFilter) || {}
5636 if (![deviceProfileId, organizationId, deviceType].every(Boolean)) return 5656 if (![deviceProfileId, organizationId, deviceType].every(Boolean)) return
5637 const [err, res] = await to(ConfigurationNodeApi.getMeetConditionsDevice({ deviceProfileId, deviceType, organizationId })) 5657 const [err, res] = await to(ConfigurationNodeApi.getMeetConditionsDevice({ deviceProfileId, deviceType, organizationId }))
5638 if (err) return 5658 if (err) return
5639 const template = UseLayUi.generateOptionTemplate({ dataSource: res, labelField: 'name', valueField: 'id', alias: 'alias' }) 5659 const template = UseLayUi.generateOptionTemplate({ dataSource: res, labelField: 'name', valueField: 'id', alias: 'alias' })
5640 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_ID}"]`).html(template) 5660 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_ID}"]`).html(template)
5641 form.render() 5661 form.render()
  5662 + if (value) {
  5663 + UseLayUi.nextTick(() => {
  5664 + form.val(currentRowFilter, { [enumDeviceKeys.DEVICE_ID]: value })
  5665 + })
  5666 + }
  5667 + }
  5668 +
  5669 + function echoDeviceBindInfo() {
  5670 + const dataSource = currentNodeData?.dataSources?.find(item => item.nodeId === nodeInfo.id)
  5671 + if (!dataSource) return
  5672 + const record = dataSource.sourceOption
  5673 + const devicesInfo = record.devicesInfo
  5674 + const value = UseLayUi.parseStringToJSON(devicesInfo, [])
  5675 + if (value.length) {
  5676 + $(`#${enumTableActionEl.TABLE_ID}`).find('tbody').empty()
  5677 + }
  5678 + value.forEach((item) => {
  5679 + const template = createRow()
  5680 + const rowFilter = `${enumLayFilter.ROW_FILTER_NAME}-${rowCount}`
  5681 + $(`#${enumTableActionEl.TABLE_ID}`).find('tbody').append(template)
  5682 +
  5683 + // form.render(null, rowFilter)
  5684 + getDeviceType(item[enumDeviceKeys.DEVICE_TYPE], rowFilter)
  5685 + getOrganization(item[enumDeviceKeys.ORGANIZATION_ID], rowFilter)
  5686 + getDeviceProfile(rowFilter, item, item[enumDeviceKeys.DEVICE_PROFILE_ID])
  5687 + getDevice(rowFilter, item, item[enumDeviceKeys.DEVICE_ID])
  5688 + })
5642 } 5689 }
5643 5690
5644 function createEventListener(index) { 5691 function createEventListener(index) {
@@ -5768,12 +5815,13 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5768,12 +5815,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5768 </div> 5815 </div>
5769 </div> 5816 </div>
5770 `, 5817 `,
5771 - success(el, index) { 5818 + async success(el, index) {
5772 form.render() 5819 form.render()
5773 - getDeviceType()  
5774 - getOrganization() 5820 + await getDeviceType()
  5821 + await getOrganization()
5775 createEventListener(index) 5822 createEventListener(index)
5776 $(el).addClass('layui-form').find('.layui-layer-btn0').attr('lay-submit', true).attr('lay-filter', enumTableActionEl.SUBMIT_BUTTON) 5823 $(el).addClass('layui-form').find('.layui-layer-btn0').attr('lay-submit', true).attr('lay-filter', enumTableActionEl.SUBMIT_BUTTON)
  5824 + echoDeviceBindInfo()
5777 }, 5825 },
5778 yes() { 5826 yes() {
5779 return false 5827 return false
@@ -5781,10 +5829,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5781,10 +5829,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5781 }) 5829 })
5782 } 5830 }
5783 5831
5784 - function init() {  
5785 - $(`#${enumActionEl.BIND_DEVICE_ICON}`).on('click', openBindDeviceLayer)  
5786 - form.render()  
5787 - 5832 + function createDateRange() {
5788 laydate.render({ 5833 laydate.render({
5789 elem: `#${enumActionEl.DATE_RANGE}`, 5834 elem: `#${enumActionEl.DATE_RANGE}`,
5790 type: 'datetime', 5835 type: 'datetime',
@@ -5878,6 +5923,46 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5878,6 +5923,46 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5878 $(`#${enumActionEl.END_TIME}`).val(endTs) 5923 $(`#${enumActionEl.END_TIME}`).val(endTs)
5879 } 5924 }
5880 }) 5925 })
  5926 + }
  5927 +
  5928 + function formatTimespanToDateString(timespan) {
  5929 + if (isNaN(timespan)) return
  5930 + const date = new Date(Number(timespan))
  5931 + const year = date.getFullYear()
  5932 + const month = (date.getMonth() + 1).toString().padStart(2, 0)
  5933 + const day = date.getDate().toString().padStart(2, 0)
  5934 + const hour = date.getHours().toString().padStart(2, 0)
  5935 + const minute = date.getMinutes().toString().padStart(2, 0)
  5936 + const second = date.getSeconds().toString().padStart(2, 0)
  5937 +
  5938 + return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  5939 + }
  5940 +
  5941 + async function echoData() {
  5942 + const getBindValue = currentNodeData?.dataSources?.find(item => item.nodeId === nodeInfo.id)
  5943 + if (!getBindValue) return
  5944 + const record = getBindValue.sourceOption
  5945 + form.val(CONTAINER_FILTER, record)
  5946 +
  5947 + const startTime = formatTimespanToDateString(record.startTime)
  5948 + const endTime = formatTimespanToDateString(record.endTime)
  5949 + laydate.render({
  5950 + elem: `#${enumActionEl.DATE_RANGE}`,
  5951 + value: `${startTime} - ${endTime}`
  5952 + })
  5953 + }
  5954 +
  5955 + function init() {
  5956 + $(`#${enumActionEl.BIND_DEVICE_ICON}`).on('click', openBindDeviceLayer)
  5957 + form.render()
  5958 +
  5959 + createDateRange()
  5960 +
  5961 + const refreshFN = echoRefreshFn
  5962 + echoRefreshFn = async function () {
  5963 + refreshFN.apply(this, arguments)
  5964 + await echoData()
  5965 + }
5881 5966
5882 } 5967 }
5883 5968
@@ -6533,18 +6618,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6533,18 +6618,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6533 6618
6534 function getFlowmeterSubmitValue(field = {}) { 6619 function getFlowmeterSubmitValue(field = {}) {
6535 const additionalKey = HandleDataSource.enumConst 6620 const additionalKey = HandleDataSource.enumConst
6536 - // const minValue = field[additionalKey.MIN_VALUE]  
6537 - // const maxValue = field[additionalKey.MAX_VALUE]  
6538 -  
6539 - // if ([minValue, maxValue].some(item => isNaN(item))) {  
6540 - // UseLayUi.topErrorMsg('最大值或最小值不是一个数字!')  
6541 - // return false  
6542 - // }  
6543 -  
6544 - // if (Number(minValue) > Number(maxValue)) {  
6545 - // UseLayUi.topErrorMsg('最小值大于最大值!')  
6546 - // return false  
6547 - // }  
6548 6621
6549 const value = { 6622 const value = {
6550 configurationId, 6623 configurationId,
@@ -6571,9 +6644,22 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6571,9 +6644,22 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6571 } 6644 }
6572 return value 6645 return value
6573 } 6646 }
6574 - c 6647 +
6575 function getAlarmListSubmitValue(filed = {}) { 6648 function getAlarmListSubmitValue(filed = {}) {
6576 - console.log(field) 6649 +
  6650 + const value = {
  6651 + configurationId,
  6652 + contentId: currentPageId.id,
  6653 + nodeId: graphId,
  6654 + [enumCategory.ACT]: [],
  6655 + [enumCategory.EVENT]: [],
  6656 + [enumCategory.DATA_SOURCE]: {
  6657 + [enumDataSourceConst.ADDITIONAL]: { componentType: 'alarmList' },
  6658 + [enumDataSourceConst.SOURCE_OPTION]: field
  6659 + }
  6660 + }
  6661 +
  6662 + return value
6577 } 6663 }
6578 } 6664 }
6579 6665
@@ -13053,6 +13139,18 @@ class UseLayUi { @@ -13053,6 +13139,18 @@ class UseLayUi {
13053 ` 13139 `
13054 } 13140 }
13055 13141
  13142 + static parseStringToJSON(string, defaultValue = {}) {
  13143 + try {
  13144 + if (typeof string === 'string') {
  13145 + const value = JSON.parse(string)
  13146 + if (typeof value === 'object') return value
  13147 + }
  13148 + return defaultValue
  13149 + } catch (error) {
  13150 + return defaultValue
  13151 + }
  13152 + }
  13153 +
13056 /** 13154 /**
13057 * @description 生成输入框控件 13155 * @description 生成输入框控件
13058 * @param {{label: string, value: string, labelWidth: number, numberInput: boolean}} params 13156 * @param {{label: string, value: string, labelWidth: number, numberInput: boolean}} params
@@ -14246,6 +14344,11 @@ class DispatchCenter { @@ -14246,6 +14344,11 @@ class DispatchCenter {
14246 } 14344 }
14247 14345
14248 afterGetContentDataNode() { 14346 afterGetContentDataNode() {
  14347 + this.handleFlowmeterComponent()
  14348 + this.handleAlarmList()
  14349 + }
  14350 +
  14351 + handleFlowmeterComponent() {
14249 setTimeout(() => { 14352 setTimeout(() => {
14250 const componentType = Sidebar.prototype.enumComponentType 14353 const componentType = Sidebar.prototype.enumComponentType
14251 if (!this.contentData?.dataSources) return 14354 if (!this.contentData?.dataSources) return
@@ -14279,6 +14382,50 @@ class DispatchCenter { @@ -14279,6 +14382,50 @@ class DispatchCenter {
14279 }, 10); 14382 }, 10);
14280 } 14383 }
14281 14384
  14385 +
  14386 + // 处理告警列表
  14387 + async handleAlarmList() {
  14388 + const componentType = Sidebar.prototype.enumComponentType
  14389 + if (!this.contentData?.dataSources) return
  14390 + const alarmList = this.contentData?.dataSources?.filter(item => item.additional && (item.additional || {}).componentType === componentType.ALARM_LIST)
  14391 + const allCell = Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
  14392 + const { UUID } = AlarmListComponent.getAttributeKeys()
  14393 + const { jquery: $ } = layui
  14394 + for (const item of alarmList || []) {
  14395 + const { nodeId, sourceOption } = item || {}
  14396 + const { devicesInfo, autoPlay, interval, startTime, endTime } = sourceOption || {}
  14397 + const node = allCell.find(item => item.id === nodeId)
  14398 + const deviceIds = UseLayUi.parseStringToJSON(devicesInfo, []).map(item => item.deviceId)
  14399 + const id = node.getAttribute(UUID)
  14400 + const element = document.getElementById(id)
  14401 + if (element) {
  14402 + const [err, data] = await to(ConfigurationNodeApi.getAlarmList({ page: 1, pageSize: 30, startTime: Number(startTime), endTime: Number(endTime), deviceIds }))
  14403 + if (err) return
  14404 + if (data?.items && data?.items?.length) {
  14405 + const template = AlarmListComponent.createAlarmItem(data.items)
  14406 + $(`#${id}`).find('.list-wrapper').html(template)
  14407 + }
  14408 + if (autoPlay) {
  14409 + const wrapperHeight = $(`#${id}`).height()
  14410 + const listWrapper = $(`#${id}`).find('.list-wrapper')
  14411 + const allHeight = listWrapper.height()
  14412 + const itemHeight = allHeight / listWrapper.children().length
  14413 + let scrollDistance = 0
  14414 + const cancel = RAFSetInterval(() => {
  14415 + try {
  14416 + scrollDistance = itemHeight + scrollDistance
  14417 + if (scrollDistance + wrapperHeight > allHeight) scrollDistance = 0
  14418 + document.getElementById(id).scrollTo({ top: scrollDistance, behavior: 'smooth' })
  14419 + } catch (error) {
  14420 + cancel?.()
  14421 + }
  14422 +
  14423 + }, Number(interval) * 1000)
  14424 + }
  14425 + }
  14426 + }
  14427 + }
  14428 +
14282 sendSubscribeMessage() { 14429 sendSubscribeMessage() {
14283 const message = this.generateSubscribeMessage() 14430 const message = this.generateSubscribeMessage()
14284 this.socket.send(JSON.stringify(message)) 14431 this.socket.send(JSON.stringify(message))
@@ -167,6 +167,10 @@ @@ -167,6 +167,10 @@
167 table-layout: fixed; 167 table-layout: fixed;
168 } 168 }
169 169
  170 +.override__table .org-tree .layui-input-block {
  171 + margin-left: 0;
  172 +}
  173 +
170 /**/ 174 /**/
171 .override__radio-default { 175 .override__radio-default {
172 margin-right: 16px; 176 margin-right: 16px;
@@ -503,36 +507,6 @@ @@ -503,36 +507,6 @@
503 margin-left: 0; 507 margin-left: 0;
504 } 508 }
505 509
506 -/* 参数设置按钮 */  
507 -.param-setting-button {  
508 - color: #fff;  
509 - border-color: #1890ff;  
510 - background: #1890ff;  
511 - text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);  
512 - box-shadow: 0 2px #0000000b;  
513 -  
514 - line-height: 1.5715;  
515 - position: relative;  
516 - display: inline-block;  
517 - font-weight: 400;  
518 - white-space: nowrap;  
519 - text-align: center;  
520 - background-image: none;  
521 - border: 1px solid transparent;  
522 - box-shadow: 0 2px #00000004;  
523 - cursor: pointer;  
524 - transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);  
525 - -webkit-user-select: none;  
526 - -moz-user-select: none;  
527 - -ms-user-select: none;  
528 - user-select: none;  
529 - touch-action: manipulation;  
530 - height: 32px;  
531 - padding: 4px 15px;  
532 - font-size: 14px;  
533 - border-radius: 2px;  
534 -}  
535 -  
536 /* ========== help message ========== */ 510 /* ========== help message ========== */
537 .thingskit-help-message { 511 .thingskit-help-message {
538 cursor: pointer; 512 cursor: pointer;