websocket接口对接

suerprisePlus

2024-10-15 afd3fe35aeaae4f3984c94ca29d57b5a3a52107f

 src/views/visualization/leftMenu.vue

@@ -1,120 +1,53 @@
<template>
    <div class="leftMnu">
        <div class="menuBox">
            <div class="aside-title">{{ title.t1 }}</div>
            <div class="echartBox">
                <div id="letftEchart1" class="chartBox"></div>
            </div>
            <chart-vue></chart-vue>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t2 }}</div>
            <chart-vue1></chart-vue1>
        </div>
        <div class="menuBox">
            <div class="aside-title">{{ title.t3 }}</div>
            <chart-vue2></chart-vue2>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import chartVue from './list/chart.vue';
import chartVue1 from './list/chart1.vue';
import chartVue2 from './list/chart2.vue';
import data from './data.js';
export default {
    components: {
        chartVue, chartVue1, chartVue2
    },
    props: {
        leftChartData: {
            type: Object,
            required: true
        },
    },
    computed: {

    },
    data() {
        return {
            title: {
                t1: 'xxx',
                t2: 'XXXX',
                t3: 'xxxxx'
            },
            myLeftChart1: null,
            leftChartOption: {
                lenData: [],
                xData: [],
                serData: [],
            },
            childData: null,
            childData1: null,
            childData2: null,
        }
    },
    watch: {
        leftChartData: {
            deep: true,
            handler(res) {
                if (res) {
                    if (res.type == "left1") {
                        this.setLeftChart1(res.val)
                    }
                }

            }
        }
    },

    mounted() {
        window.regionWeather = null;

    },
    methods: {
        setLeftChart1(res) {
            console.log(res);

            if (!this.myLeftChart1) {
                this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
            }
            if (this.leftChartOption.lenData.length == 0) {
                this.title.t1 = res.head[1]
                this.leftChartOption.lenData.push(res.head[0])
                const colors=['#67C23A','#E6A23C','#F56C6C']
                for (var i = 0; i < 3; i++) {
                    this.leftChartOption.serData.push({
                        name: res.head[i+1],
                        type: 'line',
                        stack: 'Total',
                        data: [],
                        lineStyle: {
                            color: colors[i], // 折线颜色

                        }
                    })
                }
            }
            var option = this.getChartOption(res)
            this.myLeftChart1 && this.myLeftChart1.setOption(option);
        },
        getChartOption(res) {
            for(var i = 0;i<3;i++){
                this.leftChartOption.serData[i].data.push(res.data[i+1])
            }
         

            this.leftChartOption.xData.push(res.data[0])
            return {
                legend: {
                    show: false
                },

                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.leftChartOption.xData,
                    axisLine: {
                        lineStyle: {
                            color: 'white' // 设置为红色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'white' // 设置为红色
                        }
                    }
                },
                series: this.leftChartOption.serData
            }
        }
       
    }
}
</script>
@@ -126,7 +59,6 @@
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .menuBox {
        width: 100%;
        height: 33%;
@@ -139,7 +71,6 @@
        .aside-title {
            box-sizing: border-box;
            padding-left: 30px;

            font-size: 15px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
            color: #fff;
@@ -159,7 +90,6 @@
            .chartBox {
                width: calc(100% - 10px);
                height: calc(100% - 10px);

                position: absolute;
            }
        }