简柏林 / 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 22 <meta name="mobile-web-app-capable" content="yes">
23 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 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 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 33 <!-- storage persistent -->
34   - <script src="./js/const/persistentStorage.js?v=1681890411146"></script>
  34 + <script src="./js/const/persistentStorage.js?v=1686710985762"></script>
35 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 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 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 46 <!-- act editor -->
47 47 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
... ... @@ -54,7 +54,7 @@
54 54 <!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
55 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 58 <!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
59 59 integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
60 60 crossorigin="anonymous" referrerpolicy="no-referrer" />
... ... @@ -63,7 +63,7 @@
63 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 68 <script type="text/javascript">
69 69 /**
... ... @@ -306,7 +306,7 @@
306 306 var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
307 307 (hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
308 308
309   - const releaseVersion = '1681890411146'
  309 + const releaseVersion = '1686710985762'
310 310 const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}`
311 311 function loadAppJS() {
312 312 mxscript(appMinSrc, function () {
... ... @@ -648,7 +648,7 @@
648 648 left: 'center',
649 649 top: 'center',
650 650 style: {
651   - text: platfromInfo.name || 'ThingsKit Scada',
  651 + text: platfromInfo.name || 'Scada',
652 652 fontSize: isMobile() ? 20 : 70,
653 653 fontWeight: 'bold',
654 654 lineDash: [0, 200],
... ...
... ... @@ -207,7 +207,7 @@ class ConfigurationNodeApi {
207 207 * @returns
208 208 */
209 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 227 static getThingsModelServiceByDeviceProfileId(id) {
228 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 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 81 this.addPaletteFunctions(dt, '基础元件', true, fns);
... ... @@ -196,9 +197,6 @@ AlarmListComponent.createAlarmList = function (list, width = 280, height = 200,
196 197 ${AlarmListComponent.createAlarmItem(list)}
197 198 </div>
198 199 </div>
199   - <script defer type="text/javascript">
200   -
201   - </script>
202 200 `
203 201 return template.replace(/\n/g, '')
204 202 }
... ... @@ -275,7 +273,7 @@ AlarmListComponent.isAlarmList = function (cell) {
275 273
276 274 AlarmListComponent.getAttributeKeys = function () {
277 275 return {
278   - ID: 'id',
  276 + UUID: 'uuid',
279 277 }
280 278 }
281 279
... ...
... ... @@ -94,18 +94,18 @@
94 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 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 111 this.addPaletteFunctions('charts', '图表', false, fns);
... ...
... ... @@ -5063,7 +5063,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5063 5063 GATEWAY: 'GATEWAY',
5064 5064 ADDITIONAL: 'additional',
5065 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 5510 }
5510 5511
5511 5512 const enumFields = {
5512   - DEVICE_IDS: 'deviceIdS',
  5513 + DEVICE_INFO: 'devicesInfo',
5513 5514 AUTO_PLAY: 'autoPlay',
5514 5515 INTERVAL: 'interval',
5515 5516 START_TIME: 'startTime',
... ... @@ -5523,12 +5524,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5523 5524
5524 5525 const deviceGroupPanel = createPanel()
5525 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 5529 const queryTimeRangePanel = createPanel()
5529 5530 $(queryTimeRangePanel).addClass('override__panel--default')
5530 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 5534 const autoPlayPanel = createPanel()
5534 5535 $(autoPlayPanel).addClass('override__panel--default')
... ... @@ -5572,7 +5573,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5572 5573 return `${enumLayFilter.ROW_FILTER_NAME}-${rowCount}`
5573 5574 }
5574 5575
5575   - async function getOrganization() {
  5576 + async function getOrganization(organizationId, rowFilter) {
5576 5577 if (!organizationList.length) {
5577 5578 const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
5578 5579 if (!err) organizationList = res
... ... @@ -5604,9 +5605,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5604 5605 })
5605 5606
5606 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 5618 if (!deviceType.length) {
5611 5619 const [err, res] = await to(ConfigurationNodeApi.getDictionaryValue('device_type'))
5612 5620 if (!err) deviceType = res
... ... @@ -5619,26 +5627,65 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5619 5627 $(target).html(template)
5620 5628 })
5621 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 5640 if (!deviceType) return
5627 5641 const [err, res] = await to(ConfigurationNodeApi.getProduct(deviceType))
5628 5642 const deviceProfile = res
5629 5643 const template = UseLayUi.generateOptionTemplate({ dataSource: deviceProfile, labelField: 'name', valueField: 'id' })
5630 5644 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_PROFILE_ID}"]`).html(template)
5631 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 5656 if (![deviceProfileId, organizationId, deviceType].every(Boolean)) return
5637 5657 const [err, res] = await to(ConfigurationNodeApi.getMeetConditionsDevice({ deviceProfileId, deviceType, organizationId }))
5638 5658 if (err) return
5639 5659 const template = UseLayUi.generateOptionTemplate({ dataSource: res, labelField: 'name', valueField: 'id', alias: 'alias' })
5640 5660 $(`#${enumTableActionEl.TABLE_ID}`).find(`tr[lay-filter="${currentRowFilter}"] select[name="${enumDeviceKeys.DEVICE_ID}"]`).html(template)
5641 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 5691 function createEventListener(index) {
... ... @@ -5768,12 +5815,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5768 5815 </div>
5769 5816 </div>
5770 5817 `,
5771   - success(el, index) {
  5818 + async success(el, index) {
5772 5819 form.render()
5773   - getDeviceType()
5774   - getOrganization()
  5820 + await getDeviceType()
  5821 + await getOrganization()
5775 5822 createEventListener(index)
5776 5823 $(el).addClass('layui-form').find('.layui-layer-btn0').attr('lay-submit', true).attr('lay-filter', enumTableActionEl.SUBMIT_BUTTON)
  5824 + echoDeviceBindInfo()
5777 5825 },
5778 5826 yes() {
5779 5827 return false
... ... @@ -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 5833 laydate.render({
5789 5834 elem: `#${enumActionEl.DATE_RANGE}`,
5790 5835 type: 'datetime',
... ... @@ -5878,6 +5923,46 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5878 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 6618
6534 6619 function getFlowmeterSubmitValue(field = {}) {
6535 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 6622 const value = {
6550 6623 configurationId,
... ... @@ -6571,9 +6644,22 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6571 6644 }
6572 6645 return value
6573 6646 }
6574   - c
  6647 +
6575 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 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 13155 * @description 生成输入框控件
13058 13156 * @param {{label: string, value: string, labelWidth: number, numberInput: boolean}} params
... ... @@ -14246,6 +14344,11 @@ class DispatchCenter {
14246 14344 }
14247 14345
14248 14346 afterGetContentDataNode() {
  14347 + this.handleFlowmeterComponent()
  14348 + this.handleAlarmList()
  14349 + }
  14350 +
  14351 + handleFlowmeterComponent() {
14249 14352 setTimeout(() => {
14250 14353 const componentType = Sidebar.prototype.enumComponentType
14251 14354 if (!this.contentData?.dataSources) return
... ... @@ -14279,6 +14382,50 @@ class DispatchCenter {
14279 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 14429 sendSubscribeMessage() {
14283 14430 const message = this.generateSubscribeMessage()
14284 14431 this.socket.send(JSON.stringify(message))
... ...
... ... @@ -167,6 +167,10 @@
167 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 175 .override__radio-default {
172 176 margin-right: 16px;
... ... @@ -503,36 +507,6 @@
503 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 510 /* ========== help message ========== */
537 511 .thingskit-help-message {
538 512 cursor: pointer;
... ...