zhengsl/emcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

报警设置

Browse Source
This commit is contained in:
jingna 2026-06-29 09:34:00 +08:00
parent 72f1ccae30
commit 9d5166414f
3 changed files with 84 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/views/aiQuantity/index.vue
View File

@ -37,7 +37,7 @@ function formatTime(dateStr: string): string {
const tableData = computed(() => { const tableData = computed(() => {
const alarms = state.alarms || [] const alarms = state.alarms || []
const firstThree = alarms.slice(0, 1) const firstThree = alarms.slice(0, 2)
return firstThree.map(list => { return firstThree.map(list => {
return { return {
id: list.id || 0, id: list.id || 0,
@ -97,8 +97,7 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="ai-container-bottom">
<!-- <div class="ai-container-bottom">
<div class="top-title">报警信息</div> <div class="top-title">报警信息</div>
<div class="container-bottom-box"> <div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1"> <div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1">
@ -110,7 +109,7 @@ onMounted(() => {
<div style="width: 20%;text-align: center;">{{ item.time }}</div> <div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -118,24 +117,24 @@ onMounted(() => {
.ai-container { .ai-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 15px; padding: 10px;
.top-title { .top-title {
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #363636; color: #363636;
margin-bottom: 10px; margin-bottom: 4px;
} }
.ai-container-top { .ai-container-top {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 4px;
.container-top-box { .container-top-box {
width: 100%; width: 100%;
height: 460px; height: 404px;
padding: 20px; padding: 8px 10px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
@ -150,8 +149,8 @@ onMounted(() => {
.header-cell { .header-cell {
flex: 1; flex: 1;
height: 28px; height: 25px;
line-height: 28px; line-height: 25px;
background-color: #f8f9fc; background-color: #f8f9fc;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
@ -173,8 +172,8 @@ onMounted(() => {
.cell { .cell {
flex: 1; flex: 1;
height: 28px; height: 25px;
line-height: 28px; line-height: 25px;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
@ -191,8 +190,8 @@ onMounted(() => {
.container-bottom-box { .container-bottom-box {
width: 100%; width: 100%;
height: calc(100vh - 590px); height: 66px;
padding: 15px 20px; padding: 0px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
@ -201,7 +200,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
color: #787878; color: #787878;
height: 40px; height: 33px;
font-size: 14px; font-size: 14px;
color: #505050; color: #505050;
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;

33
frontend/src/views/analogQuantity/index.vue
View File

@ -120,7 +120,7 @@ function formatTime(dateStr: string): string {
const tableData = computed(() => { const tableData = computed(() => {
const alarms = state.alarms || [] const alarms = state.alarms || []
const firstThree = alarms.slice(0, 1) const firstThree = alarms.slice(0, 2)
return firstThree.map(list => { return firstThree.map(list => {
return { return {
id: list.id || 0, id: list.id || 0,
@ -207,7 +207,7 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="analog-quantity-container-bottom"> <div class="analog-quantity-container-bottom">
<div class="top-title">报警信息</div> <div class="top-title">报警信息</div>
<div class="container-bottom-box"> <div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="item.id" class="container-bottom-box-line1"> <div v-for="(item, index) in tableData" :key="item.id" class="container-bottom-box-line1">
@ -219,7 +219,7 @@ onMounted(() => {
<div style="width: 20%;text-align: center;">{{ item.time }}</div> <div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -227,24 +227,24 @@ onMounted(() => {
.analog-quantity-container { .analog-quantity-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 15px; padding: 10px;
.top-title { .top-title {
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #363636; color: #363636;
margin-bottom: 10px; margin-bottom: 5px;
} }
.analog-quantity-container-top { .analog-quantity-container-top {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 5px;
.container-top-box { .container-top-box {
width: 100%; width: 100%;
height: 440px; height: 385px;
padding: 15px 20px; padding: 10px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
@ -299,7 +299,7 @@ onMounted(() => {
} }
.container-top-box-content { .container-top-box-content {
margin-top: 15px; margin-top: 10px;
.container-top-box-content-top { .container-top-box-content-top {
.container-top-box-content-line1 { .container-top-box-content-line1 {
@ -312,8 +312,8 @@ onMounted(() => {
.table-line1-item { .table-line1-item {
width: 20%; width: 20%;
background: #f9fafe; background: #f9fafe;
height: 40px; height: 35px;
line-height: 40px; line-height: 35px;
text-align: center; text-align: center;
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 4px; border-radius: 4px;
@ -321,8 +321,8 @@ onMounted(() => {
.table-line1-item2 { .table-line1-item2 {
width: 20%; width: 20%;
height: 40px; height: 35px;
line-height: 40px; line-height: 35px;
text-align: center; text-align: center;
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 4px; border-radius: 4px;
@ -341,17 +341,16 @@ onMounted(() => {
.container-bottom-box { .container-bottom-box {
width: 100%; width: 100%;
height: calc(100vh - 575px); height: 72px;
padding: 15px 20px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
overflow: auto; // overflow: auto;
.container-bottom-box-line1 { .container-bottom-box-line1 {
display: flex; display: flex;
align-items: center; align-items: center;
color: #787878; color: #787878;
height: 40px; height: 36px;
font-size: 14px; font-size: 14px;
color: #505050; color: #505050;
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;

92
frontend/src/views/switchQuantity/index.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted } from 'vue' import { computed, onMounted } from 'vue'
import { usePlatformStore } from '../../stores/platform' import { usePlatformStore } from '../../stores/platform'
import {ElMessageBox, ElMessage} from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import { controlSwitch } from '@/api/platform' import { controlSwitch } from '@/api/platform'
import { formatAlarmEventValue, getAlarmBelongText, getEventDisplayName } from '@/utils/alarmEvent' import { formatAlarmEventValue, getAlarmBelongText, getEventDisplayName } from '@/utils/alarmEvent'
@ -38,34 +38,34 @@ function formatTime(dateStr: string): string {
} }
const tableData = computed(() => { const tableData = computed(() => {
const alarms = state.alarms || [] const alarms = state.alarms || []
const firstThree = alarms.slice(0, 1) const firstThree = alarms.slice(0, 2)
return firstThree.map(list => { return firstThree.map(list => {
return { return {
id: list.id || 0, id: list.id || 0,
name: getAlarmBelongText(list.line_code), name: getAlarmBelongText(list.line_code),
typeName: getEventDisplayName(list.event_type, list.event_code), typeName: getEventDisplayName(list.event_type, list.event_code),
eventCode: list.event_code, eventCode: list.event_code,
eventValue: formatAlarmEventValue(list.event_type, list.event_value), eventValue: formatAlarmEventValue(list.event_type, list.event_value),
content: list.content, content: list.content,
time: list.event_time ? formatTime(list.event_time) : '', time: list.event_time ? formatTime(list.event_time) : '',
} }
}) })
}) })
function outputChange(item:any,index:any){ function outputChange(item: any, index: any) {
ElMessageBox.confirm('确认更改当前开出状态吗？', '提示', { ElMessageBox.confirm('确认更改当前开出状态吗？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
controlSwitch(index + 1, item ? 0 : 1).then(res => { controlSwitch(index + 1, item ? 0 : 1).then(res => {
if (res.data) { if (res.data) {
ElMessage.success('操作成功') ElMessage.success('操作成功')
} }
else { else {
ElMessage.error('操作失败') ElMessage.error('操作失败')
} }
}) })
}) })
} }
@ -86,8 +86,8 @@ onMounted(() => {
</div> </div>
<div class="state-grid"> <div class="state-grid">
<div v-for="(state, index) in inputStates" :key="`input-${index}`" class="state-item"> <div v-for="(state, index) in inputStates" :key="`input-${index}`" class="state-item">
<img v-if="state === 1" src="@/assets/images/menuicon/on.png" style="width: 34px; height: 36px;" <img v-if="state === 1" src="@/assets/images/menuicon/on.png"
alt=""> style="width: 34px; height: 36px;" alt="">
<img v-else src="@/assets/images/menuicon/off.png" alt="" <img v-else src="@/assets/images/menuicon/off.png" alt=""
style="width: 34px; height: 36px;"> style="width: 34px; height: 36px;">
<div class="label">开入{{ index + 1 }}</div> <div class="label">开入{{ index + 1 }}</div>
@ -100,17 +100,31 @@ onMounted(() => {
<div class="column-title-text">开出状态</div> <div class="column-title-text">开出状态</div>
</div> </div>
<div class="state-grid"> <div class="state-grid">
<div v-for="(state, index) in outputStates" :key="`output-${index}`" class="state-item" > <div v-for="(state, index) in outputStates" :key="`output-${index}`" class="state-item">
<img v-if="state === 1" src="@/assets/images/menuicon/on2.png" @click="outputChange(state,index)" style="width: 46px; height: 24px;cursor: pointer;" <img v-if="state === 1" src="@/assets/images/menuicon/on2.png"
alt=""> @click="outputChange(state, index)" style="width: 46px; height: 24px;cursor: pointer;"
<img v-else src="@/assets/images/menuicon/off2.png" @click="outputChange(state,index)" style="width: 46px; height: 24px;cursor: pointer;"
alt=""> alt="">
<img v-else src="@/assets/images/menuicon/off2.png" @click="outputChange(state, index)"
style="width: 46px; height: 24px;cursor: pointer;" alt="">
<div class="label">开出{{ index + 1 }}</div> <div class="label">开出{{ index + 1 }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="switch-container-bottom">
<div class="top-title">报警信息</div>
<div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="item.id" class="container-bottom-box-line1">
<div style="width: 8%;text-align: center;">{{ index + 1 }}</div>
<div style="width: 14%;text-align: center;">{{ item.name }}</div>
<div style="width: 20%;text-align: center;">{{ item.typeName }}</div>
<div style="width: 8%;text-align: center;">{{ item.eventValue }}</div>
<div style="width: 30%;text-align: center;">{{ item.content }}</div>
<div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -118,23 +132,24 @@ onMounted(() => {
.switch-container { .switch-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; padding: 10px;
.top-title { .top-title {
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #363636; color: #363636;
margin-bottom: 15px; margin-bottom: 5px;
} }
.switch-container-top { .switch-container-top {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 5px;
.container-top-box { .container-top-box {
width: 100%; width: 100%;
height: 440px; height: 385px;
padding: 15px 20px; padding: 10px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
@ -171,9 +186,9 @@ onMounted(() => {
.state-grid { .state-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
padding: 15px 10px; // padding: 15px 10px;
background-color: rgba(249, 250, 254, 1); background-color: rgba(249, 250, 254, 1);
height: 375px; height: 335px;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
gap: 0; gap: 0;
@ -207,8 +222,7 @@ onMounted(() => {
.container-bottom-box { .container-bottom-box {
width: 100%; width: 100%;
height: calc(100vh - 506px); height: 72px;
padding: 20px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
@ -218,7 +232,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
color: #787878; color: #787878;
height: 40px; height: 36px;
font-size: 14px; font-size: 14px;
color: #505050; color: #505050;
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;