配网大屏功能优化

suerprisePlus

2024-10-14 f521ebc2551d468c4c478783a18d4b0714394d61

 src/views/visualization/list/chart.vue

@@ -22,24 +22,28 @@
                        </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.address" class="elButton" type="primary" plain
                            size="mini" @click="setChangeItem()">详情</el-button>
                        <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
                            size="mini" @click="setCannelItem()">重置</el-button>
                    </td>
                </tr>
            </table>
            <div class="chartEchart">
                <div :id="chartId" class="myChart"> </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    props: {
@@ -54,8 +58,9 @@
                this.chartId = newValue.id;
                this.title = newValue.title;
                setTimeout(() => {
                    this.setEchartChange(newValue)
                }, 1000);
                    this.setEchartChange(newValue.val[0])

                }, 200);
            }
        }
    },
@@ -64,19 +69,34 @@
            chartId: "",
            title: "",
            flagData: null,
            roadItem: {},
        }
    },
    created() {
        window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
    },

    methods: {
        setCannelItem() {
            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.address;
            var event = new Event('POIDetailDataChange');
            window.dispatchEvent(event);
            mapWeather.setRegionWeatherType(res);
        },

        setEchartChange(res) {
            if (!res.data) return;
            const data = res.data;
            this.roadItem = res
            if (!this.roadItem.data) return;
            const data = this.roadItem.data;
            const id = document.getElementById(this.chartId)
            var std = [];
            for (var i = 0; i < data.length; i++) {
@@ -87,7 +107,7 @@
            const myChart = echarts.init(id);
            var option = {
                title: {
                    text: res.address,
                    text: "",
                    textStyle: {
                        color: "white"
                    }
@@ -164,7 +184,12 @@
        color: white;
        display: flex;
        flex-direction: column;

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

        }

        .myChart {
            width: 100%;