提交新版本

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -73,6 +73,45 @@ export const topList = [
         ],
     },
 ];
+
+export const ventilateTopList = [
+    {
+        id: 0,
+        label: '进风量(m³/min)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    {
+        id: 1,
+        label: '回风量(m³/min)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    {
+        id: 2,
+        label: '需风量(m³/min)',
+        imgSrc: true,
+        value: '--',
+        text: '',
+        list: [],
+    },
+    { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
+    {
+        id: 4,
+        imgSrc: false,
+        label: '其他信息',
+        value: null,
+        text: '',
+        list: [
+            { id: 0, label: 'O₂', value: 0 },
+            { id: 1, label: 'CO', value: 0 },
+        ],
+    },
+];
 //束管监测选项列表
 export const contentList = [
     {

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -1,54 +1,39 @@
 <template>
     <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
     <div class="ventilateWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="dustPage">
-            <div class="top-area">
-                <div class="top-box" v-for="(item, index) in topAreaList" :key="index">
-                    <div class="top-title">{{ item.title }}</div>
-                    <div class="top-content">
-                        <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
-                            <span class="item-label">{{ items.label }}</span>
-                            <span :class="{
-                                'item-value1': items.value == 0,
-                                'item-value2': items.value == 101,
-                                'item-value3': items.value == 102,
-                                'item-value4': items.value == 103,
-                                'item-value5': items.value == 104,
-                                'item-value6': items.value == 201,
-                                'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,
-
-                            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' :
-                                items.value ==
-                                    103 ?
-                                    '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
-                        </div>
+        <div class="ventilate-top">
+            <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
+                style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
+            <div class="alarm-menu">
+                <div class="card-btn">
+                    <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+                        @click="cardClick(ind, item)">
+                        <div class="text">{{ item.name }}</div>
+                        <div class="warn">{{ item.warn }}</div>
                     </div>
                 </div>
             </div>
-            <div class="center-area">
-                <div class="center-t">
-                    <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
-                        <div class="box-label">{{ item.label }}</div>
-                    </div>
-                </div>
-                <div class="center-b">
-                    <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
-                        <div class="box-label">{{ item.content }}</div>
+            <div class="ventilate-content">
+                <div class="work-nav">
+                    <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
+                        <div class="pic" v-if="item.imgSrc"></div>
+                        <div class="content" v-if="item.label && item.value">
+                            <span>{{ item.label }}</span>
+                            <span>{{ item.value }}</span>
+                        </div>
+                        <div class="text" v-if="item.text">{{ item.text }}</div>
+                        <div class="percent" v-if="item.list.length != 0">
+                            <div class="title">{{ item.label }}</div>
+                            <div class="value">
+                                <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+                                    <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+                                    <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="bot-area">
+                <div class="bot-area">
                 <div class="title-t">
                     <div class="text-t">通风信息状态监测</div>
                 </div>
@@ -57,21 +42,26 @@
                 </div>
 
             </div>
+            </div>
+
+
         </div>
+        <div class="ventilate-bottom"></div>
     </div>
-
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import { centerAreaListT1, centerAreaListB1 } from '../common.data';
 import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
 import { useRouter } from 'vue-router';
-import echartLine from '../common/echartLine.vue';
+import { sysTypeWarnList, sysWarn } from '../common.api'
+import { centerAreaListT1, centerAreaListB1, ventilateTopList } from '../common.data';
 import CustomHeader from '/@/components/vent/customHeader.vue';
+import echartLine from '../common/echartLine.vue';
+import imgUrl from '../../../../../assets/images/fire/pie.png';
 
 const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+let router = useRouter()
 //左侧数据列表
 let menuList = reactive<any[]>([])
 //当前左侧激活菜单的索引
@@ -96,7 +86,6 @@ const echartDataFc1 = reactive({
     },
     xData: [],
 });
-let router = useRouter()
 
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
@@ -116,12 +105,6 @@ function getMonitor(deviceID, flag?) {
 function getBack() {
     router.push('/monitorChannel/monitor-alarm-home')
 }
-//菜单选项切换
-function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-}
 //获取左侧数据列表
 async function getMenuList() {
     let res = await sysTypeWarnList({ type: 'vent' })
@@ -139,6 +122,12 @@ async function getMenuList() {
         getMonitor(menuList[0].deviceID, true);
     }
 }
+//菜单选项切换
+function cardClick(ind, item) {
+    activeIndex1.value = ind;
+    clearTimeout(timer);
+    getMonitor(item.deviceID, true);
+}
 function formatRoundNum(num) {
     let interger = Math.ceil(num)
     let leng = String(interger).length
@@ -211,7 +200,6 @@ function getSysWarnList(id, type) {
         }
     });
 }
-
 onMounted(() => {
     getMenuList()
 })
@@ -229,278 +217,226 @@ onUnmounted(() => {
     height: 100%;
     padding: 80px 10px 15px 10px;
     box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
 
-    .alarm-menu {
-        height: 100%;
-        width: 15%;
+    .ventilate-top {
+        display: flex;
+        justify-content: space-between;
+        height: 50%;
+        margin-bottom: 15px;
+        background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .card-btn {
-            width: 100%;
+        .alarm-menu {
             height: 100%;
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
+            width: 15%;
+            padding: 10px;
+            box-sizing: border-box;
 
-            .btn1 {
-                position: relative;
+            .card-btn {
                 width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
-        }
-    }
+                height: 100%;
+                overflow-y: auto;
+
+                .btn {
+                    position: relative;
+                    width: 81%;
+                    height: 24%;
+                    margin-bottom: 6%;
+                    font-family: 'douyuFont';
+                    background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+                    background-size: 100% 100%;
+                    cursor: pointer;
 
-    .dustPage {
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .top-area {
-            height: 24%;
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-
-            .top-box {
-                position: relative;
-                width: 32%;
-                height: 88%;
-                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat;
-                background-size: 100% 100%;
+                    .text {
+                        width: 80%;
+                        position: absolute;
+                        left: 50%;
+                        top: 28px;
+                        font-size: 14px;
+                        color: #01fefc;
+                        text-align: center;
+                        transform: translate(-50%, 0);
+                    }
 
-                .top-title {
-                    position: absolute;
-                    left: 50%;
-                    top: 8px;
-                    font-size: 14px;
-                    color: #fff;
-                    transform: translate(-50%, 0);
+                    .warn {
+                        width: 100%;
+                        position: absolute;
+                        left: 50%;
+                        bottom: 11px;
+                        font-size: 12px;
+                        color: #fff;
+                        text-align: center;
+                        transform: translate(-50%, 0);
+                    }
                 }
 
-                .top-content {
-                    position: absolute;
-                    top: 20%;
-                    left: 0;
+                .btn1 {
+                    position: relative;
                     width: 100%;
-                    height: 80%;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    flex-wrap: wrap;
+                    height: 24%;
+                    margin-bottom: 6%;
+                    font-family: 'douyuFont';
+                    background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+                    background-size: 100% 100%;
                     cursor: pointer;
 
-                    .content-item {
-                        position: relative;
-                        width: 50%;
-                        height: 50%;
+                    .text {
+                        width: 80%;
+                        position: absolute;
+                        left: 50%;
+                        top: 28px;
                         font-size: 14px;
-                        background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                        background-size: 82% 54%;
-
-                        .item-label {
-                            position: absolute;
-                            left: 16%;
-                            top: 50%;
-                            color: #fff;
-                            transform: translate(0, -44%);
-                        }
-
-                        .item-value {
-                            position: absolute;
-                            right: 16%;
-                            top: 50%;
-                            transform: translate(0, -38%);
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                        }
-
-                        .item-value1 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: rgb(145, 230, 9);
-                        }
-
-                        .item-value2 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: rgb(0, 242, 255);
-                        }
-
-                        .item-value3 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ffff35;
-                        }
-
-                        .item-value4 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ffbe69;
-                        }
-
-                        .item-value5 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ff6f00;
-                        }
+                        color: #01fefc;
+                        text-align: center;
+                        transform: translate(-62%, 0);
+                    }
 
-                        .item-value6 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ff0000;
-                        }
+                    .warn {
+                        width: 100%;
+                        position: absolute;
+                        left: 50%;
+                        bottom: 11px;
+                        font-size: 14px;
+                        color: #fff;
+                        text-align: center;
+                        transform: translate(-60%, 0);
                     }
                 }
             }
         }
 
-        .center-area {
-            height: 34%;
-            margin-bottom: 20px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-            background-size: 100% 100%;
+        .ventilate-content {
+            height: 100%;
+            width: 85%;
+            padding: 10px 0px;
+            box-sizing: border-box;
 
-            .center-t {
-                height: 50%;
+            .work-nav {
+                height: 30%;
+                width: 100%;
+                background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+                background-size: 100% 100%;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
                 align-items: center;
-                background: url('../../../../../assets/images/fire/dz.png') no-repeat;
-                background-size: 100% 100%;
+                border-bottom: 3px solid;
+                border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, .2), rgba(45, 116, 160, 1)) 1 1 1;
 
-                .t-box {
-                    width: 14%;
-                    height: 75%;
-                    background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
-                    background-size: 100% 100%;
+                .nav {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    &:nth-child(1) {
+                        flex: 1;
+                        height: 100%;
+                        border-right: 2px solid;
+                        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+                    }
 
-                    .box-label {
+                    &:nth-child(2) {
+                        flex: 1;
+                        height: 100%;
+                        border-right: 2px solid;
+                        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+                    }
+
+                    &:nth-child(3) {
+                        flex: 1;
+                        height: 100%;
+                        border-right: 2px solid;
+                        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+                    }
+
+                    &:nth-child(4) {
+                        flex: 0.6;
+                        color: #b3b8cc;
                         font-size: 16px;
-                        color: #06edcd;
-                        text-align: center;
+                        height: 100%;
+                        border-right: 2px solid;
+                        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
                     }
-                }
-            }
 
-            .center-b {
-                height: 50%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
+                    &:nth-child(5) {
+                        flex: 1.4;
+                        height: 100%;
+
+                        .percent {
+                            width: 100%;
+                            height: 82%;
+                            padding: 0px 20px;
+                            box-sizing: border-box;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-around;
+
+                            .title {
+                                font-size: 14px;
+                                padding: 5px 0px;
+                                color: #b3b8cc;
+                                text-align: center;
+                            }
+
+                            .value {
+                                display: flex;
+                                justify-content: space-between;
+
+                                span {
+                                    font-family: 'douyuFont';
+                                    font-size: 18px;
+                                }
+                            }
+                        }
+                    }
 
-                .b-box {
-                    width: 14%;
-                    height: 75%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
+                    .pic {
+                        width: 30%;
+                        height: 82%;
+                    }
 
-                    .box-label {
-                        width: 78%;
-                        height: 44%;
+                    .content {
+                        height: 82%;
+                        margin-left: 15px;
+                        color: #fff;
                         display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        color: #3df6ff;
-                        font-family: 'douyuFont';
-                        background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
-                        background-size: 100% 100%;
+                        flex-direction: column;
+                        justify-content: space-around;
+
+                        span {
+                            font-size: 14px;
+
+                            &:nth-child(1) {
+                                padding: 5px 0px;
+                                color: #b3b8cc;
+                            }
+
+                            &:nth-child(2) {
+                                font-family: 'douyuFont';
+                                font-size: 16px;
+                                color: #3df6ff;
+                            }
+                        }
                     }
                 }
-            }
-        }
 
-        .bot-area {
-            height: calc(100% - 58% - 30px);
-            padding: 10px 15px;
+                .nav:nth-child(1) .pic {
+                    background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .nav:nth-child(2) .pic {
+                    background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .nav:nth-child(3) .pic {
+                    background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
+                    background-size: 100% 100%;
+                }
+            }
+            .bot-area {
+            height: calc(100% - 30% - 3px);
+            padding: 10px ;
             background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
             background-size: 100% 100%;
             box-sizing: border-box;
@@ -524,8 +460,16 @@ onUnmounted(() => {
             }
 
         }
+        }
+
+
 
     }
 
+    .ventilate-bottom {
+        height: calc(50% - 15px);
+        background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+        background-size: 100% 100%;
+    }
 }
 </style>

src/views/vent/performance/comment/HistorySp.vue

@@ -188,12 +188,12 @@ watch(() => props.imgSrc, (newV, oldV) => {
             height: calc(100% - 30px);
 
             img {
-                width: 692px;
-                height: 226px;
+                width: 408px;
+                height: 95px;
                 position: absolute;
                 left: 50%;
-                top: -108px;
-                transform: translate(-70%, 0);
+                top: 26px;
+                transform: translate(-56%, 0);
             }
         }
     }

src/views/vent/performance/comment/NormalTable.vue

@@ -3,8 +3,10 @@
     <BasicTable @register="registerTable" :key="resetTable">
       <template #actionSp="{ record }">
         <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a>
-        <a class="table-action-link" @click="handleTo(record)" :disabled="userName==record.createBy">提交</a>
-        <a class="table-action-link" @click="handleSpRevoke(record)" :disabled="userName==record.createBy">撤回</a>
+        <!-- <a class="table-action-link" @click="handleTo(record)" :disabled="userName==record.createBy">提交</a>
+        <a class="table-action-link" @click="handleSpRevoke(record)" :disabled="userName==record.createBy">撤回</a> -->
+        <a class="table-action-link" @click="handleTo(record)">提交</a>
+        <a class="table-action-link" @click="handleSpRevoke(record)" >撤回</a>
       </template>
       <template #actionWj="{ record }">
         <a class="table-action-link" @click="handleEdit(record)">编辑</a>