Vent-App/pages/warndata/components/vent-detail.vue

<template>
    <view class="vent-detail">
        <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
        <view class="vent-content">
            <view class="top-area">
                <view class="top-title">
                    <view style="font-weight: bold;">{{ mainTitle || '--' }}</view>
                    <view class="title-icon">
                        <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" />
                        <text class="icon-text">低风险</text>
                    </view>
                </view>
                <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 class="top-card1">
                    <view class="card-box" v-for="(item, index) in cardList1" :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="top-title">
                    <view style="font-weight: bold;">通风信息状态监测</view>
                </view>
                <view class="echartBox">
                    <canvas id="myChart" :style="{ width: '100%', height: '180px' }"></canvas>
                </view>
            </view>
            <view class="bot-area">
                <view class="top-title">
                    <view style="font-weight: bold;">通风监控测点信息</view>
                </view>
                <view class="bot-content">
                    <view class="card-b" v-for="(item, index) in cardListTf" :key="index">
                        <div class="item-l">
                            <div class="label-l">{{ item.label }}</div>
                            <div class="value-l">{{ item.value }}</div>
                        </div>
                        <div class="item-r">
                            <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                                <span>{{ `${items.label} : ` }}</span>
                                <span :class="{
                                    'status-f': items.value == 1,
                                    'status-l': items.value == 0,
                                }">{{ `${items.value}${items.dw}` }}</span>
                            </div>
                        </div>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import api from "@/api/api";
export default {
    name: 'ventDetail',
    props: {},
    watch: {},
    data() {
        return {
            mainTitle: '',
            myChart: null,
            timer: '',
            PageCur: "0",
            tabList: [],
            cardList: [
                { name: '进风量(m³/min)', value: 0 },
                { name: '回风量(m³/min)', value: 0 },
                { name: '需风量(m³/min)', value: 0 },
            ],
            cardList1: [
                { name: 'O₂(%)', value: 0 },
                { name: 'CO(%)', value: 0 },
            ],
            //echarts图表数据
            maxY: 0,
            xData: [],
            yDataJ: [],
            yDataH: [],
            yDataX: [],
            cardListTf: [],
        };
    },
    mounted() {
        this.getTabList()
        // than.initChart();
        this.getWindDeviceList()
    },
    beforeDestroy() {
        this.myChart.clear()
        this.myChart.dispose()
        this.timer = null
        clearTimeout(this.timer)
    },
    methods: {
        NavChange: function (item) {
            clearTimeout(this.timer)
            this.PageCur = item.index;
            this.mainTitle = this.tabList[this.PageCur].name
            this.getMonitor(this.tabList[this.PageCur].deviceID, true);
        },
        getMonitor(deviceID, flag) {
            let than = this
            than.timer = setTimeout(
                async () => {
                    await than.getSysWarnList(deviceID, 'vent');
                    if (than.timer) {
                        than.timer = null;
                    }
                    than.getMonitor(deviceID);
                },
                flag ? 0 : 3000
            );
        },
        //获取顶部tab选项数据
        getTabList() {
            new Promise((resolve, reject) => {
                api
                    .sysTypeWarn({ type: 'vent' })
                    .then((response) => {
                        if (response.data.code == 200 && response.data.result.length != 0) {
                            let result = response.data.result
                            this.tabList = result.map((el) => {//lxh
                                return {
                                    name: el.deviceName,
                                    warn: '低风险',
                                    deviceID: el.deviceID,
                                    strtype: el.deviceType,
                                };
                            });
                            this.mainTitle = this.tabList[0].name
                            this.getMonitor(this.tabList[0].deviceID, true);
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });
        },
        formatRoundNum(num) {
            let interger = Math.ceil(num)
            let leng = String(interger).length
            return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
        },
        //初始化echarts实例
        initChart() {
            let canvas = document.getElementById('myChart');
            this.myChart = this.$echarts.init(canvas)
            let option = {
                grid: {
                    top: '24%',
                    left: '0%',
                    bottom: '6%',
                    right: '2%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, .6)',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    // align: 'center',
                    right: '0%',
                    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: '进风量',
                        },
                        {
                            name: '回风量',
                        },

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

                        data: this.yDataX || [],
                    },
                ],
            };
            this.myChart.setOption(option)
            window.addEventListener('resize', () => {
                this.myChart.resize()
            })


        },
        //获取选项详情数据
        getSysWarnList(id, type) {
            new Promise((resolve, reject) => {
                api
                    .sysWarn({ sysid: id, type: type })
                    .then((response) => {
                        if (response.data.code == 200) {
                            this.xData = []
                            this.yDataH = []
                            this.yDataJ = []
                            this.yDataX = []
                            let data = response.data.result
                            this.cardList[0].value = data.jin || '--'
                            this.cardList[1].value = data.hui || '--'
                            this.cardList[2].value = data.xufengliang || '--'
                            if (data.history.length != 0) {
                                data.history.forEach((v) => {//lxh
                                    this.yDataJ.push(parseFloat(v.jin));
                                    this.yDataH.push(parseFloat(v.hui));
                                    if (this.cardList[2].value && this.cardList[2].value != '--') {
                                        this.yDataX.push(this.cardList[2].value);
                                    } else {
                                        this.yDataX.push(0);
                                    }
                                    this.xData.push(v.time);
                                });
                            }
                            let max1 = this.yDataJ.reduce((acr, cur) => {
                                return acr > cur ? acr : cur
                            })
                            let max2 = this.yDataH.reduce((acr1, cur1) => {
                                return acr1 > cur1 ? acr1 : cur1
                            })
                            this.maxY = max1 >= max2 ? this.formatRoundNum(max1 * 1.5) : this.formatRoundNum(max2 * 1.5)
                            this.initChart()
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });
        },
        //获取通风监控测点信息
        getWindDeviceList() {
            new Promise((resolve, reject) => {
                api
                    .getDeviceVent({ devicetype: 'windrect', pagetype: 'normal' })
                    .then((response) => {
                        if (response.data.code == 200) {
                            let data = response.data.result
                            if (data.msgTxt[0].datalist.length != 0) {
                                let list = data.msgTxt[0].datalist;
                                if (list.length > 0) {
                                    this.cardListTf = list.map((el) => {//lxh
                                        const readData = el.readData;
                                        el = Object.assign(el, readData);
                                        return {
                                            label: '通信状态',
                                            value: el.netStatus == '0' ? '断开' : '连接',
                                            listR: [
                                                { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
                                                { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
                                                { id: 2, label: '风速', dw: '(m/s)', value: el.va },
                                                { id: 4, label: '时间', dw: '', value: el.readTime },
                                                { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
                                            ],
                                        }
                                    });
                                }
                            }
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });


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

<style lang="scss" scoped>
.vent-detail {
    position: relative;
    box-sizing: border-box;

    .devic-box-tab {
        padding: 0px 10px !important;
    }

    .vent-content {
        height: 704px;
        box-sizing: border-box;
        overflow-y: auto;

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

            .top-card {
                width: 100%;
                height: 60px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .card-box {
                    width: 32%;
                    height: 100%;
                    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));

                }

                .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/jinfeng.png') no-repeat center;
                    background-size: 75% 70%;
                }

                .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/huifeng.png') no-repeat center;
                    background-size: 75% 70%;
                }

                .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/xufeng.png') no-repeat center;
                    background-size: 75% 70%;
                }
            }

            .top-card1 {
                width: 100%;
                height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .card-box {
                    width: 49%;
                    height: 100%;
                    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));

                }

                .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/O₂.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/CO.png') no-repeat right;
                    background-size: 40% 80%;
                }
            }

        }

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

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

            .bot-content {
                overflow-y: auto;

                .card-b {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    justify-content: space-between;
                    padding: 5px;
                    margin-bottom: 5px;
                    background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));


                    .item-l {
                        position: relative;
                        width: 80px;
                        height: 100%;
                        background: url('/static/bot-area.png') no-repeat center;
                        background-size: 100% 100%;

                        .label-l {
                            width: 100%;
                            position: absolute;
                            top: 7px;
                            font-size: 12px;
                            text-align: center;
                        }

                        .value-l {
                            width: 100%;
                            position: absolute;
                            top: 50px;
                            color: #0eb4fc;
                            text-align: center;
                        }
                    }

                    .item-r {
                        width: calc(100% - 100px);
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .content-r {
                            display: flex;

                            span {
                                font-size: 12px;

                                &:first-child {
                                    display: inline-block;
                                    width: 68px;
                                }

                                &:last-child {
                                    display: inline-block;
                                    width: calc(100% - 68px);
                                    overflow: hidden;
                                    white-space: nowrap;
                                    /* 不换行 */
                                    /* 超出部分隐藏 */
                                    text-overflow: ellipsis;
                                    /* 使用省略符号 */
                                }
                            }

                            .status-f {
                                color: #ff0000;
                            }

                            .status-l {
                                color: #3df6ff;
                            }
                        }
                    }
                }
            }
        }

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

            .title-icon {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 90px;
                height: 28px;
                padding: 0px 10px;
                border-radius: 5px;
                background: #d4ecff;

                .icon-text {
                    font-size: 12px;
                    font-weight: bold;
                    color: #0eb4fc;
                }
            }
        }

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

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

        .icon-style {
            width: 14px;
            height: 14px;
        }
    }

}
</style>