功能更新

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>
@@ -22,24 +22,32 @@
                        </div>
                    </td>
                </tr>
                <tr v-for="(item, i) in childData.val">
                    <td>{{ item.address }}</td>
                    <td>{{ item.line }}</td>
                    <td style="color:#f56c6c">{{ item.level }}</td>
                <tr>
                    <td>{{ roadItem.address }}</td>
                    <td>{{ roadItem.line }}</td>
                    <td style="color:#f56c6c">{{ roadItem.level }}</td>
                    <td style="color:#409eff">
                        <el-button v-show="flagData != item.address" class="elButton" type="primary" plain size="mini"
                            @click="setChangeItem(item)">详情</el-button>
                        <el-button v-show="flagData == item.address" class="elButton" type="danger" plain size="mini"
                            @click="setCannelItem(item)">重置</el-button>
                        <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <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 class="myChart">
                    <div id="chartRain" class="myChartID"></div>


                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import mapWeather from './mapWeather';

export default {
    props: {
@@ -49,35 +57,61 @@
        }
    },
    watch: {
        childData(newValue, oldValue) {
            if (newValue) {
                this.chartId = newValue.id;
                this.title = newValue.title;
                setTimeout(() => {
                    this.setEchartChange(newValue)
                }, 1000);
            }
        }
        "$store.state.mapLayers.disasterRain": {
            handler(newVal, oldVal) {
                if (newVal.val) {
                    this.setEchartChange(newVal);
                }
            },
            deep: true
        },
    },
    data() {
        return {
            chartId: "",
            title: "",
            flagData: null,
            roadItem: {},
        }
    },
    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()
        },
        setChangeItem(res) {
            this.flagData = res.address;
        handlePOIDetailDataChange() {
            if (this.flagData == window.regionWeather) return
            this.flagData = window.regionWeather;
        },
        setChangeItem() {
            var res = this.roadItem;
            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) {
            if (!res.data) return;
            const data = res.data;
            const id = document.getElementById(this.chartId)
            if (!this.roadItem) return
            if (!this.roadItem.data) return;
            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
@@ -86,8 +120,14 @@
            }
            const myChart = echarts.init(id);
            var option = {
                grid: {
                    left: "10%",
                    top: "10%",
                    right: "5%",
                    bottom: "25%",
                },
                title: {
                    text: res.address,
                    text: "",
                    textStyle: {
                        color: "white"
                    }
@@ -131,6 +171,13 @@


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


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

        }
    }
}
@@ -152,7 +199,7 @@
        color: #fff;
        width: 100%;
        height: 45px;
        line-height: 45px;
        line-height: 30px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
@@ -164,11 +211,22 @@
        color: white;
        display: flex;
        flex-direction: column;

        // justify-content: space-around;
        .chartEchart {
            flex: 1;
        }

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


            .myChartID {
                position: absolute;

            }
        }

        .chartTd {