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

<template>
    <view class="fire-detail-ckq">
        <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">
            <view class="bot-title">
                <view style="font-weight: bold;">束管系统监测</view>
            </view>
            <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.value }}</view>
                            <view class="item-label">浓度</view>
                        </view>

                        <view class="item-r">
                            <view class="item-value">{{ item.time }}</view>
                            <view class="item-label">时间</view>
                        </view>
                    </view>
                </view>
                <view class="echartbox1">
                    <canvas :id="`myChartH${index}`" :style="{ width: '100%', height: '220px' }"></canvas>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import api from "@/api/api";
export default {
    name: 'fireDetailCkq',
    props: {
        detailCkq: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            myChart: null,
            xData: [],
            yData: [],
            cardList: [
                { name: '最高温度()', value: 0 },
                { name: '最低温度()', value: 0 },
                { name: '平均温度()', value: 0 },
                { name: '状态', value: '' },
                { name: '回风隅角-O2', value: 0 },
                { name: '回风隅角-CO', value: 0 },
            ],
            myChartH: null,
            legendName: '',
            axisDw: '',
            xDataH: [],
            yDataH: [],
            botContentList: [
                { title: 'O₂', value: 0, time: '', address: '' },
                { title: 'C₂H₄', value: 0, time: '', address: '' },
                { title: 'CO', value: 0, time: '', address: '' },
                { title: 'CH₄', value: 0, time: '', address: '' },
                { title: 'CO₂', value: 0, time: '', address: '' },
                { title: 'C₂H₂', value: 0, time: '', address: '' },
            ]
        };
    },
    watch: {
        detailCkq: {
            handler(newC, oldC) {
                console.log(newC, 'newC--------------')
                let that = this
                that.xData = []
                that.yData = []
                if (JSON.stringify(newC) != '{}') {
                    if (newC.fiber.length != 0) {
                        that.cardList[0].value = newC.fiber[0].readData.fmax;
                        that.cardList[1].value = newC.fiber[0].readData.fmin;
                        that.cardList[2].value = newC.fiber[0].readData.favg;
                        that.cardList[3].value = newC.fiber[0].warnFlag ? '报警' : '正常';
                        JSON.parse(newC.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 (newC.bundletube.length != 0) {
                        that.botContentList[0].value = newC.bundletube[0].readData.o2val;
                        that.botContentList[1].value = newC.bundletube[0].readData.ch2val;
                        that.botContentList[2].value = newC.bundletube[0].readData.coval;
                        that.botContentList[3].value = newC.bundletube[0].readData.chval;
                        that.botContentList[4].value = newC.bundletube[0].readData.co2val;
                        that.botContentList[5].value = newC.bundletube[0].readData.gasval;
                        that.botContentList.forEach((el, index) => {
                            el.time = newC.bundletube[0].readTime;
                            if (el.title == 'O₂') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.o2val)
                                that.legendName = 'O₂'
                                that.axisDw = '%'
                            } else if (el.title == 'C₂H₄') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.ch2val)
                                that.legendName = 'C₂H₄'
                                that.axisDw = 'ppm'
                            } else if (el.title == 'CO') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.coval)
                                that.legendName = 'CO'
                                that.axisDw = 'ppm'
                            } else if (el.title == 'CH₄') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.chval)
                                that.legendName = 'CH₄'
                                that.axisDw = 'ppm'
                            } else if (el.title == 'CO₂') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.co2val)
                                that.legendName = 'CO₂'
                                that.axisDw = '%'
                            } else if (el.title == 'C₂H₂') {
                                that.xDataH = newC.bundletube[0].history.map(x => x.time)
                                that.yDataH = newC.bundletube[0].history.map(y => y.gasval)
                                that.legendName = 'C₂H₂'
                                that.axisDw = 'ppm'
                            }
                            that.initChartH(index)
                        })
                    } else {
                        that.botContentList[0].value = '--';
                        that.botContentList[1].value = '--';
                        that.botContentList[2].value = '--';
                        that.botContentList[3].value = '--';
                        that.botContentList[4].value = '--';
                        that.botContentList[5].value = '--';
                        that.botContentList.forEach(el => {
                            el.time = '--';
                        })
                    }


                }
            },
            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()
            })


        },
        initChartH(ind) {
            let canvas = document.getElementById(`myChartH${ind}`);
            this.myChartH = 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: this.legendName || '',
                        },

                    ],
                },
                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.xDataH || [],
                    },
                ],
                yAxis: [
                    {
                        boundaryGap: false,
                        type: 'value',
                        max: 50,
                        axisLabel: {
                            textStyle: {
                                color: '#b3b8cc',
                            },
                            formatter: '{value}'
                        },
                        name: `(${this.axisDw})`,
                        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: 50,
                        axisLabel: {
                            textStyle: {
                                color: '#b3b8cc',
                            },
                            formatter: '{value}'
                        },
                        name: `(${this.axisDw})`,
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            lineHeight: 10,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#f1f5f6',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: this.legendName || '',
                        type: 'line',
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8,
                        zlevel: 3,
                        itemStyle: {
                            color: '#19a3df',
                            borderColor: '#a3c8d8',
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#19a3df',
                            },
                        },
                        data: this.yDataH || [],
                    },

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


        },
    },
    computed: {

    },
};
</script>

<style lang="scss" scoped>
.fire-detail-ckq {
    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: 31.5%;
                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;
                }

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

                &:nth-child(3) {
                    margin-bottom: 10px;
                }

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

            .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: 40% 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: 40% 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: 40% 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: 40% 80%;
            }

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

            .card-box:nth-child(6) .box-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                width: 100%;
                height: 100%;
                padding: 0px 15px;
                background: url('/static/CO.png') no-repeat right;
                background-size: 40% 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: 0px 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 {
            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: 50px;
                    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(50% - 10px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        border-radius: 10px;
                        padding: 0px 15px;
                        background: url('/static/nd.png'), linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
                        background-size: auto 100%;
                        background-position: right;
                        background-repeat: no-repeat;
                    }



                    .item-r {
                        width: calc(50% - 10px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        border-radius: 10px;
                        padding: 0px 15px;
                        background: url('/static/time.png'), linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
                        background-size: auto 100%;
                        background-position: right;
                        background-repeat: no-repeat;
                    }

                    .item-value {
                        height: 20px;
                        line-height: 20px;
                        color: #0eb4fc;
                        font-weight: bold;
                    }

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


            }

            .echartbox1 {
                width: 100%;
                height: 220px;
                margin-bottom: 10px;
            }
        }
    }



}
</style>