功能更新

suerprisePlus

2024-11-27 ab8f3297f7c8243d486c9da0900e4f813b2ea2df

 src/views/visualization/list/chart.vue

@@ -1,7 +1,7 @@
<template>
    <div class="chartListBox" :childData="childData">
        <div class="aside-title">{{ childData.title }}</div>
        <div class="echartBox">
        <div class="aside-title"> 雨</div>
        <div class="echartBox" v-show="roadItem.address">
            <table class="chartTable">
                <tr>
                    <th></th>
@@ -27,15 +27,19 @@
                    <td>{{ roadItem.line }}</td>
                    <td style="color:#f56c6c">{{ roadItem.level }}</td>
                    <td style="color:#409eff">
                        <el-button v-show="flagData != roadItem.address" class="elButton" type="primary" plain
                        <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                        <el-button v-show="flagData == roadItem.type" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
            </table>
            <div class="chartEchart">
                <div :id="chartId" class="myChart"> </div>
                <div class="myChart">
                    <div id="chartRain" class="myChartID"></div>


                </div>
            </div>
        </div>
    </div>
@@ -53,16 +57,14 @@
        }
    },
    watch: {
        childData(newValue, oldValue) {
            if (newValue) {
                this.chartId = newValue.id;
                this.title = newValue.title;
                setTimeout(() => {
                    this.setEchartChange(newValue.val[0])

                }, 200);
            }
        }
        "$store.state.mapLayers.disasterRain": {
            handler(newVal, oldVal) {
                if (newVal.val) {
                    this.setEchartChange(newVal);
                }
            },
            deep: true
        },
    },
    data() {
        return {
@@ -75,9 +77,13 @@
    created() {
        window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
    },
    mounted() {

    },
    methods: {
        setCannelItem() {
            this.$store.state.mapLayers.weatherFlag = false;
            this.$store.state.mapLayers.weatherFlag = 2
            this.flagData = null;
            mapWeather.closeRegionWeather()
        },
@@ -87,17 +93,25 @@
        },
        setChangeItem() {
            var res = this.roadItem;
            window.regionWeather = res.address;
            window.regionWeather = res.type;
            var event = new Event('POIDetailDataChange');
            this.$store.state.mapLayers.weatherMsg = mapWeather.getWearData(res);
            this.$store.state.mapLayers.weatherFlag = 1;
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },
        showEchart() {

        setEchartChange(res) {
            this.roadItem = res
            if (!this.roadItem) return
            if (!this.roadItem.data) return;
            const data = this.roadItem.data;
            const id = document.getElementById(this.chartId)
            var div = document.getElementsByClassName("chartEchart")[0];
            if (div.offsetWidth == 0 || div.offsetHeight == 0) return
            document.getElementById("chartRain").style.width = div.offsetWidth + "px"
            document.getElementById("chartRain").style.height = div.offsetHeight + "px"
            var data = this.roadItem.data;


            const id = document.getElementById("chartRain")
            var std = [];
            for (var i = 0; i < data.length; i++) {
                var h = i + 1
@@ -106,6 +120,12 @@
            }
            const myChart = echarts.init(id);
            var option = {
                grid: {
                    left: "10%",
                    top: "10%",
                    right: "5%",
                    bottom: "25%",
                },
                title: {
                    text: "",
                    textStyle: {
@@ -151,6 +171,13 @@


            option && myChart.setOption(option);
        },
        setEchartChange(res) {


            this.roadItem = res.val[0]
            this.showEchart();

        }
    }
}
@@ -172,7 +199,7 @@
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        line-height: 30px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
@@ -188,12 +215,18 @@
        // justify-content: space-around;
        .chartEchart {
            flex: 1;

        }

        .myChart {
            width: 100%;
            height: 100%;
            position: relative;


            .myChartID {
                position: absolute;

            }
        }

        .chartTd {