Commit 93cc4124 authored by Cai Wei's avatar Cai Wei

feat(*): 布袋除尘连调

parent ef68a0a1
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,
});
}
...@@ -154,7 +154,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -154,7 +154,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
yAxis: { yAxis: {
type: "value", type: "value",
min: 0, min: 0,
max: 600, // max: 600,
interval: 200, interval: 200,
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "rgba(0,0,0,0.6)",
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
<span class="label">描述:</span> <span class="label">描述:</span>
<div class="value"> <div class="value">
<span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span> <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>
</div> </div>
......
...@@ -2,16 +2,19 @@ ...@@ -2,16 +2,19 @@
<div class="page-container bag-monitoring-container"> <div class="page-container bag-monitoring-container">
<div class="header"> <div class="header">
<div class="select-container"> <div class="select-container">
<span>检测仪器11</span> <span>检测仪器</span>
<el-select v-model="selectedDevice" placeholder="1#布袋检测仪"> <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> </el-select>
</div> </div>
<div class="title">BME布袋监测</div> <div class="title">BME布袋监测</div>
</div> </div>
<div class="chart-container"> <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="data-panel" :class="{ 'collapsed': !isPanelOpen }">
<div class="panel-toggle" :class="{ 'collapsed-icon': !isPanelOpen, 'expanded-icon': isPanelOpen }" @click="togglePanel"> <div class="panel-toggle" :class="{ 'collapsed-icon': !isPanelOpen, 'expanded-icon': isPanelOpen }" @click="togglePanel">
...@@ -20,34 +23,25 @@ ...@@ -20,34 +23,25 @@
</div> </div>
<div class="data-box"> <div class="data-box">
<div class="data-item"> <div class="data-item">
<div>时间: {{ currentData.time }}</div> <div>时间: {{ currentData.time || '-' }}</div>
<div>仓室: {{ currentData.chamber }}</div> <div>仓室: {{ currentData.compartName }}</div>
<div>反吹: {{ currentData.backwash }}</div> <div>反吹: {{ currentData.blowBack }}</div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div>DI3: {{ currentData.di3 }}</div>
<div>排: {{ currentData.row }}</div> <div>排: {{ currentData.row }}</div>
<div>实时值: {{ currentData.realValue }}</div> <div>实时值: {{ currentData.realData }}</div>
</div>
<div class="data-item">
<div>基线值: {{ currentData.baseline }}</div> <div>基线值: {{ currentData.baseline }}</div>
<div>Delay: {{ currentData.delay }}</div>
<div>totaltime: {{ currentData.totaltime }}</div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div>{{ currentData.next }}</div> <!-- <div>峰值R: {{ currentData.peakValueR }}</div>
<div>valve:{{ currentData.valve }}</div> <div>峰值H: {{ currentData.peakValueH }}</div> -->
<div>DI_TIME={{ currentData.di_time }}</div>
</div>
<div class="data-item">
<div>false:{{ currentData.false }}</div>
<div>peak={{ currentData.peak }}</div> <div>peak={{ currentData.peak }}</div>
</div> </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>时间:{{ secondaryData.time }}, 仓室: {{ secondaryData.chamber }}, 反吹: {{ secondaryData.backwash }}, 谷值: {{ secondaryData.valleyValue }}, 仓室状态阀门{{ secondaryData.status }}False{{ secondaryData.falseVal }}</div>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -71,29 +65,29 @@ ...@@ -71,29 +65,29 @@
<thead> <thead>
<tr> <tr>
<th>名称</th> <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> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>峰值_R</td> <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>
<tr> <tr>
<td>峰值_H</td> <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>
<tr> <tr>
<td>状态</td> <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>
<tr> <tr>
<td>反吹中</td> <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>
<tr> <tr>
<td>谷值</td> <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> </tr>
</tbody> </tbody>
</table> </table>
...@@ -104,13 +98,19 @@ ...@@ -104,13 +98,19 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue' import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import moment from 'moment'
import { ArrowRightBold, ArrowLeftBold } from '@element-plus/icons-vue' import { ArrowRightBold, ArrowLeftBold } from '@element-plus/icons-vue'
import { getBagMonitoringChartOption } from '@/utils/chart.js' 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) const isPanelOpen = ref(true)
...@@ -119,53 +119,45 @@ const chartRef = ref(null) ...@@ -119,53 +119,45 @@ const chartRef = ref(null)
let chartInstance = null let chartInstance = null
let updateTimer = null // 定时器引用 let updateTimer = null // 定时器引用
// 时间导航相关
let isRealTimeMode = true
let lastTimePoint = null let lastTimePoint = null
// 控制是否获取实时设备状态数据
let showRealtimeDeviceStatus = true
// 从路由参数获取dusterNo
const dusterNo = ref(route.params.dusterNo || route.query.dusterNo || 'ZH-ZL-1GL-001') // 默认值作为fallback
// 图表数据 // 图表数据
const chartData = reactive({ const chartData = reactive({
xData: [], xData: [],
seriesData: [] seriesData: []
}) })
const deviceList = ref([]);
const currentTime = ref(null);
// 当前数据面板 // 当前数据面板
const currentData = reactive({ const currentData = ref({
time: '641', "date": "",
chamber: '5', "realData": "",
backwash: '0', "valveNo": "",
di3: '0, 0,', "baseline": "",
row: '1,', "peak": "",
realValue: '18.87,', "time": "",
baseline: '10,', "compartName": "",
delay: '0,', "blowBack": "",
totaltime: '1837', "row": ""
next: 'next:765,',
valve: '5',
di_time: '1848',
false: '0:0,',
peak: '4, 1, 46'
}) })
// 次要数据面板
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 tableData = ref([{
const peakValuesH = [30, 56, 60, 70, 18, 56, 18, 41, 41, 0, 41, 41, 41, 41, 41, 41, 500, 41, 31, 41] compartName: '默认',
const statusValues = Array(20).fill('正常') peakValueR: 0,
statusValues[2] = '故障' peakValueH: 0,
statusValues[16] = '故障' 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') const timeInterval = ref('10')
...@@ -174,14 +166,6 @@ const togglePanel = () => { ...@@ -174,14 +166,6 @@ const togglePanel = () => {
isPanelOpen.value = !isPanelOpen.value 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 = () => { const initChart = () => {
if (chartInstance) { if (chartInstance) {
...@@ -190,35 +174,43 @@ const initChart = () => { ...@@ -190,35 +174,43 @@ const initChart = () => {
// 初始化图表数据 // 初始化图表数据
initChartData() initChartData()
chartInstance = echarts.init(chartRef.value)
// updateChart()
// 启动定时更新
startRealTimeUpdates()
} }
// 初始化图表数据 // 初始化图表数据
const initChartData = () => { const initChartData = () => {
const now = new Date() if (!dusterNo.value || !selectedDevice.value) {
chartData.xData = [] console.warn('缺少dusterNo或deviceNo,无法获取数据')
chartData.seriesData = [] return
// 创建初始数据点,从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())
} }
}
// 生成一个介于 20-300 之间的随机值,模拟实时数据 // 获取昨天这个之前的数据
const generateRandomValue = () => { const startTime = moment().subtract(1, 'days').subtract(5, 'minutes').format('YYYY-MM-DD HH:mm:ss')
// 有10%的概率生成峰值 const endTime = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')
if (Math.random() < 0.1) { chartData.xData = []
return Math.floor(Math.random() * 200) + 200 // 200-400之间的峰值 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 = () => { ...@@ -235,23 +227,60 @@ const startRealTimeUpdates = () => {
} }
updateTimer = setInterval(() => { updateTimer = setInterval(() => {
// 添加新数据点 updateFunction()
const now = new Date() }, 1000)
chartData.xData.push(formatTime(now))
chartData.seriesData.push(generateRandomValue()) 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 > 31) { // 保持30秒的数据 if (chartData.xData.length > 301) { // 保持300秒的数据
chartData.xData.shift() chartData.xData.shift()
chartData.seriesData.shift() chartData.seriesData.shift()
} }
currentTime.value = endTime;
// 更新图表 // 更新图表
updateChart() updateChart()
updateDataPanels() }
}, 1000) })
isRealTimeMode = true
} }
// 停止实时更新 // 停止实时更新
...@@ -262,12 +291,14 @@ const stopRealTimeUpdates = () => { ...@@ -262,12 +291,14 @@ const stopRealTimeUpdates = () => {
} }
isRealTimeMode = false isRealTimeMode = false
showRealtimeDeviceStatus = false
} }
// 向前导航(查看更早的数据) // 向前导航(查看更早的数据)
const navigateBackward = () => { const navigateBackward = () => {
// 关闭实时更新 // 不完全关闭轮询,只禁用实时设备状态获取
stopRealTimeUpdates() showRealtimeDeviceStatus = false
// 获取时间间隔(分钟) // 获取时间间隔(分钟)
const interval = parseInt(timeInterval.value) || 10 const interval = parseInt(timeInterval.value) || 10
const intervalMs = interval * 60 * 1000 const intervalMs = interval * 60 * 1000
...@@ -275,9 +306,7 @@ const navigateBackward = () => { ...@@ -275,9 +306,7 @@ const navigateBackward = () => {
// 如果是第一次点击,以当前最后一条数据的时间为参考 // 如果是第一次点击,以当前最后一条数据的时间为参考
if (lastTimePoint === null && chartData.xData.length > 0) { if (lastTimePoint === null && chartData.xData.length > 0) {
const lastTimeString = chartData.xData[chartData.xData.length - 1] const lastTimeString = chartData.xData[chartData.xData.length - 1]
const [hours, minutes, seconds] = lastTimeString.split(':').map(Number) lastTimePoint = new Date(lastTimeString)
const now = new Date()
lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
} else if (lastTimePoint === null) { } else if (lastTimePoint === null) {
// 如果没有数据,使用当前时间 // 如果没有数据,使用当前时间
lastTimePoint = new Date() lastTimePoint = new Date()
...@@ -293,8 +322,8 @@ const navigateBackward = () => { ...@@ -293,8 +322,8 @@ const navigateBackward = () => {
// 向后导航(查看更近的数据) // 向后导航(查看更近的数据)
const navigateForward = () => { const navigateForward = () => {
// 关闭实时更新 // 不完全关闭轮询,只禁用实时设备状态获取
stopRealTimeUpdates() showRealtimeDeviceStatus = false
// 获取时间间隔(分钟) // 获取时间间隔(分钟)
const interval = parseInt(timeInterval.value) || 10 const interval = parseInt(timeInterval.value) || 10
...@@ -303,9 +332,7 @@ const navigateForward = () => { ...@@ -303,9 +332,7 @@ const navigateForward = () => {
// 如果是第一次点击,以当前最后一条数据的时间为参考 // 如果是第一次点击,以当前最后一条数据的时间为参考
if (lastTimePoint === null && chartData.xData.length > 0) { if (lastTimePoint === null && chartData.xData.length > 0) {
const lastTimeString = chartData.xData[chartData.xData.length - 1] const lastTimeString = chartData.xData[chartData.xData.length - 1]
const [hours, minutes, seconds] = lastTimeString.split(':').map(Number) lastTimePoint = new Date(lastTimeString)
const now = new Date()
lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
} else if (lastTimePoint === null) { } else if (lastTimePoint === null) {
// 如果没有数据,使用当前时间 // 如果没有数据,使用当前时间
lastTimePoint = new Date() lastTimePoint = new Date()
...@@ -314,11 +341,11 @@ const navigateForward = () => { ...@@ -314,11 +341,11 @@ const navigateForward = () => {
// 计算新的时间范围 // 计算新的时间范围
const endTime = new Date(lastTimePoint.getTime() + intervalMs) const endTime = new Date(lastTimePoint.getTime() + intervalMs)
// // 如果新的结束时间超过当前时间,则切换回实时模式 // 如果新的结束时间超过当前时间,则切换回实时模式
const now = new Date() const now = moment()
if (endTime > now) { if (endTime > now) {
lastTimePoint = null lastTimePoint = null
// startRealTimeUpdates() showRealtimeDeviceStatus = true
return return
} }
...@@ -333,9 +360,12 @@ const reset = () => { ...@@ -333,9 +360,12 @@ const reset = () => {
chartData.xData = [] chartData.xData = []
chartData.seriesData = [] chartData.seriesData = []
lastTimePoint = null lastTimePoint = null
// 恢复实时设备状态获取
showRealtimeDeviceStatus = true
// 重新生成当前时间往前300秒的数据 // 重新生成当前时间往前300秒的数据
const now = new Date() const now = new Date()
generateHistoricalData(now, 5) generateHistoricalData(now, 5)
// 开启实时更新 // 开启实时更新
...@@ -346,63 +376,46 @@ const reset = () => { ...@@ -346,63 +376,46 @@ const reset = () => {
const startRealTimeUpdate = () => { const startRealTimeUpdate = () => {
// 确保之前的定时器已清除 // 确保之前的定时器已清除
stopRealTimeUpdates() stopRealTimeUpdates()
// 初始化实时模式标志 // 初始化实时模式标志
isRealTimeMode = true isRealTimeMode = true
// 启动定时更新 // 启动定时更新
updateTimer = setInterval(() => { updateTimer = setInterval(() => {
// 添加新数据点 updateFunction()
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()
}, 1000) }, 1000)
} }
// 生成历史数据 // 生成历史数据
const generateHistoricalData = (endTime, intervalMinutes) => { const generateHistoricalData = (endTime, intervalMinutes) => {
if (!dusterNo.value || !selectedDevice.value) return;
// 清空现有数据 // 清空现有数据
chartData.xData = [] chartData.xData = []
chartData.seriesData = [] chartData.seriesData = []
// 计算开始时间(结束时间减去间隔)
const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000) const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000)
const startTimeStr = moment(startTime).format('YYYY-MM-DD HH:mm:ss')
// 生成数据点(每秒一个) const endTimeStr = moment(endTime).format('YYYY-MM-DD HH:mm:ss')
for (let time = new Date(startTime); time <= endTime; time = new Date(time.getTime() + 1000)) {
chartData.xData.push(formatTime(time)) // 从API获取历史数据
chartData.seriesData.push(generateRandomValue()) 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() 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 = () => { const handleResize = () => {
if (chartInstance) { if (chartInstance) {
...@@ -410,8 +423,41 @@ const handleResize = () => { ...@@ -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() initChart()
})
}
// 监听dusterNo变化
watch(dusterNo, (newVal) => {
if (newVal) {
// 重新获取设备列表
getDeviceList()
}
})
onMounted(() => {
console.log("dusterNo", route);
if (dusterNo.value) {
getDeviceList()
}
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
}) })
...@@ -442,7 +488,7 @@ onBeforeUnmount(() => { ...@@ -442,7 +488,7 @@ onBeforeUnmount(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 16px;
.select-container { .select-container {
position: absolute; position: absolute;
...@@ -463,7 +509,7 @@ onBeforeUnmount(() => { ...@@ -463,7 +509,7 @@ onBeforeUnmount(() => {
background: #fcf0c2; background: #fcf0c2;
padding: 2px 8px; padding: 2px 8px;
margin-left: 10px; margin-left: 10px;
border-radius: 4px; border-radius: 6px;
} }
} }
...@@ -485,11 +531,22 @@ onBeforeUnmount(() => { ...@@ -485,11 +531,22 @@ onBeforeUnmount(() => {
.chart-wrapper { .chart-wrapper {
flex: 1; flex: 1;
width: 100%; 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 { .data-panel {
position: absolute; position: absolute;
top: 80px; top: 110px;
right: 25px; right: 25px;
width: 320px; width: 320px;
z-index: 10; z-index: 10;
......
...@@ -9,7 +9,7 @@ ...@@ -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" 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>
<div class="justify-between items-center mb-2 healthy-text-position"> <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> <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
</div> </div>
</div> </div>
......
<template> <template>
<div class="title layout1"> <div class="title layout1">
<span class="warn-title">告警:</span> <span class="warn-title">告警:</span>
<span class="jump-icon">>></span> <!-- <span class="jump-icon">>></span> -->
</div> </div>
<div class="content"> <div class="content">
<div class="item" v-for="item in listInfo" :key="item.id"> <div class="item" v-for="item in listInfo" :key="item.id">
...@@ -41,12 +41,15 @@ const props = defineProps({ ...@@ -41,12 +41,15 @@ const props = defineProps({
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 5px;
padding: 4px 0px 4px 2px; 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 { img {
width: 20px; width: 20px;
height: auto; height: auto;
margin-right: 10px;
} }
} }
} }
......
...@@ -512,7 +512,7 @@ $borderColor: #bbbdc391; ...@@ -512,7 +512,7 @@ $borderColor: #bbbdc391;
.part1 { .part1 {
width: 100%; width: 100%;
height: 6vh; height: 5vh;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
...@@ -527,7 +527,7 @@ $borderColor: #bbbdc391; ...@@ -527,7 +527,7 @@ $borderColor: #bbbdc391;
.part2 { .part2 {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
height: calc(57vh - 10px); height: calc(58vh - 10px);
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
......
...@@ -345,7 +345,7 @@ const handleConfirm = () => { ...@@ -345,7 +345,7 @@ const handleConfirm = () => {
} }
.valve-cell { .valve-cell {
width: 41px; min-width: 41px;
background: white; background: white;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
...@@ -368,7 +368,7 @@ const handleConfirm = () => { ...@@ -368,7 +368,7 @@ const handleConfirm = () => {
.cell-value { .cell-value {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: end; align-items: baseline;
font-size: 16px; font-size: 16px;
color: #606266; color: #606266;
span { span {
......
...@@ -102,14 +102,15 @@ ...@@ -102,14 +102,15 @@
<template #compartHealthList="{ row }"> <template #compartHealthList="{ row }">
<div class="status-matrix" v-if="row.compartHealthList.length > 0"> <div class="status-matrix" v-if="row.compartHealthList.length > 0">
<div <div
v-for="(row, rowIndex) in row.compartHealthList" v-for="(childRow, rowIndex) in row.compartHealthList"
:key="rowIndex" :key="rowIndex"
class="matrix-row" class="matrix-row"
> >
<div <div
v-for="(status, colIndex) in row" v-for="(status, colIndex) in childRow"
:key="colIndex" :key="colIndex"
class="status-dot" class="status-dot"
@click="handleStatusDotClick(row, colIndex)"
:class="{ :class="{
'status-normal': status.healthStatus === 1, 'status-normal': status.healthStatus === 1,
'status-warning': status.healthStatus === 2, 'status-warning': status.healthStatus === 2,
...@@ -175,6 +176,7 @@ import { ...@@ -175,6 +176,7 @@ import {
postAddCompartAllocation, postAddCompartAllocation,
postAddValveInfo, postAddValveInfo,
} from "@/request/api/dustOverview"; } from "@/request/api/dustOverview";
import { useRouter } from "vue-router";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import CommonTable from "@/components/commonTable/index.vue"; import CommonTable from "@/components/commonTable/index.vue";
import { ElMessageBox, ElMessage } from "element-plus"; import { ElMessageBox, ElMessage } from "element-plus";
...@@ -182,6 +184,8 @@ import RoomSettingDialog from "./components/roomSettingDialog.vue"; ...@@ -182,6 +184,8 @@ import RoomSettingDialog from "./components/roomSettingDialog.vue";
import ValveSettingDialog from "./components/valveSettingDialog.vue"; import ValveSettingDialog from "./components/valveSettingDialog.vue";
import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue"; import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
const router = useRouter();
const formInline = ref({ const formInline = ref({
deviceName: "", deviceName: "",
region: "all", region: "all",
...@@ -357,6 +361,16 @@ const handleValveNumClick = (row) => { ...@@ -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 handleValveSettingConfirm = (updatedStatusData) => {
const list = updatedStatusData.map((item) => { const list = updatedStatusData.map((item) => {
......
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