Skip to content

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

feat: 矩形状态灯渲染完成

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