Skip to content

B
bi
Commit d6c350d9 authored by 莫坚培's avatar 莫坚培
Browse files
Options

feat: 矩形状态灯渲染完成

parent dd0332d3
Show whitespace changes
Inline Side-by-side
Showing with 143 additions and 74 deletions
js/dashboard.js
View file @ d6c350d9
...@@ -24,11 +24,11 @@ var Controls = {} ...@@ -24,11 +24,11 @@ var Controls = {}
var Common = {} var Common = {}
var time = 5000 var time = 5000
let requestLoop_timer = null // 轮询定时器 let requestLoopTimer = null // 轮询定时器
let requestLoop_dataPool = [] // 各个组件实时刷新的请求数据，放到一个集合里，原来的多个组件请求合并成一个请求发送 let requestLoopDataPool = [] // 各个组件实时刷新的请求数据，放到一个集合里，原来的多个组件请求合并成一个请求发送
let requestLoop_stopFlag = false // requestLoop_dataPool请求中标志，正在请求时不进行下一波轮询，前一波请求完成才执行下一波 let requestLoopStopFlag = false // requestLoopDataPool请求中标志，正在请求时不进行下一波轮询，前一波请求完成才执行下一波
let requestLoop_time = 2000 // 轮询间隔时间 let requestLoopTime = 2000 // 轮询间隔时间
let requestLoop_groupSliceNum = 10 // 请求池requestLoop_dataPool分组，每组多少个 let requestLoopGroupSliceNum = 10 // 请求池requestLoopDataPool分组，每组多少个
// 添加定时器 // 添加定时器
var timer1 = null var timer1 = null
...@@ -293,9 +293,9 @@ function nodeCLick(e, treeId, treeNode, type) { ...@@ -293,9 +293,9 @@ function nodeCLick(e, treeId, treeNode, type) {
$('#right-wrap').css('background-image', '') $('#right-wrap').css('background-image', '')
// 清除定时器 // 清除定时器
clearInterval(timer1) clearInterval(timer1)
clearInterval(requestLoop_timer) clearInterval(requestLoopTimer)
timer1 = null timer1 = null
requestLoop_timer = null requestLoopTimer = null
let postData = { let postData = {
appId, appId,
panelId: treeNode.id, panelId: treeNode.id,
...@@ -848,8 +848,8 @@ function initCanvas() { ...@@ -848,8 +848,8 @@ function initCanvas() {
clearInterval(timer1) clearInterval(timer1)
// setTimer() // setTimer()
// 开始轮询 // 开始轮询
clearInterval(requestLoop_timer) clearInterval(requestLoopTimer)
startRequestLoop(requestLoop_time) startRequestLoop(requestLoopTime)
// wrap.style.background = Common.BackColor // wrap.style.background = Common.BackColor
...@@ -920,44 +920,48 @@ function setTimer() { ...@@ -920,44 +920,48 @@ function setTimer() {
// 轮询数据，用新逻辑，合并各组件的请求数据，做合并请求，例如，300个组件，分成6个请求，每个请求包含50个组件的数据 // 轮询数据，用新逻辑，合并各组件的请求数据，做合并请求，例如，300个组件，分成6个请求，每个请求包含50个组件的数据
function startRequestLoop() { function startRequestLoop() {
collectRequestLoopData() collectRequestLoopData()
console.log('requestLoop_dataPool', requestLoop_dataPool) console.log('requestLoopDataPool', requestLoopDataPool)
console.log('Controls.dataPoolMap', Controls.dataPoolMap) console.log('Controls.dataPoolMap', Controls.dataPoolMap)
let dataPoolList = sliceRequestLoopData(requestLoop_groupSliceNum) let dataPoolList = sliceRequestLoopData(requestLoopGroupSliceNum)
requestLoop_timer = setInterval(async () => { requestLoopTimer = setInterval(async () => {
if (requestLoop_stopFlag) { if (requestLoopStopFlag) {
return return
} }
for (let i = 0, len = dataPoolList.length; i < len; i++) { for (let i = 0, len = dataPoolList.length; i < len; i++) {
requestLoop_stopFlag = true // 进入循环即表示已经开始请求 requestLoopStopFlag = true // 进入循环即表示已经开始请求
await sendRequestLoopData(dataPoolList[i], i, len) await sendRequestLoopData(dataPoolList[i], i, len)
} }
}, requestLoop_time) }, requestLoopTime)
} }
// 发起requestLoop_dataPool的合并请求 // 发起requestLoopDataPool的合并请求
function sendRequestLoopData(list, i, len) { function sendRequestLoopData(list, i, len) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
request.post(`/bi/${appId}/variables/real-time/data/mergeReq`, list) request.post(`/bi/${appId}/variables/real-time/data/mergeReq`, list)
.then(res => { .then(res => {
if (i === len - 1) { if (i === len - 1) {
requestLoop_stopFlag = false requestLoopStopFlag = false
} }
if(res.data.data && Object.prototype.toString.call(res.data.data) === '[object Object]') { if (res.data.data && Object.prototype.toString.call(res.data.data) === '[object Object]') {
// 对拿到的数据对象进行分组，该对象的键值第一个“-”前面的数字是组件的索引值，根据这个索引值分组，相同的分为一组
let handleResMap = {}
Object.keys(res.data.data).forEach(key => { Object.keys(res.data.data).forEach(key => {
let resData = res.data.data[key] let keyIndex = Number(key.split('-')[0])
try { if (!handleResMap[keyIndex]) {
resData = JSON.parse(res.data.data[key]) handleResMap[keyIndex] = {}
} catch (err) {
console.log('JSON转义出错', err)
} }
renderRequestLoopData(Controls.dataPoolMap[key], JSON.parse(res.data.data[key])) handleResMap[keyIndex][key] = res.data.data[key]
})
console.log('handleResMap', handleResMap)
Object.keys(handleResMap).forEach(key => {
renderRequestLoopData(Controls.dataPoolMap[key], handleResMap[key])
}) })
} }
resolve(res) resolve(res)
}) })
.catch(err => { .catch(err => {
if (i === len -1) { if (i === len -1) {
requestLoop_stopFlag = false requestLoopStopFlag = false
} }
reject(err) reject(err)
}) })
...@@ -965,74 +969,137 @@ function sendRequestLoopData(list, i, len) { ...@@ -965,74 +969,137 @@ function sendRequestLoopData(list, i, len) {
} }
// 对轮询获得的数据进行渲染 // 对轮询获得的数据进行渲染
function renderRequestLoopData(mData, resData) { function renderRequestLoopData(poolData, resData) {
switch(mData.ControlType) { let ControlTypeMap = {
case 'datatextblock': // 数值显示
renderDatatextblock(mData, resData) datatextblock: () => loopRenderDatatextblock(poolData, resData, 'datatextblock'),
break // 读写框
rwtextbox: () => loopRenderDatatextblock(poolData, resData, 'rwtextbox'),
// 矩形状态灯
commonlamp: () => loopRenderCommonlamp(poolData, resData),
}
ControlTypeMap[poolData.ControlType] && ControlTypeMap[poolData.ControlType]()
}
// 渲染数值显示、读写框
function loopRenderDatatextblock(poolData, resData, label) {
let dight = poolData.DecimalDigits === null ? 0 : poolData.DecimalDigits
let valueInfo = JSON.parse(resData[Object.keys(resData)[0]])
let resDataValue = valueInfo[poolData.CheckData.name]
if(!resDataValue) {
return
}
console.log(`${label === 'datatextblock' ? '数值显示' : '读写框'}的值`, resDataValue)
console.log(`${label === 'datatextblock' ? '数值显示' : '读写框'}的mData.dataPoolMapIndex`, poolData.dataPoolMapIndex)
// 给读写框赋值、默认颜色
if (label === 'datatextblock') {
resDataValue = resDataValue.toFixed(Number(dight))
$(`#datatextblock${poolData.dataPoolMapIndex}`).text(resDataValue)
$(`#datatextblock${poolData.dataPoolMapIndex}`).css('color', '#000')
} else {
$(`#rwtextbox-text${poolData.dataPoolMapIndex}`).val(resDataValue)
$(`#rwtextbox-text${poolData.dataPoolMapIndex}`).css('color', '#000')
}
let flagItem = poolData.DataList.find(item => {
let flag = transFlag(item.flag)
return (
(flag === '=' && resDataValue == item.num) ||
(flag === '>=' && resDataValue >= item.num) ||
(flag === '<=' && resDataValue <= item.num) ||
(flag === '>' && resDataValue > item.num) ||
(flag === '<' && resDataValue < item.num) ||
(flag === '!=' && item.num != resDataValue)
)
})
// 只要有一个满足条件，则渲染该条件的颜色
if (flagItem && poolData.conCheck) {
$(`#${label === 'datatextblock' ? 'datatextblock' : 'rwtextbox-text'}${poolData.dataPoolMapIndex}`).css('color', flagItem.backColor)
} }
} }
// 渲染读写框 // 渲染矩形状态灯
function renderDatatextblock(mData, resData) { function loopRenderCommonlamp(poolData, resData) {
let dight = mData.DecimalDigits === null ? 0 : mData.DecimalDigits console.log('矩形灯', poolData, resData)
let resDataValue = resData[mData.CheckData.name] // 给默认颜色、闪烁
let Data = resDataValue.toFixed(dight) $(`#commonlamp${poolData.dataPoolMapIndex}`).css('background-color', poolData.DefaultColor)
console.log('resDataValue', resDataValue) if (poolData.DefaultFlashing) { // 默认闪烁
// 给读写框赋值 $(`#commonlamp${poolData.dataPoolMapIndex}`).addClass('animated-flash')
$(`#datatextblock${mData.dataPoolMapIndex}`).text(resDataValue) } else {
let flagItem = mData.DataList.find(item => { $(`#commonlamp${poolData.dataPoolMapIndex}`).removeClass('animated-flash')
}
let flagItem = poolData.DataList.find((item, index) => {
let key = `${poolData.dataPoolMapIndex}-${index}-${item.variable}`
let itemResData = JSON.parse(resData[key])
let itemValue = itemResData[item.variable]
let flag = transFlag(item.flag) let flag = transFlag(item.flag)
if(!itemResData) {
return false
}
return ( return (
(flag === '=' && Data == item.num) || (flag === '=' && itemValue == item.num) ||
(flag === '>=' && Data >= item.num) || (flag === '>=' && itemValue >= item.num) ||
(flag === '<=' && Data <= item.num) || (flag === '<=' && itemValue <= item.num) ||
(flag === '>' && Data > item.num) || (flag === '>' && itemValue > item.num) ||
(flag === '<' && Data < item.num) || (flag === '<' && itemValue < item.num) ||
(flag === '!=' && item.num != Data) (flag === '!=' && item.num != itemValue)
) )
}) })
if (!flagItem) {
return
}
// 只要有一个满足条件，则渲染该条件的颜色 // 只要有一个满足条件，则渲染该条件的颜色
if (flagItem && flagItem.conCheck) { $(`#commonlamp${poolData.dataPoolMapIndex}`).css('background-color', flagItem.backColor)
$(`#datatextblock${mData.dataPoolMapIndex}`).css('color', flagItem.backColor) if(flagItem.flashing) {
$(`#commonlamp${poolData.dataPoolMapIndex}`).addClass('animated-flash')
} else {
$(`#commonlamp${poolData.dataPoolMapIndex}`).removeClass('animated-flash')
} }
} }
// 整合所有组件的请求数据，放到一个数组里 // 整合所有组件的请求数据，放到一个数组里
function collectRequestLoopData() { function collectRequestLoopData() {
requestLoop_dataPool = [] requestLoopDataPool = []
Controls.dataPoolMap = {} Controls.dataPoolMap = {}
Controls.ControlList.forEach((item, index) => { Controls.ControlList.forEach((item, index) => {
switch(item.ControlType) { switch(item.ControlType) {
case 'datatextblock': // 数值显示 case 'datatextblock': // 数值显示
case 'rwtextbox': // 读写框 case 'rwtextbox': // 读写框
handleRequestData_d_r(item, index) handleRequestDataText(item, index)
break break
case 'commonlamp': // 矩形状态灯 case 'commonlamp': // 矩形状态灯
case 'ellipselamp': // 圆形状态灯
case 'image': // 动态图片 case 'image': // 动态图片
case 'dynamictext': // 动态文本 case 'dynamictext': // 动态文本
case 'ellipselamp': // 圆形状态灯 handleRequestDataDataList(item, index)
handleRequestData_DataList(item, index)
break break
case 'piechart': case 'piechart': // 饼图
handleRequestData_pie(item, index) handleRequestDataPie(item, index)
break break
case 'dashboardchart': case 'dashboardchart': // 仪表板
handleRequestData_dashboard(item, index) handleRequestDataDashboard(item, index)
break break
case 'linechart': case 'linechart': // 折线图
handleRequestData_line_bar('LineChartItemList', item, index) handleRequestDataLineAndBar('LineChartItemList', item, index)
break break
case 'barchart': case 'barchart': // 柱状图
handleRequestData_line_bar('BarChartItemList', item, index) handleRequestDataLineAndBar('BarChartItemList', item, index)
break break
} }
}) })
} }
// 把有读写框、数值显示的请求数据推到请求池 // 把有读写框、数值显示的请求数据推到请求池
function handleRequestData_d_r(item, index) { function handleRequestDataText(item, index) {
requestLoop_dataPool.push({ Controls.dataPoolMap[index] = item
requestLoopDataPool.push({
urlType: 'status', urlType: 'status',
assemblyKey: `${index}-${item.CheckData.name}`, assemblyKey: `${index}-${item.CheckData.name}`,
statusDataDTO: { statusDataDTO: {
...@@ -1041,16 +1108,16 @@ function handleRequestData_d_r(item, index) { ...@@ -1041,16 +1108,16 @@ function handleRequestData_d_r(item, index) {
variableCode: item.CheckData.name variableCode: item.CheckData.name
} }
}) })
console.log(requestLoop_dataPool, 88);
Controls.dataPoolMap[`${index}-${item.CheckData.name}`] = item Controls.dataPoolMap[`${index}-${item.CheckData.name}`] = item
Controls.dataPoolMap[`${index}-${item.CheckData.name}`].dataPoolMapIndex = index Controls.dataPoolMap[`${index}-${item.CheckData.name}`].dataPoolMapIndex = index
} }
// 把有DataList的组件的请求数据推到请求池 // 把有DataList的组件的请求数据推到请求池
function handleRequestData_DataList(item, index) { function handleRequestDataDataList(item, index) {
Controls.dataPoolMap[index] = item
item.DataList.forEach((dlItem, dlIndex) => { item.DataList.forEach((dlItem, dlIndex) => {
if (dlItem.variable !== '选择' && dlItem.CheckData) { if (dlItem.variable !== '选择' && dlItem.CheckData) {
requestLoop_dataPool.push({ requestLoopDataPool.push({
urlType: 'status', urlType: 'status',
assemblyKey: `${index}-${dlIndex}-${dlItem.CheckData.name}`, assemblyKey: `${index}-${dlIndex}-${dlItem.CheckData.name}`,
statusDataDTO: { statusDataDTO: {
...@@ -1066,7 +1133,7 @@ function handleRequestData_DataList(item, index) { ...@@ -1066,7 +1133,7 @@ function handleRequestData_DataList(item, index) {
} }
// 把饼图的请求数据推到请求池 // 把饼图的请求数据推到请求池
function handleRequestData_pie(item, index) { function handleRequestDataPie(item, index) {
Controls.Data.PieChartItemList.forEach(pieItem => { Controls.Data.PieChartItemList.forEach(pieItem => {
if (pieItem.name === item.Name) { if (pieItem.name === item.Name) {
if (pieItem.defaultDataConfig.datatype === '实时数据') { if (pieItem.defaultDataConfig.datatype === '实时数据') {
...@@ -1079,11 +1146,12 @@ function handleRequestData_pie(item, index) { ...@@ -1079,11 +1146,12 @@ function handleRequestData_pie(item, index) {
variableCode: vc.name variableCode: vc.name
} }
}) })
requestLoop_dataPool.push({ requestLoopDataPool.push({
urlType: 'pieChartOrPanel', urlType: 'pieChartOrPanel',
assemblyKey: `${index}-${item.Name}`, assemblyKey: `${index}-${item.Name}`,
pieChartOrPanel pieChartOrPanel
}) })
Controls.dataPoolMap[index] = item
Controls.dataPoolMap[`${index}-${item.Name}`] = pieItem Controls.dataPoolMap[`${index}-${item.Name}`] = pieItem
Controls.dataPoolMap[`${index}-${item.Name}`].ControlType = item.ControlType Controls.dataPoolMap[`${index}-${item.Name}`].ControlType = item.ControlType
Controls.dataPoolMap[`${index}-${item.Name}`].dataPoolMapIndex = index Controls.dataPoolMap[`${index}-${item.Name}`].dataPoolMapIndex = index
...@@ -1093,12 +1161,12 @@ function handleRequestData_pie(item, index) { ...@@ -1093,12 +1161,12 @@ function handleRequestData_pie(item, index) {
} }
// 把仪表盘的请求数据推到请求池 // 把仪表盘的请求数据推到请求池
function handleRequestData_dashboard(item, index) { function handleRequestDataDashboard(item, index) {
Controls.Data.DashBoardChartItemList.forEach(dashItem => { Controls.Data.DashBoardChartItemList.forEach(dashItem => {
if (dashItem.name === item.Name) { if (dashItem.name === item.Name) {
if (dashItem.defaultDataConfig.datatype === '实时数据') { if (dashItem.defaultDataConfig.datatype === '实时数据') {
let VariableCheckDataObj = dashItem.option?.Variable?.CheckData || {} let VariableCheckDataObj = dashItem.option?.Variable?.CheckData || {}
requestLoop_dataPool.push({ requestLoopDataPool.push({
urlType: 'pieChartOrPanel', urlType: 'pieChartOrPanel',
assemblyKey: `${index}-${item.Name}`, assemblyKey: `${index}-${item.Name}`,
pieChartOrPanel: [{ pieChartOrPanel: [{
...@@ -1107,6 +1175,7 @@ function handleRequestData_dashboard(item, index) { ...@@ -1107,6 +1175,7 @@ function handleRequestData_dashboard(item, index) {
variableCode: VariableCheckDataObj.name variableCode: VariableCheckDataObj.name
}] }]
}) })
Controls.dataPoolMap[index] = item
Controls.dataPoolMap[`${index}-${item.Name}`] = dashItem Controls.dataPoolMap[`${index}-${item.Name}`] = dashItem
Controls.dataPoolMap[`${index}-${item.Name}`].ControlType = item.ControlType Controls.dataPoolMap[`${index}-${item.Name}`].ControlType = item.ControlType
Controls.dataPoolMap[`${index}-${item.Name}`].dataPoolMapIndex = index Controls.dataPoolMap[`${index}-${item.Name}`].dataPoolMapIndex = index
...@@ -1116,14 +1185,14 @@ function handleRequestData_dashboard(item, index) { ...@@ -1116,14 +1185,14 @@ function handleRequestData_dashboard(item, index) {
} }
// 把折线图、柱状图的请求数据推到请求池 // 把折线图、柱状图的请求数据推到请求池
function handleRequestData_line_bar(label, item, index) { function handleRequestDataLineAndBar(label, item, index) {
Controls.Data[label].forEach(pieItem => { Controls.Data[label].forEach(pieItem => {
if (pieItem.name === item.Name) { if (pieItem.name === item.Name) {
if (pieItem.defaultDataConfig.datatype === '实时数据') { if (pieItem.defaultDataConfig.datatype === '实时数据') {
let list = pieItem.option?.Variables || [] let list = pieItem.option?.Variables || []
list.forEach((variableItem, variableIndex) => { list.forEach((variableItem, variableIndex) => {
let vc = variableItem.CheckData let vc = variableItem.CheckData
requestLoop_dataPool.push({ requestLoopDataPool.push({
urlType: 'limit', urlType: 'limit',
assemblyKey: `${index}-${variableIndex}-${item.Name}`, assemblyKey: `${index}-${variableIndex}-${item.Name}`,
limitData: { limitData: {
...@@ -1132,6 +1201,7 @@ function handleRequestData_line_bar(label, item, index) { ...@@ -1132,6 +1201,7 @@ function handleRequestData_line_bar(label, item, index) {
variableCode: vc.name variableCode: vc.name
} }
}) })
Controls.dataPoolMap[index] = item
Controls.dataPoolMap[`${index}-${variableIndex}-${item.Name}`] = pieItem Controls.dataPoolMap[`${index}-${variableIndex}-${item.Name}`] = pieItem
Controls.dataPoolMap[`${index}-${variableIndex}-${item.Name}`].ControlType = item.ControlType Controls.dataPoolMap[`${index}-${variableIndex}-${item.Name}`].ControlType = item.ControlType
}) })
...@@ -1142,12 +1212,12 @@ function handleRequestData_line_bar(label, item, index) { ...@@ -1142,12 +1212,12 @@ function handleRequestData_line_bar(label, item, index) {
// 对requestLoop_dataPool进行分组 // 对requestLoopDataPool进行分组
function sliceRequestLoopData(num) { function sliceRequestLoopData(num) {
let list = [] let list = []
let groupNum = Math.ceil(requestLoop_dataPool.length / num) let groupNum = Math.ceil(requestLoopDataPool.length / num)
for (let i = 0; i < groupNum; i++) { for (let i = 0; i < groupNum; i++) {
list.push(requestLoop_dataPool.slice(i * num, (i + 1) * num)) list.push(requestLoopDataPool.slice(i * num, (i + 1) * num))
} }
return list return list
} }
...@@ -2363,7 +2433,6 @@ function renderLineChart(item) { ...@@ -2363,7 +2433,6 @@ function renderLineChart(item) {
endTime = dayjs(item.EndTime).valueOf() endTime = dayjs(item.EndTime).valueOf()
} }
}) })
} else if (item.ControlType === 'datasearch') { } else if (item.ControlType === 'datasearch') {
item.EchartList.forEach(f => { item.EchartList.forEach(f => {
if (f.name === c.name) { if (f.name === c.name) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment