wqy
/
central-control
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化触摸屏监控与报警分页

Browse Source
绿色触摸屏
wangqiyang 2 weeks ago
parent 74672d31b5
commit 26df8428fb
2 changed files with 59 additions and 78 deletions
Show Stats Download Patch File Download Diff File

43
src/views/AlarmInformation/index.vue
Unescape View File

@ -31,7 +31,7 @@
批量删除 批量删除
</el-button> </el-button>
</div> </div>
<el-table :data="showTableData" style="width: 100%" height="390" stripe v-loading="loading" @selection-change="handleSelectionChange" row-key="id" ref="multipleTableRef"> <el-table class="alarm-table" :data="showTableData" style="width: 100%" stripe v-loading="loading" @selection-change="handleSelectionChange" row-key="id" ref="multipleTableRef">
<el-table-column type="selection" :selectable="selectable" width="55" /> <el-table-column type="selection" :selectable="selectable" width="55" />
<el-table-column align="center" prop="id" label="序号" /> <el-table-column align="center" prop="id" label="序号" />
<el-table-column align="center" prop="loop_idx" label="回路地址" /> <el-table-column align="center" prop="loop_idx" label="回路地址" />
@ -53,7 +53,7 @@
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination v-if="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 30, 50, 100]" :total="total" :pager-count="5" v-model:page-size="pageSize" v-model:current-page="currentPage" background layout="prev, pager, next" /> <el-pagination v-if="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[6, 8, 10, 30, 50]" :total="total" :pager-count="5" v-model:page-size="pageSize" v-model:current-page="currentPage" background layout="total, sizes, prev, pager, next" />
</div> </div>
</div> </div>
<!-- 底部信息 --> <!-- 底部信息 -->
@ -103,19 +103,25 @@ const commit_uid = sessionStorage.getItem('central_control_comm_uid')
const loading = ref(false) const loading = ref(false)
const total = ref(0) const total = ref(0)
const pageSize = ref(8) const pageSize = ref(6)
const currentPage = ref(1) const currentPage = ref(1)
const handleSizeChange = () => { const tableData = ref([])
const showTableData = ref([])
const applyPageData = () => {
const start = (currentPage.value - 1) * pageSize.value
showTableData.value = tableData.value.slice(start, start + pageSize.value)
}
const handleSizeChange = (size) => {
pageSize.value = size
currentPage.value = 1 currentPage.value = 1
// getData() applyPageData()
} }
const handleCurrentChange = () => { const handleCurrentChange = () => {
// getData() applyPageData()
showTableData.value = tableData.value.slice((currentPage.value - 1) * 8, (currentPage.value - 1) * 8 + 8)
} }
const tableData = ref([])
const multipleTableRef = ref(null) const multipleTableRef = ref(null)
const multipleSelection = ref([]) const multipleSelection = ref([])
const selectable = (row) => true const selectable = (row) => true
@ -167,8 +173,6 @@ const handleDeal = () => {
}) })
} }
const showTableData = ref([])
const getData = () => { const getData = () => {
currentPage.value = 1 currentPage.value = 1
const params = { const params = {
@ -190,9 +194,10 @@ const getData = () => {
loading.value = true loading.value = true
tableData.value = [] tableData.value = []
RPC.post('/m9z/fault/list', params).then(res => { RPC.post('/m9z/fault/list', params).then(res => {
total.value = res.rows.length || 0 const rows = res?.rows || []
tableData.value = res.rows || [] total.value = rows.length
showTableData.value = tableData.value.slice(0, 8) tableData.value = rows
applyPageData()
}).finally(() => { }).finally(() => {
loading.value = false loading.value = false
}) })
@ -267,7 +272,7 @@ onUnmounted(() => {
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
overflow: auto; overflow: hidden;
background: center / cover url('@/assets/images/背景小@2x.png') no-repeat; background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
background-color: #0A3933; background-color: #0A3933;
} }
@ -276,15 +281,19 @@ onUnmounted(() => {
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: 100%; height: calc(100vh - 50px);
padding: 10px 20px; padding: 10px 20px;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
} }
.header-status { .header-status {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0;
margin-bottom: 20px; margin-bottom: 20px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
@ -312,11 +321,13 @@ onUnmounted(() => {
.control-content { .control-content {
width: 100%; width: 100%;
flex: 1;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
overflow: hidden;
:deep(.el-table__header) { :deep(.el-table__header) {
.el-table__cell { .el-table__cell {

94
src/views/Monitoring/index.vue
Unescape View File

@ -99,40 +99,11 @@
<div v-else class="fault-empty">当前无故障</div> <div v-else class="fault-empty">当前无故障</div>
</div> </div>
<div class="circuit-section"> <div class="circuit-section">
<!-- 上排回路 --> <div class="circuit-grid">
<div class="circuit-row"> <div v-for="(circuit, index) in monitorLoops" :key="`${circuit.name}-${index}`" class="circuit-item">
<div v-for="(circuit, index) in info?.Loops?.slice(0, 5)" :key="circuit.name" class="circuit-item">
<div class="circuit-status" :class="{ active: circuit.is_open }"> <div class="circuit-status" :class="{ active: circuit.is_open }">
直流回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }} 直流回路{{ loopNo(circuit, index) }}：{{ circuit.is_open ? '打开' : '关闭' }}
</div> </div>
<!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus">
<div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
<div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
</div>
<div class="line">
<div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div>
</div>
</div>
</div>
</div>
<!-- 下排回路 -->
<div class="circuit-row">
<div v-for="(circuit, index) in info?.Loops?.slice(5, 10)" :key="circuit.name" class="circuit-item">
<div class="circuit-status" :class="{ active: circuit.is_open }">
直流回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
</div>
<!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
<el-icon>
<Sunny />
</el-icon>
</div> -->
<div class="circuitStatus"> <div class="circuitStatus">
<div class="line"> <div class="line">
<div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div> <div class="line_item">电压: <span>{{ circuit.V ? circuit.V?.toFixed(2) : 0 }}V</span></div>
@ -146,20 +117,9 @@
</div> </div>
</div> </div>
<div class="dimming-section"> <div class="dimming-section">
<!-- 上排调光通道 --> <div class="dimming-grid">
<div class="dimming-row"> <div v-for="(channel, index) in monitorLoops" :key="`${channel.name}-${index}`" class="dimming-item">
<div v-for="(channel, index) in info?.Loops?.slice(0, 5)" :key="channel.name" class="dimming-item"> <div class="channel-label">调光通道{{ loopNo(channel, index) }}</div>
<div class="channel-label">调光通道{{ index + 1 }}</div>
<div class="brightness-display" :class="{ active: channel.pwm > 0 }">
{{ channel.pwm }}%
</div>
</div>
</div>
<!-- 下排调光通道 -->
<div class="dimming-row">
<div v-for="(channel, index) in info?.Loops?.slice(5, 10)" :key="channel.name" class="dimming-item">
<div class="channel-label">调光通道{{ index + 6 }}</div>
<div class="brightness-display" :class="{ active: channel.pwm > 0 }"> <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
{{ channel.pwm }}% {{ channel.pwm }}%
</div> </div>
@ -406,6 +366,15 @@ const scanDeviceCount = computed(() => {
return info.value?.scan_device_count ?? info.value?.ScanDeviceCount ?? info.value?.Loops?.length ?? 0 return info.value?.scan_device_count ?? info.value?.ScanDeviceCount ?? info.value?.Loops?.length ?? 0
}) })
const monitorLoops = computed(() => {
return info.value?.Loops || []
})
const loopNo = (loop, index) => {
const loopIndex = loop?.index ?? loop?.Index
return Number.isInteger(loopIndex) ? loopIndex + 1 : index + 1
}
const currentFaults = computed(() => { const currentFaults = computed(() => {
const loops = info.value?.Loops || [] const loops = info.value?.Loops || []
return loops.flatMap((loop, index) => { return loops.flatMap((loop, index) => {
@ -701,7 +670,7 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
// justify-content: space-between; // justify-content: space-between;
/* width: 500px; */ /* width: 500px; */
gap: 20px; gap: 12px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
@ -844,12 +813,13 @@ onUnmounted(() => {
.circuit-section { .circuit-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
} }
.circuit-row { .circuit-grid {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
font-size: 12px; font-size: 12px;
.circuitStatus { .circuitStatus {
@ -859,12 +829,11 @@ onUnmounted(() => {
.line { .line {
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: 10px; margin-top: 6px;
display: flex;
justify-content: space-between; justify-content: space-between;
.line_item { .line_item {
width: 45%; width: 48%;
// flex: 1; // flex: 1;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@ -879,14 +848,14 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
// gap: 10px; // gap: 10px;
width: 18%; min-width: 0;
} }
.circuit-status { .circuit-status {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 6px 8px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -928,21 +897,22 @@ onUnmounted(() => {
.dimming-section { .dimming-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
font-size: 12px; font-size: 12px;
} }
.dimming-row { .dimming-grid {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
} }
.dimming-item { .dimming-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
width: 18%; min-width: 0;
} }
.channel-label { .channel-label {

Write Preview
Loading…
Cancel
Save