Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
DC-TOM
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
刘照晖
DC-TOM
Commits
93cc4124
Commit
93cc4124
authored
May 28, 2025
by
Cai Wei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat(*): 布袋除尘连调
parent
ef68a0a1
Changes
9
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
270 additions
and
171 deletions
+270
-171
bagMonitor.js
src/request/api/bagMonitor.js
+24
-0
chart.js
src/utils/chart.js
+1
-1
map-svg.vue
src/views/dashboard/components/map-svg.vue
+1
-0
bag-monitoring.vue
src/views/dustMonitoring/bag-monitoring.vue
+217
-160
healthyProgress.vue
src/views/dustMonitoring/components/healthyProgress.vue
+1
-1
warn.vue
src/views/dustMonitoring/components/warn.vue
+6
-3
index.vue
src/views/dustMonitoring/index.vue
+2
-2
valveSettingDialog.vue
src/views/dustOverview/components/valveSettingDialog.vue
+2
-2
index.vue
src/views/dustOverview/index.vue
+16
-2
No files found.
src/request/api/bagMonitor.js
0 → 100644
View file @
93cc4124
import
request
from
"../index.js"
;
export
function
getMonitorRealtime
(
params
)
{
return
request
({
url
:
"/api/duster/monitor/chamber"
,
method
:
"get"
,
params
,
});
}
export
function
getMonitorToday
(
params
)
{
return
request
({
url
:
"/api/duster/monitor/curve"
,
method
:
"get"
,
params
,
});
}
export
function
getMonitorList
(
params
)
{
return
request
({
url
:
"/api/duster/monitor/list"
,
method
:
"get"
,
params
,
});
}
src/utils/chart.js
View file @
93cc4124
...
...
@@ -154,7 +154,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
yAxis
:
{
type
:
"value"
,
min
:
0
,
max
:
600
,
//
max: 600,
interval
:
200
,
axisLabel
:
{
color
:
"rgba(0,0,0,0.6)"
,
...
...
src/views/dashboard/components/map-svg.vue
View file @
93cc4124
...
...
@@ -46,6 +46,7 @@
<span
class=
"label"
>
描述:
</span>
<div
class=
"value"
>
<span
class=
"value-item"
v-for=
"(item, index) in spot.description"
:key=
"index"
>
{{
item
}}
</span>
<span
class=
"value-item"
v-if=
"spot.description.length === 0"
>
暂无
</span>
</div>
</div>
...
...
src/views/dustMonitoring/bag-monitoring.vue
View file @
93cc4124
...
...
@@ -2,16 +2,19 @@
<div
class=
"page-container bag-monitoring-container"
>
<div
class=
"header"
>
<div
class=
"select-container"
>
<span>
检测仪器
11
</span>
<span>
检测仪器
</span>
<el-select
v-model=
"selectedDevice"
placeholder=
"1#布袋检测仪"
>
<el-option
label=
"1#布袋检测仪"
value=
"1
"
></el-option>
<el-option
v-for=
"item in deviceList"
:key=
"item.deviceNo"
:label=
"item.deviceName"
:value=
"item.deviceNo
"
></el-option>
</el-select>
</div>
<div
class=
"title"
>
BME布袋监测
</div>
</div>
<div
class=
"chart-container"
>
<div
class=
"chart-wrapper"
ref=
"chartRef"
></div>
<div
class=
"chart-wrapper"
ref=
"chartRef"
v-if=
"chartData.xData.length > 0"
></div>
<div
class=
"chart-wrapper"
v-else
>
<div
class=
"no-data-text"
>
暂无数据
</div>
</div>
<div
class=
"data-panel"
:class=
"
{ 'collapsed': !isPanelOpen }">
<div
class=
"panel-toggle"
:class=
"
{ 'collapsed-icon': !isPanelOpen, 'expanded-icon': isPanelOpen }" @click="togglePanel">
...
...
@@ -20,34 +23,25 @@
</div>
<div
class=
"data-box"
>
<div
class=
"data-item"
>
<div>
时间:
{{
currentData
.
time
}}
</div>
<div>
仓室:
{{
currentData
.
c
hamber
}}
</div>
<div>
反吹:
{{
currentData
.
b
ackwash
}}
</div>
<div>
时间:
{{
currentData
.
time
||
'-'
}}
</div>
<div>
仓室:
{{
currentData
.
c
ompartName
}}
</div>
<div>
反吹:
{{
currentData
.
b
lowBack
}}
</div>
</div>
<div
class=
"data-item"
>
<div>
DI3:
{{
currentData
.
di3
}}
</div>
<div>
排:
{{
currentData
.
row
}}
</div>
<div>
实时值:
{{
currentData
.
realValue
}}
</div>
</div>
<div
class=
"data-item"
>
<div>
实时值:
{{
currentData
.
realData
}}
</div>
<div>
基线值:
{{
currentData
.
baseline
}}
</div>
<div>
Delay:
{{
currentData
.
delay
}}
</div>
<div>
totaltime:
{{
currentData
.
totaltime
}}
</div>
</div>
<div
class=
"data-item"
>
<div>
{{
currentData
.
next
}}
</div>
<div>
valve:
{{
currentData
.
valve
}}
</div>
<div>
DI_TIME=
{{
currentData
.
di_time
}}
</div>
</div>
<div
class=
"data-item"
>
<div>
false:
{{
currentData
.
false
}}
</div>
<!--
<div>
峰值R:
{{
currentData
.
peakValueR
}}
</div>
<div>
峰值H:
{{
currentData
.
peakValueH
}}
</div>
-->
<div>
peak=
{{
currentData
.
peak
}}
</div>
</div>
</div>
<div
class=
"data-box second-box"
>
<
!--
<
div
class=
"data-box second-box"
>
<div>
时间:
{{
secondaryData
.
time
}}
, 仓室:
{{
secondaryData
.
chamber
}}
, 反吹:
{{
secondaryData
.
backwash
}}
, 谷值:
{{
secondaryData
.
valleyValue
}}
, 仓室状态阀门
{{
secondaryData
.
status
}}
False
{{
secondaryData
.
falseVal
}}
</div>
</div>
</div>
-->
</div>
</div>
...
...
@@ -71,29 +65,29 @@
<thead>
<tr>
<th>
名称
</th>
<th
v-for=
"
i in 20"
:key=
"i"
>
{{
i
}}
仓
</th>
<th
v-for=
"
(value, index) in tableData"
:key=
"index"
>
{{
value
.
compartName
}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
峰值_R
</td>
<td
v-for=
"(value, index) in
peakValuesR"
:key=
"'r'+index"
>
{{
value
}}
</td>
<td
v-for=
"(value, index) in
tableData"
:key=
"'r'+index"
>
{{
value
.
peakValueR
||
'-'
}}
</td>
</tr>
<tr>
<td>
峰值_H
</td>
<td
v-for=
"(value, index) in
peakValuesH"
:key=
"'h'+index"
>
{{
value
}}
</td>
<td
v-for=
"(value, index) in
tableData"
:key=
"'h'+index"
>
{{
value
.
peakValueH
||
'-'
}}
</td>
</tr>
<tr>
<td>
状态
</td>
<td
v-for=
"(value, index) in
statusValues"
:key=
"'s'+index"
:class=
"
{ 'error': value === '故障' }">
{{
value
}}
</td>
<td
v-for=
"(value, index) in
tableData"
:key=
"'s'+index"
:class=
"
{ 'error': value.status === 1 }">
{{
value
.
status
===
1
?
'故障'
:
'正常'
}}
</td>
</tr>
<tr>
<td>
反吹中
</td>
<td
v-for=
"(value, index) in
backwashValues"
:key=
"'b'+index"
>
{{
value
}}
</td>
<td
v-for=
"(value, index) in
tableData"
:key=
"'b'+index"
>
{{
value
.
blowBack
||
'-'
}}
</td>
</tr>
<tr>
<td>
谷值
</td>
<td
v-for=
"(value, index) in
valleyValues"
:key=
"'v'+index"
>
{{
value
}}
</td>
<td
v-for=
"(value, index) in
tableData"
:key=
"'v'+index"
>
{{
value
.
valleyValue
||
'-'
}}
</td>
</tr>
</tbody>
</table>
...
...
@@ -104,13 +98,19 @@
</
template
>
<
script
setup
>
import
{
ref
,
reactive
,
onMounted
,
onBeforeUnmount
}
from
'vue'
import
{
ref
,
reactive
,
onMounted
,
onBeforeUnmount
,
watch
}
from
'vue'
import
*
as
echarts
from
'echarts'
import
moment
from
'moment'
import
{
ArrowRightBold
,
ArrowLeftBold
}
from
'@element-plus/icons-vue'
import
{
getBagMonitoringChartOption
}
from
'@/utils/chart.js'
import
{
getMonitorToday
,
getMonitorList
,
getMonitorRealtime
}
from
'@/request/api/bagMonitor'
import
{
useRoute
}
from
'vue-router'
// 获取路由参数
const
route
=
useRoute
()
// 设备选择
const
selectedDevice
=
ref
(
'1'
)
const
selectedDevice
=
ref
(
null
)
const
isPanelOpen
=
ref
(
true
)
...
...
@@ -119,53 +119,45 @@ const chartRef = ref(null)
let
chartInstance
=
null
let
updateTimer
=
null
// 定时器引用
// 时间导航相关
let
isRealTimeMode
=
true
let
lastTimePoint
=
null
// 控制是否获取实时设备状态数据
let
showRealtimeDeviceStatus
=
true
// 从路由参数获取dusterNo
const
dusterNo
=
ref
(
route
.
params
.
dusterNo
||
route
.
query
.
dusterNo
||
'ZH-ZL-1GL-001'
)
// 默认值作为fallback
// 图表数据
const
chartData
=
reactive
({
xData
:
[],
seriesData
:
[]
})
const
deviceList
=
ref
([]);
const
currentTime
=
ref
(
null
);
// 当前数据面板
const
currentData
=
reactive
({
time
:
'641'
,
chamber
:
'5'
,
backwash
:
'0'
,
di3
:
'0, 0,'
,
row
:
'1,'
,
realValue
:
'18.87,'
,
baseline
:
'10,'
,
delay
:
'0,'
,
totaltime
:
'1837'
,
next
:
'next:765,'
,
valve
:
'5'
,
di_time
:
'1848'
,
false
:
'0:0,'
,
peak
:
'4, 1, 46'
const
currentData
=
ref
({
"date"
:
""
,
"realData"
:
""
,
"valveNo"
:
""
,
"baseline"
:
""
,
"peak"
:
""
,
"time"
:
""
,
"compartName"
:
""
,
"blowBack"
:
""
,
"row"
:
""
})
// 次要数据面板
const
secondaryData
=
reactive
({
time
:
'784'
,
chamber
:
'6'
,
backwash
:
'0'
,
valleyValue
:
'3'
,
status
:
'212'
,
falseVal
:
'0'
})
// 表格数据
const
peakValuesR
=
[
0
,
0
,
-
30
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
]
const
peakValuesH
=
[
30
,
56
,
60
,
70
,
18
,
56
,
18
,
41
,
41
,
0
,
41
,
41
,
41
,
41
,
41
,
41
,
500
,
41
,
31
,
41
]
const
statusValues
=
Array
(
20
).
fill
(
'正常'
)
statusValues
[
2
]
=
'故障'
statusValues
[
16
]
=
'故障'
const
tableData
=
ref
([{
compartName
:
'默认'
,
peakValueR
:
0
,
peakValueH
:
0
,
status
:
0
,
blowBack
:
0
,
valleyValue
:
0
}]);
const
backwashValues
=
[
0
,
15
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
]
const
valleyValues
=
[
-
8
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
-
9
,
0
,
0
,
0
,
0
,
0
]
// 时间控制
const
timeInterval
=
ref
(
'10'
)
...
...
@@ -174,14 +166,6 @@ const togglePanel = () => {
isPanelOpen
.
value
=
!
isPanelOpen
.
value
}
// 格式化时间为 HH:MM:SS 格式
const
formatTime
=
(
date
)
=>
{
const
hours
=
date
.
getHours
().
toString
().
padStart
(
2
,
'0'
)
const
minutes
=
date
.
getMinutes
().
toString
().
padStart
(
2
,
'0'
)
const
seconds
=
date
.
getSeconds
().
toString
().
padStart
(
2
,
'0'
)
return
`
${
hours
}
:
${
minutes
}
:
${
seconds
}
`
}
// 初始化图表
const
initChart
=
()
=>
{
if
(
chartInstance
)
{
...
...
@@ -190,35 +174,43 @@ const initChart = () => {
// 初始化图表数据
initChartData
()
chartInstance
=
echarts
.
init
(
chartRef
.
value
)
// updateChart()
// 启动定时更新
startRealTimeUpdates
()
}
// 初始化图表数据
const
initChartData
=
()
=>
{
const
now
=
new
Date
()
chartData
.
xData
=
[]
chartData
.
seriesData
=
[]
// 创建初始数据点,从5分钟前开始
for
(
let
i
=
300
;
i
>=
0
;
i
--
)
{
const
time
=
new
Date
(
now
.
getTime
()
-
i
*
1000
)
chartData
.
xData
.
push
(
formatTime
(
time
))
chartData
.
seriesData
.
push
(
generateRandomValue
())
if
(
!
dusterNo
.
value
||
!
selectedDevice
.
value
)
{
console
.
warn
(
'缺少dusterNo或deviceNo,无法获取数据'
)
return
}
}
// 生成一个介于 20-300 之间的随机值,模拟实时数据
const
generateRandomValue
=
()
=>
{
// 有10%的概率生成峰值
if
(
Math
.
random
()
<
0.1
)
{
return
Math
.
floor
(
Math
.
random
()
*
200
)
+
200
// 200-400之间的峰值
// 获取昨天这个之前的数据
const
startTime
=
moment
().
subtract
(
1
,
'days'
).
subtract
(
5
,
'minutes'
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
const
endTime
=
moment
().
subtract
(
1
,
'days'
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
chartData
.
xData
=
[]
chartData
.
seriesData
=
[]
getMonitorToday
({
dusterNo
:
dusterNo
.
value
,
deviceNo
:
selectedDevice
.
value
,
startTime
:
startTime
,
endTime
:
endTime
}).
then
(
res
=>
{
// 将data中的date和realData数据添加到chartData中,要求大数据量下速度快
if
(
res
.
data
&&
res
.
data
.
length
>
0
)
{
res
.
data
.
forEach
((
item
)
=>
{
chartData
.
xData
.
push
(
item
.
date
)
chartData
.
seriesData
.
push
(
item
.
realData
)
})
// 当前时间
currentTime
.
value
=
res
.
data
[
res
.
data
.
length
-
1
].
date
chartInstance
=
echarts
.
init
(
chartRef
.
value
)
// 启动定时更新
startRealTimeUpdates
()
}
else
{
console
.
warn
(
'未获取到初始数据'
)
}
return
Math
.
floor
(
Math
.
random
()
*
130
)
+
20
// 20-150之间的基础值
}).
catch
(
err
=>
{
console
.
error
(
'获取初始数据失败:'
,
err
)
})
}
// 更新图表
...
...
@@ -235,23 +227,60 @@ const startRealTimeUpdates = () => {
}
updateTimer
=
setInterval
(()
=>
{
// 添加新数据点
const
now
=
new
Date
()
chartData
.
xData
.
push
(
formatTime
(
now
))
chartData
.
seriesData
.
push
(
generateRandomValue
())
updateFunction
()
},
1000
)
isRealTimeMode
=
true
showRealtimeDeviceStatus
=
true
}
// 更新函数
const
updateFunction
=
()
=>
{
if
(
!
dusterNo
.
value
||
!
selectedDevice
.
value
)
return
;
// 从API获取实时数据
if
(
showRealtimeDeviceStatus
)
{
getMonitorRealtime
({
dusterNo
:
dusterNo
.
value
,
deviceNo
:
selectedDevice
.
value
}).
then
(
res
=>
{
if
(
res
.
data
)
{
// 更新数据面板
if
(
res
.
data
.
realtimeCompart
)
{
tableData
.
value
=
res
.
data
.
realtimeCompart
}
if
(
res
.
data
.
realtimeCurve
)
{
currentData
.
value
=
res
.
data
.
realtimeCurve
}
}
}).
catch
(
err
=>
{
console
.
error
(
'获取实时数据失败:'
,
err
)
})
}
// 结束时间往后推一秒
let
endTime
=
moment
(
new
Date
(
currentTime
.
value
)).
add
(
1
,
'seconds'
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
getMonitorToday
({
dusterNo
:
dusterNo
.
value
,
deviceNo
:
selectedDevice
.
value
,
startTime
:
currentTime
.
value
,
endTime
:
endTime
}).
then
(
res
=>
{
if
(
res
.
data
&&
res
.
data
.
length
>
0
)
{
const
item
=
res
.
data
[
res
.
data
.
length
-
1
]
chartData
.
xData
.
push
(
item
.
date
)
chartData
.
seriesData
.
push
(
item
.
realData
||
0
)
// 移除最旧的数据点以保持固定长度
if
(
chartData
.
xData
.
length
>
3
1
)
{
// 保持3
0秒的数据
if
(
chartData
.
xData
.
length
>
3
01
)
{
// 保持30
0秒的数据
chartData
.
xData
.
shift
()
chartData
.
seriesData
.
shift
()
}
currentTime
.
value
=
endTime
;
// 更新图表
updateChart
()
updateDataPanels
()
},
1000
)
isRealTimeMode
=
true
}
})
}
// 停止实时更新
...
...
@@ -262,12 +291,14 @@ const stopRealTimeUpdates = () => {
}
isRealTimeMode
=
false
showRealtimeDeviceStatus
=
false
}
// 向前导航(查看更早的数据)
const
navigateBackward
=
()
=>
{
// 关闭实时更新
stopRealTimeUpdates
()
// 不完全关闭轮询,只禁用实时设备状态获取
showRealtimeDeviceStatus
=
false
// 获取时间间隔(分钟)
const
interval
=
parseInt
(
timeInterval
.
value
)
||
10
const
intervalMs
=
interval
*
60
*
1000
...
...
@@ -275,9 +306,7 @@ const navigateBackward = () => {
// 如果是第一次点击,以当前最后一条数据的时间为参考
if
(
lastTimePoint
===
null
&&
chartData
.
xData
.
length
>
0
)
{
const
lastTimeString
=
chartData
.
xData
[
chartData
.
xData
.
length
-
1
]
const
[
hours
,
minutes
,
seconds
]
=
lastTimeString
.
split
(
':'
).
map
(
Number
)
const
now
=
new
Date
()
lastTimePoint
=
new
Date
(
now
.
getFullYear
(),
now
.
getMonth
(),
now
.
getDate
(),
hours
,
minutes
,
seconds
)
lastTimePoint
=
new
Date
(
lastTimeString
)
}
else
if
(
lastTimePoint
===
null
)
{
// 如果没有数据,使用当前时间
lastTimePoint
=
new
Date
()
...
...
@@ -293,8 +322,8 @@ const navigateBackward = () => {
// 向后导航(查看更近的数据)
const
navigateForward
=
()
=>
{
//
关闭实时更新
s
topRealTimeUpdates
()
//
不完全关闭轮询,只禁用实时设备状态获取
s
howRealtimeDeviceStatus
=
false
// 获取时间间隔(分钟)
const
interval
=
parseInt
(
timeInterval
.
value
)
||
10
...
...
@@ -303,9 +332,7 @@ const navigateForward = () => {
// 如果是第一次点击,以当前最后一条数据的时间为参考
if
(
lastTimePoint
===
null
&&
chartData
.
xData
.
length
>
0
)
{
const
lastTimeString
=
chartData
.
xData
[
chartData
.
xData
.
length
-
1
]
const
[
hours
,
minutes
,
seconds
]
=
lastTimeString
.
split
(
':'
).
map
(
Number
)
const
now
=
new
Date
()
lastTimePoint
=
new
Date
(
now
.
getFullYear
(),
now
.
getMonth
(),
now
.
getDate
(),
hours
,
minutes
,
seconds
)
lastTimePoint
=
new
Date
(
lastTimeString
)
}
else
if
(
lastTimePoint
===
null
)
{
// 如果没有数据,使用当前时间
lastTimePoint
=
new
Date
()
...
...
@@ -314,11 +341,11 @@ const navigateForward = () => {
// 计算新的时间范围
const
endTime
=
new
Date
(
lastTimePoint
.
getTime
()
+
intervalMs
)
//
//
如果新的结束时间超过当前时间,则切换回实时模式
const
now
=
new
Date
()
// 如果新的结束时间超过当前时间,则切换回实时模式
const
now
=
moment
()
if
(
endTime
>
now
)
{
lastTimePoint
=
null
// startRealTimeUpdates()
showRealtimeDeviceStatus
=
true
return
}
...
...
@@ -333,9 +360,12 @@ const reset = () => {
chartData
.
xData
=
[]
chartData
.
seriesData
=
[]
lastTimePoint
=
null
// 恢复实时设备状态获取
showRealtimeDeviceStatus
=
true
// 重新生成当前时间往前300秒的数据
const
now
=
new
Date
()
generateHistoricalData
(
now
,
5
)
// 开启实时更新
...
...
@@ -346,63 +376,46 @@ const reset = () => {
const
startRealTimeUpdate
=
()
=>
{
// 确保之前的定时器已清除
stopRealTimeUpdates
()
// 初始化实时模式标志
isRealTimeMode
=
true
// 启动定时更新
updateTimer
=
setInterval
(()
=>
{
// 添加新数据点
const
now
=
new
Date
()
chartData
.
xData
.
push
(
formatTime
(
now
))
chartData
.
seriesData
.
push
(
generateRandomValue
())
// 移除最旧的数据点以保持固定长度
if
(
chartData
.
xData
.
length
>
31
)
{
// 保持30秒的数据
chartData
.
xData
.
shift
()
chartData
.
seriesData
.
shift
()
}
// 更新图表
updateChart
()
updateDataPanels
()
updateFunction
()
},
1000
)
}
// 生成历史数据
const
generateHistoricalData
=
(
endTime
,
intervalMinutes
)
=>
{
if
(
!
dusterNo
.
value
||
!
selectedDevice
.
value
)
return
;
// 清空现有数据
chartData
.
xData
=
[]
chartData
.
seriesData
=
[]
// 计算开始时间(结束时间减去间隔)
const
startTime
=
new
Date
(
endTime
.
getTime
()
-
intervalMinutes
*
60
*
1000
)
// 生成数据点(每秒一个)
for
(
let
time
=
new
Date
(
startTime
);
time
<=
endTime
;
time
=
new
Date
(
time
.
getTime
()
+
1000
))
{
chartData
.
xData
.
push
(
formatTime
(
time
))
chartData
.
seriesData
.
push
(
generateRandomValue
())
}
const
startTimeStr
=
moment
(
startTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
const
endTimeStr
=
moment
(
endTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
// 从API获取历史数据
getMonitorToday
({
dusterNo
:
dusterNo
.
value
,
deviceNo
:
selectedDevice
.
value
,
startTime
:
startTimeStr
,
endTime
:
endTimeStr
}).
then
(
res
=>
{
if
(
res
.
data
&&
res
.
data
.
length
>
0
)
{
res
.
data
.
forEach
(
item
=>
{
chartData
.
xData
.
push
(
item
.
date
)
chartData
.
seriesData
.
push
(
item
.
realData
)
})
// 更新图表
updateChart
()
}
// 更新数据面板
const
updateDataPanels
=
()
=>
{
// 随机更新当前数据面板的实时值
currentData
.
realValue
=
(
Math
.
random
()
*
30
+
10
).
toFixed
(
2
)
+
','
// 更新时间显示
const
now
=
new
Date
()
currentData
.
time
=
Math
.
floor
((
now
.
getTime
()
/
1000
)
%
1000
).
toString
()
// 每10秒更新一次次要数据面板
if
(
now
.
getSeconds
()
%
1
===
0
)
{
secondaryData
.
time
=
Math
.
floor
((
now
.
getTime
()
/
1000
)
%
1000
).
toString
()
secondaryData
.
valleyValue
=
Math
.
floor
(
Math
.
random
()
*
10
).
toString
()
}
}).
catch
(
err
=>
{
console
.
error
(
'获取历史数据失败:'
,
err
)
})
}
// 监听窗口大小变化,调整图表大小
const
handleResize
=
()
=>
{
if
(
chartInstance
)
{
...
...
@@ -410,8 +423,41 @@ const handleResize = () => {
}
}
onMounted
(()
=>
{
const
getDeviceList
=
()
=>
{
if
(
!
dusterNo
.
value
)
return
;
getMonitorList
({
dusterNo
:
dusterNo
.
value
}).
then
(
res
=>
{
deviceList
.
value
=
res
.
data
.
devices
||
[];
if
(
deviceList
.
value
.
length
>
0
)
{
selectedDevice
.
value
=
deviceList
.
value
[
0
].
deviceNo
tableData
.
value
=
Array
.
from
({
length
:
res
.
data
.
compartCount
},
(
item
,
index
)
=>
({
compartName
:
`
${
index
+
1
}
仓`
,
peakValueR
:
0
,
peakValueH
:
0
,
status
:
0
,
blowBack
:
0
,
}))
}
initChart
()
})
}
// 监听dusterNo变化
watch
(
dusterNo
,
(
newVal
)
=>
{
if
(
newVal
)
{
// 重新获取设备列表
getDeviceList
()
}
})
onMounted
(()
=>
{
console
.
log
(
"dusterNo"
,
route
);
if
(
dusterNo
.
value
)
{
getDeviceList
()
}
window
.
addEventListener
(
'resize'
,
handleResize
)
})
...
...
@@ -442,7 +488,7 @@ onBeforeUnmount(() => {
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
margin-bottom
:
1
0
px
;
margin-bottom
:
1
6
px
;
.select-container
{
position
:
absolute
;
...
...
@@ -463,7 +509,7 @@ onBeforeUnmount(() => {
background
:
#fcf0c2
;
padding
:
2px
8px
;
margin-left
:
10px
;
border-radius
:
4
px
;
border-radius
:
6
px
;
}
}
...
...
@@ -485,11 +531,22 @@ onBeforeUnmount(() => {
.chart-wrapper
{
flex
:
1
;
width
:
100%
;
.no-data-text
{
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-size
:
14px
;
color
:
#999
;
background-color
:
#f5f7fa
;
border-radius
:
4px
;
}
}
.data-panel
{
position
:
absolute
;
top
:
8
0px
;
top
:
11
0px
;
right
:
25px
;
width
:
320px
;
z-index
:
10
;
...
...
src/views/dustMonitoring/components/healthyProgress.vue
View file @
93cc4124
...
...
@@ -9,7 +9,7 @@
class=
"healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern diagonal-pattern-animation"
></div>
<div
class=
"justify-between items-center mb-2 healthy-text-position"
>
<span
class=
"font-semibold"
>
健康度
</span>
<span
class=
"font-semibold"
>
健康度
:
</span>
<span
id=
"square-progress-value"
class=
"text-lg font-bold"
>
45%
</span>
</div>
</div>
...
...
src/views/dustMonitoring/components/warn.vue
View file @
93cc4124
<
template
>
<div
class=
"title layout1"
>
<span
class=
"warn-title"
>
告警:
</span>
<
span
class=
"jump-icon"
>
>>
</span
>
<
!--
<span
class=
"jump-icon"
>
>>
</span>
--
>
</div>
<div
class=
"content"
>
<div
class=
"item"
v-for=
"item in listInfo"
:key=
"item.id"
>
...
...
@@ -41,12 +41,15 @@ const props = defineProps({
width
:
100%
;
display
:
flex
;
align-items
:
center
;
margin-bottom
:
10
px
;
margin-bottom
:
5
px
;
padding
:
4px
0px
4px
2px
;
box-shadow
:
rgba
(
53
,
58
,
62
,
0
.08
)
0px
1px
10px
0px
,
rgba
(
53
,
58
,
62
,
0
.08
)
0px
2px
4px
0px
;
box-shadow
:
rgba
(
53
,
58
,
62
,
0
.04
)
0px
1px
10px
0px
,
rgba
(
53
,
58
,
62
,
0
.04
)
0px
2px
4px
0px
;
font-size
:
14px
;
color
:
#333
;
img
{
width
:
20px
;
height
:
auto
;
margin-right
:
10px
;
}
}
}
...
...
src/views/dustMonitoring/index.vue
View file @
93cc4124
...
...
@@ -512,7 +512,7 @@ $borderColor: #bbbdc391;
.part1
{
width
:
100%
;
height
:
6
vh
;
height
:
5
vh
;
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
...
...
@@ -527,7 +527,7 @@ $borderColor: #bbbdc391;
.part2
{
margin-top
:
10px
;
width
:
100%
;
height
:
calc
(
5
7
vh
-
10px
);
height
:
calc
(
5
8
vh
-
10px
);
border-radius
:
6px
;
border
:
1px
solid
rgba
(
13
,
15
,
18
,
0
.1
);
box-shadow
:
0px
3px
6px
0px
rgba
(
13
,
15
,
18
,
0
.1
);
...
...
src/views/dustOverview/components/valveSettingDialog.vue
View file @
93cc4124
...
...
@@ -345,7 +345,7 @@ const handleConfirm = () => {
}
.valve-cell
{
width
:
41px
;
min-
width
:
41px
;
background
:
white
;
padding
:
4px
8px
;
border-radius
:
4px
;
...
...
@@ -368,7 +368,7 @@ const handleConfirm = () => {
.cell-value
{
display
:
flex
;
justify-content
:
center
;
align-items
:
end
;
align-items
:
baseline
;
font-size
:
16px
;
color
:
#606266
;
span
{
...
...
src/views/dustOverview/index.vue
View file @
93cc4124
...
...
@@ -102,14 +102,15 @@
<
template
#
compartHealthList=
"{ row }"
>
<div
class=
"status-matrix"
v-if=
"row.compartHealthList.length > 0"
>
<div
v-for=
"(
r
ow, rowIndex) in row.compartHealthList"
v-for=
"(
childR
ow, rowIndex) in row.compartHealthList"
:key=
"rowIndex"
class=
"matrix-row"
>
<div
v-for=
"(status, colIndex) in
r
ow"
v-for=
"(status, colIndex) in
childR
ow"
:key=
"colIndex"
class=
"status-dot"
@
click=
"handleStatusDotClick(row, colIndex)"
:class=
"
{
'status-normal': status.healthStatus === 1,
'status-warning': status.healthStatus === 2,
...
...
@@ -175,6 +176,7 @@ import {
postAddCompartAllocation
,
postAddValveInfo
,
}
from
"@/request/api/dustOverview"
;
import
{
useRouter
}
from
"vue-router"
;
import
{
getToken
}
from
"@/utils/auth"
;
import
CommonTable
from
"@/components/commonTable/index.vue"
;
import
{
ElMessageBox
,
ElMessage
}
from
"element-plus"
;
...
...
@@ -182,6 +184,8 @@ import RoomSettingDialog from "./components/roomSettingDialog.vue";
import
ValveSettingDialog
from
"./components/valveSettingDialog.vue"
;
import
AddDustCollectorDialog
from
"./components/addDustCollectorDialog.vue"
;
const
router
=
useRouter
();
const
formInline
=
ref
({
deviceName
:
""
,
region
:
"all"
,
...
...
@@ -357,6 +361,16 @@ const handleValveNumClick = (row) => {
}
};
const
handleStatusDotClick
=
(
row
,
colIndex
)
=>
{
console
.
log
(
"row"
,
row
);
router
.
push
({
path
:
"/bag-monitor"
,
query
:
{
dusterNo
:
row
.
deviceNo
,
}
});
};
// 确认电磁阀设置
const
handleValveSettingConfirm
=
(
updatedStatusData
)
=>
{
const
list
=
updatedStatusData
.
map
((
item
)
=>
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment