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

<template>
    <!-- 外因火灾 -->
    <view class="fire-detail-out">
        <view class="top-area">
            <view class="top-card">
                <view class="card-box" v-for="(item, index) in cardList" :key="index">
                    <view class="box-item">
                        <view class="box-val">{{ item.value }}</view>
                        <view class="box-name">{{ item.name }}</view>
                    </view>
                </view>
            </view>

        </view>
        <view class="center-area">
            <view class="bot-title">
                <view style="font-weight: bold;">光钎测温系统温度实时监测</view>
            </view>
            <view class="echartBox">
                <canvas id="myChart" :style="{ width: '100%', height: '220px' }"></canvas>
            </view>
        </view>
        <view class="bot-area" v-for="(item, index) in botList" :key="index">
            <view class="bot-title">
                <view style="font-weight: bold;">{{ item.title }}</view>
            </view>
            <view class="bot-content">
                <view class="h-table">
                    <view class="table-head" v-if="item.title == '烟雾传感器监测'">
                        <view class="head-item" v-for="(items, index) in headList" :key="index">{{ items.title }}</view>
                    </view>
                    <view class="table-head" v-else>
                        <view class="head-item1" v-for="(items, index) in headList1" :key="index">{{ items.title }}
                        </view>
                    </view>
                    <view class="table-content">
                        <view class="content-tr" v-if="item.title == '烟雾传感器监测'" v-for="(ite, ind) in tableDataYw"
                            :key="ind">
                            <view class="content-td td">{{ ite.strinstallpos }}</view>
                            <view class="content-td td1">{{ ite.val }}</view>
                            <view class="content-td td2">{{ ite.warnLevel_str }}</view>
                            <view class="content-td td3">{{ ite.readTime }}</view>
                        </view>
                        <view class="content-tr" v-if="item.title == '一氧化碳传感器监测'" v-for="(ite, ind) in tableDataCo"
                            :key="ind">
                            <view class="content-td td">{{ ite.strinstallpos }}</view>
                            <view class="content-td td1">{{ ite.warnLevel_str }}</view>
                            <view class="content-td td2">{{ ite.readTime }}</view>
                        </view>
                        <view class="content-tr" v-if="item.title == '自动喷淋灭火装置监测'" v-for="(ite, ind) in tableDataPl"
                            :key="ind">
                            <view class="content-td td">{{ ite.strinstallpos }}</view>
                            <view class="content-td td1">{{ ite.warnLevel_str }}</view>
                            <view class="content-td td2">{{ ite.readTime }}</view>
                        </view>

                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import api from "@/api/api";
export default {
    name: 'fireDetailOut',
    props: {
        detailWy: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            myChart: null,
            xData: [],
            yData: [],
            cardList: [
                { name: '最高温度()', value: 0 },
                { name: '最低温度()', value: 0 },
                { name: '平均温度()', value: 0 },
                { name: '状态', value: '正常' },
            ],
            botList: [
                { title: '烟雾传感器监测' },
                { title: '一氧化碳传感器监测' },
                { title: '自动喷淋灭火装置监测' },
            ],
            headList: [
                { title: '设备名称' },
                { title: '值' },
                { title: '状态' },
                { title: '时间' },
            ],
            headList1: [
                { title: '设备名称' },
                { title: '状态' },
                { title: '时间' },
            ],
            tableDataYw: [],
            tableDataCo: [],
            tableDataPl: [],
        };
    },
    watch: {
        detailWy: {
            handler(newW, oldW) {
                console.log(newW, 'newW--------------')
                let that = this
                that.xData = []
                that.yData = []
                if (JSON.stringify(newW) != '{}') {
                    if (newW.fiber.length != 0) {
                        that.cardList[0].value = newW.fiber[0].readData.fmax;
                        that.cardList[1].value = newW.fiber[0].readData.fmin;
                        that.cardList[2].value = newW.fiber[0].readData.favg;
                        that.cardList[3].value = newW.fiber[0].warnFlag ? '存在风险' : '正常';
                        JSON.parse(newW.fiber[0].readData.fibreTemperature).forEach((el) => {
                            that.xData.push(el.pos);
                            that.yData.push(el.value);
                        });
                        that.initChart()
                    } else {
                        that.cardList[0].value = '--';
                        that.cardList[1].value = '--';
                        that.cardList[2].value = '--';
                        that.cardList[3].value = '正常';
                    }

                    if (newW.smoke.length != 0) {
                        that.tableDataYw = newW.smoke.map((el) => {
                            return {
                                strinstallpos: el.strinstallpos,
                                val: el.readData.smokeval,
                                warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str,
                                readTime: el.readTime,
                            }
                        });
                    } else {
                        that.tableDataYw = []
                    }

                    if (newW.co.length != 0) {
                        that.tableDataCo = newW.co
                    } else {
                        that.tableDataCo = []
                    }

                    if (newW.spray.length != 0) {
                        that.tableDataPl = newW.spray
                    } else {
                        that.tableDataPl = []
                    }
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {

    },
    methods: {
        //初始化echarts实例
        initChart() {
            let canvas = document.getElementById('myChart');
            this.myChart = this.$echarts.init(canvas)
            let option = {
                grid: {
                    top: '20%',
                    left: '4%',
                    bottom: '4%',
                    right: '2%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, .6)',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    // align: 'center',
                    right: 'center',
                    top: '0%',
                    type: 'plain',
                    textStyle: {
                        color: '#0eb4fc',
                        fontSize: 12,
                    },
                    // icon:'rect',
                    itemGap: 25,
                    itemWidth: 20,
                    icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
                    data: [
                        {
                            name: '当前温度',
                        },

                    ],
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            // formatter: '{value}',
                            fontSize: 12,
                            margin: 10,
                            textStyle: {
                                color: '#b3b8cc',
                            },
                            formatter: function (params) {
                                let newParamsName = ''  // 最终拼接成的字符串
                                let paramsNameNumber = params.length // 实际标签的个数
                                let provideNumber = 10  // 每行能显示的字的个数
                                let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                                /**
                                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                 */
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = '' // 表示每一次截取的字符串
                                        var start = p * provideNumber // 开始截取的位置
                                        var end = start + provideNumber // 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber)
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + '\n'
                                        }
                                        newParamsName += tempStr // 最终拼成的字符串
                                    }
                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params
                                }
                                //将最终的字符串返回
                                return newParamsName
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.xData || [],
                    },
                ],
                yAxis: [
                    {
                        boundaryGap: false,
                        type: 'value',
                        max: 2000,
                        axisLabel: {
                            textStyle: {
                                color: '#b3b8cc',
                            },
                            formatter: '{value}'
                        },
                        name: '(­°C)',
                        nameTextStyle: {
                            color: '#b3b8cc',
                            fontSize: 12,
                            lineHeight: 0,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        boundaryGap: false,
                        type: 'value',
                        max: 2000,
                        axisLabel: {
                            textStyle: {
                                color: '#b3b8cc',
                            },
                            formatter: '{value}'
                        },
                        name: '(­°C)',
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            lineHeight: 10,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '当前温度',
                        type: 'line',
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8,
                        zlevel: 3,
                        itemStyle: {
                            color: '#19a3df',
                            borderColor: '#a3c8d8',
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#19a3df',
                            },
                        },
                        data: this.yData || [],
                    },

                ],
            };
            this.myChart.setOption(option)
            window.addEventListener('resize', () => {
                this.myChart.resize()
            })
        },

    },
    computed: {},
};
</script>

<style lang="scss" scoped>
.fire-detail-out {
    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;

        .top-card {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;

            .card-box {
                width: calc(50% - 5px);
                height: 60px;
                border-radius: 5px;
                background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));

                &:nth-child(1) {
                    margin-bottom: 10px;
                    margin-right: 5px;
                }

                &:nth-child(2) {
                    margin-bottom: 10px;
                    margin-left: 5px;
                }

                &:nth-child(3) {
                    margin-right: 5px;
                }

                &:nth-child(4) {
                    margin-left: 5px;
                }
            }

            .card-box:nth-child(1) .box-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: 100%;
                padding: 0px 15px;
                background: url('/static/zgwd.png') no-repeat right;
                background-size: auto 80%;
            }

            .card-box:nth-child(2) .box-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: 100%;
                padding: 0px 15px;
                background: url('/static/zdwd.png') no-repeat right;
                background-size: auto 80%;
            }

            .card-box:nth-child(3) .box-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: 100%;
                padding: 0px 15px;
                background: url('/static/pjwd.png') no-repeat right;
                background-size: auto 80%;
            }

            .card-box:nth-child(4) .box-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: 100%;
                padding: 0px 15px;
                background: url('/static/zt.png') no-repeat right;
                background-size: auto 80%;
            }


        }

        .box-item .box-val {
            height: 28px;
            line-height: 28px;
            color: #0eb4fc;
            font-weight: bold;
        }

        .box-item .box-name {
            font-size: 12px;
        }
    }

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

        .bot-title {
            height: 28px;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

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

        .bot-title {
            height: 28px;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bot-content {
            width: 100%;
            height: 240px;

            .h-table {
                width: 100%;
                height: 100%;
                border: 1px solid #0eb4fc;

                .table-head {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 36px;
                    border-bottom: 1px solid #0eb4fc;

                    .head-item {
                        font-size: 12px;
                        color: #0eb4fc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: bold;

                        &:nth-child(1) {
                            width: 30%;
                        }

                        &:nth-child(2) {
                            width: 20%;
                        }

                        &:nth-child(3) {
                            width: 20%;
                        }

                        &:nth-child(4) {
                            width: 30%;
                        }


                    }

                    .head-item1 {
                        font-size: 12px;
                        color: #0eb4fc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: bold;

                        &:nth-child(1) {
                            width: 30%;
                        }

                        &:nth-child(2) {
                            width: 30%;
                        }

                        &:nth-child(3) {
                            width: 40%;
                        }

                    }
                }

                .table-content {
                    height: calc(100% - 36px);
                    overflow-y: auto;

                    .content-tr {
                        height: 32px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        &:nth-child(odd) {
                            background-color: #f3faff;
                        }

                        &:nth-child(even) {
                            background-color: #e8f5ff;
                        }

                        .content-td {
                            height: 100%;
                            font-size: 12px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                        }

                        .td {
                            width: 30%;
                        }

                        .td1 {
                            width: 20%;
                        }

                        .td2 {
                            width: 20%;
                        }

                        .td3 {
                            width: 30%;
                        }

                    }
                }
            }
        }
    }

}
</style>