mky-vent-base/src/views/vent/monitorManager/alarmMonitor/fire/fireWork.vue

<template>
    <div class="fireWork">
        <!-- 顶部区域 -->
        <div class="work-nav">
            <div class="nav" v-for="(item, index) in topList" :key="index">
                <div class="pic" v-if="item.imgSrc">
                    <img :src="imgUrl" alt="" />
                </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="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 class="center-echart">
            <div class="nav-title">
                <div class="title">光纤测温系统温度实时监测</div>
                <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
                    placeholder="请选择" @change="handleChange">
                    <a-select-option v-for="device in pointList" :key="device.value" :value="device.value">{{ device.label
                    }}
                    </a-select-option>
                </a-select>
            </div>
            <div class="echart-box">
                <echartLine :echartDataGq="echartDataGq"></echartLine>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="bot-content">
            <div class="title">
                <div class="text">束管系统监测</div>
                <div class="search">
                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />

                    <a-select style="width: 240px; margin-left: 10px" v-model="pointCode1" allowClear
                        class="code-mode-select" placeholder="请选择" @change="handleChange1">
                        <a-select-option v-for="device in pointList1" :key="device.value" :value="device.value">{{
                            device.label }}
                        </a-select-option>
                    </a-select>
                </div>
            </div>
            <div class="content">
                <div class="box" v-for="(item, index) in contentList" :key="index">
                    <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
                        <div class="content-title">{{ items.title }}</div>
                        <div class="content-item">
                            <span>{{ items.label }}</span>
                            <span class="bolds">{{ items.value }}</span>
                        </div>
                        <div class="content-item">
                            <span>{{ items.label1 }}</span>
                            <span class="bolds">{{ items.time }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="echart-box">
                <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
import imgUrl from '../../../../../assets/images/fire/pie.png'
import echartLine from './common/echartLine.vue'
import echartLine1 from './common/echartLine1.vue'
import {  topList,pointList,echartDataGq,pointList1,contentList,echartDataSg} from '../fire.data'

//光钎测温测点编号
let pointCode = ref('')
//束管监测-查询时间
let TimeRange = reactive<any>([])
//束管监测-测点编号
let pointCode1 = ref('')


//光钎测温测点编号选项切换
function handleChange(val) {
    console.log(val, '光钎测温测点编号')
    pointCode.value = val
}
//束管监测-时间选项切换
function onDataChange(value, dateString) {
    TimeRange = [dateString[0], dateString[1]]
    console.log(TimeRange, 'TimeRange')
}
//束管监测测点编号选项切换
function handleChange1(val) {
    pointCode1.value = val
}
//束管实时数据选项点击
function getSgClick(items) {
    console.log(items, '000000')
    //   this.sgType = items.title
    //   this.getSgjcHistoryDataList()
}


</script>

<style lang="less" scoped>
.fireWork {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .work-nav {
        height: 115px;
        width: 100%;
        margin-bottom: 20px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .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;
            }

            &: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;
                height: 100%;
                border-right: 2px solid;
                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
            }

            &:nth-child(5) {
                flex: 1.4;
                height: 100%;

                .percent {
                    width: 100%;
                    height: 94px;
                    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;
                        }
                    }
                }
            }

            .pic {
                width: 94px;
                height: 94px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                height: 94px;
                margin-left: 15px;
                color: #fff;
                display: flex;
                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: 24px;
                        color: #3df6ff;
                    }
                }
            }
        }

        .nav:nth-child(1) .pic {
            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
            background-position: 50% 50%;
        }

        .nav:nth-child(2) .pic {
            background: url('../../../../../assets/images/fire/min.svg') no-repeat;
            background-position: 50% 50%;
        }

        .nav:nth-child(3) .pic {
            background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
            background-position: 50% 50%;
        }
    }

    .center-echart {
        width: 100%;
        height: 242px;
        padding: 15px;
        margin-bottom: 20px;
        box-sizing: border-box;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;

        .nav-title {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-family: 'douyuFont';
                font-size: 16px;
                color: #3df6ff;
            }
        }

        .echart-box {
            width: 100%;
            height: calc(100% - 30px);
        }
    }

    .bot-content {
        position: relative;
        width: 100%;
        height: calc(100% - 397px);
        padding: 15px 15px 0px 15px;
        box-sizing: border-box;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;

        .title {
            height: 32px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .text {
                height: 32px;
                line-height: 32px;
                font-family: 'douyuFont';
                font-size: 16px;
                color: #3df6ff;
            }
        }

        .content {
            height: calc(100% - 42px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .box {
                width: 100%;
                height: 90px;
                display: flex;
                justify-content: space-between;

                .box-item {
                    position: relative;
                    width: 242px;
                    height: 100%;
                    background: url('../../../../../assets/images/fire/14174.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;

                    .content-title {
                        position: absolute;
                        left: 50%;
                        top: 0;
                        transform: translate(-50%);
                        color: #fff;
                        font-size: 16px;
                    }

                    .content-item {
                        position: absolute;
                        width: 226px;
                        height: 24px;
                        line-height: 24px;
                        padding: 0px 10px;
                        box-sizing: border-box;
                        color: #fff;
                        font-size: 14px;
                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
                        background-size: 100% 100%;

                        &:nth-child(2) {
                            left: 50%;
                            top: 26px;
                            transform: translate(-50%);
                            display: flex;
                            justify-content: space-between;
                        }

                        &:nth-child(3) {
                            left: 50%;
                            top: 56px;
                            transform: translate(-50%);
                            display: flex;
                            justify-content: space-between;
                        }

                        .bolds {
                            font-family: 'douyuFont';
                            color: #3df6ff;
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .echart-box {
            position: absolute;
            left: 50%;
            top: 57px;
            transform: translate(-50%, 0);
            width: calc(100% - 514px);
            height: calc(100% - 57px);
        }
    }
}
</style>