mky-vent-base/src/views/vent/home/workPlaceWarn/index.vue

<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>