工作面监测预警分析界面代码-提交

src/views/vent/home/dustHome/components/dustFallDevice.vue

@@ -16,16 +16,58 @@
             </div>
             <div class="box-right-b">
                 <div class="item-label">断网数量</div>
-                <div class="item-">10</div>
+                <div class="item-val">10</div>
             </div>
         </div>
         <div class="fall-right-box">
+            <div class="fall-table-head">
+                <div class="fall-head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.title }}</div>
+            </div>
+            <div class="fall-table-content">
+                <div class="scroll-box">
+                    <div class="fall-content-item" v-for="(item, ind) in tabContentList" :key="ind">
+                        <span class="content-item-val">{{ item.code }}</span>
+                        <span class="content-item-val">{{ item.name }}</span>
+                        <span class="content-item-val">{{ item.ljzt }}</span>
+                        <span class="content-item-val">{{ item.status }}</span>
+                    </div>
+                </div>
 
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+//table头
+let tabHeadList = reactive([
+    { title: '编号' },
+    { title: '名称' },
+    { title: '连接状态' },
+    { title: '喷雾状态' },
+])
+//table content
+let tabContentList = reactive([
+    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
+])
+
 
 </script>
 
@@ -39,8 +81,9 @@
 
     .fall-left-box {
         position: relative;
-        width: 50%;
+        width: calc(50% - 15px);
         height: 100%;
+        margin-right: 15px;
 
         .box-c {
             position: absolute;
@@ -52,20 +95,21 @@
             background: url('../../../../../assets/images/dust/dusthome/left-box1.png') no-repeat center;
             background-size: 100% 100%;
         }
-        .box-left-t{
+
+        .box-left-t {
             position: absolute;
             left: 0;
             top: 0;
             width: 80px;
             height: 81px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
             align-items: center;
             background: url('../../../../../assets/images/dust/dusthome/left-box2.png') no-repeat center;
             background-size: 100% 100%;
+
+
         }
-        .box-left-b{
+
+        .box-left-b {
             position: absolute;
             right: 0;
             top: 0;
@@ -74,7 +118,8 @@
             background: url('../../../../../assets/images/dust/dusthome/left-box3.png') no-repeat center;
             background-size: 100% 100%;
         }
-        .box-right-t{
+
+        .box-right-t {
             position: absolute;
             left: 0;
             bottom: 0;
@@ -83,7 +128,8 @@
             background: url('../../../../../assets/images/dust/dusthome/left-box4.png') no-repeat center;
             background-size: 100% 100%;
         }
-        .box-right-b{
+
+        .box-right-b {
             position: absolute;
             right: 0;
             bottom: 0;
@@ -92,20 +138,131 @@
             background: url('../../../../../assets/images/dust/dusthome/left-box5.png') no-repeat center;
             background-size: 100% 100%;
         }
-        .item-label{
-            font-size: 10px;
+
+        .item-label {
+            width: 100%;
+            position: absolute;
+            top: 2px;
+            text-align: center;
+            font-size: 12px;
             color: #9da5aa;
         }
-        .item-val{
+
+        .item-val {
+            width: 100%;
+            position: absolute;
+            top: 21px;
+            text-align: center;
             font-family: 'douyuFont';
-            font-size: 10px;
+            font-size: 12px;
             color: #1fb3f7;
         }
 
+
     }
 
     .fall-right-box {
         width: 50%;
         height: 100%;
+
+        .fall-table-head {
+            width: 100%;
+            height: 32px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 2px solid #1f8bb2;
+            background: linear-gradient(to bottom, rgba(12, 40, 55, .3), rgba(19, 90, 124, .9));
+
+            .fall-head-item {
+                display: flex;
+                justify-content: center;
+                color: #1fb3f7;
+
+                &:nth-child(1) {
+                    flex: 1;
+                }
+
+                &:nth-child(2) {
+                    flex: 3;
+                }
+
+                &:nth-child(3) {
+                    flex: 2;
+                }
+
+                &:nth-child(4) {
+                    flex: 2;
+                }
+            }
+        }
+
+        .fall-table-content {
+            position: relative;
+            width: 100%;
+            height: calc(100% - 32px);
+            overflow: hidden;
+
+            .scroll-box {
+                width: 100%;
+                -webkit-animation: 10s scrollTop linear infinite normal;
+                animation: 10s scrollTop linear infinite normal;
+
+                @keyframes scrollTop {
+                    0% {
+                        -webkit-transform: translate3d(0, 0, 0);
+                        transform: translate3d(0, 0, 0);
+                    }
+
+                    100% {
+                        -webkit-transform: translate3d(0, -250px, 0);
+                        transform: translate3d(0, -250px, 0);
+                    }
+                }
+
+
+            }
+
+            .fall-content-item {
+                height: 34px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                &:nth-child(odd) {
+                    background-color: #0b202e;
+                }
+
+                &:nth-child(even) {
+                    background-color: #0d3144;
+                }
+
+                .content-item-val {
+                    display: flex;
+                    justify-content: center;
+                    color: #fff;
+
+                    &:nth-child(1) {
+                        flex: 1;
+                    }
+
+                    &:nth-child(2) {
+                        flex: 3;
+                    }
+
+                    &:nth-child(3) {
+                        flex: 2;
+                        color: #00ff91;
+                    }
+
+                    &:nth-child(4) {
+                        flex: 2;
+                    }
+
+                }
+
+            }
+        }
     }
-}</style>
+}
+</style>

src/views/vent/home/dustHome/components/dustGlzb.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="dustGlzb">
+        <div class="dust-gl-box" v-for="(item, index) in dustZbList" :key="index">
+            <div class="gl-box-content">
+                <span class="gl-label">{{ item.label }}</span>
+                <span class="gl-val">{{ item.val }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+let dustZbList = reactive([
+    { id: 0, label: '最高温度(℃)', val: 12 },
+    { id: 1, label: '环境湿度(%)', val: 12 },
+    { id: 2, label: '风速(m/s)', val: 12 },
+    { id: 3, label: '采煤机', val: 12 },
+    { id: 4, label: '水压(Mpa)', val: 12 },
+    { id: 5, label: '水阀', val: 12 },
+])
+
+</script>
+
+<style lang="less" scoped>
+.dustGlzb {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .dust-gl-box {
+        width: 50%;
+        height: 66px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .gl-box-content {
+            position: relative;
+            width: 254px;
+            height: 100%;
+            .gl-label{
+                position: absolute;
+                left: 74px;
+                top: 50%;
+                transform: translate(0,-50%);
+                color: #fff;
+            }
+            .gl-val{
+                position: absolute;
+                right: 36px;
+                top: 50%;
+                transform: translate(0,-40%);
+                font-family: 'douyuFont';
+                color: #1fb3f7;
+            }
+        }
+
+        &:nth-child(1) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-1.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(2) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-2.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(3) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-3.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(4) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-4.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(5) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-5.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(6) .gl-box-content {
+            background: url('../../../../../assets/images/dust/dusthome/gl-6.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+    }
+}</style>

src/views/vent/home/dustHome/components/dustJtzb.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="dustJtzb">
+        <div class="jtZb-box" v-for="(item, index) in jtzbList" :key="index">
+            <div class="jtZb-content">
+                <div class="jtZb-label">{{ `${item.label}:` }}</div>
+                <div class="jtZb-val">{{ item.val }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+
+let jtzbList = reactive([
+    { id: 0, label: '游离二氧化硅', val: 53535 },
+    { id: 1, label: '分散度', val: 48485 },
+    { id: 2, label: '煤尘爆炸性', val: 48485 },
+    { id: 3, label: '火焰长度', val: 5878 },
+    { id: 4, label: '最低岩粉量', val: 48485 },
+])
+</script>
+
+<style lang="less" scoped>
+.dustJtzb {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .jtZb-box {
+        width: 33.33%;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .jtZb-content {
+            width: 170px;
+            height: 40px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background: url('../../../../../assets/images/dust/dusthome/jtzb.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .jtZb-label {
+                color: #fff;
+            }
+
+            .jtZb-val {
+                color: #1fb3f7;
+            }
+        }
+    }
+}</style>

src/views/vent/home/dustHome/index.vue

@@ -25,7 +25,8 @@
                 </div>
                 <!-- 左底部区域 -->
                 <div class="left-f">
-                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs"> </DanelBd>
+                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs">
+                    </DanelBd>
                 </div>
             </div>
             <div class="center-area">
@@ -38,39 +39,36 @@
             <div class="right-area">
                 <!-- 右上区域 -->
                 <div class="right-t">
-                    <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '280px' }">
-                      <dustFallDevice></dustFallDevice>
+                    <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '290px' }">
+                        <dustFallDevice></dustFallDevice>
                     </DanelBd>
                 </div>
                 <!-- 右中区域 -->
                 <div class="right-c">
-                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '220px' }" commonTitle="selected">
-                     
+                    <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '230px' }" commonTitle="selected">
+                        <dustGlzb></dustGlzb>
                     </DanelBd>
                 </div>
                 <!-- 右下区域 -->
                 <div class="right-b">
-                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected">
-                      
+                    <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '150px' }" commonTitle="selected">
+                        <dustJtzb></dustJtzb>
                     </DanelBd>
                 </div>
-                <!-- 右底部区域 -->
-                <!-- <div class="right-f">
-                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }">
-                      
-                    </DanelBd>
-                </div> -->
+               
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {ref,reactive,onMounted} from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import DanelBd from '../common/danelBd.vue'
 import workJc from '../fireHome/components/workJc.vue'
 import multipleDust from './components/multipleDust.vue'
-import dustFallDevice from './components/dustFallDevice.vue' 
+import dustFallDevice from './components/dustFallDevice.vue'
+import dustGlzb from './components/dustGlzb.vue'
+import dustJtzb from './components/dustJtzb.vue'
 
 </script>
 
@@ -208,9 +206,7 @@ import dustFallDevice from './components/dustFallDevice.vue'
                 width: 100%;
             }
 
-            .right-f {
-                width: 100%;
-            }
         }
     }
-}</style>
+}
+</style>

src/views/vent/home/workPlaceWarn/components/basicCard.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="basicCard">
+        <div class="card-box" v-for="(item, index) in cardContentLists" :key="index">
+            <img class="card-box-img" :src="item.imgSrc" alt="">
+            <div class="card-box-item">
+                <div class="item-labels">{{ item.label }}</div>
+                <div class="item-vals">{{ item.val }}</div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive,defineProps,watch } from 'vue'
+
+
+let props=defineProps({
+    cardContentList:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    }
+})
+let cardContentLists=ref<any[]>([])
+
+
+watch(()=>props.cardContentList,(newV,oldV)=>{
+    console.log(newV,'工作面卡片-----')
+    cardContentLists.value=newV
+    
+},{immediate:true,deep:true})
+</script>
+
+<style lang="less" scoped>
+.basicCard {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(41, 49, 53, .6);
+    overflow-x: auto;
+
+    .card-box {
+        width: 416px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        border-left: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+
+        &:first-child {
+            border: none;
+        }
+
+        .card-box-img {
+            width: 94px;
+            height: 94px;
+
+        }
+
+        .card-box-item {
+            height: 94px;
+            margin-left: 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .item-labels {
+                color: #fff
+            }
+
+            .item-vals {
+                font-family: 'douyuFont';
+                font-size: 20px;
+                color: #02bbe9;
+            }
+        }
+
+    }
+}</style>

src/views/vent/home/workPlaceWarn/components/basicTree.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="basicTree">
+        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
+            v-model:expandedKeys="expandedKeys">
+            <template #switcherIcon>
+                <CaretDownOutlined />
+            </template>
+
+        </a-tree>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps, watch } from 'vue'
+import { CaretDownOutlined, } from '@ant-design/icons-vue';
+
+let props = defineProps({
+    treeData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+let treeDatas = ref([])//树节点数据
+//默认选中节点
+let selectedKeys = ref(['0-0-0'])
+//默认展开节点
+const expandedKeys = ref<string[]>(['1']);
+
+//递归遍历菜单数据
+function getMenuTree(menuList, pid) {
+    let treeList = [];
+    for (let i = 0; i < menuList.length; i++) {
+        let menu = menuList[i];
+        if (menu.pid === pid) {
+            let tree = {
+                key: menu.id,
+                title: menu.name,
+                children: getMenuTree(menuList, menu.id)
+            };
+            tree.children.length === 0 && delete tree.children;
+            treeList.push(tree);
+        }
+    }
+    return treeList;
+}
+
+watch(() => props.treeData, (newV, oldV) => {
+    treeDatas.value.length = 0
+    treeDatas.value = getMenuTree(newV, null)
+    console.log(treeDatas.value, '树节点数据------')
+
+}, { immediate: true, deep: true })
+
+
+
+
+
+
+
+
+</script>
+
+<style lang="less" scoped>
+.basicTree {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 15px 10px;
+    box-sizing: border-box;
+}
+
+:deep(.zxm-tree) {
+    color: #fff;
+    background-color: transparent;
+    letter-spacing: 1px;
+}
+
+:deep(.zxm-tree .zxm-tree-node-content-wrapper.zxm-tree-node-selected) {
+    background-color: transparent;
+    color: #02bbe9;
+}
+
+:deep(.zxm-tree .zxm-tree-node-content-wrapper:hover) {
+    background-color: transparent;
+    color: #02bbe9;
+}</style>

src/views/vent/home/workPlaceWarn/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="workPlaceWarn">
+        <div class="work-left-box">
+            <basicTree :treeData="treeData"></basicTree>
+        </div>
+        <div class="work-right-box">
+            <div class="right-box-card">
+                <basicCard :cardContentList="cardContentList"></basicCard>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { getAssetURL } from '/@/utils/ui';
+import basicTree from './components/basicTree.vue'
+import basicCard from './components/basicCard.vue'
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+    { name: "81203综放工作面", value: "111", id: '1', pid: null },
+    { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+    { name: "81203综放工作面", value: "458", id: '2', pid: null },
+    { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+    { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+    { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+    { name: "81203综放工作面", value: "189", id: '3', pid: null },
+    { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+    { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+    { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+    { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+
+let cardContentList = reactive([
+    { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度()', val: '18.1' },
+    { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
+    { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度()', val: '16.3' },
+    { id: 3, imgSrc: getAssetURL('workPlaceWarn/dspl.png'), label: '自动喷淋灭火装置', val: '打开' },
+   
+])
+
+</script>
+
+<style lang="less" scoped>
+.workPlaceWarn {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 50px);
+    display: flex;
+    justify-content: space-between;
+
+    .work-left-box {
+        width: 220px;
+        height: 100%;
+        background-color: rgba(27, 35, 39,.8);
+    }
+
+    .work-right-box {
+        width: calc(100% - 230px);
+        height: 100%;
+        margin-left: 10px;
+        padding: 15px 10px;
+        box-sizing: border-box;
+       background-color: rgba(27, 35, 39,.8);
+       .right-box-card{
+        height: 110px;
+        width: 100%;
+       
+       }
+    }
+}
+</style>