Vent-App/pages/warndata/components/fire-detail-zb.vue

<template>
    <!-- 外因火灾 -->
    <view class="fire-detail-zb">
        <view class="top-area">
            <view class="echartBox">
                <warnZb :resetIndex="0" :widthV="widthV" :heightV="heightV" :coordDw="coordDw"
                    :widthCanvas="widthCanvas" :heightCanvas="heightCanvas"></warnZb>
            </view>
        </view>
        <view class="bot-area">
            <view class="bot-content" v-for="(item, index) in botContentList" :key="index">
                <view class="content-title">{{ item.title }}</view>
                <view class="content-item-box">
                    <view class="content-item">
                        <view class="item-l">
                            <view class="item-value">{{ item.level || '--' }}</view>
                            <view class="item-label">预警等级</view>
                        </view>
                        <view class="item-line"></view>
                        <view class="item-c">
                            <view class="item-value">{{ item.alarmName || '--' }}</view>
                            <view class="item-label">煤自燃阶段</view>
                        </view>
                        <view class="item-line"></view>
                        <view class="item-r">
                            <view class="item-value">{{ item.alarmInfo || '--' }}</view>
                            <view class="item-label">指标</view>
                        </view>
                    </view>
                    <view class="content-item">
                        <view class="item-l">
                            <view class="item-value">{{ item.alarmdes || '--' }}</view>
                            <view class="item-label">条件</view>
                        </view>
                        <view class="item-line"></view>
                        <view class="item-c">
                            <view class="item-value">{{ item.temperature || '--' }}</view>
                            <view class="item-label">温度</view>
                        </view>
                        <view class="item-line"></view>
                        <view class="item-r">
                            <view class="item-value">{{ item.address || '--' }}</view>
                            <view class="item-label">参考值</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import api from "@/api/api";
import warnZb from './warn-zb.vue'
export default {
    name: 'fireDetailZb',
    components: {
        warnZb
    },
    props: {
        detailZb: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },

    data() {
        return {
            widthV: '85%',
            heightV: '85%',
            coordDw: [16, 42],
            widthCanvas: '302px',
            heightCanvas: '194px',
            botContentList: []
        };
    },
    watch: {
        detailZb: {
            handler(newZ, oldZ) {
                console.log(newZ, 'newZ--------------')
                let that = this
                if (JSON.stringify(newZ) != '{}') {
                    that.botContentList = newZ.info[0].list
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() { },
    methods: {},
    computed: {},
};
</script>

<style lang="scss" scoped>
.fire-detail-zb {
    width: 100%;
    height: 100%;

    // box-sizing: border-box;
    // overflow-y: auto;
    .top-area {
        width: 100%;
        padding: 10px;
        background-color: #FFF;
        margin-bottom: 2px;
        box-sizing: border-box;

        .echartBox {
            width: 100%;
            height: 240px;
        }
    }

    .bot-area {
        width: 100%;
        padding: 10px;
        background-color: #FFF;
        margin-bottom: 2px;
        box-sizing: border-box;

        .bot-content {
            margin-bottom: 15px;

            .content-title {
                height: 26px;
                line-height: 26px;
                padding: 0px 20px;
                font-size: 12px;
                background: url('/static/warndata/title.png') no-repeat;
                background-size: 100% 100%;
            }

            .content-item-box {
                padding: 5px 0px;

                .content-item {
                    height: 70px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
                    border-radius: 10px;
                    margin-bottom: 5px;

                    .item-l {
                        width: calc(25% - 2px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                    }

                    .item-c {
                        width: calc(50% - 4px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                    }

                    .item-line {
                        width: 4px;
                        height: 70%;
                        border-left: 2px solid;
                        border-image: linear-gradient(to bottom, transparent, rgba(140, 203, 254, 1), transparent) 1 1 1;
                    }

                    .item-r {
                        width: calc(25% - 2px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                    }

                    .item-value {
                        color: #0eb4fc;
                        font-weight: bold;
                        font-size: 12px;
                        margin-bottom: 5px;
                    }

                    .item-label {
                        font-size: 12px;
                    }
                }


            }

        }
    }
}
</style>